Graphical Web Interface
========================
:warning: **Please view the correctly rendered version of this page at https://www.espruino.com/Graphical+Web+Interface. Links, lists, videos, search, and other features will not work correctly when viewed on GitHub** :warning:
* KEYWORDS: Wifi,Web Server,Graphical,SVG
* USES: Internet,CC3000,WS2811,Espruino Board
Introduction
-----------
In this tutorial we'll make an interactive graphical representation of a house. When you click the windows, it'll light the relevant LED lights.
This is done by embedding an SVG image into an HTML file. SVG elements can then be treated like normal HTML elements - they can call JavaScript when clicked, and their attributes can be changed to make them light up.
You'll Need
----------
* One [Espruino Board](/Original)
* A [[CC3000]] WiFi module
* A [model house](http://www.hazelwilliams.net/)
* A string of 8 [[WS2811]] Lights
Wiring Up
--------
* Follow [the instructions](/CC3000) for wiring up the CC3000 module
* Follow the [[WS2811]] instructions to wire the WS2811 to pin B15.
* Arrange the LEDs in a zig-zag, with 4 on the bottom row for the bottom set of windows, and 4 on the top-row for the top set of windows.
Software
-------
First off, you need to run [Inkscape](http://www.inkscape.org/en/) and design some graphics. I just drew around a photo of the model house:
Then, save the file as a `Plain SVG` file using `Save As`. This will remove any Inkscape-specific tags that aren't needed. The source to the picture I made was:
```SVG
```
Then, delete the metadata, add `onclick` attributes to each of the paths you want to be clickable, and change the ids to something more useful. Finally, wrap that inside an HTML file with a script that will request a webpage from Espruino when you click on each window:
```HTML
```
The code above will request the page `/set?l2=true` if the second window is clicked.
Save the HTML file to disk, and then use the [[File Converter]] page to convert it to a string. While you could load it off an SD card without converting it to a string, storing the file as a variable means that Espruino can work without requiring an SD card at all.
Finally, you just need to write some code for Espruino that will serve up the webpage, or will turn the LEDs on and off when the page `/set` is requested.
```JavaScript
var page = "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n";
// Our lights aren't in exactly the same order. This just maps them to the correct order
var map = [undefined,7,6,5,4,0,1,2,3];
// 8 lights, one for each window
var rgb = new Uint8Array(3*8);
// Setup SPI to talk to the LED lights
SPI2.setup({baud:3200000, mosi:B15});
// this writes the data to the LED lights
function setLights() {
SPI2.send4bit(rgb, 0b0001, 0b0011);
}
function onPageRequest(req, res) {
var a = url.parse(req.url, true);
res.writeHead(200, {'Content-Type': 'text/html'});
// If /set is requested...
if (a.pathname == "/set" && a.query) {
for (var l in a.query) {
if (l.length==2 && l[0]=="l") {
var n = map[parseInt(l[1],16)];
var v = JSON.parse(a.query[l]);
rgb[n*3+0] = v ? (32+128*Math.random()) : 0;
rgb[n*3+1] = v ? (32+128*Math.random()) : 0;
rgb[n*3+2] = v ? (32+128*Math.random()) : 0;
setLights();
}
}
res.end();
} else {
// Otherwise just send the webpage
res.end(page);
}
}
// now just initialise WiFi and our server
var wlan;
function onInit() {
wlan = require("CC3000").connect();
wlan.connect( "AccessPointName", "WPA2key", function (s) {
setLights();
if (s=="dhcp") {
console.log("My IP is "+wlan.getIP().ip);
require("http").createServer(onPageRequest).listen(80);
}
});
}
onInit();
```
Paste this into the right-hand side of the Web IDE, being sure to change your WiFi name and key. Then just click the `Send to Espruino` button.
The CC3000 takes a while to initialise so you may have to wait a minute or two. When connected, Espruino will print its IP address. You can then connect to that with a web browser...
When you connect, you should see a picture of the house - and clicking on the windows will turn the relevant lights on and off!
