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.