How-To: Control Neo Arduino from Web page

Discussion in 'UDOO NEO' started by waltervl, Dec 5, 2016.

  1. waltervl

    waltervl UDOOer

    Joined:
    Dec 12, 2015
    Messages:
    2,314
    Likes Received:
    580
    Welcome in this second How-To about Neo Linux and Arduino. In the first 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. In this way we can make for example your own home - or aquarium automation.
    extended_webpage.JPG

    In this How-To we are ging to do the following steps:
    1 - Prepare your Neo
    2 - Create and upload a Arduino Sketch that can send sensor data but also accepts 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
    We use Udoobuntu 2.x as Operating System.
    For this How to we have to install Python 2.7 packages, namely tornado, multiprocessing and python-dev
    Code:
    sudo pip install python-dev tornado multiprocessing
    Download the zip file from this post 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 every time gets the same IP address 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 (is 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 aketch 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.
    Arduino_serial.JPG

    3. Start Python Webserver

    With Python we can start a webserver on port 8080 of your Neo.
    The Neo 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 it "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
    Code:
    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:
    Code:
    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)
    console_server_py.JPG

    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:
    Simple_webpage.JPG
    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 somehere on the web 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.
     

    Attached Files:

    Last edited: Dec 7, 2016
    Lieven, Andrea Rovai and modjo like this.
  2. waltervl

    waltervl UDOOer

    Joined:
    Dec 12, 2015
    Messages:
    2,314
    Likes Received:
    580
    5. Enhanced webpage
    extended_webpage.JPG
    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):
    Code:
    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 enthousiast. 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.
     
    Last edited: Dec 6, 2016
    Lieven, Andrea Rovai and modjo like this.
  3. Lieven

    Lieven New Member

    Joined:
    Nov 7, 2015
    Messages:
    5
    Likes Received:
    3
    Hi Walter,
    Great stuff you posted here. I've dusted off my Neo last weekend and forced myself to get hands-on again on the board. Like you I'm not a programmer myself so I've started from scratch with the latest UDOObuntu release, installed LAMP and the Cacti to collect and display sensor info. I've worked with Cacti in the past for professional reasons so I kind off know where to look for to build new graphs. I'll surely check-out these website enhancements to write stuff to the arduino as this is what I lack for the moment (and do hope it works on Apache too as this is what I'm running; not the python web service)

    I liked your previous post using Thinkspeak http://www.udoo.org/forum/threads/how-to-make-udoo-neo-an-iot-gateway-of-sensors.6103/ which is new to me. Those who would just like archiving sensor data locally, Cacti might be your alternative. Although I think you can do with less, having to use standard applications has its benefits for a novice. Archiving some temperature data in the cloud isn't a big deal but once you collect motion sensors it might become a security/privacy issue.

    The first sensor attached locally is been queried now. Next step is to get the Neo somehow connected to a NRF24 to collect other Arduino data. #wewantrf24networklibrary :) http://www.udoo.org/forum/threads/yet-another-library-doesnt-work-rf24network.6142/
     

    Attached Files:

    Maurice and waltervl like this.
  4. waltervl

    waltervl UDOOer

    Joined:
    Dec 12, 2015
    Messages:
    2,314
    Likes Received:
    580
    Thanks! Good to see I made someone enthusiast again over his Neo :)

    I just installed HomeGenie (a Domotica server) the other day to see if it would start. It did! I like the concept of mysensors.org and HomeGenie has an interface with these rf24 arduino sensors. But have to wait for a working SPI library...... Udoo is going for a Bluetooth/Zigbee kind of alternative: UdooBlu.
    http://www.udoo.org/udoo-blu/

    Here is a link to the HomeGenie/my sensors combination https://www.mysensors.org/controller/homegenie
     
    Andrea Rovai likes this.

Share This Page