How to create a simple WordPress plugin to Access and Control Hardware

This page describes how to create a simple WordPress plugin which will enable you to run a specific Linux command through WEB interface. As an example, we will be using OpenRex board and we will be reading I2C temperature sensor placed on the board. The same technique can be used on any board running Linux and the way described on this page can be used to run any Linux command. *Note: This page was created based on standard wordpress recommendation. Here you can find more detailes about how to write WordPress plugins: WordPress - Writing a Plugin

Pictures: This is how it will look when you create the plugin

Your page showing the temperature

Setting page of your plugin

You can also watch this tutorial:

Note: Plugins created by this method are perfect for sending input from user (e.g. control an output pin) and are just fine for non frequent readings (e.g reading temperature sensor every 10 seconds). In case you need an EVENT driven plugin (button pressed, accelerometer, gyro, ... ) you may want to have a look also at different methods (e.g. socket.io and node.js).

Create the essentials of your new plugin

In this step, we are going to create a simple plugin which can be activated through WordPress plugins menu and will be visible in our WordPress Admin panel.

Switch on your board with WordPress installed on. Go to the WordPress directory. Choose a name for your plugin and create a directory. Important: the name of your plugin must be unique. Consider using your initials in front of all directories, variables and functions. We will be using "fa" which stands for "FEDEVEL Academy":

=== 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
/*
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!' );

Let's create a "TMP101 Setting page" which will be visible under Administrator panel. Later we will use it to specify a default interval for reading the temperature (e.g. read temperature every 10s / 1 minute / 10 minutes).

Activate the plugin

2) Click on Plugins, find "TMP101 Temperature Sensor" and click on "Activate". This is what you should see then:
3) In the admin menu, click on: "TMP101". You should see there our TMP101 Setting page:

Create a simple shortcode

We are going to create a "[shortcode]". This [shortcode] can be then used anywhere on your Pages and will be replaced by the actual temperature.

Our shortcode will be called [fa-tmp101]. Add following lines on the end of "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;
}

Create a test webpage

In your WordPress Admin menu, click on "Pages" and then "Add New". Enter title: "TMP101 Temperature Sensor" and use following text "OpenRex temperature is: [fa-tmp101]". Then press "Publish" button. This is how it will look:
Go on your TMP101 Temperature Sensor page. The page url will look something like: "http://192.168.0.39/index.php/tmp101-temperature-sensor/" and the page itself will look like this (notice, the shortcode [fa-tmp101] is replaced by text "Reading ..."):
Perfect, the shortcode is working, "only" what we have to do now is update its content. Follow the next steps.

Prepare for reading

It's getting more complicated :) Because we would like to have some flexibility, we will use javascript to read the temperature (e.g. this will give us flexibility to read the temperature on a click, but also it gives us option to read the temperature automatically in some intervals). However, javascript itself can not run applications on OpenRex. Instead, we have to call a PHP file from the javascript ... and in the PHP file we will later call an application which actually can read the temperature. Let's do it.

First, we will update the shortcode. Replace the old shortcode with this new one. In this new code we create hidden fields to transfer some variables (IP address and units) to our javascript and we also create a button which we will use to read the temperature:

When you refresh "TMP101 Temperature Sensor" page, you will notice, we added "Read Temperature Now" button. If you have a look into our code, when you "Click" on the button, it will call "fa_access_tmp101()" function. This function will be placed in our javascript, which we will create a little bit later. So, do not click on the button, it doesn't work yet.
Now, create the special PHP file which we will be calling from our javasript and which will later call an application to read the sensor data. At this moment it will only return a message "...accessing sensor ...". Note: Notice the special format of the "response". The format is called JSON. We could transfer only a simple answer (e.g. value of the temperature), but that would not be the proper way to do it. Instead, we are using "OpenRex" structure, where under "sensors" -> "tmp101" we can find "temperature" and "units".

You can simply check, what "tmp101.php" will be sending back to javascript. Go to Internet browser and use url like: "http://192.168.0.39/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php" (of course, replace the IP by your OpenRex IP address). This is what you will see:
Now, let's create the file with our javascript:

Go back to your TMP101 Temperature Sensor page ( http://192.168.0.39/index.php/tmp101-temperature-sensor/ ). Refresh it (in Chrome, use F5). We would like to see if our javascript is working ok ... press Right click on the page and select "Inspect elements". Click on "Console" and then click on "Read Temperature Now" button. Notice, instead of "Reading ..." it now says "... accessing sensor ... celsius". Inspect the response in the "Console" window - you will see there "tmp101.php" answer: Object -> openrex -> sensors -> tmp101. This is how it will look:

Read the sensor

What we need to do now, are two things. First, we need to run the standard Linux command which will read the sensor. Then we need to take the "sensor value" and transform it to "Celsius" or "Fahrenheit". Edit "/usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php":

VERY IMPORTANT!
To be able to run an application from website, you need to set proper permissions. By default, it's disabled due security reasons (so not everyone can run Linux commands on your board). One way how to enable "web" to run i2cget (the command which we use to read the temperature sensor) is to add exceptions through "visudo".

1) Check under what user the webserver is running, e.g. run:

ps aux | egrep '(apache|httpd)'

In our case, the web user is called "daemon".

2) In the OpenRex Linux run command "visudo" and add following lines at the end of the file. Specify the applications and resources which the "exec" command will be using:

Go to your website, refresh it (F5) and click on "Read Temperature Now" button. You should see the current OpenRex temperature in Celsius :)

Add support for "Fahrenheit"

Let's say, you would like to add also support for "Fahrenheit". We will add a shortcode parameter which will specify "units". Then you will use it like [fa-tmp101 units='fahrenheit']. Update our "fa-tmp101-temperature-sensor.php". It will look then like this:

Run the javascript at the selected refresh rate

Only what is missing is to add a code which will start our "fa_access_tmp101()" javascript function at the selected refresh rate. Let's add a simple script into our [fa-tmp101] shortcode. Update it to:

Now, go to your TMP Temperature Sensor page and refresh it (F5). Every 1 minute you should see the reading. It will look like this:
If you would like to change the refresh rate, just go to your TMP101 Temperature Sensor Settings, change the refresh rate and press "Save Changes" button. Go back to "TMP101 Temperature Sensor" page and refresh it.

TADA! Your plugin is done

You can remove the debug messages and play with the code. The final files can be found on our FEDEVEL Github here >

Picture: And this is how your page will look when it is finished:

Appendix: Uploading your plugin to Github

In case you would like to share your plugin, you can simply upload it to Github. This is how you can do it.