Articles Hierarchy

Articles Home » RPI » Python Flask Socket IO

Python Flask Socket IO

just come from here and want test Python Flask Socket IO from here.
-1- install ( for use with Python3):
pip3 install flask-socketio // see lots of errors, try again
sudo pip3 install flask-socketio // and not sure its all good now
/home/pi/.pip/pip.log not show same info i just saw on screen.
the new installed things are at /usr/local/lib/python3.4/dist_packages/
-2- make a Hallo World webpage
first read documentation here and get a example.
for start
from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

if __name__ == '__main__':

sudo python3
WebSocket transport not available. Install eventlet or gevent and gevent-websocket for improved performance.
* Running on - - [03/Apr/2017 12:44:10] "GET / HTTP/1.1" 404 - - - [03/Apr/2017 12:44:10] "GET /favicon.ico HTTP/1.1" 404 -

as i work headless i make following changes first:,host='',port=4567,debug=True)
so its on my network, same port as i usually use for development, and flask werkzeug debug ON.
now need something to show OFF: make
nano /templates/index.html
and declare it in nano

def index():
return render_template('index.html')

and also copy my /static/images/favicon.ico

and also install
sudo pip3 install eventlet see also here
just load the above example app and index.html

-3- make a "live" Signal for PV: some sinus 0.0 .. 100.0 ) and show that number in the web site and a html text/number input form for SP and bring it to the server console for print

-4- zip it for playful users.
# on a updated RPI RASPBIAN
# need to install:
sudo pip3 install flask-socketio
sudo pip3 install eventlet
# read
# get this from my server:
# unzip with :
tar -xvf flask_sio.tar.xz
# go to:
cd flask_sio
# start with :

it is a ugly little HTML page with a powerful functionality,
there is ( compared to the status of my uPCS project ) no need for a
- HTML header refresh ( 10sec ) with lots of flickering, problems with menu or form operation when the refresh interrupts you.
++ because the PV is updated every 5sec by socket io
- Form post get handling, even no submit button, just change the SP number by type a number or up/down selection and press [enter]

pls find now also a NODE.JS example included:
# get this from my server:

and ( this is why i made this preparation here for you ) so you can follow me
to change that ugly little beast into a beautiful show:

if someone ask me how i make that little faceplates and current and historic trend graphs
you see here i can not say:
download the project and dig up the code.
point is: even the basic SVG things are ( means not the animated... ) very powerful.
like make a SVG image as a frame and position other SVG inside where you need.
you not need to buy that SCADA graphic editors or ready gauges.., when a home made SVG inside your HTML page is so easy and does it the way YOU want.

but here we need to manipulate the SVGs while they are shown in a HTML page, so some java required.
lets start:
our "little ugly beast" code gives us a live PV value from server ( 0.0 .. 100.0 ) pct of some measurement ( here just simulated sinus.)
with a update rate of some seconds ( need to play on this too / even we not want to make a ( multi player ) web video game here )
how to do a little BAR GRAPH?
+ a vertical PV bargraph: yellow with yellow frame inside dark grey

using a HTML file index.html and a FP.svg
pls see the 3 lines:
var FPsvg = document.getElementById("PID_FP"); using the SVG object id
var PV_BAR = FPsvg.contentDocument.getElementById("PVcover"); using rect. id ( inside SVG object )
PV_BAR.setAttributeNS(null, "height" , 200.0 - 2.0 * msg.PV); using the socket io PV value to do a
dynamic height calculation of the grey rectangle what cover up the bigger yellow rect. so a PV bar is visual.

now i can start with all the detail work for a combination of static PID data and dynamic PID data to build a PID dashboard / cockpit...
but need to be clear about the data scope:
hardware scope:
a plc style Arduino UNO with PID1, IND1..4, DCD1 control point configuration.
connected to a Raspberry Pi by USB ( so not very remote I/O )
the controller has to work alone, needs a default config what allows that for the selected process hardware.
when RPI connects ( serial interface / what always results in UNO rebooting... ) UNO
it is asked for a batch transfer if its point data ( like tuning..). later it is asked to send dynamic data like PID1 PV, SP, OUTput, Mode ( and alarms..)
on RPI this info is related to a TAG List,like TAG name, description, engineering units, low high range )
the whole set was used to create a static html page ( after calculating some SVG element positions )
Now with socket IO i want separate again between ( semi ) static and dynamic data, not sure how smart that is.
possibly i should send all data by socket IO??
i try to copy one record (PID1) from the running data of uPCS2 as static data into here,
also the tuning faceplates..
and change the dynamic data exchange by socket IO to PV, SP. Output, Mode.
add a Output Bar ( with output handle) , and instead a SP Bar only a SP handle ( over the PV Bar )

first i need a other essential test: operation of SVG elements, can i do my own SVG slider?

try this but disappointing, very difficult to catch the element and move
ok, with a bigger ( filled and opaque ) object the handling works better,
i also moved back from matrix to translate and limit to size of bargraph, so nearly good video game,
but i got stuck at the big question, how i get the slider position now back to the main program and possibly inside the SP input form?

or this
no, with several tests i not get something moving in my flask server environment.

so i now follow the impressing d3.js thing here