Hallo Zusammen
Ich versuche herauszufinden, wie man den Wert eines GPIO INPUTs an die HTML-Datei senden kann. Die Idee ist, einen Knopf zu drücken, und die HTML-Datei sollte mir diese Statusänderung anzeigen. Ich habe entsprechende Snippets gefunden, mit dem ich eine LED in der HTML-Datei an- und ausschalten kann, aber nicht in umgekehrter Richtung. Ich kann nirgendwo ein Beispiel finden, aber ich weiss, dass es irgendwo möglich sein muss, oder?
Hat mir jemand einen Tipp? Danke tausend, Thomas.
server.py
Code
#! /usr/bin/python
import os.path
import tornado.httpserver
import tornado.websocket
import tornado.ioloop
import tornado.web
import RPi.GPIO as GPIO
#Initialize Raspberry PI GPIO
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(True)
redLED = 26
button = 20
GPIO.setup(redLED, GPIO.OUT)
GPIO.setup(button, GPIO.IN, pull_up_down=GPIO.PUD_DOWN)
GPIO.output(redLED, False)
GPIO.input(button)
#Tornado Folder Paths
settings = dict(
template_path = os.path.join(os.path.dirname(__file__), "templates"),
static_path = os.path.join(os.path.dirname(__file__), "static")
)
#Tonado server port
PORT = 8000
class MainHandler(tornado.web.RequestHandler):
def get(self):
print ("[HTTP](MainHandler) User Connected.")
self.render("index.html")
class WSHandler(tornado.websocket.WebSocketHandler):
def open(self):
print ('[WS] Connection was opened.')
def on_message(self, message):
print ('[WS] Incoming message:'), message
if message == "on_g":
GPIO.output(redLED, GPIO.HIGH)
if message == "off_g":
GPIO.output(redLED, GPIO.LOW)
def on_close(self):
print ('[WS] Connection was closed.')
application = tornado.web.Application([
(r'/', MainHandler),
(r'/ws', WSHandler),
], **settings)
if __name__ == "__main__":
try:
http_server = tornado.httpserver.HTTPServer(application)
http_server.listen(PORT)
main_loop = tornado.ioloop.IOLoop.instance()
print ("Tornado Server started")
main_loop.start()
except:
print ("Exception triggered - Tornado Server stopped.")
GPIO.cleanup()
#End of Program
Alles anzeigen
index.html
HTML
<html>
<head>
<title> Socket IO</title>
</head>
<body>
<h1>Web Socket IO</h1>
<button id="green_off" class="button button5">OFF</button>
<button id="green_on" class="button button1">ON</button>
<hr>
<div id="msg"></div>
<hr>
Websocket status:
<br>
<div id="ws-status"> Waiting... </div>
<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="{{ static_url("ws-client.js")}}"></script>
</body>
</html>
Alles anzeigen
ws-client.js
Code
$(document).ready(function(){
var WEBSOCKET_ROUTE = "/ws";
if(window.location.protocol == "http:"){
var ws = new WebSocket("ws://" + window.location.host + WEBSOCKET_ROUTE);
}
else if(window.location.protocol == "https:"){
var ws = new WebSocket("wss://" + window.location.host + WEBSOCKET_ROUTE);
}
ws.onopen = function(evt) {
$("#ws-status").html("Connected");
};
ws.onmessage = function(evt) {
};
ws.onclose = function(evt) {
$("#ws-status").html("Disconnected");
};
$("#green_on").click(function(){
ws.send("on_g");
});
$("#green_off").click(function(){
ws.send("off_g");
});
$("#msg").click(function(){
ws.send("msg");
});
});
Alles anzeigen