一板网电子技术论坛

发表于: 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

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

  10. == Description ==

  11. 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/

  12. == Installation ==

  13. 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:

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

  16. 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:

  17.         #enable RexFace to read temperature sensor
  18.         daemon ALL=(ALL:ALL)  NOPASSWD: /usr/sbin/i2cget
  19.         daemon ALL=(ALL:ALL)  NOPASSWD: /dev/i2c-1

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

  22. == Frequently Asked Questions ==

  23. = How do I use the plugin? =

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

  25. == Changelog ==

  26. = 1.0 =
  27. * 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

  12. Copyright 2016 by FEDEVEL

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

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

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

  24. //the following line must be here, it's blocking direct access to your plugin PHP files
  25. 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' );

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

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

激活插件

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

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>';

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

创建一个测试网页

在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. */

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

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

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

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

你可以简单的检查一下"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



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题 14 | 回复: 22



Archiver|手机版|小黑屋|

GMT+8, 2018-10-16 23:17 , Processed in 0.031250 second(s), 31 queries . Powered by Discuz! X3.4

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

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