Created
January 6, 2014 01:06
-
-
Save joewashear007/8276467 to your computer and use it in GitHub Desktop.
A Simple Web Socket Demo that displays current temperature from a Raspberry pi's GPIO pins using a temperature sensor. Needs: Rashberry Pi, temperature probe, python 2.7, Tornado Webserver
1) Read This: http://www.cl.cam.ac.uk/projects/raspberrypi/tutorials/temperature/
2) Install tornado Webserver
3) Change the ws address in html file to the lo…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import time | |
import tornado.httpserver | |
import tornado.websocket | |
import tornado.ioloop | |
from tornado.ioloop import PeriodicCallback | |
import tornado.web | |
class WSHandler(tornado.websocket.WebSocketHandler): | |
def open(self): | |
self.callback = PeriodicCallback(self.send_temp, 120) | |
self.callback.start() | |
def send_hello(self): | |
self.write_message('hello') | |
def on_message(self, message): | |
pass | |
def on_close(self): | |
self.callback.stop() | |
print "Closed Connection" | |
def send_temp(self): | |
#Change this to the file of your temp probe! | |
tfile = open("/sys/bus/w1/devices/28-000004acc08b/w1_slave") | |
text = tfile.read() | |
tfile.close() | |
temperaturedata = text.split("\n")[1].split(" ")[9] | |
temperature = float(temperaturedata[2:]) | |
temperature = temperature / 1000 * 9 / 5 + 32 | |
self.write_message("Current Temperature: {0:.2f}F".format(temperature)) | |
print temperature | |
time.sleep(1) | |
application = tornado.web.Application([(r'/', WSHandler),]) | |
if __name__ == "__main__": | |
http_server = tornado.httpserver.HTTPServer(application) | |
http_server.listen(9999) | |
tornado.ioloop.IOLoop.instance().start() | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
/* | |
* ---------------------------------------------------------------------------- | |
* "THE BEER-WARE LICENSE" (Revision 42): | |
* <[email protected]> wrote this file. As long as you retain this notice you | |
* can do whatever you want with this stuff. If we meet some day, and you think | |
* this stuff is worth it, you can buy me a beer in return Joseph Livecchi | |
* ---------------------------------------------------------------------------- | |
*/ | |
--> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, user-scalable=no" /> | |
<title>BlenderWebController</title> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> | |
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> | |
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<script> | |
//Change this to the locla ip of your pi | |
var address = "ws://192.168.1.200:9999/" | |
$(document).ready(function(){ | |
try { | |
var s = new WebSocket(address); | |
s.onopen = function (e) { | |
$("#Status").slideUp(); | |
}; | |
s.onclose = function (e) { | |
$("#Status > div > p").text("Not Connected"); | |
$("#Status").slideDown(); | |
}; | |
s.onmessage = function (e) { | |
$("#templog > li").removeClass("hightlight"); | |
$("#templog").prepend('<li class="list-group-item hightlight"></li>'); | |
$("#templog > li").first() | |
.hide() | |
.text( e.data + ' @ ' + (new Date()).toLocaleTimeString() ) | |
.slideDown("slow"); | |
}; | |
s.onerror = function (e) { | |
$("#Status > div > p").text("Something Died!"); | |
$("#Status").slideDown(); | |
}; | |
} catch (ex) { | |
$("#Status > div > p").text("Something Died!"); | |
$("#Status").slideDown(); | |
} | |
$("#close").click( function () { | |
s.close(1000, "Try to Close"); | |
}); | |
}); | |
</script> | |
<style> | |
.hightlight{ | |
font-size: 2em; | |
font-weight: bold; | |
color: rgb(138, 109, 59); | |
background-color: rgb(252, 248, 227); | |
border-color: rgb(250, 235, 204); | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row" id="Status"> | |
<div class="alert alert-warning"> | |
<strong>Warning</strong><p></p> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="panel panel-primary"> | |
<div class="panel-heading" > | |
<h2 class="panel-title" style="display:inline;font-size:160%;" >Temperature Log</h2> | |
<button class="btn btn-warning" type="button" id="close" style="display:inline;float:right;">Close</button> | |
</div> | |
<div class="panel-body"> | |
<ul id="templog" class="list-group"> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Hi,
I like your project, but I tried to run it and on the webpage it displays this message: Can "Upgrade" only to "Websocket"
Any idea what the problem could be?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I'm looking for a simple way that reads the status (High or Low) of ex. Pin 20 on my raspberry PI and show that on a webpage.
I'm already using the tornado websocket to control a relais, that is working so far but I don't know how to read status of input pin.
I have a jukebox at my home and when credit is low a 5 volt lamp is on, so now I want to detect when lamp is on and show that on my webpage. (lamp on = input pin is High (like button was ON) lamp off = input pin is low.
I found your example of reading a temperature sensor - this means you are reading input values.
So how can I read input pin is high or low.
Would be great if you could provide me a simple code snippet to do that via tornado web server and a small html snippet.
i'm newbie in coding so forgive me some stupid questions
Thanks
Johan