summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMike Beattie <mike@ethernal.org>2012-03-21 21:25:01 +1300
committerMike Beattie <mike@ethernal.org>2012-03-21 21:25:01 +1300
commit972ef9cbaddfaf49b404199509db6dfd71f68338 (patch)
treef204e9cc562f85d2e9080d6d3fc86bc416659a71
parent13d22c5d2ab2fdb15d268ce75e8a9c35d6781944 (diff)
Add html and html generation script.
Signed-off-by: Mike Beattie <mike@ethernal.org>
-rwxr-xr-xencode_html.sh16
-rw-r--r--html/index_20120321.html67
-rw-r--r--html/index_veryold.html51
-rw-r--r--index.html67
4 files changed, 201 insertions, 0 deletions
diff --git a/encode_html.sh b/encode_html.sh
new file mode 100755
index 0000000..26f6677
--- /dev/null
+++ b/encode_html.sh
@@ -0,0 +1,16 @@
+#!/bin/sh
+
+# Copy HTML to a web server....
+scp index.html prometheus.ethernal.org:public_html/arduino.html
+
+# Fetch HTML with appropriate Accept-Encoding: header -> save to raw file
+echo -ne "GET /~mjb/arduino.html HTTP/1.0\nAccept-Encoding: gzip\n\n" | nc www.ethernal.org 80 > index_gzip.raw
+
+# Process Raw file - delete headers and blank line -> save to raw gzip dat file
+sed -e '0,/^\r$/d' index_gzip.raw > index_gzip.dat
+
+# Process raw gzip dat file into hex array for inclusion in program
+od -A n -t x1 index_gzip.dat | sed -e 's/ \(..\)/0x\1, /g' -e 's/^/ /' > index_gzip.txt
+
+ls -l index_gzip.*
+
diff --git a/html/index_20120321.html b/html/index_20120321.html
new file mode 100644
index 0000000..cde502a
--- /dev/null
+++ b/html/index_20120321.html
@@ -0,0 +1,67 @@
+<html><head><title>Door Control</title>
+<meta id='viewport' name='viewport' content='width=160; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'>
+<style>
+body {background-color:#bbb;font-family:'Verdana',sans-serif}
+h2 {line-height:50%;}
+h3 {line-height:5%;}
+.page {text-align:center;}
+.centred-table,.dobutton {text-align:center;margin-left:auto;margin-right:auto;}
+.button {padding-bottom:5px;}
+.dobutton {height:50px;width:200px;}
+.unlockedlabel,.openlabel,.closedlabel,.statelabel {background-color:#a5a5a5;padding:3px;border-radius:4px;}
+.lockedlabel {visibility:hidden;}
+.unlockedlabel {background-color:#55f;}
+.openlabel {background-color:#f55;}
+.closedlabel {background-color:#5f5;}
+</style>
+<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.min.js'></script>
+<script type='text/javascript'>
+$(document).ready(function() {
+ $('#fda').click(function(){$.post('do', {frontdoor: 1});});
+ $('#gd1a').click(function(){$.post('do', {garagedoor1: 1});});
+ $('#gd2a').click(function(){$.post('do', {garagedoor2: 1});});
+ updateStatus();
+});
+function updateStatus() {
+ $.getJSON('json', function(data) {
+ $.each(data, function(key, val) {
+ $('#' + key).attr('class', val + 'label');
+ });
+ setTimeout(updateStatus, 1000);
+ });
+}
+</script>
+</head>
+<body>
+<div class=page>
+<h2>15 Park Lane</h2>
+<h3>Door Control</h3>
+<table class=centred-table>
+<tr>
+<td><div id=fdo class=statelabel>Open</div></td>
+<td><div id=fdu class=lockedlabel>Unlocked</div></td>
+<td><div id=fdc class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><button class=dobutton id=fda>Front Door</button></div></td>
+</tr>
+<tr>
+<td><div id=gd1o class=statelabel>Open</div></td>
+<td></td>
+<td><div id=gd1c class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><button class=dobutton id=gd1a>Garage Door 1</button></div></td>
+</tr>
+<tr>
+<td><div id=gd2o class=statelabel>Open</div></td>
+<td></td>
+<td><div id=gd2c class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><button class=dobutton id=gd2a>Garage Door 2</button></div></td>
+</tr>
+</table>
+</div>
+</body>
+</html>
diff --git a/html/index_veryold.html b/html/index_veryold.html
new file mode 100644
index 0000000..ed1b342
--- /dev/null
+++ b/html/index_veryold.html
@@ -0,0 +1,51 @@
+<html><head><title>Door Control</title>
+<meta id='viewport' name='viewport' content='width=160; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'>
+<style type="text/css">
+body {background-color:#bbb}
+.page,.middle {text-align:center;}
+.centred-table,.dobutton {margin-left:auto;margin-right:auto;}
+.left {text-align:left;}
+.right {text-align:right;}
+.button {padding-bottom:10px;}
+.dobutton {height:50px;width:200px;}
+.unlockedlabel,.openlabel,.closedlabel,.statelabel {background-color:#a5a5a5;padding:3px;border-radius:4px;}
+.unlockedlabel {background-color:#55f;visibility:hidden;}
+.openlabel {background-color:#f55;}
+.closedlabel {background-color:#5f5;}
+</style>
+</head>
+<body>
+<div class=page>
+<h1>15 Park Lane</h1>
+<h3>Door Control</h3>
+<form action='/' method='POST'>
+<table class=centred-table>
+<tr>
+<td class=left><div id=fdo class=statelabel>Open</div></td>
+<td class=middle><div id=fdu class=unlockedlabel>Unlocked</div></td>
+<td class=right><div id=fdc class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><button class=dobutton name='frontdoor' value='1'>Front Door</button></div></td>
+</tr>
+<tr>
+<td class=left><div id=g1o class=statelabel>Open</div></td>
+<td class=middle></td>
+<td class=right><div id=g1c class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><button class=dobutton name='garagedoor1' value='1'>Garage Door 1</button></div></td>
+</tr>
+<tr>
+<td class=left><div id=g1o class=statelabel>Open</div></td>
+<td class=middle></td>
+<td class=right><div id=g1c class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><button class=dobutton name='garagedoor2' value='1'>Garage Door 2</button></div></td>
+</tr>
+</table>
+</form>
+</div>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..727b7b3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,67 @@
+<html><head><title>Door Control</title>
+<meta id='viewport' name='viewport' content='width=160; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'>
+<style>
+body {background-color:#bbb;font-family:'Verdana',sans-serif}
+h2 {line-height:50%;}
+h3 {line-height:5%;}
+.page {text-align:center;}
+.centred-table,.dobutton {text-align:center;margin-left:auto;margin-right:auto;}
+.button {padding-bottom:5px;}
+.dobutton {height:50px;width:200px;}
+.unlockedlabel,.openlabel,.closedlabel,.statelabel {background-color:#a5a5a5;padding:3px;border-radius:4px;}
+.lockedlabel {visibility:hidden;}
+.unlockedlabel {background-color:#55f;}
+.openlabel {background-color:#f55;}
+.closedlabel {background-color:#5f5;}
+</style>
+<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.min.js'></script>
+<script type='text/javascript'>
+$(document).ready(function() {
+ $('#fda').click(function(){$.post('do', {frontdoor: 1});});
+ $('#gd1a').click(function(){$.post('do', {garagedoor1: 1});});
+ $('#gd2a').click(function(){$.post('do', {garagedoor2: 1});});
+ updateStatus();
+});
+function updateStatus() {
+ $.getJSON('json', function(data) {
+ $.each(data, function(key, val) {
+ $('#' + key).attr('class', val + 'label');
+ });
+ setTimeout(updateStatus, 1000);
+ });
+}
+</script>
+</head>
+<body>
+<div class=page>
+<h2>15 Park Lane</h2>
+<h3>Door Control</h3>
+<table class=centred-table>
+<tr>
+<td><div id=fdo class=statelabel>Open</div></td>
+<td><div id=fdu class=lockedlabel>Unlocked</div></td>
+<td><div id=fdc class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><input type=button class=dobutton id=fda value='Front Door' /></div></td>
+</tr>
+<tr>
+<td><div id=gd1o class=statelabel>Open</div></td>
+<td></td>
+<td><div id=gd1c class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><input type=button class=dobutton id=gd1a value='Garage Door 1' /></div></td>
+</tr>
+<tr>
+<td><div id=gd2o class=statelabel>Open</div></td>
+<td></td>
+<td><div id=gd2c class=statelabel>Closed</div></td>
+</tr>
+<tr>
+<td colspan=3><div class=button><input type=button class=dobutton id=gd2a value='Garage Door 2' /></div></td>
+</tr>
+</table>
+</div>
+</body>
+</html>