设为首页收藏本站
登录 立即注册 找回密码 用其他账号登陆 快捷导航 切换风格

一板网电子技术论坛»论坛 › 热门板卡 › OpenRex › 如何通过创建WordPress插件来访问并控制相应的硬件 ...

如何通过创建WordPress插件来访问并控制相应的硬件 [复制链接]

qrcode

WordPress 如何 硬件 OpenRex 开发板

查看: 25951 | 回复: 1

不吃肉的小孩
发表于: 2016-7-2 22:55:29 | 显示全部楼层
楼主

本篇文章介绍了如何通过创建一个WordPress插件，这将使得可以通过WEB界面运行特定的Linux指令。本示例中，我们将使用OpenRex开发板，然后读取板载的I2C温度传感器。同样的技术也可以用于任何运行Linux的开发板，并且本篇文章描述的方法可以用于运行任何Linux指令。

TMP101-Result.jpg


创建新的插件

在这一步，我们将创建一个简单的插件，可以通过WordPress插件菜单激活而且可以在WordPress Admin面板显示。


在开发板中安装WordPress，并上电。转到WordPress文件夹。给插件起个名字，然后创建文件夹。

  1. cd /usr/local/apache2/htdocs/wp-content/plugins/
  2. mkdir fa-tmp101-temperature-sensor
  3. cd fa-tmp101-temperature-sensor/
复制代码

创建readme.txt文件。

  1. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/readme.txt
复制代码

在readme.txt文件中输入以下代码：

  1. === TMP101 Temperature Sensor ===
  2. Contributors: robertferanec
  3. Tags: tmp101, temperature, sensor
  4. Requires at least: 3.0.1
  5. Tested up to: 4.4.2
  6. Stable tag: 1.0
  7. License: GPLv2 or later
  8. License URI: http://www.gnu.org/licenses/gpl-2.0.html

  10. Shows up temperature of OpenRex board by reading the on board TMP101 sensor.

  12. == Description ==

  14. This plugin will create a shortcode [fa-tmp101]. When you use this shortcode on a page, it will show up temperature of OpenRex. You can choose between Celsius (use [fa-tmp101]) or Fahrenheits (use [fa-tmp101 units='fahrenheit']). The complete step-by-step tutorial about how to create this plugin can be found at: http://www.imx6rex.com/open-rex/software/how-to-create-rexface-plugin/

  16. == Installation ==

  18. 1. Upload the plugin files to the WordPress plugin directory (e.g. '/usr/local/apache2/htdocs/wp-content/plugins/') or clone it from our github:

  20.         cd /usr/local/apache2/htdocs/wp-content/plugins/
  21.         git clone https://github.com/FEDEVEL/fa-tmp101-temperature-sensor.git

  23. 2. Give the plugin permissions to use 'i2cget' and '/dev/i2c-1'. For example, run 'visudo' and add following lines at the end of the file:

  25.         #enable RexFace to read temperature sensor
  26.         daemon ALL=(ALL:ALL)  NOPASSWD: /usr/sbin/i2cget
  27.         daemon ALL=(ALL:ALL)  NOPASSWD: /dev/i2c-1

  29. 3. Activate the plugin through the 'Plugins' screen in WordPress
  30. 4. Use the Admin->TMP101 to configure the plugin

  32. == Frequently Asked Questions ==

  34. = How do I use the plugin? =

  36. Create a new page and use shortcode [fa-tmp101]

  38. == Changelog ==

  40. = 1.0 =
  41. * Initial version
复制代码

创建插件的主PHP文件。

  1. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/fa-tmp101-temperature-sensor.php
复制代码

复制并粘贴一下文本到fa-tmp101-temperature-sensor.php文件中：

  1. <?php
  2. /*
  3. Plugin Name: TMP101 Temperature Sensor
  4. Plugin URI: http://www.imx6rex.com/rexface/plugins/
  5. Description: Reads and shows up the temperature of OpenRex
  6. Version: 1.0
  7. Author: Robert Feranec, FEDEVEL
  8. Author URI: http://www.fedevel.com/about-robert
  9. Text Domain: fa-tmp101-temperature-sensor
  10. License: GPLv2 or later
  11. License URI: http://www.gnu.org/licenses/gpl-2.0.html

  13. Copyright 2016 by FEDEVEL

  15. This program is free software; you can redistribute it and/or modify
  16. it under the terms of the GNU General Public License as published by
  17. the Free Software Foundation; either version 2 of the License, or
  18. (at your option) any later version.

  20. This program is distributed in the hope that it will be useful,
  21. but WITHOUT ANY WARRANTY; without even the implied warranty of
  22. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  23. GNU General Public License for more details.

  25. You should have received a copy of the GNU General Public License
  26. along with this program; if not, see http://www.gnu.org/licenses/gpl-2.0.html
  27. */

  29. //the following line must be here, it's blocking direct access to your plugin PHP files
  30. defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
复制代码

让我们创建一个“TMP101 Setting page”，可以在Adminstrator面板下显示。稍后我们将用它来指定读取温度的默认时间间隔（例如每10s/1分钟/10分钟读取温度）。

添加以下代码到fa-tmp101-temperature-sensor.php文件的结尾处。

  1. //This will tell WordPress to call "fa_tmp101_temperature_sensor_admin_menu" which will create a link to our TMP101 Setting page in Admin menu
  2. add_action( 'admin_menu', 'fa_tmp101_temperature_sensor_admin_menu' );

  4. //This will add "TMP101" link into Admin menu
  5. function fa_tmp101_temperature_sensor_admin_menu() {
  6.     //add_menu_page ( page_title, menu_title, capability, __FILE__, function_which_we_call_to_create_our_TMP101_setting_page )
  7.     add_menu_page('TMP101 Temperature Sensor', 'TMP101', 'administrator', __FILE__, 'fa_tmp101_temperature_sensor_admin_sensor_page');
  8. }

  10. //Here is the "HTML" of our Admin TMP101 Temperature Sensor Setting Page
  11. function fa_tmp101_temperature_sensor_admin_sensor_page() {
  12.         if ( !current_user_can( 'manage_options' ) )  {
  13.                 wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
  14.         }
  15.         echo '<div class="wrap">';
  16.         echo '<p>This is our Setting page of TMP101 Temperature Sensor plugin. We will put here some options later.</p>';
  17.         echo '</div>';
  18. }
复制代码

激活插件

现在，激活插件并检查是否能正确看到新插件。

1） 打开因特网浏览器，并转到OpenRex的管理页面 http://192.168.0.39/wp-admin/（使用你的开发板的IP地址）。

2） 单击Plugins，找到“TMP101 Temperature Sensor”，并点击“Activate”。然后你会看到：

TMP101-Plugin-Activated.jpg

3） 在管理菜单中，单击“TMP101”。你会看到TMP101设置页面。

TMP101-Initial-setting-page.jpg

跳转到指定楼层

相关帖子

回复

使用道具 举报

不吃肉的小孩
发表于: 2016-7-4 10:10:15 | 显示全部楼层
沙发

创建一个简单的短代码（shortcode）

我们将要创建一个“短代码[shortcode]”。然后该短代码可以用于网页的任何地方，并被实际的温度值替代。


我们的短代码称为fa-tmp101。在fa-tmp101-temperature-sensor.php的结尾处添加以下代码：

  1. //[fa-tmp101] shortcode. It will read and show the value of TMP101 OpenRex sensor (not yet, we will later add more stuff here)
  2. add_shortcode("fa-tmp101", "fa_access_tmp101_sensor");
  3. function fa_access_tmp101_sensor($atts, $content = null)
  4. {
  5.     //$new_content will replace the [fa-tmp101] shortcode, initially will use a simple text "Reading ..."
  6.     $new_content = '<span id="fa_tmp101">Reading ...</span>';

  8.     //$new_content string is processed and will be shown instead of the shortcode
  9.     $html_output = do_shortcode($new_content);
  10.     return $html_output;
  11. }
复制代码

创建一个测试网页

在WordPress管理菜单，点击“Pages”，然后点击“Add New”。输入标题“TMP101 Temperature Sensor”，并使用以下文字“OpenRex temperature is: [fa-tmp101]”。然后点击“Publish”按钮。如下图所示：

Add-TMP101-Temperature-Sensor-page.jpg

转到TMP101 Temperature Sensor页面。页面的URL链接类似于“http://192.168.0.39/index.php/tmp101-temperature-sensor/”，网页内容如下图（注意：短代码fa-tmp101替换为文本“Reading...”）：

TMP101-Temperature-Sensor-page-Reading.jpg

很不错，短代码正常工作了，现在我们需要做的仅仅是更新内容。按照以下步骤继续操作。


准备读取温度

会变得更加复杂些，因为我们想具有一定的灵活性。我们使用JavaScript来读取温度（这将给我们单击读取温度带来一些灵活性，而且它会提供一些选项自动在一段时间间隔内读取温度）。然而，JavaScript本省不能在OpenRex上运行应用程序。相反，我们必须从JavaScript中调用PHP文件，并且在PHP文件中我们将调用一个能实际读取温度的应用程序。我们开始做吧。


首先，我们将更新短代码。使用新的短代码替换旧的短代码。新代码中我们创建了一些隐藏的变量来传输一些变量（IP地址和单位）到JavaScript，我们还创建了一个按钮，用来读取温度。

  1. //[fa-tmp101] shortcode. It will read and show the value of TMP101 OpenRex sensor (still not yet :)
  2. add_shortcode("fa-tmp101", "fa_access_tmp101_sensor");
  3. function fa_access_tmp101_sensor($atts, $content = null)
  4. {
  5.     //$new_content will replace the [fa-tmp101] shortcode
  6.     $new_content = '<span id="fa_tmp101">Reading ...</span>';
  7.     $new_content .= '<div style="background-color:#cacaca;border: 1px solid #acacac; text-align:center; width:300px" onclick="fa_access_tmp101();" >Read Temperature Now</div>'; //button
  8.     $new_content .= '<input type="hidden" id="fa_openrex_ip" value="'.$_SERVER['SERVER_ADDR'].'" />'; //transfer IP address to javascript
  9.     $new_content .= '<input type="hidden" id="fa_tmp101_units" value="celsius" />'; //transfer unites to javascript
  10.   
  11.     //$new_content string is processed and will be shown instead of the shortcode
  12.     $html_output = do_shortcode($new_content);
  13.     return $html_output;
  14. }
复制代码

当刷新“TMP101 Temperature Sensor”页面时，你会注意到，我们增加了一个“Read Temperature Now”按钮。如果看一下代码，你会发现，当点击该按钮时，它会调用“fa_access_tmp101()”函数。该函数位于JavaScript中，我们稍后会创建一些。所以不要点击该按钮，它还没有正常工作。

TMP101-Temperature-Sensor-page-Button.jpg

现在，创建该PHP文件，我们将会从JavaScript中调用，并且稍后会调用应用程序来读取传感器数据。现在，它只会返回一条信息“...accessing sensor ...”。


在插件目录创建一个名为“tmp101.php”的新文件。

  1. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php
复制代码

将以下代码放于/usr/local/apache2/htdocs/fa-functions/tmp101.php。

  1. <?php
  2. /*
  3. Example of the URL address for this file is http://openrex_IP_address/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php?units=celsius
  4. */

  6. $temperature_units = empty($_GET['units'])?'celsius':$_GET['units']; //get temperature units from url, if empty, use celsius

  8. //here we later add the code to read temperature sensor

  10. //this is our response, this is the format how we will send information to javascript.
  11. $result = array(
  12.     'openrex' =>  array(
  13.         'sensors' => array(
  14.             'tmp101' => array(
  15.                 'units' => $temperature_units,
  16.                 'temperature' => '... accessing sensor ...'
  17.             ),
  18.         ),
  19.     ),
  20.     'valid' => 'true',
  21.     'error_msg' => '',
  22. );

  24. $response = json_encode( $result); //this will translate our $result array into JSON format
  25. echo $response; //this will send the $response back to our javascript
  26. ?>
复制代码

你可以简单的检查一下"tmp101.php"将会向JavaScript返回什么。进入因特网浏览器，输入网址，如"http://192.168.0.39/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php"，你会看到：

TMP101-accessing-sensor.jpg

现在，创建JavaScript文件:

  1. mkdir /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/js/
  2. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/js/tmp101.js
复制代码

在JavaScript文件中，我们调用tmp101.php PHP文件。在tmp101.js插入以下代码：

  1. //This function will read temperature of OpenRex board by accessing to tmp101.php file and reading TMP101 sensor value
  2. function fa_access_tmp101()
  3. {
  4.         //read IP address and units from our hidden elements created in [shortcode] section of the fa-tmp101-temperature-sensor.php file
  5.         var openrex_ip_address  = document.getElementById("fa_openrex_ip").value; //this will take the value from our hidden input element which has id=fa_openrex_ip (we created it in fa-tmp101-temperature-sensor.php)
  6.         var temperature_units  = document.getElementById("fa_tmp101_units").value; //this will take the value from our hidden input element which has id=fa_tmp101_units (we created it in fa-tmp101-temperature-sensor.php)
  7.   
  8.         //prepare variables
  9.         var temperature_value = document.getElementById("fa_tmp101"); //this will create a "pointer" to our <span id="fa_tmp101"></span>, so we can replace its content
  10.         var url = 'http://'+openrex_ip_address+'/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php?units='+temperature_units; //url of our tmp101.php file
  11.   
  12.         //this will call tmp101.php file to read the sensor
  13.         request = jQuery.ajax({
  14.                 dataType: "json",
  15.                 url: url,
  16.         });
  17.   
  18.         //here we will proceed the answer from tmp101.php file
  19.         request.done (function( data ) { //this will be executed when we get an answer from tmp101.php
  20.                 console.log("Done"); //debug output, you can see this in console output (e.g. in Chrome use Right Click -> Inspect element -> Console)
  21.                 console.log(data); //debug output
  22.   
  23.                 if (data['valid']==='true')
  24.                 {
  25.                         //replace <span id="fa_tmp101"></span> content with the temperature and units
  26.                         temperature_value.innerHTML =  data['openrex']['sensors']['tmp101']['temperature']+' '+data['openrex']['sensors']['tmp101']['units'];
  27.                         return true;
  28.                 }
  29.                 else
  30.                 {
  31.                         //replace <span id="fa_tmp101"></span> content with the error message
  32.                         temperature_value.innerHTML = data['error_msg'];
  33.                         return false;
  34.                 }
  35.         });
  36.   
  37.         request.fail (function( data ) { //this will be executed if we will not get answer from tmp101.php
  38.                 console.log("Failed"); //debug output
  39.                 //replace <span id="fa_tmp101"></span> content with "Connection failed" message
  40.                 temperature_value.innerHTML = 'Connection failed';
  41.                 return false;
  42.         });
  43. }
复制代码

我们需要回到主插件文件，并告诉其加载该JavaScript。在fa-tmp101-temperature-sensor.php结尾添加以下代码：

  1. //we will be using javascript, so load the javascript file
  2. add_action( 'wp_enqueue_scripts', 'fa_tmp101_scripts' );
  3. function fa_tmp101_scripts() {
  4.     wp_enqueue_script("jquery-fa-tmp101", plugins_url("/js/tmp101.js", __FILE__ ),array('jquery', 'jquery-ui-core'));
  5. }
复制代码

转到TMP101 Temperature Sensor页面。刷新。我们将会看到JavaScript是否工作正常。在页面右击，并选择“Inspect elements”。单击“Console”，并点击“Read Temperature Now”按钮。注意，现在显示的不是“Reading...”，而是“... accessing sensor ... ”。在“Console”窗口检查回应。你会看到tmp101.php的返回：Object -> openrex -> sensors -> tmp101。如下：

tmp101-response-accessing-sensor-celsius.jpg



回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题 16 | 回复: 27

回复 收藏


手机版|

GMT+8, 2025-7-6 06:52 , Processed in 0.037160 second(s), 6 queries , Gzip On, MemCache On. Powered by Discuz! X3.5

YiBoard一板网 © 2015-2022 地址：河北省石家庄市长安区高营大街 ( 冀ICP备18020117号 )

快速回复 返回顶部 返回列表