{"id":971,"date":"2017-04-27T22:50:05","date_gmt":"2017-04-27T20:50:05","guid":{"rendered":"http:\/\/heppg.de\/ikg\/wordpress\/?p=971"},"modified":"2017-04-27T22:50:56","modified_gmt":"2017-04-27T20:50:56","slug":"raspberry-pi-gpio-to-web-page","status":"publish","type":"post","link":"https:\/\/heppg.de\/ikg\/wordpress\/?p=971","title":{"rendered":"Raspberry Pi GPIO to web page"},"content":{"rendered":"

In the Rasperry Pi forum, there are quite often questions on how to get a GPIO pin status displayed on a web page.<\/p>\n

Common attempts are with CGI scripts; webiopi or other frameworks are proposed. CGI is quite outdated; and complex frameworks handle many technologies under the hood and leave few opportunities to learn.<\/p>\n

I usually propose an architecture based on a python web application server, using websockets to send events to the browser. The browser uses javascript to display the data. Collection of GPIO events is done in a thread and data are sent through a queue to the python web application server. This architecture can be tested step by step and can be adjusted to different needs.<\/p>\n

An overall sketch of the modules shows the connection between the components.<\/p>\n

\"\"<\/a><\/p>\n

Basic sequence is: (1) Browser requests web page from server, (2) server provides web page and (3) javascript in browser is activated. (4) Javascript opens a websocket to the server. In the server, there are handler for the http request and web socket. The peripheral access is handled in a separate class and (5) sends data through a queue to the web socket handler. (6) in browser, javascript sets the received data into the html-document.<\/p>\n

(1)<\/strong> Browser requests web page. The python web application server is responsible to handle this.<\/p>\n

(2)<\/strong> To provide the page, the ‘tornado’ package is used. All these web app servers consist of Handler classes for various purpose. The tornado\u00a0 framework uses a mapping from web request pathes to the Handlers.<\/p>\n

def make_app():\r\n\u00a0\u00a0\u00a0 return tornado.web.Application(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (r\"\/\"\u00a0 , MainHandler),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (r\"\/ws\", ClientWebSocketHandler),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ]\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 )<\/pre>\n
The ‘root’ path for a web page is ‘\/’. This is the\u00a0 path a browser requests when http:\/\/heppg.de is requested. The http requests have various types, the usual request for a page is a ‘get’ request. The tornado routes this request to the MainHandler, and as it is a get request the method called is the ‘get()’-method.<\/p>\n
To tell the whole story, the app server is initialized with<\/p>\n
if __name__ == \"__main__\":\r\n\u00a0\u00a0\u00a0 print(\"start\")\r\n\u00a0\u00a0\u00a0 app = make_app()\r\n\u00a0\u00a0\u00a0 app.listen(8080)\r\n\u00a0\u00a0\u00a0 try:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tornado.ioloop.IOLoop.current().start()\r\n\u00a0\u00a0\u00a0 except KeyboardInterrupt:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 peripheral.stop()\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 runMessageSend = False\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tornado.ioloop.IOLoop.current().stop()\r\n\u00a0\u00a0\u00a0 print(\"stopped\")<\/pre>\n
In this code, there is also the port 8080 in the listen-statement. The url for a browser is<\/p>\n
http:\/\/localhost:8080<\/pre>\n
or<\/p>\n
http:\/\/127.0.0.1:8080<\/pre>\n
There is extensive documentation on the tornado web site ‘.tornadoweb’.<\/p>\n
A basic implementation for the MainHandler is<\/p>\n
class MainHandler(tornado.web.RequestHandler):\r\n\u00a0\u00a0\u00a0 def get(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.write( \"hello world<\/span>\" )<\/pre>\n
Instead of the simple ‘hello world’ a web page is produced. Html pages are xml structures, containing <head> and <body>-Elements.<\/p>\n
class MainHandler(tornado.web.RequestHandler):\r\n\u00a0\u00a0\u00a0 def get(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.write( \"\"\"<html><\/span>\r\n\u00a0\u00a0\u00a0 <head><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <title>Websocket sample<\/title><\/span>\r\n\u00a0\u00a0\u00a0 <\/head><\/span>\r\n\u00a0\u00a0\u00a0 <body><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Sample connection to a Raspberry Pi<\/span>\r\n\u00a0\u00a0\u00a0 <\/body><\/span>\r\n<\/html>\"\"\"<\/span><\/pre>\n
The quotation with the three quotes allows to use multiline content, which makes editing simpler.<\/p>\n
So far the page contains only the basic elements. As we later need some boxes to add text, these are defined with labels.<\/p>\n
\"\"\"<html><\/span>\r\n\u00a0\u00a0\u00a0 <head><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <title>Websocket sample<\/title><\/span>\r\n\u00a0\u00a0\u00a0 <\/head><\/span>\r\n\u00a0\u00a0\u00a0 <body><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Sample connection to a Raspberry Pi<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <hr\/><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div\u00a0 style=\"position:relative; width:400px; height:80px;\" ><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"addr\" style=\"width:400px; height:20px;\">\u00a0\u00a0\u00a0 addr\u00a0\u00a0\u00a0 <\/div><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"status\" style=\"width:400px; height:20px;\">\u00a0 status\u00a0 <\/div><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"msg\" style=\"width:400px; height:20px;\">\u00a0\u00a0\u00a0\u00a0 message <\/div><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <hr\/><\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Connection Status<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"connection\" style=\"position:relative; width:200px; height:40px;background:lightgrey; font: 30px arial, sans-serif;\" ><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 connection<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Message display<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"feld\" style=\"position:relative; width:200px; height:40px;background:lightgrey; font: 30px arial, sans-serif;\" ><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 message<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div> ...\"\"\"<\/span><\/pre>\n
(3)<\/strong> The javascript part plays its role now. With javascript, websockets can be opened and data can be send to the server or received from the server.<\/p>\n
(4)<\/strong> To open a socket, the address needs to be build from the servers address. As the web page is received from the server, this is already known inside the browser context. Instead of http:\/\/ as the protocol, the protocol used is ws:\/\/. For a local connection, this results in “ws:\/\/localhost:8080\/ws”. The trailing “\/ws” is needed for the tornado routing which addresses this request to the WebSocketHandler.<\/p>\n
var addr = \"ws:\/\/\" + window.location.hostname + \":\" + window.location.port + \"\/ws\";<\/span>\r\nvar websocket = new WebSocket( addr );<\/span><\/pre>\n
Javascript uses ‘callback’ methods on websocket events.<\/p>\n
\u00a0\u00a0\u00a0 websocket.onmessage = function(e){<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ...<\/span>\r\n\u00a0\u00a0\u00a0 }<\/span>\r\n\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0\u00a0 websocket.onopen = function(){<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log('Connection open!');<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ...<\/span>\r\n\u00a0\u00a0\u00a0 }<\/span>\r\n\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0\u00a0 websocket.onclose = function(){<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log('Connection closed');<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ...<\/span>\r\n\u00a0\u00a0\u00a0 }<\/span><\/pre>\n
The content is abbreviated … for clarity. The console.log(‘hello’);<\/span> is a convenient way to debug javascript in a browser. If firefox is used, the debugger is available inside the browser. In earlier releases there was usually ‘firebug’ used, an extension to firefox. In newer releases – here I use 53.3 – firebug is no longer supported and “Firefox DevTools” instead. These are activated with a right click in the page and ‘inspect element’.<\/p>\n
\"\"<\/a><\/p>\n
Really useful for finding out what the system is doing. Of course the debugger is also sometimes needed.<\/p>\n
When the connection is opened, the callback function sets the status color.<\/p>\n
\u00a0\u00a0\u00a0 websocket.onopen = function(){<\/span><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log('Connection open!');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"connection\").style.background = 'lightgreen';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"status\").innerHTML = 'connected !';\r\n\u00a0\u00a0\u00a0 }<\/span><\/pre>\n
The elements retrieved from the html document are the named ‘div’ sections ‘connection’ and ‘status’.<\/p>\n
Next important step is inside the python app server. When socket is opened, an instance of ClientWebSocketHandler is created. In the current application, the class starts a thread which shuffles data from a queue into the send method. So whenever a message is on the queue, this message is sent to the browser.<\/p>\n
# a variable to gracefully stop the threadsrunMessageSend = True\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\r\nclass ClientWebSocketHandler(tornado.websocket.WebSocketHandler):\r\n\u00a0\u00a0\u00a0 def __init__(self, args, kwargs):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 tornado.websocket.WebSocketHandler.__init__(self, args, kwargs)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 print(\"ClientWebSocketHandler.init\")\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.my_thread = threading.Thread(target = self.run)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.my_thread.start()\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 def run(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 while runMessageSend:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 try:\r\n                # something on the queue ?\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 s = sendQueue.get(block=True, timeout=0.1)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 except Exception:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 continue \r\n            # doublecheck if connection available\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if self.ws_connection is None:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 print(\"discard \", s) \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 print(\"send \", s) \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 try:\r\n                    # and send toward the browser\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.write_message(s )\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 except Exception:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 pass<\/pre>\n
(5)<\/strong> The other side of the queue can be used as needed. As a sample, here just a debug-Sending class which sends ‘on’, ‘off’ packed in a json telegram.<\/p>\n
# messages from Periphaeral Class to Websocket\r\nsendQueue= Queue.Queue()\r\n\r\nclass PeripheralDebug:\r\n    \"\"\"Debug class\"\"\"\r\n\u00a0\u00a0\u00a0 def __init__(self, sendQueue):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.sendQueue = sendQueue\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 def start(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.runit = True\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 blinkThread = threading.Thread(target=self.blink)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 blinkThread.start()\r\n\u00a0\r\n\u00a0\u00a0\u00a0 def stop(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.runit = False\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 def blink(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cnt = 0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 while self.runit:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.sendQueue.put( { 'data': 'on', 'cnt' : cnt } )\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cnt += 1\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 time.sleep(0.5)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.sendQueue.put( { 'data': 'off', 'cnt' : cnt } )\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cnt += 1\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 time.sleep(0.5)<\/pre>\n
The json telegrams “{ ‘data’: ‘on’, ‘cnt’ : cnt }” contain the ‘data’-element and a counter ‘cnt’. It is usually a good idea to pack a telegram counter into a telegram. This helps to find out whether messages are lost or a connection was broken for some time.<\/p>\n
The queue is created with Queue.Queue(), which is typical for python 2; in python3 it is more consistent with queue.Queue().<\/p>\n
The PeripheralDebug-Class is started with<\/p>\n
peripheral = PeripheralDebug()\r\nperipheral.start()<\/pre>\n
Instead of this debug-Class, a ‘real’ PeripheralGPIO class can be used. When the Telegram is the same, and the queue is same queue as before, this can be exchanged easily.<\/p>\n
class PeripheralGPIO:\r\n    \"\"\"Connection to a GPIO pin\"\"\"\r\n\u00a0\u00a0\u00a0 def __init__(self, sendQueue):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.sendQueue = sendQueue\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GPIO.setmode(GPIO.BCM)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GPIO.setwarnings(False)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.channel = 4\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 GPIO.setup(self.channel, GPIO.IN, pull_up_down=GPIO.PUD_UP)\r\n\r\n\u00a0\u00a0\u00a0 def start(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.runit = True\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 blinkThread = threading.Thread(target=self.run)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 blinkThread.start()\r\n\r\n\u00a0\u00a0\u00a0 def stop(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.runit = False\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 def run(self):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cnt = 0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 prev = None\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 while self.runit:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 res =\u00a0 GPIO.input(self.channel)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if prev != res:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if res:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.sendQueue.put( { 'data': 'on', 'cnt' : cnt } )\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 self.sendQueue.put( { 'data': 'off', 'cnt' : cnt } )\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cnt += 1\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 prev = res\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 # for debouncing and limiting number of events per time\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 time.sleep(0.01)<\/pre>\n
In IT terminology, these two classes PeripheralGPIO and PeripheralDebug use the same interface. Unfortunately,\u00a0 in python Interfaces are not very prominent. To make this ‘Factory Pattern’ complete, there is also a PeripheralFactory which returns either the debug-version or the GPIO-version of these classes.<\/p>\n
class PeripheralFactory:\r\n\u00a0\u00a0\u00a0 @staticmethod\r\n\u00a0\u00a0\u00a0 def getPeripheral(debug):\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if debug:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return PeripheralDebug(sendQueue)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return PeripheralGPIO(sendQueue)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\nperipheral = PeripheralFactory.getPeripheral(debug)\r\nperipheral.start()<\/pre>\n
(6)<\/strong> Last step is to display the data from the websocket in the browser, so javascript gets this task:<\/p>\n
\u00a0\u00a0\u00a0 websocket.onmessage = function(e){<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var server_message = e.data;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var obj = JSON.parse(server_message);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"feld\").innerHTML = obj.data;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if ( obj.data == \"on\" )<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"feld\").style.background = 'yellow';<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"feld\").style.background = 'lightblue';<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(server_message);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"msg\").innerHTML = server_message;<\/span>\r\n\u00a0\u00a0\u00a0 }<\/span><\/pre>\n
The message data are retrieved from the event-attribute data “e.data”. As this message is\u00a0 json, this is parsed with JSON.parse(server_message);<\/span> returning an object. The data part of the json dictionary is retrieved with obj.data and accordingly the status box is getting its color.
\n<\/span><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
In the Rasperry Pi forum, there are quite often questions on how to get a GPIO pin status displayed on a web page. Common attempts are with CGI scripts; webiopi or other frameworks are proposed. CGI is quite outdated; and complex frameworks handle many technologies under the hood and leave few opportunities to learn. I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,42],"tags":[],"class_list":["post-971","post","type-post","status-publish","format-standard","hentry","category-gpio","category-python"],"_links":{"self":[{"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=971"}],"version-history":[{"count":5,"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/971\/revisions"}],"predecessor-version":[{"id":980,"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/971\/revisions\/980"}],"wp:attachment":[{"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heppg.de\/ikg\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The complete code can be downloaded here<\/a>.<\/p>\n