Welcome to this second HOW TO about UDOO Neo’s Linux and Arduino. In the first one we learned how to read sensors and send their data to an Internet website.
In this HOW TO we are learning how to read and send Arduino data from a website hosted by the Neo itself. This way we can make for example your own home – or aquarium – automation.

In this HOW TO we are going to do the following steps:
1 – Prepare your Neo.
2 – Create and upload an Arduino Sketch that can send sensor data but also accept commands to switch things on and off.
3 – Create a Python webserver on the Linux side of ther Neo to serve a simple webpage and websockets and Javascript for communication.
4 – Test this simple setup.
5 – Create an enhanced webpage with more fancy look and feel.

1 Prepare Neo
For this How to we have to install Python 2.7 packages, namely tornado, multiprocessing and python-dev

sudo pip install python-dev tornado multiprocessing

Download the zip file and extract it onto your /home/udooer directory. A directory UdooNeoWebDemo should be created.

Find the IP address of the Neo. You can find the address in your router, on the dashboard page of the Neo Web Control panel
It is advised to set a static, fixed IP (or DHCP reservation) for the Neo through your router. How to set it depends on the UI of your router.
With a static IP the Neo gets the same IP address every time, so you won’t have to changes the source files after a reboot.

Later we will start a webserver that will serve a webpage on port 8080 (http://udooneo.local:8080). You can change the port to 80 (it’s the same as http://udooneo.local) but then you have to move the Udoo Web Control Panel to another port.
You can do that with the Web Control Panel itself.

2. Create and upload Arduino sketch
Open and compile/upload the serial2ws.ino in the UdooNeoWebDemo/serial2ws folder
This sketch monitors Analog in pin A0 and when the signal changes it will send data to the serial device /dev/ttyMCC
It also is creating a fake sensor signal 0-100, simulating input from pin A1 so it will always send data, also when nothing is connected.
If you have a sensor connected you can change line getFakeAnalog(pot2Pin, 1, &last2); with getAnalog(pot2Pin, 1, &last2);

The sketch will also accept the inbound commands “0” and “1” received from the serial device /dev/ttyMCC
It will switch on and off the Build in LED.

To test this sketch you can open the Arduino IDE serial monitor on the Neo and it will show the sensor data. You can send a 0 or 1 to switch on and off the build in Led.
Later off course you can enhance this sketch with more sensors and with more commands to switch more connected devices.

3. Start Python Webserver
With Python we can start a webserver on port 8080 of your Neo.
The Neo’s Arduino sketch will read and write to the serial port /dev/ttyMCC in an infinite loop.
The Webserver will have a separate “worker” thread dealing with the serial port, using an incoming and outgoing queue to handle concurrency.
Every time there’s a message in the incoming queue, the webserver main thread will write “emit it” to the websocket.
Every time there’s a message in the outgoing queue, the “worker” thread will write it to the serial port.
Within the web browser, the communication will be event-based. Every time a new message will be received from the websocket, the GUI will be updated. Every time the user will send a command, i.e. pushing a button, a command message will be sent on the websocket.

There are 4 files in the src folder:
server.py – Python program that runs the webserver;
serialworker.py – Python program that runs the serial communication between the webserver and the Arduino part;
main.js – Javascript that runs the websockets and updates the webpage;
index.html – The webpage in HTML5.

For more information about the principle of this setup please go to http://fabacademy.org/archives/2015/doc/WebSocketConsole.html

Before starting the webserver we have to change the IP address in the file UdooNeoWebDemo/src/main.js
Find line

var socket = new WebSocket("ws://192.168.x.xxx:8080/ws");

and change the given IP-address to the correct IP (change the x’s into the correct numbers).

Now we can start the webserver in a terminal:

cd UdooNeoWebDemo/src
python server.py

In the console of the webserver you will see the serial data displayed (be sure you have closed other serial monitors reading port /dev/ttyMCC)

4 Test the webpage
We have the Arduino sketch running and the webserver is running.
Now go to another PC or smartphone and open http://Neo-IP:8080 (in my example http://192.168.1.120:8080)
You will see the following webpage displaying the serial data and a send form:

With the send form you can send a 1 or 0 to switch the Led on or off.

If there is no serial data appearing in the webpage then check the messages in the browser Java console (right click on wwb page – Inspect Element – Console)

Off course this is a very simple webpage. In the next part we will start the enhanced version of this webserver.

5. Enhanced webpage

The simple webpage is not very attractive, no simple buttons and no information what the serial data means. Looking for a more attractive webpage I stumbled on a good looking and easy to customize alternative.
This setup can be found in the UdooNeoWebDemo/src_ext directory.
Again the IP address of the Neo has to be changed in the file main_extended.js
This enhanced webpage uses the same Arduino sketch as the simple webpage.

The webserver can be started with (stop the other server first if still running):

cd UdooNeoWebDemo/src_ext
python server_extended.py

You can add more blocks in the file Neo-webdemo.html. As mentioned in the original reference, new icons can easily be found on the website Iconfinder.com.
You can add functions and show data in the main_extended.js

The smoothie.js is used to show the running chart. Look in the source for the options to change the look and feel.

Disclaimer: I am not a programmer, just a computer enthusiast. The code provide is tested but is not guaranteed to be the best in class. The code and HOW TO is written for beginners to give a start in using the Neo. At the moment this HOW TO is work in progress so updates are foreseen.
This webpage on the Neo should not be exposed outside your home network! At least I cannot guarantee that someone with a criminal mind can not access your network through this application if exposed to the “evil” world wide internet.

Originally written by: waltervl

If you got doubts, questions or ideas, visit our forum and comment the following topic: https://www.udoo.org/forum/threads/how-to-control-neo-arduino-from-web-page.6242/