查看: 13294 | 回复: 1

发表于: 2016-7-2 22:55:29 | 显示全部楼层

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

创建新的插件

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

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

cd /usr/local/apache2/htdocs/wp-content/plugins/
mkdir fa-tmp101-temperature-sensor
cd fa-tmp101-temperature-sensor/

复制代码

创建readme.txt文件。

nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/readme.txt

复制代码

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

=== TMP101 Temperature Sensor ===
Contributors: robertferanec
Tags: tmp101, temperature, sensor
Requires at least: 3.0.1
Tested up to: 4.4.2
Stable tag: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Shows up temperature of OpenRex board by reading the on board TMP101 sensor.
== Description ==
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/
== Installation ==
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:
cd /usr/local/apache2/htdocs/wp-content/plugins/
git clone https://github.com/FEDEVEL/fa-tmp101-temperature-sensor.git
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:
#enable RexFace to read temperature sensor
daemon ALL=(ALL:ALL) NOPASSWD: /usr/sbin/i2cget
daemon ALL=(ALL:ALL) NOPASSWD: /dev/i2c-1
3. Activate the plugin through the 'Plugins' screen in WordPress
4. Use the Admin->TMP101 to configure the plugin
== Frequently Asked Questions ==
= How do I use the plugin? =
Create a new page and use shortcode [fa-tmp101]
== Changelog ==
= 1.0 =
* Initial version

复制代码

创建插件的主PHP文件。

nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/fa-tmp101-temperature-sensor.php

复制代码

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

<?php
/*
Plugin Name: TMP101 Temperature Sensor
Plugin URI: http://www.imx6rex.com/rexface/plugins/
Description: Reads and shows up the temperature of OpenRex
Version: 1.0
Author: Robert Feranec, FEDEVEL
Author URI: http://www.fedevel.com/about-robert
Text Domain: fa-tmp101-temperature-sensor
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright 2016 by FEDEVEL
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, see http://www.gnu.org/licenses/gpl-2.0.html
*/
//the following line must be here, it's blocking direct access to your plugin PHP files
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );

复制代码

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

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

//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
add_action( 'admin_menu', 'fa_tmp101_temperature_sensor_admin_menu' );
//This will add "TMP101" link into Admin menu
function fa_tmp101_temperature_sensor_admin_menu() {
//add_menu_page ( page_title, menu_title, capability, __FILE__, function_which_we_call_to_create_our_TMP101_setting_page )
add_menu_page('TMP101 Temperature Sensor', 'TMP101', 'administrator', __FILE__, 'fa_tmp101_temperature_sensor_admin_sensor_page');
}
//Here is the "HTML" of our Admin TMP101 Temperature Sensor Setting Page
function fa_tmp101_temperature_sensor_admin_sensor_page() {
if ( !current_user_can( 'manage_options' ) ) {
wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
}
echo '<div class="wrap">';
echo '<p>This is our Setting page of TMP101 Temperature Sensor plugin. We will put here some options later.</p>';
echo '</div>';
}

复制代码

激活插件

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

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

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

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

电梯直达

相关帖子

使用道具举报

不吃肉的小孩

发表于: 2016-7-4 10:10:15 | 显示全部楼层

沙发

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

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

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

//[fa-tmp101] shortcode. It will read and show the value of TMP101 OpenRex sensor (not yet, we will later add more stuff here)
add_shortcode("fa-tmp101", "fa_access_tmp101_sensor");
function fa_access_tmp101_sensor($atts, $content = null)
{
//$new_content will replace the [fa-tmp101] shortcode, initially will use a simple text "Reading ..."
$new_content = '<span id="fa_tmp101">Reading ...</span>';
//$new_content string is processed and will be shown instead of the shortcode
$html_output = do_shortcode($new_content);
return $html_output;
}

复制代码

创建一个测试网页

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

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

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

准备读取温度

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

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

//[fa-tmp101] shortcode. It will read and show the value of TMP101 OpenRex sensor (still not yet :)
add_shortcode("fa-tmp101", "fa_access_tmp101_sensor");
function fa_access_tmp101_sensor($atts, $content = null)
{
//$new_content will replace the [fa-tmp101] shortcode
$new_content = '<span id="fa_tmp101">Reading ...</span>';
$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
$new_content .= '<input type="hidden" id="fa_openrex_ip" value="'.$_SERVER['SERVER_ADDR'].'" />'; //transfer IP address to javascript
$new_content .= '<input type="hidden" id="fa_tmp101_units" value="celsius" />'; //transfer unites to javascript
//$new_content string is processed and will be shown instead of the shortcode
$html_output = do_shortcode($new_content);
return $html_output;
}

复制代码

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

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

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

nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php

复制代码

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

<?php
/*
Example of the URL address for this file is http://openrex_IP_address/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php?units=celsius
*/
$temperature_units = empty($_GET['units'])?'celsius':$_GET['units']; //get temperature units from url, if empty, use celsius
//here we later add the code to read temperature sensor
//this is our response, this is the format how we will send information to javascript.
$result = array(
'openrex' => array(
'sensors' => array(
'tmp101' => array(
'units' => $temperature_units,
'temperature' => '... accessing sensor ...'
),
),
),
'valid' => 'true',
'error_msg' => '',
);
$response = json_encode( $result); //this will translate our $result array into JSON format
echo $response; //this will send the $response back to our javascript
?>

复制代码

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

现在，创建JavaScript文件:

mkdir /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/js/
nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/js/tmp101.js

复制代码

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

//This function will read temperature of OpenRex board by accessing to tmp101.php file and reading TMP101 sensor value
function fa_access_tmp101()
{
//read IP address and units from our hidden elements created in [shortcode] section of the fa-tmp101-temperature-sensor.php file
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)
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)
//prepare variables
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
var url = 'http://'+openrex_ip_address+'/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php?units='+temperature_units; //url of our tmp101.php file
//this will call tmp101.php file to read the sensor
request = jQuery.ajax({
dataType: "json",
url: url,
});
//here we will proceed the answer from tmp101.php file
request.done (function( data ) { //this will be executed when we get an answer from tmp101.php
console.log("Done"); //debug output, you can see this in console output (e.g. in Chrome use Right Click -> Inspect element -> Console)
console.log(data); //debug output
if (data['valid']==='true')
{
//replace <span id="fa_tmp101"></span> content with the temperature and units
temperature_value.innerHTML = data['openrex']['sensors']['tmp101']['temperature']+' '+data['openrex']['sensors']['tmp101']['units'];
return true;
}
else
{
//replace <span id="fa_tmp101"></span> content with the error message
temperature_value.innerHTML = data['error_msg'];
return false;
}
});
request.fail (function( data ) { //this will be executed if we will not get answer from tmp101.php
console.log("Failed"); //debug output
//replace <span id="fa_tmp101"></span> content with "Connection failed" message
temperature_value.innerHTML = 'Connection failed';
return false;
});
}

复制代码

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

//we will be using javascript, so load the javascript file
add_action( 'wp_enqueue_scripts', 'fa_tmp101_scripts' );
function fa_tmp101_scripts() {
wp_enqueue_script("jquery-fa-tmp101", plugins_url("/js/tmp101.js", __FILE__ ),array('jquery', 'jquery-ui-core'));
}

复制代码

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

使用道具举报

返回列表

: OpenRex

谈论开源硬件OpenRex开发板的开发技术

主题 16 | 回复: 24

回复收藏

发帖

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

相关帖子

OpenRex

精彩推荐