257 lines
5.9 KiB
HTML
257 lines
5.9 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
font-family: Verdana;
|
||
|
|
font-size:12pt;
|
||
|
|
color: grey;
|
||
|
|
}
|
||
|
|
#light {
|
||
|
|
width: 500px;
|
||
|
|
height: 500px;
|
||
|
|
background-color: rgb(0,0,0);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="output" style="position: absolute; top: 15px; left: 30px;"></div>
|
||
|
|
<div id="light" style="position: absolute; top: 50px"></div>
|
||
|
|
<div style="position: absolute; top: 45px; left: 520px; text-align: right;"><form>
|
||
|
|
Acces Point SSID:
|
||
|
|
<input id="SSID" type="text" style="margin: 7px" value="your SSIDname">
|
||
|
|
<br>
|
||
|
|
Password:
|
||
|
|
<input id="PASS" type="text" style="margin: 7px" value="yourWIFIpass">
|
||
|
|
<br>
|
||
|
|
ID Token:
|
||
|
|
<input id="TOKEN" type="text" style="margin: 7px" value="yourToken">
|
||
|
|
<br>
|
||
|
|
Reading Interval:
|
||
|
|
<input id="INTERVAL" type="text" style="margin: 7px" value="60">
|
||
|
|
<br>
|
||
|
|
<input id="startTime" type="button" value="Just Send Time" style="height:28px; width:120px; margin: 12px" onclick="loadTime();" />
|
||
|
|
<input id="start" type="button" value="Start" style="height:28px; width:120px; margin: 12px" onclick="load();" />
|
||
|
|
|
||
|
|
</form></div>
|
||
|
|
|
||
|
|
<script type="text/javascript" charset="utf-8">
|
||
|
|
|
||
|
|
var gamma = 1.8;
|
||
|
|
var levelNum = 9;
|
||
|
|
var MIN = 0;
|
||
|
|
var MAX = levelNum -2;
|
||
|
|
var REPEAT = levelNum -1;
|
||
|
|
var previousDigit = levelNum + 1;
|
||
|
|
|
||
|
|
var checksum = 0;
|
||
|
|
|
||
|
|
var period = 150; //was 170
|
||
|
|
|
||
|
|
var queue = [];
|
||
|
|
var payload = "";
|
||
|
|
var index = 0;
|
||
|
|
|
||
|
|
var myInterval;
|
||
|
|
|
||
|
|
lightElement = document.getElementById('light');
|
||
|
|
|
||
|
|
function getColor(value, levelNum) {
|
||
|
|
var previous = (value * (255.0/(levelNum - 1)));
|
||
|
|
var final = 255.0 * Math.pow((previous / 255.0), (1.0 / gamma));
|
||
|
|
return 'rgb('+Math.round(final)+','+Math.round(final)+','+Math.round(final)+')';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fills div with the requested color value
|
||
|
|
function paint(colorValue) {
|
||
|
|
lightElement.style.setProperty('background-color', getColor(colorValue, levelNum));
|
||
|
|
if (index > 18){
|
||
|
|
if ((index - 18) % 3 == 0) {
|
||
|
|
var div = document.getElementById('output');
|
||
|
|
div.innerHTML = div.innerHTML.concat(payload.slice(0,1));
|
||
|
|
payload = payload.slice(1, payload.length);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function outDigit(digit) {
|
||
|
|
digit = parseInt(digit);
|
||
|
|
if (digit == previousDigit) {
|
||
|
|
previousDigit = levelNum + 1;
|
||
|
|
queue.push(REPEAT);
|
||
|
|
} else {
|
||
|
|
queue.push(digit);
|
||
|
|
previousDigit = digit
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function ramp(valores) {
|
||
|
|
for (var i = 0; i < valores; i++) {
|
||
|
|
queue.push(i);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function sendChar(char) {
|
||
|
|
|
||
|
|
checksum = checksum + char.charCodeAt(0);
|
||
|
|
|
||
|
|
char = char.charCodeAt(0).toString(8);
|
||
|
|
while (char.length < 3) {
|
||
|
|
char = "0".concat(char)
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < char.length; i++) {
|
||
|
|
outDigit(char[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendWord(word) {
|
||
|
|
payload = payload.concat(word);
|
||
|
|
for (var i = 0; i < word.length; i++) {
|
||
|
|
sendChar(word[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function sendChecksum() {
|
||
|
|
var toSend = checksum.toString(8);
|
||
|
|
while (toSend.length < 6) {
|
||
|
|
toSend = "0".concat(toSend);
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < toSend.length; i++) {
|
||
|
|
outDigit(toSend[i]);
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log("checksum: " + toSend);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function start(){
|
||
|
|
|
||
|
|
if (document.getElementById("start").value == "Start") {
|
||
|
|
|
||
|
|
document.getElementById("start").value = "Stop";
|
||
|
|
document.getElementById('output').innerHTML = "";
|
||
|
|
|
||
|
|
console.log(queue);
|
||
|
|
|
||
|
|
myInterval = window.setInterval(function() {
|
||
|
|
paint(queue[index]);
|
||
|
|
index = index + 1;
|
||
|
|
if (index >= queue.length) {
|
||
|
|
window.clearInterval(myInterval);
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
}, period );
|
||
|
|
|
||
|
|
} else {
|
||
|
|
document.getElementById("start").value = "Start";
|
||
|
|
window.clearInterval(myInterval);
|
||
|
|
paint(MIN);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startTime(){
|
||
|
|
|
||
|
|
if (document.getElementById("startTime").value == "Just Send Time") {
|
||
|
|
|
||
|
|
document.getElementById("startTime").value = "Stop";
|
||
|
|
document.getElementById('output').innerHTML = "";
|
||
|
|
|
||
|
|
console.log(queue);
|
||
|
|
|
||
|
|
myInterval = window.setInterval(function() {
|
||
|
|
paint(queue[index]);
|
||
|
|
index = index + 1;
|
||
|
|
if (index >= queue.length) {
|
||
|
|
window.clearInterval(myInterval);
|
||
|
|
startTime();
|
||
|
|
}
|
||
|
|
}, period );
|
||
|
|
|
||
|
|
} else {
|
||
|
|
document.getElementById("startTime").value = "Just Send Time";
|
||
|
|
window.clearInterval(myInterval);
|
||
|
|
paint(MIN);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function INIT() {
|
||
|
|
queue.push(MAX, REPEAT);
|
||
|
|
ramp(levelNum);
|
||
|
|
queue.push(MIN, REPEAT, MIN, REPEAT);
|
||
|
|
}
|
||
|
|
|
||
|
|
function STX() {
|
||
|
|
outDigit(0);
|
||
|
|
outDigit(0);
|
||
|
|
outDigit(2);
|
||
|
|
}
|
||
|
|
|
||
|
|
function newLine() {
|
||
|
|
outDigit(0);
|
||
|
|
outDigit(1);
|
||
|
|
outDigit(2);
|
||
|
|
}
|
||
|
|
|
||
|
|
function ETX() {
|
||
|
|
outDigit(0);
|
||
|
|
outDigit(0);
|
||
|
|
outDigit(3);
|
||
|
|
}
|
||
|
|
|
||
|
|
function EOT() {
|
||
|
|
outDigit(0);
|
||
|
|
outDigit(0);
|
||
|
|
outDigit(4);
|
||
|
|
}
|
||
|
|
|
||
|
|
function load() {
|
||
|
|
|
||
|
|
queue = [];
|
||
|
|
payload = "";
|
||
|
|
checksum = 0;
|
||
|
|
index = 0;
|
||
|
|
|
||
|
|
INIT();
|
||
|
|
STX();
|
||
|
|
|
||
|
|
sendWord("auth\n");
|
||
|
|
sendWord(document.getElementById("SSID").value + "\n"); //We should validate text input here
|
||
|
|
sendWord(document.getElementById("PASS").value + "\n");
|
||
|
|
sendWord(document.getElementById("TOKEN").value + "\n");
|
||
|
|
sendWord(document.getElementById("INTERVAL").value + "\n");
|
||
|
|
|
||
|
|
ETX();
|
||
|
|
sendChecksum();
|
||
|
|
EOT();
|
||
|
|
|
||
|
|
start();
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadTime() {
|
||
|
|
|
||
|
|
queue = [];
|
||
|
|
payload = "";
|
||
|
|
checksum = 0;
|
||
|
|
index = 0;
|
||
|
|
|
||
|
|
INIT();
|
||
|
|
STX();
|
||
|
|
|
||
|
|
sendWord("time\n");
|
||
|
|
sendWord(Math.floor((new Date).getTime()/1000) + "\n");
|
||
|
|
|
||
|
|
ETX();
|
||
|
|
sendChecksum();
|
||
|
|
EOT();
|
||
|
|
|
||
|
|
startTime();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("epoch").value = Math.floor((new Date).getTime()/1000);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|