In this IoT(Internet of Things) tutorial we will show how to control device over the internet from a web page hosted from PC home server. There are many IoT solutions such as using ESP8266 WiFi module, GSM module, using IoT cloud platform and others. But here we will show how one can control a device over internet without wifi module and without using any IoT cloud platform. Here you just need PC with XAMPP server, local tunnel configuration and javascript libraries. These all required program and software are freely available. With this IoT solution you can host your web application(IoT control of device) from home without needing to paying anything, all free.
Video demonstration
The following video demonstrates how to control LED over the internet using Arduino, p5.js, p5.serial.js, XAMPP apache server and NgRok local tunnel.
For this tutorial you will need the following,
- PC with XAMPP web server & Local Tunnel ngrok
- Javascript P5.js library, P5.serial.js and P5 serial server
- Arduino & LED
PC with XAMPP web server & Local Tunnel ngrok
The web page and JavaScript libraries are hosted in home PC web server. For web server we will use XAMPP software which is freely available on the internet. For this tutorial we will host the IoT web application in local server using XAMPP and use local tunnel solution by ngrok to get public url to access our web application in local server. For this follow the tutorial below.
Javascript P5.js library, P5.serial.js and P5 serial server
Controlling device over the internet/local web server is possible
using p5.js and p5 serial library. p5.js is a client side javascipt
library mainly for animation and with the aid of supporting serial
communication library p5.serial.js and serial monitor we can create a
web page where user can interacts to control hardware via the internet.
So in order to use p5.js to create interactive web pages with Arduino/microcontroller we need a bridge that interconnects webpage based on p5.js with the serial port. For this we need two things as follows.
1. p5.serialport.js
This is required to connect the p5.js based web page with serial com port. This javascript library can be downloaded from the following link:
https://github.com/p5-serial/p5.serialport
To embed the p5.serialport on webpage we can use the following script tag on your webpage.
<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.29/lib/p5.serialport.js"></script>
2. P5 serial monitor
The 2nd thing you need is the sP5 serial monitor. This is the client/server which you must turn on in order to make the serial communication between your website on the web(local or external). You can download this from the following url.
https://github.com/p5-serial/p5.serialcontrol/releases/tag/0.1.2
Once you have downloaded it you must run it.
Note that you don't need to Connect to any serial port because we will write it in code to which serial to open and use. But we have to start this serial port server.
Hardware
In this example we will control a LED which is connected to Arduino pin 5. The Arduino is programmed to receive command to turn on or off the LED from the webpage. When the Arduino receives H command then it will turn on the LED and when the Arduino receives L command it will turn off the LED.
The following picture shows the LED connected to the Arduino.
Programming
We have to write program for Arduino and the webpage using P5.js which uses P5.serial.js library.
The Arduino code is below.
void setup(){
Serial.begin(9600);
pinMode(5, OUTPUT);
digitalWrite(5,LOW);
}
void loop(){
if(Serial.available()){
int dataIn = Serial.read();
if(dataIn == 'H'){
digitalWrite(5,HIGH);
}
else if(dataIn == 'L'){
digitalWrite(5,LOW);
}
}delay(1);
}
In the above code we read in the incoming byte from the serial port. If it is H then we turn on the LED and if it is L then we turn off the LED.
The following is sketch.js code which uses the p5.js and p5.serial,js library along with HTML code. These codes were written using the processing IDE which is free for download.
sketch.js
let serial; // variable to hold an instance of the serialport library
let options = {baudRate: 9600}; // set the baudrate here
let portName = 'COM3'; // set serial port name here
let state; //led state
function setup() {
// set up the canvas:
createCanvas(300, 200).parent('cid');
background(0);
// create gui with button
btn = createButton('Switch ON/OFF');
btn.style('background-color', '#584D4D');
btn.style('font-size', '16px', 'color', '#ffffff');
btn.style('border-radius', '20px');
btn.size(100,50); btn.style('color', '#E6EA1C');
btn.position(635,100);
btn.mouseClicked(LEDState);
// new instance of the serialport library:
serial = new p5.SerialPort();
// open port with baudrate
serial.open(portName, options);
//for text display
textSize(32);
textAlign(CENTER, CENTER);
fill('#BF1717');
function draw() {
background(220);
if (state !== undefined){
if(state){
serial.write('H');
text("On", 150, 150);
}
else{
serial.write('L');
text("Off", 150, 150);
}
}
}function LEDState(){
state = ~state;
}
In the above code, we essential have two major parts- one for creating button and text and the other one for serial port communication.
For serial communication setup purpose, we have used serial port library p5.serial.js to communicate with the serial port. In order to make serial communication work we have first declared an instance of the serial port library and define constant variables portname and option later to be used in the setup() function for the port name and baud rate.
let serial; // variable to hold an instance of the serialport library
let options = {baudRate: 9600}; // set the baudrate here
let portName = 'COM3'; // set serial port name here
In the setup() function we use the following statements to create a serial port object and use its open() method to actual configure and open the serial port COM3 with baud rate 9600.
// new instance of the serialport library:
serial = new p5.SerialPort();
// open port with baudrate
serial.open(portName, options);
Next is the button part. We have create a new button object using createButton(), positioned it in proper place on the canvas, styled it for its look, and used the mouseClicked() method to invoke the user function LEDstate().
// create gui with button
btn = createButton('Switch ON/OFF');
btn.style('background-color', '#584D4D');
btn.style('font-size', '16px', 'color', '#ffffff');
btn.style('border-radius', '20px');
btn.size(100,50);
btn.style('color', '#E6EA1C');
btn.position(635,100);
btn.mouseClicked(LEDState);
When the mouse is clicked on the button(the switch), the LEDstate() function is invoked which changes the state of the LED(it current state if LOW, when mouse is clicked it goes HIGH and vice versa). We have also used the text() function to display state of the LED to the user. For this in the setup() function we have configured the text size, position and color with the following statements.
textSize(32);
textAlign(CENTER, CENTER);
fill('#BF1717');
In the setup() function we have used to state variable control the LED state. If the state is true then we turn on the LED and if the state if false we turn off the led.
This state variable is then used in the draw() function. In the draw() function, depending on the state of the LED we displayed ON and Off text just below the switch button.
if (state !== undefined){
if(state){
serial.write('H');
text("On", 150, 150);
}
else{
serial.write('L');
text("Off", 150, 150);
}
}
The background() function in the draw() loop is necessary to clean the previous text on the screen.
HTML code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
<script language="javascript" type="text/javascript" src="libraries/p5.serialport.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<style>
body {
padding: 50;
text-align:
center;margin: 0;
display: block;
background-color: white;
}
</style>
</head>
<body>
<div id="cid"></div>
</body>
</html>
Deployment
To deploy the web application we have created, we will put the files into the buttongui folder and put the buttongui folder within the D:\XAMPP\htdocs folder as shown in the picture below.
The content of the buttongui folder is shown below.
The libraries folder content is shown below.
The next step is start the ngrok.exe and get public url.
Then we have to configure virtual host to map the public url provided by ngrok with the location of our website folder buttongui. For this we need to open and edit the file httpd-vhosts.conf file located in the following directory.
D:\xampp\apache\conf\extra
We add the following virtual host container to the end of the httpd-vhosts.conf file.
<VirtualHost *:80>
DocumentRoot "D:/xampp/htdocs/buttongui"
ServerName f7dd-XXX-XXX-XXX-XXX.ngrok.io
ServerAlias www.f7dd-XXX-XXX-XXX-XXX.ngrok.io
</VirtualHost>
where f7dd-XXX-XXX-XXX-XXX.ngrok.io is the public url provided by ngrok.
This is as shown in the picture below.
Now we have to restart the Apache server from the XAMPP control panel. After restart we can now view the web application webpage using the url provided by ngrok f7dd-XXX-XXX-XXX-XXX.ngrok.io where XXX-XXX-XXX-XXX is your public IP address.
We can then test our web application. Don't forget to connect Arduino to the PC and start the p5 serial monitor application described above.
Now by clicking on the Switch ON/OFF button we can turn on and off the LED connected to the Arduino. Also below the switch button text is displayed which shows the current state of the LED(on or off).
So we have here demonstrated how we can control device such as LED over the Internet. This way we can create different kinds of web applicaton for IoT using Xampp, ngrok, p5.js, p5.serial.js and Arduino.
Recommended similar tutorials:
