Ive moved into a new house and came across a sense hat for the raspberry pi which made me remember a little project that I was working on, its basically a html based color chooser which updates the selected colour on the sense hat so I thought I'd share the scripts etc.. incase anybody finds them helpful / useful.
To start with I was running lighttpd on the Raspberry Pi which is a lightweight webserver, very simple to use and just requires a small modification to its config file to allow it to run Python scripts.
Below is the html, javascript, css and python
sensehatdisplay.html
<html>
<body>
<link rel="stylesheet" type="text/css" media="all" href="shstyles.css"/>
<script src="shcommon.js" type="text/javascript"></script>
<div id="colordisplay"></div>
<div id="colorcontrols">
<p class="colorcontrollabel">R</p>
<input id="redslider" class="slider" type="range" min="0" max="255" value="255" onchange="slideRed(this.value)" />
<p id="redvaluelabel" class="colorvaluelabel">255</p>
<br>
<p class="colorcontrollabel">G</p>
<input id="greenslider" class="slider" type="range" min="0" max="255" value="90" onchange="slideGreen(this.value)" />
<p id="greenvaluelabel" class="colorvaluelabel">90</p>
<br>
<p class="colorcontrollabel">B</p>
<input id="blueslider" class="slider" type="range" min="0" max="255" value="90" onchange="slideBlue(this.value)" />
<p id="bluevaluelabel" class="colorvaluelabel">90</p>
</div>
<input type="button" value="update" onClick="setSenseHatColorDisplay()">
<p id="outputarea">output area</p>
</body>
</html>
shcommon.js
var colorred = 255;
var colorblue = 90;
var colorgreen = 90;
function slideRed(newvalue){
document.getElementById("colordisplay").style.background="rgb("+newvalue+","+colorgreen+","+colorblue+")";
document.getElementById("redvaluelabel").innerHTML=newvalue;
colorred = newvalue;
}
function slideGreen(newvalue){
document.getElementById("colordisplay").style.background="rgb("+colorred+","+newvalue+","+colorblue+")";
document.getElementById("greenvaluelabel").innerHTML=newvalue;
colorgreen = newvalue;
}
function slideBlue(newvalue){
document.getElementById("colordisplay").style.background="rgb("+colorred+","+colorgreen+","+newvalue+")";
document.getElementById("bluevaluelabel").innerHTML=newvalue;
colorblue = newvalue;
}
function setSenseHatColorDisplay(){
var colorstring = colorred+"|"+colorgreen+"|"+colorblue;
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("outputarea").innerHTML = this.responseText;
}
};
req.open("POST","/cgi-bin/shcolorchooser.py",true);
req.send(colorstring);
}
shstyles.css
html, body{
min-height: 100%;
height: 100%;
max-width: 100%;
}
#colordisplay{
float: left;
width: 120px;
height: 120px;
border: 1px solid black;
background-color: rgb(255,90,90);
}
.colorslider{
display: inline;
width: 100px;
}
.colorcontrollabel{
display: inline;
}
.colorvaluelabel{
display: inline;
}
#colorcontrols{
float: left;
border: 1px solid black;
width: 200px;
}
shcolorchooser.py
#! /usr/bin/python
#
import sys
import os
from sense_hat import SenseHat
os.getenv("QUERY_STRING")
colorstring = sys.stdin.read()
#colorstring = "255|90|90"
colortup = colorstring.split("|")
redvalue = colortup[0]
greenvalue = colortup[1]
bluevalue = colortup[2]
print "Content-Type: text/html\n\n"
p = os.popen("sudo python /home/pi/www/cgi-bin/shcolor3.py "+redvalue+" "+greenvalue+" "+bluevalue)
p.close()
print '<html><head><meta content="text/html; charset=UTF-8" />'
print "</body></html>"
shcolor3.py
import sys import os from sense_hat import SenseHat sense = SenseHat() #colorstring = sys.argv[1] redvalue = int(sys.argv[1]) greenvalue = int(sys.argv[2]) bluevalue = int(sys.argv[3]) colortup = (redvalue,greenvalue,bluevalue) canvas = [ colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup, colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup, colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup, colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup, colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup, colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup, colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup, colortup,colortup,colortup,colortup,colortup,colortup,colortup,colortup ] sense.set_pixels(canvas) #sense.show_message(sys.argv[2])
It should be possible to merge the 2 python scripts but there was some stumbling over returning the html headers to the raspberry pi and updating the sense hat display from a single script so I used 1 script to get the data, process it, run a second python script and return the headers allowing the 2nd script to update the sense hat.
Top Comments