Skip to content

BlinkenLights
BlinkenLights
Commit f84b9d5e authored by Mitchell Pomery's avatar Mitchell Pomery
Browse files
Options

Can now see and set lights via web! 

Brightness control disabled
parent acca5d0e
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 17 deletions
BlinkenLights.ino
View file @ f84b9d5e
...@@ -246,13 +246,20 @@ char *url_tail, bool tail_complete) { ...@@ -246,13 +246,20 @@ char *url_tail, bool tail_complete) {
URLPARAM_RESULT rc; URLPARAM_RESULT rc;
char name[NAMELEN]; char name[NAMELEN];
char value[VALUELEN]; char value[VALUELEN];
server.httpSuccess(); server.httpSuccess("application/json");
// Kill the connection before doing anything if all they want is head // Kill the connection before doing anything if all they want is head
if (type == WebServer::HEAD) { if (type == WebServer::HEAD) {
return; return;
} }
else if (type == WebServer::GET) { else if (type == WebServer::GET) {
//server.print("{"+'"'+"+lights"+'"'+":"+'"');
server.print("a({");
server.print('"');
server.print("lights");
server.print('"');
server.print(':');
server.print('"');
for (int i = 0; i < WIDTH; i++) { for (int i = 0; i < WIDTH; i++) {
for (int j = 0; j < HEIGHT; j++) { for (int j = 0; j < HEIGHT; j++) {
led light = getLED(i, j); led light = getLED(i, j);
...@@ -267,6 +274,8 @@ char *url_tail, bool tail_complete) { ...@@ -267,6 +274,8 @@ char *url_tail, bool tail_complete) {
//Serial.println(light.blue); //Serial.println(light.blue);
} }
} }
server.print('"');
server.print("});");
//server.print(array); //server.print(array);
} }
else { else {
......
web/web.php
View file @ f84b9d5e
...@@ -27,27 +27,27 @@ ...@@ -27,27 +27,27 @@
<style type="text/css"> <style type="text/css">
html { html {
width: 100%; width: 100%;
min-width: 480px; min-width: 1024px;
background: #DDDDDD; background: #DDDDDD;
} }
body { body {
width: 480px; width: 1024px;
min-width: 480px; min-width: 1024px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #FFFFFF; background: #FFFFFF;
} }
.lights { .lights {
width: 210px; width: 630px;
height: 60px; height: 180px;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 0%; font-size: 0%;
float: left; float: left;
} }
.led { .led {
width: 28px; width: 84px;
height: 8px; height: 24px;
margin: 0px; margin: 0px;
padding: 1px; padding: 1px;
background: #000000; background: #000000;
...@@ -55,12 +55,11 @@ ...@@ -55,12 +55,11 @@
} }
.led:hover { .led:hover {
padding: 0px; padding: 0px;
background: #0000FF;
border: solid 1px #FF0000; border: solid 1px #FF0000;
} }
.lightcontrol { .lightcontrol {
float: right; float: right;
width: 250px; width: 394px;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #0000FF; background: #0000FF;
...@@ -86,14 +85,18 @@ ...@@ -86,14 +85,18 @@
?> ?>
</div> </div>
<div class="lightcontrol"> <div class="lightcontrol" id="lightcontrol">
x: <input type="text" disabled value="" id="x"><br /> x: <input type="text" disabled value="" id="x"><br />
y: <input type="text" disabled value="" id="y"><br /> y: <input type="text" disabled value="" id="y"><br />
Red: <input type="text" value="" id="red"><br /> Red:<br />
Green: <input type="text" value="" id="green"><br /> <input type="text" id="red" class="colour" data-slider="true" data-slider-theme="volume" data-slider-range="0,255" data-slider-step="1" /><br />
Blue: <input type="text" value="" id="blue"><br /> Green:<br />
<input type="text" id="green" class="colour" data-slider="true" data-slider-theme="volume" data-slider-range="0,255" data-slider-step="1" /><br />
Blue:<br />
<input type="text" id="blue" class="colour" data-slider="true" data-slider-theme="volume" data-slider-range="0,255" data-slider-step="1" /><br />
<input type="button" id="setlights" value="Set Lights" />
</div> </div>
<div class="brightness"> <div class="brightness" style="display:none;" >
Brightness:<br /> Brightness:<br />
<input type="text" id="bright" data-slider="true" data-slider-theme="volume" data-slider-range="0,255" data-slider-step="1" /> <input type="text" id="bright" data-slider="true" data-slider-theme="volume" data-slider-range="0,255" data-slider-step="1" />
</div> </div>
...@@ -111,7 +114,8 @@ ...@@ -111,7 +114,8 @@
.html(data.value.toFixed(0)); .html(data.value.toFixed(0));
}); });
$(".brightness").change(function() { // Sets Brightness
/*$(".brightness").change(function() {
console.log('<?=$cokeurl?>brightness?bright='+document.getElementById('bright').value); console.log('<?=$cokeurl?>brightness?bright='+document.getElementById('bright').value);
$.ajax({ $.ajax({
url: '<?=$cokeaddress?>brightness?bright='+document.getElementById('bright').value, url: '<?=$cokeaddress?>brightness?bright='+document.getElementById('bright').value,
...@@ -120,7 +124,112 @@ ...@@ -120,7 +124,112 @@
}); });
return false; return false;
});*/
$(".led").click(function() {
console.log("hihi");
// id contains info we need
var id = this.id;
console.log(id);
var x = id.substring(3,4);
console.log(x);
var y = id.substring(5,6);
console.log(y);
$('#x').val(x);
$('#y').val(y);
});
$(".colour").change(function() {
setLED($('#x').val(), $('#y').val(), $('#red').val(), $('#green').val(),
$('#blue').val());
document.getElementById('lightcontrol').style.backgroundColor = "rgb(" + $('#red').val() +
", " + $('#green').val() + ", " + $('#blue').val() + ")";
}); });
function getLights() {
console.log('<?=$cokeurl?>get');
$.ajax({
url: '<?=$cokeaddress?>get',
dataType: "jsonp",
crossDomain: true,
jsonp: false,
jsonpCallback: "a",
success: function(data) {
//console.log(data.lights);
lights = data.lights;
for (var i = 0; i < 7; i++) {
for (var j = 0; j < 6; j++) {
var l = "led" + i + "x" + j
var pos = i * 6 + j;
//console.log(l);
//console.log(pos);
var hex = lights.substring(pos * 6, pos * 6 + 6);
//console.log(hex);
document.getElementById(l).style.backgroundColor =
"#" + hex;
}
}
}
});
return "true";
}
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
$("#setlights").click(function() {
console.log("Set Lights");
var lights = "";
for (var i = 0; i < 7; i++) {
for (var j = 0; j < 6; j++) {
var l = "led" + i + "x" + j
var pos = i * 6 + j;
var colour = document.getElementById(l).style.backgroundColor;
colour = colour.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var h = hex(colour[1]) + hex(colour[2]) + hex(colour[3]);
//console.log(l);
//console.log(h);
lights = lights + h;
}
}
console.log(lights);
$.ajax({
url: '<?=$cokeaddress?>set?' + lights,
dataType: "jsonp",
crossDomain: true,
jsonp: false,
jsonpCallback: "a",
success: function(data) {
console.log("change!");
}
});
});
// Gets brightness
/*function getBrightness() {
console.log('<?=$cokeurl?>brightness);
$.ajax({
url: '<?=$cokeaddress?>brightness,
dataType: "jsonp",
crossDomain: true,
success: function(response) {
$(".brightness").value(response);
}
});
return false;
});*/
function load() {
getLights();
}
$(document).ready(function(){load();});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment