Version 2.3.0
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 19 KiB |
|
@ -1,120 +0,0 @@
|
|||
// Display order of devices. Tiles will be displayed in the order below,
|
||||
// any devices you don't want to see you can comment the ID. (with // e.g. `//"Solar_Heater",` )
|
||||
// If the device isn't listed below is will NOT be shown.
|
||||
// For a complete list returned from your particular aqualinkd instance
|
||||
// use the below URL and look at the ID value for each device.
|
||||
// http://aqualink.ip.address/?command=devices
|
||||
var devices = [
|
||||
"Filter_Pump",
|
||||
"Spa_Mode",
|
||||
"Aux_1",
|
||||
"Aux_2",
|
||||
"Aux_3",
|
||||
"Aux_4",
|
||||
"Aux_5",
|
||||
"Aux_6",
|
||||
"Aux_7",
|
||||
"Aux_B1",
|
||||
"Aux_B2",
|
||||
"Aux_B3",
|
||||
"Aux_B4",
|
||||
"Aux_B5",
|
||||
"Aux_B6",
|
||||
"Aux_B7",
|
||||
"Aux_B8",
|
||||
"Pool_Heater",
|
||||
"Spa_Heater",
|
||||
"SWG",
|
||||
//"SWG/Percent",
|
||||
"SWG/PPM",
|
||||
//"SWG/Boost",
|
||||
"Temperature/Air",
|
||||
"Temperature/Pool",
|
||||
"Temperature/Spa",
|
||||
"Pool_Water",
|
||||
"Spa_Water",
|
||||
"Freeze_Protect",
|
||||
"CHEM/pH",
|
||||
"CHEM/ORP"
|
||||
//"Solar_Heater",
|
||||
];
|
||||
|
||||
// This get's picked up by dynamic_config.js and used as mode 0
|
||||
var light_program = [
|
||||
"Voodoo Lounge - Show",
|
||||
"Blue Sea",
|
||||
"Royal Blue",
|
||||
"Afternoon Skies",
|
||||
"Aqua Green",
|
||||
"Emerald",
|
||||
"Cloud White",
|
||||
"Warm Red",
|
||||
"Flamingo",
|
||||
"Vivid Violet",
|
||||
"Sangria",
|
||||
"Twilight - Show",
|
||||
"Tranquility - Show",
|
||||
"Gemstone - Show",
|
||||
"USA - Show",
|
||||
"Mardi Gras - Show",
|
||||
"Cool Cabaret - Show"
|
||||
];
|
||||
|
||||
/*
|
||||
* BELOW IS NOT RELIVENT FOR simple.html or simple inteface
|
||||
*
|
||||
*/
|
||||
// Background image, delete or leave blank for solid color
|
||||
//var background_url = "http://192.168.144.224/snap.jpeg";
|
||||
var background_url='hk/background.jpg';
|
||||
//var background_url='';
|
||||
// Reload background image every X seconds.(useful if camera snapshot)
|
||||
// 0 means only load once when page loads.
|
||||
//var background_reload = 10;
|
||||
|
||||
// By default all Variable Speed Pumps will show RPM.
|
||||
// this will show GPM on VSP's that you can only set GPM (ie Jandy VF pumps)
|
||||
//var show_vsp_gpm=false;
|
||||
|
||||
// By default all Temperatures & Value tiles are off.
|
||||
// this will turn them on
|
||||
var turn_on_sensortiles = true;
|
||||
|
||||
// This will turn on/off the Spa Heater when you turn on/off Spa Mode.
|
||||
//var link_spa_and_spa_heater = true;
|
||||
|
||||
// Change the slider for timers
|
||||
var timer_slider_min = 0;
|
||||
//var timer_slider_max = 360;
|
||||
//var timer_slider_step = 10;
|
||||
var timer_slider_max = 120;
|
||||
var timer_slider_step = 1;
|
||||
|
||||
// Colors
|
||||
var body_background = "#EBEBEA";
|
||||
var body_text = "#000000";
|
||||
|
||||
var options_pane_background = "#F5F5F5";
|
||||
var options_pane_bordercolor = "#7C7C7C";
|
||||
var options_slider_highlight = "#2196F3";
|
||||
var options_slider_lowlight = "#D3D3D3";
|
||||
|
||||
var head_background = "#2B6A8F";
|
||||
var head_text = "#FFFFFF)";
|
||||
var error_background = "#8F2B2B";
|
||||
|
||||
var tile_background = "#DCDCDC";
|
||||
var tile_text = "#6E6E6E";
|
||||
var tile_on_background = "#FFFFFF";
|
||||
var tile_on_text = "#000000";
|
||||
var tile_status_text = "#575757";
|
||||
|
||||
// Dark colors
|
||||
// var body_background = "#000000";
|
||||
// var tile_background = "#646464";
|
||||
// var tile_text = "#B9B9B9";
|
||||
// var tile_status_text = "#B2B2B2";
|
||||
// var head_background = "#000D53";
|
||||
|
||||
// REMOVE THIS.
|
||||
//document.writeln("<script type='text/javascript' src='extra/extra.js'></script>");
|
|
@ -1,3 +0,0 @@
|
|||
<html>
|
||||
Hello
|
||||
</html>
|
|
@ -1,160 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<meta http-equiv='Content-Type' content='text/html; charset=windows-1252'>
|
||||
<title>AqualinkD DEBUG</title>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
<meta name='mobile-web-app-capable' content='yes'>
|
||||
<meta name='apple-mobile-web-app-capable' content='yes'>
|
||||
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
|
||||
<link href='aqualinkd.png' rel='apple-touch-icon'>
|
||||
<link href='aqualinkd.png' rel='icon'>
|
||||
</head>
|
||||
<style>
|
||||
/*
|
||||
******************************************************************************
|
||||
Button style taken from https://github.com/ubuwaits/css3-buttons */
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button.blue-pill {
|
||||
background-color: #a5b8da;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3));
|
||||
background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
|
||||
background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
|
||||
background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
|
||||
background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
|
||||
background-image: linear-gradient(top, #a5b8da, #7089b3);
|
||||
border-top: 1px solid #758fba;
|
||||
border-right: 1px solid #6c84ab;
|
||||
border-bottom: 1px solid #5c6f91;
|
||||
border-left: 1px solid #6c84ab;
|
||||
border-radius: 18px;
|
||||
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
|
||||
box-shadow: inset 0 1px 0 0 #aec3e5;
|
||||
color: #fff;
|
||||
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 1px #64799e;
|
||||
text-transform: uppercase;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
button.blue-pill:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type='text/javascript'>
|
||||
var _poller;
|
||||
|
||||
function action(element) {
|
||||
var query;
|
||||
|
||||
if (element.id == "start") {
|
||||
document.getElementById('messages').innerHTML = "Debug Starting!"
|
||||
} else if (element.id == "serialstart") {
|
||||
document.getElementById('messages').innerHTML = "Serial Debug Starting!"
|
||||
} else if (element.id == "stop") {
|
||||
document.getElementById('messages').innerHTML = "Debug Stopping!"
|
||||
} else if (element.id == "clean") {
|
||||
document.getElementById('messages').innerHTML = "Cleaning Debug File!"
|
||||
} else if (element.id == "download") {
|
||||
//window.location = location.href + '?command=debug&value=download';
|
||||
window.location = '/api/debug/download';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
var http = new XMLHttpRequest();
|
||||
//http.open('GET', location.href + '?command=debug&value='+element.id);
|
||||
http.open('GET', '/api/debug/'+element.id);
|
||||
http.send(null);
|
||||
|
||||
setTimeout(function () {
|
||||
forceupdate();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function forceupdate() {
|
||||
clearTimeout(_poller);
|
||||
update();
|
||||
}
|
||||
|
||||
function update() {
|
||||
var http = new XMLHttpRequest();
|
||||
if (http) {
|
||||
http.onreadystatechange = function () {
|
||||
if (http.readyState === 4) {
|
||||
if (http.status == 200 && http.status < 300) {
|
||||
var data = JSON.parse(http.responseText);
|
||||
//console.log(data.iLevel + " : " + data.sLevel);
|
||||
if ( data.iLevel >= 7 ) {
|
||||
document.getElementById('start').disabled = true;
|
||||
document.getElementById('serialstart').disabled = true;
|
||||
document.getElementById('stop').disabled = false;
|
||||
if ( data.iLevel >= 8 )
|
||||
document.getElementById('messages').innerHTML = "Serial debug Running!"
|
||||
else
|
||||
document.getElementById('messages').innerHTML = "Debug Running!"
|
||||
} else if ( data.iLevel < 7 ) {
|
||||
document.getElementById('start').disabled = false;
|
||||
document.getElementById('serialstart').disabled = false;
|
||||
document.getElementById('stop').disabled = true;
|
||||
document.getElementById('messages').innerHTML = "Not debugging, Log level = "+data.sLevel;
|
||||
}
|
||||
if (data.logReady == "true") {
|
||||
document.getElementById('download').disabled = false;
|
||||
if (document.getElementById('stop').disabled == true) {
|
||||
document.getElementById('clean').disabled = false;
|
||||
} else {
|
||||
document.getElementById('clean').disabled = true;
|
||||
}
|
||||
} else {
|
||||
document.getElementById('download').disabled = true;
|
||||
document.getElementById('clean').disabled = true;
|
||||
}
|
||||
}
|
||||
else if (http.status >= 400 || http.status == 0) {
|
||||
document.getElementById('messages').innerHTML = 'Error connecting to AqualinkD';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//http.open('GET', location.href + '?command=debug&value=status');
|
||||
http.open('GET', '/api/debug/status');
|
||||
http.send(null);
|
||||
_poller = setTimeout(update, 5000);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body onload="update();">
|
||||
<table cellpadding="10" border="0" align="center">
|
||||
<tr><td colspan="3" align="center">
|
||||
<div id="messages"> </div>
|
||||
</td></tr>
|
||||
<tr><td align="center">
|
||||
<button class="blue-pill" id="start" type="button" onclick='action(this);'>Start Debug</button>
|
||||
</td><td align="center">
|
||||
<button class="blue-pill" id="serialstart" type="button" onclick='action(this);'>Start Serial Debug</button>
|
||||
</td><td align="center">
|
||||
<button class="blue-pill" id="stop" type="button" onclick='action(this);'>Stop Debug</button>
|
||||
</td></tr>
|
||||
<tr><td colspan="3" align="center">
|
||||
<table cellpadding="10" border="0" align="center">
|
||||
<tr><td>
|
||||
<button class="blue-pill" id="download" type="button" onclick='action(this);'>Download Debug File</button>
|
||||
</td><td>
|
||||
<button class="blue-pill" id="clean" type="button" onclick='action(this);'>Clean Debug File</button>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
Before Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 22 KiB |
|
@ -1,223 +0,0 @@
|
|||
|
||||
|
||||
/*
|
||||
// put in config.js
|
||||
if (navigator.userAgent.search('Android') != -1 || navigator.userAgent.search('Nook') != -1 ) {
|
||||
document.writeln("<script type='text/javascript' src='extra/extra.js'></script>");
|
||||
}
|
||||
*/
|
||||
|
||||
GroupSwitchType = -99;
|
||||
GroupLightType = -98;
|
||||
GroupAudioType = -97;
|
||||
|
||||
setTimeout(function() {
|
||||
//extra_domoticz('get', 'type=devices&rid=12'); // Absolute radio poller
|
||||
//extra_domoticz('get', 'type=devices&rid=281'); // Audiotron Switch
|
||||
//extra_domoticz('get', 'type=devices&rid=279'); // Audiotron Selector
|
||||
//extra_domoticz('get', 'type=scenes', 8, GroupAudioType);
|
||||
extra_domoticz('get', 'type=devices&rid=332'); // Patio audio virtual switch
|
||||
extra_domoticz('get', 'type=devices&rid=147');
|
||||
extra_domoticz('get', 'type=devices&rid=148');
|
||||
//extra_domoticz('get', 'type=devices&rid=21'); // Patio String Lights
|
||||
//extra_domoticz('get', 'type=devices&rid=55'); // Patio String Lights #2
|
||||
//extra_domoticz('get', 'type=devices&rid=193');
|
||||
extra_domoticz('get', 'type=scenes', 2, GroupLightType);
|
||||
extra_domoticz('get', 'type=scenes', 6, GroupLightType);
|
||||
}, 1000);
|
||||
|
||||
function switchTileState_extra(id, idx, type) {
|
||||
// console.log("Click "+id+" "+idx);
|
||||
state = (document.getElementById(id).getAttribute('status') == 'off') ? 'on' : 'off';
|
||||
var switchval;
|
||||
// console.log("Status "+state);
|
||||
|
||||
if (type == 19) // Reverse on off for doors
|
||||
switchval = ((state == 'on') ? 'Off' : 'On');
|
||||
else
|
||||
switchval = ((state == 'on') ? 'On' : 'Off');
|
||||
|
||||
if (type == GroupSwitchType || type == GroupLightType || type == GroupAudioType)
|
||||
extra_domoticz('set', 'type=command¶m=switchscene&idx=' + idx + '&switchcmd=' + switchval);
|
||||
else if (type == 18) // selectorswitch
|
||||
//http://trident/json.htm?type=command¶m=switchlight&idx=279&switchcmd=Set%20Level&level=10
|
||||
extra_domoticz('set', 'type=command¶m=switchlight&idx=' + idx + '&switchcmd=Set%20Level&level=' + ((switchval=='On') ? 10 : 0) );
|
||||
else
|
||||
extra_domoticz('set', 'type=command¶m=switchlight&idx=' + idx + '&switchcmd=' + switchval);
|
||||
|
||||
setTileOn(id, state);
|
||||
}
|
||||
|
||||
function getLevelName(levelNames, levelIndex) {
|
||||
var names = decode64(levelNames).split("|");
|
||||
return names[levelIndex / 10];
|
||||
}
|
||||
|
||||
function extra_updateDevice(data) {
|
||||
//console.log(data);
|
||||
|
||||
var tile
|
||||
// console.log(data.Name+" - hw "+data.HardwareTypeVal+" - sw "+data.SwitchTypeVal);
|
||||
if ((tile = document.getElementById(data.ID)) == null) {
|
||||
// console.log(data.Name+" - create");
|
||||
switch (data.SwitchTypeVal) {
|
||||
case 0: // switch
|
||||
case GroupSwitchType: // Group switch
|
||||
if ( data.idx == "332" ) // If music switch change icon
|
||||
add_tile(data.ID, data.Name, data.Status, 'switch', 'switch', 'extra/switch_8-off.png', 'extra/switch_8-on.png');
|
||||
else
|
||||
add_tile(data.ID, data.Name, data.Status, 'switch', 'switch', 'extra/switch_0-off.png', 'extra/switch_0-on.png');
|
||||
break;
|
||||
case 21: // light
|
||||
case 7: // dimmable light
|
||||
case GroupLightType: // Group switch
|
||||
add_tile(data.ID, data.Name, data.Status, 'switch', 'switch', 'extra/switch_7-off.png', 'extra/switch_7-on.png');
|
||||
break;
|
||||
case GroupAudioType:
|
||||
add_tile(data.ID, data.Name, data.Status, 'switch', 'switch', 'extra/switch_8-off.png', 'extra/switch_8-on.png');
|
||||
break;
|
||||
case 19:
|
||||
add_tile(data.ID, data.Name, data.Status, 'switch', 'switch', 'extra/switch_19-off.png', 'extra/switch_19-on.png');
|
||||
break;
|
||||
case 18: // Selector switch
|
||||
add_tile(data.ID, data.Name, data.Status, 'switch', 'switch', 'extra/switch_0-off.png', 'extra/switch_0-on.png');
|
||||
break;
|
||||
case undefined:
|
||||
if (data.HardwareTypeVal == 15) {
|
||||
add_tile(data.ID, data.Name, 'off', 'value', 'temperature');
|
||||
}
|
||||
break;
|
||||
}
|
||||
subdiv = document.getElementById(data.ID);
|
||||
// subdiv.setAttribute('id', id + '_status');
|
||||
subdiv.setAttribute('onclick', "switchTileState_extra('" + data.ID + "', '" + data.idx + "', '" + data.SwitchTypeVal + "')");
|
||||
tile = document.getElementById(data.ID);
|
||||
} else {
|
||||
//console.log("ID exists "+data.ID);
|
||||
}
|
||||
|
||||
status = tile.getAttribute('status');
|
||||
//console.log(data.Name+" status: "+status+" | data.status: "+data.Status);
|
||||
switch (data.SwitchTypeVal) {
|
||||
//case 0:
|
||||
case 7:
|
||||
//console.log(data.Name+" status: "+status+" | data.status: "+data.Status);
|
||||
if (data.Status.search('%') >= 0) // is status is 97% rather than on, don't change tile status. This stops flashing back on once turned off.
|
||||
break;
|
||||
case 0:
|
||||
case 21:
|
||||
case GroupSwitchType: // Group switch
|
||||
case GroupLightType: // Group light
|
||||
case GroupAudioType:
|
||||
if (status != ((data.Status == 'Off') ? 'off' : 'on')) {
|
||||
setTileOn(data.ID, ((data.Status == 'Off') ? 'off' : 'on'), null);
|
||||
}
|
||||
break;
|
||||
case 18: // Selector switch
|
||||
if (status != ((data.Status == 'Off') ? 'off' : 'on')) {
|
||||
setTileOn(data.ID, ((data.Status == 'Off') ? 'off' : 'on'), null);
|
||||
}
|
||||
level = getLevelName(data.LevelNames, data.Level);
|
||||
if (level != document.getElementById(data.ID + '_status').innerHTML) {
|
||||
document.getElementById(data.ID + '_status').innerHTML = level;
|
||||
}
|
||||
break;
|
||||
case 19:
|
||||
if (status != ((data.Status == 'Locked') ? 'off' : 'on')) {
|
||||
setTileOn(data.ID, ((data.Status == 'Locked') ? 'off' : 'on'), null);
|
||||
document.getElementById(data.ID + '_status').innerHTML = ((data.Data == 'Locked') ? 'Closed' : 'Open');
|
||||
}
|
||||
break;
|
||||
case undefined:
|
||||
if (data.HardwareTypeVal == 15) {
|
||||
setTileValue(data.ID, parseFloat(data.Data).toString());
|
||||
}
|
||||
// Check "Type" : "Group" = data.Type = "Group"
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function extra_domoticz(type, data, group_idx=0, group_type=0) {
|
||||
var http = new XMLHttpRequest();
|
||||
if (http) {
|
||||
http.onreadystatechange = function() {
|
||||
if (http.readyState === 4) {
|
||||
if (http.status == 200 && http.status < 300) {
|
||||
var data = JSON.parse(http.responseText);
|
||||
if (data.title == 'Devices')
|
||||
extra_updateDevice(data.result[0]);
|
||||
if (data.title == 'Scenes') { // this is Group
|
||||
for(var i = 0; i <= data.result.length; i++) {
|
||||
if(data.result[i].idx == group_idx) {
|
||||
if (group_type == 0)
|
||||
data.result[i].SwitchTypeVal = GroupSwitchType;
|
||||
else
|
||||
data.result[i].SwitchTypeVal = group_type;
|
||||
|
||||
data.result[i].ID = "Group_"+group_idx;
|
||||
extra_updateDevice(data.result[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (http.status >= 400 || http.status == 0) {
|
||||
//document.getElementById('message-text').innerHTML = 'Error connecting to server';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
http.open('GET', 'http://trident/json.htm?' + data, true);
|
||||
http.send(null);
|
||||
if (type == 'get') {
|
||||
_poller = setTimeout(function() { extra_domoticz('get', data, group_idx, group_type); }, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function decode64(input) {
|
||||
|
||||
var keyStr = "ABCDEFGHIJKLMNOP" +
|
||||
"QRSTUVWXYZabcdef" +
|
||||
"ghijklmnopqrstuv" +
|
||||
"wxyz0123456789+/" +
|
||||
"=";
|
||||
|
||||
var output = "";
|
||||
var chr1, chr2, chr3 = "";
|
||||
var enc1, enc2, enc3, enc4 = "";
|
||||
var i = 0;
|
||||
|
||||
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
|
||||
var base64test = /[^A-Za-z0-9\+\/\=]/g;
|
||||
if (base64test.exec(input)) {
|
||||
alert("There were invalid base64 characters in the input text.\n" +
|
||||
"Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
|
||||
"Expect errors in decoding.");
|
||||
}
|
||||
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
|
||||
|
||||
do {
|
||||
enc1 = keyStr.indexOf(input.charAt(i++));
|
||||
enc2 = keyStr.indexOf(input.charAt(i++));
|
||||
enc3 = keyStr.indexOf(input.charAt(i++));
|
||||
enc4 = keyStr.indexOf(input.charAt(i++));
|
||||
chr1 = (enc1 << 2) | (enc2 >> 4);
|
||||
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
|
||||
chr3 = ((enc3 & 3) << 6) | enc4;
|
||||
output = output + String.fromCharCode(chr1);
|
||||
|
||||
if (enc3 != 64) {
|
||||
output = output + String.fromCharCode(chr2);
|
||||
}
|
||||
if (enc4 != 64) {
|
||||
output = output + String.fromCharCode(chr3);
|
||||
}
|
||||
chr1 = chr2 = chr3 = "";
|
||||
enc1 = enc2 = enc3 = enc4 = "";
|
||||
} while (i < input.length);
|
||||
|
||||
return decodeURI(output);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 886 B |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 784 B |
Before Width: | Height: | Size: 518 B |
Before Width: | Height: | Size: 625 B |
Before Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 19 KiB |
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
|
@ -1 +0,0 @@
|
|||
switch-off.png
|
|
@ -1 +0,0 @@
|
|||
switch-on.png
|
Before Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 846 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 19 KiB |
|
@ -1 +0,0 @@
|
|||
controller.html
|
|
@ -1,196 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>Feakes Inc, Aqualink RS control daemon</title>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
||||
<!--<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />-->
|
||||
<!--<meta name="viewport" content="width=device-width, user-scalable=yes, width=800"/>-->
|
||||
<!--<meta name="viewport" content="width=device-width, user-scalable=yes"/>-->
|
||||
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
|
||||
<!--<link href="aqualinkd.png" rel="apple-touch-icon" sizes="180x180" />-->
|
||||
<!--<link href="aqualinkd.png" rel="icon" sizes="128x128" />-->
|
||||
<link href="aqualinkd.png" rel="apple-touch-icon">
|
||||
<link href="aqualinkd.png" rel="icon">
|
||||
<link rel="stylesheet" href="css/small_ff.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body ontouchmove="BlockMove(event);" style="background-color:black;">
|
||||
|
||||
<div id="main_div">
|
||||
|
||||
<div id="header_div" class='bgimg'>
|
||||
<div id="line1">
|
||||
<div id="title_div">Aqualink RS8</div>
|
||||
<div id="air_temp_title_div">Air Temp:</div>
|
||||
<div id="air_temp">000 F</div>
|
||||
<div id="battery_ok_div" class="battery_image_div"><img id="battery_ok" src="" style="visibility:hidden"></div>
|
||||
<div id="battery_low_div" class="battery_image_div"><img id="battery_low" src="" style="visibility:hidden"></div>
|
||||
<div id="battery_blank_div" class="battery_image_div"><img id="battery_blank" src=""></div>
|
||||
</div>
|
||||
<div id="line2">
|
||||
<div id="net_off_div" class="net_activity_div"><img id="net_off" src="" style="visibility:visible"></div>
|
||||
<div id="net_green_div" class="net_activity_div"><img id="net_green" src="" style="visibility:hidden"></div>
|
||||
<div id="net_yellow_div" class="net_activity_div"><img id="net_yellow" src="" style="visibility:hidden"></div>
|
||||
<div id="net_red_div" class="net_activity_div"><img id="net_red" src="" style="visibility:hidden"></div>
|
||||
<div id="messages_div" align="center"></div>
|
||||
<div id="date_time">00:00 PM 00/00/00 DDD</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="body_div" class="bgimg_body">
|
||||
<div id="pool_temp_div" class="body_sub_div">
|
||||
<div id="pool_temp_title" class="temp_title_div">Pool:</div>
|
||||
<div id="pool_temp" class="temp_val_div">000 F</div>
|
||||
<div class="control_button_div">
|
||||
<div class="led_button_div" id="filter_pump">
|
||||
<div class="led_div"><img id="Filter_Pump_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Filter_Pump_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Filter_Pump_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Filter_Pump" class='button black button_div' type="button" onclick="queue_command('Filter_Pump')">Filter Pump</div>
|
||||
</div>
|
||||
<div class="led_button_div" id="pool_htr">
|
||||
<div class="led_div"><img id="Pool_Heater_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Pool_Heater_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Pool_Heater_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Pool_Heater" class='button black button_div' type="button" onclick="queue_command('Pool_Heater')">Heater</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pool_htr_set_pnt" class="set_pnt_val_div">000 F</div>
|
||||
<div class="set_pnt_button_div">
|
||||
<div class='button medium black set_pnt_button' type="button" onclick="incr_pool_htr('+')">+</div>
|
||||
<div class='button medium black set_pnt_button' type="button" onclick="incr_pool_htr('-')">-</div>
|
||||
</div>
|
||||
<div class="set_button_div"><div class='button black' type="button" onclick="set_temperature('POOL_HTR')">Set</div></div>
|
||||
</div>
|
||||
<div id="spa_temp_div" class="body_sub_div">
|
||||
<div id="spa_temp_title" class="temp_title_div">Spa:</div>
|
||||
<div id="spa_temp" class="temp_val_div">000 F</div>
|
||||
<div class="control_button_div">
|
||||
<div class="led_button_div" id="spa_mode">
|
||||
<div class="led_div"><img id="Spa_Mode_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Spa_Mode_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Spa_Mode_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Spa_Mode" class="button black button_div" type="button" onclick="queue_command('Spa_Mode')">Spa Mode</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="led_button_div" id="aux2">
|
||||
<div class="led_div"><img id="aux2_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="aux2_on_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Aux_2" class="button black button_div" type="button" onclick="queue_command('Aux_3')">Aux 2</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="led_button_div" id="aux3">
|
||||
<div class="led_div"><img id="Aux_3_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Aux_3_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Aux_3_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Aux_3" class="button black button_div" type="button" onclick="queue_command('Aux_3')">Aux 3</div>
|
||||
</div>
|
||||
<div class="led_button_div" id="pool_htr">
|
||||
<div class="led_div"><img id="Spa_Heater_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Spa_Heater_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Spa_Heater_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Spa_Heater" class="button black button_div" type="button" onclick="queue_command('Spa_Heater')">Heater</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spa_htr_set_pnt" class="set_pnt_val_div">000 F</div>
|
||||
<div class="set_pnt_button_div">
|
||||
<div class='button medium black set_pnt_button' type="button" onclick="incr_spa_htr('+')">+</div>
|
||||
<div class='button medium black set_pnt_button' type="button" onclick="incr_spa_htr('-')">-</div>
|
||||
</div>
|
||||
<div class="set_button_div"><div class='button black' type="button" onclick="set_temperature('SPA_HTR')">Set</div></div>
|
||||
</div>
|
||||
|
||||
<div id="solar_htr_div" class="body_sub_div">
|
||||
<!--
|
||||
<div class="solar_led_div"><img id="Solar_Heater_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="solar_led_div"><img id="Solar_Heater_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="solar_led_div"><img id="Solar_Heater_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Solar_Heater" onclick="queue_command('Solar_Heater')" class="button black" type="button">Solar Heater</div>
|
||||
-->
|
||||
<div class="select_pl_div">
|
||||
<select id="Light_Mode" class="select_pl_dd button black" onchange="set_light_mode(this.options[this.selectedIndex].value)">
|
||||
<option value="0">Pool Light Program</option>
|
||||
<option value="1">Voodoo Lounge - Show</option>
|
||||
<option value="2">Blue Sea</option>
|
||||
<option value="3">Royal Blue</option>
|
||||
<option value="4">Afternoon Skies</option>
|
||||
<option value="5">Aqua Green</option>
|
||||
<option value="6">Emerald</option>
|
||||
<option value="7">Cloud White</option>
|
||||
<option value="8">Warm Red</option>
|
||||
<option value="9">Flamingo</option>
|
||||
<option value="10">Vivid Violet</option>
|
||||
<option value="11">Sangria</option>
|
||||
<option value="12">Twilight - Show</option>
|
||||
<option value="13">Tranquility - Show</option>
|
||||
<option value="14">Gemstone - Show</option>
|
||||
<option value="15">USA - Show</option>
|
||||
<option value="16">Mardi Gras - Show</option>
|
||||
<option value="17">Cool Cabaret - Show</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="frz_protect_div" class="body_sub_div">
|
||||
<div id="frz_protect_title_div">Freeze Protection:</div>
|
||||
<div id="frz_protect_set_pnt">000 F</div>
|
||||
<div id="fp_set_pnt_button_div">
|
||||
<div class='button medium black set_pnt_button' type="button" onclick="incr_frz_protect('+')">+</div>
|
||||
<div class='button medium black set_pnt_button' type="button" onclick="incr_frz_protect('-')">-</div>
|
||||
</div>
|
||||
<div id="fp_set_button_div"><div class='button black' type="button" onclick="set_temperature('FRZ_PROTECT')">Set</div></div>
|
||||
</div>
|
||||
<div id="leds_div" class="body_sub_div">
|
||||
<div id="accessory_title" class="temp_title_div">Accessories:</div>
|
||||
<div class="control_button_div">
|
||||
<div class="led_button_div" id="aux1">
|
||||
<div class="led_div"><img id="Aux_1_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Aux_1_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Aux_1_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Aux_1" class="button black button_div" type="button" onclick="queue_command('Aux_1')">Aux 1</div>
|
||||
</div>
|
||||
<div class="led_button_div" id="aux2">
|
||||
<div class="led_div"><img id="Aux_2_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Aux_2_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Aux_2_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Aux_2" class="button black button_div" type="button" onclick="queue_command('Aux_2')">Aux 2</div>
|
||||
</div>
|
||||
<div class="led_button_div" id="aux4">
|
||||
<div class="led_div"><img id="Aux_4_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Aux_4_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Aux_4_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Aux_4" class="button black button_div" type="button" onclick="queue_command('Aux_4')">Aux 4</div>
|
||||
</div>
|
||||
<div class="led_button_div" id="aux5">
|
||||
<div class="led_div"><img id="Aux_5_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Aux_5_on_status" src="" style="visibility:hidden"></div>
|
||||
<div class="led_div"><img id="Aux_5_en_status" src="" style="visibility:hidden"></div>
|
||||
<div id="Aux_5" class="button black button_div" type="button" onclick="queue_command('Aux_5')">Aux 5</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="led_button_div" id="aux6">
|
||||
<div class="led_div"><img id="Aux_6_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Aux_6_on_status" src="" style="visibility:hidden"></div>
|
||||
<div id="aux6_button" class="button black button_div" type="button" onclick="queue_command('KEY_AUX6')">Aux 6</div>
|
||||
</div>
|
||||
<div class="led_button_div" id="aux7">
|
||||
<div class="led_div"><img id="Aux_7_off_status" src="" style="visibility:visible"></div>
|
||||
<div class="led_div"><img id="Aux_7_on_status" src="" style="visibility:hidden"></div>
|
||||
<div id="aux7_button" class="button black button_div" type="button" onclick="queue_command('KEY_AUX7')">Aux 7</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer_div" class="bgimg">
|
||||
</div><!-- /footer -->
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
<script src="js/aqualink.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,166 +0,0 @@
|
|||
|
||||
/* portrait mode (default) */
|
||||
|
||||
@media all and (orientation:portrait) {
|
||||
|
||||
#main_div{width:540px;height:550px;margin-left:0;padding:0px;}
|
||||
#body_div{position:relative;height:450px;}
|
||||
#header_div{position:relative;height:70px;}
|
||||
#footer_div{height:45px;}
|
||||
#title_div{position:absolute;top:0px;left:0px;padding:5px;}
|
||||
#air_temp_title_div{position:absolute;top:0px;right:120px;font-size:150%;}
|
||||
#air_temp{position:absolute;top:0px;right:45px;font-size:150%;}
|
||||
#messages_div{position:absolute;top:30px;left:5px;width:500px;font-size:100%;}
|
||||
#date_time{position:absolute;bottom:2px;right:5px;}
|
||||
|
||||
#pool_temp_div{position:absolute;top:5px;height:190px;width:250px;left:10px;}
|
||||
#spa_temp_div{position:absolute;top:5px;height:280px;width:250px;left:270px;}
|
||||
#leds_div{position:absolute;top:205px;height:230px;width:250px;left:10px}
|
||||
#frz_protect_div{position:absolute;top:295px;height:85px;width:250px;left:270px;}
|
||||
#solar_htr_div{position:absolute;top:390px;height:45px;width:250px;left:270px;}
|
||||
#Solar_Heater{position:absolute;bottom:5px;right:10px;width:140px;}
|
||||
#frz_protect_title_div{position:absolute;top:0px;height:50px;left:5px;font-size:125%;}
|
||||
#frz_protect_set_pnt{position:absolute;bottom:10px;height:50px;right:60px;font-size:250%;}
|
||||
#fp_set_pnt_button_div{position:absolute;bottom:20px;height:50px;right:45px;width:10px;}
|
||||
#fp_set_button_div{position:absolute;bottom:3px;left:3px;width:65px;}
|
||||
}
|
||||
/*@media only screen and (orientation:portrait){*/
|
||||
|
||||
/*@media only screen and (orientation:landscape){*/
|
||||
@media all and (orientation:landscape){
|
||||
|
||||
#main_div{width:800px;height:420px;margin-left:0;padding:0px;}
|
||||
#header_div{position:relative;height:70px;}
|
||||
#footer_div{height:45px;}
|
||||
#title_div{position:absolute;top:0;left:0;padding:5px;}
|
||||
#air_temp_title_div{position:absolute;top:0;right:215px;font-size:200%;}
|
||||
#air_temp{position:absolute;top:0;right:75px;font-size:250%;}
|
||||
#messages_div{position:absolute;bottom:2px;left:35px;width:570px;}
|
||||
#date_time{position:absolute;bottom:2px;right:5px;}
|
||||
#body_div{position:relative;height:295px;}
|
||||
#leds_div{position:absolute;top:5px;right:10px;height:230px;width:245px;}
|
||||
#pool_temp_div{position:absolute;top:5px;height:190px;width:250px;left:10px;}
|
||||
#spa_temp_div{position:absolute;top:5px;height:280px;width:250px;left:275px;}
|
||||
#solar_htr_div{position:absolute;bottom:3px;height:45px;width:245px;right:10px;}
|
||||
/*#solar_button_div{position:absolute;bottom:5px;right:10px;width:140px;}*/
|
||||
#Solar_Heater{position:absolute;bottom:5px;right:10px;width:140px;}
|
||||
#frz_protect_div{position:absolute;bottom:5px;height:85px;width:250px;left:10px;}
|
||||
#frz_protect_title_div{position:absolute;top:0px;height:50px;left:5px;font-size:125%;}
|
||||
#frz_protect_set_pnt{position:absolute;bottom:10px;height:50px;right:60px;font-size:250%;}
|
||||
#fp_set_pnt_button_div{position:absolute;bottom:20px;height:50px;right:45px;width:10px;}
|
||||
#fp_set_button_div{position:absolute;bottom:3px;left:3px;width:65px;}
|
||||
}
|
||||
|
||||
|
||||
.battery_image_div{position:absolute;top:5px;right:5px;width:30px;}
|
||||
.net_activity_div{position:absolute;bottom:2px;left:0;}
|
||||
.led_button_div{position:relative;height:37px;width:240px}
|
||||
.led_div{position:absolute;top:2px;left:15px;padding:0;}
|
||||
.button_div{position:absolute;right:0px;width:140px;}
|
||||
.control_button_div{position:absolute;top:40px;height:50px;width:245px;right:5px;}
|
||||
/*
|
||||
.htr_led_div{position:absolute;top:55px;left:15px;padding:0;}
|
||||
.htr_button_div{position:absolute;top:55px;height:45px;right:55px;width:110px;padding:0;margin:0px auto;}
|
||||
*/
|
||||
.body_sub_div{border:2px solid #a1a1a1;border-radius:15px;}
|
||||
.temp_title_div{position:absolute;top:0px;height:50px;left:5px;font-size:175%;}
|
||||
.temp_val_div{position:absolute;top:0px;height:55px;right:5px;font-size:225%;}
|
||||
.set_pnt_val_div{position:absolute;bottom:15px;height:50px;right:60px;font-size:250%;}
|
||||
.set_pnt_button_div{position:absolute;bottom:5px;height:65px;right:5px;width:50px;padding:0;}
|
||||
.set_pnt_button{position:relative;right:0px;width:5px;}
|
||||
.set_button_div{position:absolute;bottom:5px;left:5px;width:65px;}
|
||||
.solar_led_div{position:absolute;top:8px;left:10px;}
|
||||
|
||||
.select_pl_div{position:absolute;top:8px;left:10px;height:33px;width:227px;}
|
||||
.select_pl_dd{width:227px; height:33px;}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font: 16px/100% Arial, Helvetica, sans-serif;
|
||||
padding: .50em 1.5em;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
|
||||
-webkit-border-radius: .5em;
|
||||
-moz-border-radius: .5em;
|
||||
border-radius: .5em;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.button:active {
|
||||
top: 1px;
|
||||
}
|
||||
/*
|
||||
.bigrounded {
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
}
|
||||
*/
|
||||
.medium {
|
||||
font-size: 14px;
|
||||
padding: .8em 1.5em .42em;
|
||||
}
|
||||
/*
|
||||
.small {
|
||||
font-size: 11px;
|
||||
padding: .2em 1em .275em;
|
||||
}
|
||||
*/
|
||||
.black {
|
||||
color: #d7d7d7;
|
||||
border: solid 1px #333;
|
||||
background: #333;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
|
||||
background: -moz-linear-gradient(top, #666, #000);
|
||||
}
|
||||
.black:hover {
|
||||
background: #000;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
|
||||
background: -moz-linear-gradient(top, #444, #000);
|
||||
}
|
||||
.black:active {
|
||||
color: #666;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
|
||||
background: -moz-linear-gradient(top, #000, #444);
|
||||
}
|
||||
.bgimg {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.15, rgb(50, 50, 50)), color-stop(0.58, rgb(0, 0, 0)), color-stop(0.79, rgb(0, 0, 0)));
|
||||
background-image: -moz-linear-gradient(top, #444, #000);
|
||||
}
|
||||
.bgimg_body {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.15, rgb(75, 75, 75)), color-stop(0.58, rgb(50, 50, 50)), color-stop(0.79, rgb(50, 50, 50)));
|
||||
background-image: -moz-linear-gradient(top, #666, #333);
|
||||
}
|
||||
/*
|
||||
.debug_border {
|
||||
border: 2px solid #a1a1a1;
|
||||
border-radius: 15px;
|
||||
}
|
||||
*/
|
||||
div {
|
||||
border-width: 0px;
|
||||
border-style: solid;
|
||||
padding: 0px;
|
||||
}
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #f4f4f4;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 3.2 KiB |
|
@ -1 +0,0 @@
|
|||
controller.html
|
|
@ -1,535 +0,0 @@
|
|||
|
||||
if(window.innerHeight > window.innerWidth){
|
||||
orientation("portrait");
|
||||
} else {
|
||||
orientation("landscape");
|
||||
}
|
||||
|
||||
// Listen for orientation changes
|
||||
window.addEventListener("orientationchange", function() {
|
||||
// Announce the new orientation number
|
||||
//alert(window.orientation);
|
||||
if(window.innerHeight > window.innerWidth)
|
||||
orientation("portrait");
|
||||
else
|
||||
orientation("landscape");
|
||||
|
||||
}, false);
|
||||
|
||||
function orientation(or){
|
||||
//alert(or);
|
||||
viewport = document.querySelector("meta[name=viewport]");
|
||||
if (or == "landscape") {
|
||||
viewport.setAttribute('content', 'content="width=device-width, user-scalable=yes, width=800"');
|
||||
} else {
|
||||
viewport.setAttribute('content', 'content="width=device-width, user-scalable=yes, width=540"');
|
||||
}
|
||||
}
|
||||
|
||||
// aqualink.js
|
||||
|
||||
function BlockMove(event) {
|
||||
// Tell Safari not to move the window.
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
// Preload the images.
|
||||
var delay = 10;
|
||||
if (document.images) {
|
||||
//setTimeout(get_batt_ok_img, delay);
|
||||
setTimeout(loadImages, delay);
|
||||
}
|
||||
|
||||
function loadImages() {
|
||||
document.getElementById('battery_ok').src = "images/battery_ok.png";
|
||||
document.getElementById('battery_low').src = "images/battery_low.png";
|
||||
document.getElementById('battery_blank').src = "images/battery_blank.png";
|
||||
|
||||
for (var obj in aqualink_data.leds) {
|
||||
setButtonElementImage(obj+'_on_status', "images/led_on.png");
|
||||
setButtonElementImage(obj+'_off_status', "images/led_off.png");
|
||||
setButtonElementImage(obj+'_en_status', "images/led_enabled.png");
|
||||
}
|
||||
|
||||
document.getElementById('net_off').src = "images/net_off.png";
|
||||
document.getElementById('net_yellow').src = "images/net_yellow.png";
|
||||
document.getElementById('net_green').src = "images/net_green.png";
|
||||
document.getElementById('net_red').src = "images/net_red.png";
|
||||
}
|
||||
|
||||
|
||||
//function set_button_led_images
|
||||
function setButtonElementImage(element, image){
|
||||
el = document.getElementById(element);
|
||||
if (el != null) {
|
||||
el.src = image;
|
||||
}
|
||||
}
|
||||
|
||||
function LedsData() {
|
||||
this.Filter_Pump = "off";
|
||||
this.Spa_Mode = "off";
|
||||
this.Aux_1 = "off";
|
||||
//this.aux1 = "flash";
|
||||
this.Aux_2 = "off";
|
||||
this.Aux_3 = "off";
|
||||
this.Aux_4 = "off";
|
||||
this.Aux_5 = "off";
|
||||
this.Aux_6 = "off";
|
||||
this.Aux_7 = "off";
|
||||
this.Pool_Heater = "off";
|
||||
this.Spa_Heater = "off";
|
||||
this.Solar_Heater = "off";
|
||||
}
|
||||
|
||||
function AqualinkData() {
|
||||
this.version = "";
|
||||
this.date = "09/11/12 TUE";
|
||||
this.time = "10:33 AM";
|
||||
this.temp_units = "F";
|
||||
this.air_temp = "75";
|
||||
this.battery = "low";
|
||||
this.leds = new LedsData();
|
||||
}
|
||||
|
||||
function TemperatureSetPoint() {
|
||||
this.modified = false;
|
||||
this.value = 0;
|
||||
}
|
||||
|
||||
var pool_htr_set_point = new TemperatureSetPoint();
|
||||
var spa_htr_set_point = new TemperatureSetPoint();
|
||||
var freeze_protect_set_point = new TemperatureSetPoint();
|
||||
|
||||
var aqualink_data = new AqualinkData();
|
||||
var net_connection = 'red';
|
||||
|
||||
|
||||
function interval(duration, fn){
|
||||
this.baseline = undefined
|
||||
|
||||
this.run = function(){
|
||||
if(this.baseline === undefined){
|
||||
this.baseline = new Date().getTime()
|
||||
}
|
||||
fn()
|
||||
var end = new Date().getTime()
|
||||
this.baseline += duration
|
||||
|
||||
var nextTick = duration - (end - this.baseline)
|
||||
if(nextTick<0){
|
||||
nextTick = 0
|
||||
}
|
||||
(function(i){
|
||||
i.timer = setTimeout(function(){
|
||||
i.run(end)
|
||||
}, nextTick)
|
||||
}(this))
|
||||
}
|
||||
|
||||
this.stop = function(){
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
}
|
||||
|
||||
var timer = new interval(1000, function(){
|
||||
net_connection_icon();
|
||||
flash_battery_icon();
|
||||
//blink_filter_pump();
|
||||
blink_button_leds();
|
||||
})
|
||||
timer.run()
|
||||
|
||||
|
||||
function net_connection_icon() {
|
||||
if (net_connection == "red") {
|
||||
document.getElementById('messages_div').innerHTML = "Not connected!";
|
||||
document.getElementById('net_green').style.visibility = 'hidden';
|
||||
document.getElementById('net_yellow').style.visibility = 'hidden';
|
||||
if (document.getElementById('net_red').style.visibility == 'visible') {
|
||||
document.getElementById('net_red').style.visibility = 'hidden';
|
||||
} else {
|
||||
document.getElementById('net_red').style.visibility = 'visible';
|
||||
}
|
||||
} else if (net_connection == "green") {
|
||||
document.getElementById('net_green').style.visibility = 'visible';
|
||||
document.getElementById('net_red').style.visibility = 'hidden';
|
||||
document.getElementById('net_yellow').style.visibility = 'hidden';
|
||||
} else if (net_connection == "yellow") {
|
||||
document.getElementById('net_green').style.visibility = 'hidden';
|
||||
document.getElementById('net_red').style.visibility = 'hidden';
|
||||
document.getElementById('net_yellow').style.visibility = 'visible';
|
||||
}
|
||||
}
|
||||
//setInterval(net_connection_icon, 500);
|
||||
|
||||
function net_activity() {
|
||||
// Set the icon yellow.
|
||||
document.getElementById('net_green').style.visibility = 'hidden';
|
||||
document.getElementById('net_red').style.visibility = 'hidden';
|
||||
document.getElementById('net_yellow').style.visibility = 'visible';
|
||||
// Wait 10mS then set to green.
|
||||
setTimeout(function() {
|
||||
document.getElementById('net_green').style.visibility = 'visible';
|
||||
document.getElementById('net_red').style.visibility = 'hidden';
|
||||
document.getElementById('net_yellow').style.visibility = 'hidden';
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function flash_battery_icon() {
|
||||
if (aqualink_data.battery == "low") {
|
||||
if (document.getElementById('battery_low').style.visibility == 'visible') {
|
||||
document.getElementById('battery_low').style.visibility = 'hidden';
|
||||
} else {
|
||||
document.getElementById('battery_low').style.visibility = 'visible';
|
||||
}
|
||||
}
|
||||
}
|
||||
//setInterval(flash_battery_icon, 500);
|
||||
/*
|
||||
function blink_filter_pump() {
|
||||
if (aqualink_data.leds.pump == "enabled") {
|
||||
document.getElementById("pump_status").src = (document.getElementById("pump_status").src.indexOf("images/led_on.png") == -1) ? "images/led_on.png" : "images/led_off.png";
|
||||
}
|
||||
}
|
||||
*/
|
||||
//setInterval(blink_filter_pump, 500);
|
||||
|
||||
|
||||
function blink_button_leds() {
|
||||
for (var obj in aqualink_data.leds) {
|
||||
if (aqualink_data.leds[obj] == "flash" && document.getElementById(obj+'_on_status') != null ) {
|
||||
if (document.getElementById(obj+'_on_status').style.visibility == 'hidden') {
|
||||
setElementVisibility(obj+'_on_status', 'visible');
|
||||
setElementVisibility(obj+'_off_status', 'hidden');
|
||||
} else {
|
||||
setElementVisibility(obj+'_on_status', 'hidden');
|
||||
setElementVisibility(obj+'_off_status', 'visible');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//setInterval(blink_aux_leds, 1500);
|
||||
|
||||
// End - Methods to Manage Flashing Images
|
||||
|
||||
// Display Update Methods
|
||||
|
||||
function update_temp(id) {
|
||||
var el = document.getElementById(id);
|
||||
var temp_string = "";
|
||||
|
||||
if (id == "air_temp") {
|
||||
temp_string = aqualink_data.air_temp;
|
||||
} else if (id == "pool_temp") {
|
||||
temp_string = aqualink_data.pool_temp;
|
||||
if (temp_string == " ") {
|
||||
temp_string = "---"
|
||||
}
|
||||
} else if (id == "spa_temp") {
|
||||
temp_string = aqualink_data.spa_temp;
|
||||
if (temp_string == " ") {
|
||||
temp_string = "---"
|
||||
}
|
||||
} else if (id == "pool_htr_set_pnt") {
|
||||
if (pool_htr_set_point.modified == true) {
|
||||
temp_string = pool_htr_set_point.value.toString();
|
||||
el.style.color = "PowderBlue";
|
||||
} else {
|
||||
temp_string = aqualink_data.pool_htr_set_pnt;
|
||||
pool_htr_set_point.value = parseInt(temp_string);
|
||||
el.style.color = "#f4f4f4";
|
||||
}
|
||||
} else if (id == "spa_htr_set_pnt") {
|
||||
if (spa_htr_set_point.modified == true) {
|
||||
temp_string = spa_htr_set_point.value.toString();
|
||||
el.style.color = "PowderBlue";
|
||||
} else {
|
||||
temp_string = aqualink_data.spa_htr_set_pnt;
|
||||
spa_htr_set_point.value = parseInt(temp_string);
|
||||
el.style.color = "#f4f4f4";
|
||||
}
|
||||
} else if (id == "frz_protect_set_pnt") {
|
||||
if (freeze_protect_set_point.modified == true) {
|
||||
temp_string = freeze_protect_set_point.value.toString();
|
||||
el.style.color = "PowderBlue";
|
||||
} else {
|
||||
temp_string = aqualink_data.frz_protect_set_pnt;
|
||||
freeze_protect_set_point.value = parseInt(temp_string);
|
||||
el.style.color = "#f4f4f4";
|
||||
}
|
||||
}
|
||||
|
||||
el.innerHTML = temp_string + "°" + aqualink_data.temp_units;
|
||||
}
|
||||
|
||||
// Adjust the Pool Heater set point. Note that its maximum value
|
||||
// is 104 and its minimum value is 0.
|
||||
function incr_pool_htr(direction) {
|
||||
if (direction == '+') {
|
||||
if (pool_htr_set_point.value < 104) {
|
||||
pool_htr_set_point.value++;
|
||||
}
|
||||
} else {
|
||||
if (pool_htr_set_point.value > 0) {
|
||||
pool_htr_set_point.value--;
|
||||
}
|
||||
}
|
||||
|
||||
if (pool_htr_set_point.value == parseInt(aqualink_data.pool_htr_set_pnt)) {
|
||||
pool_htr_set_point.modified = false;
|
||||
} else {
|
||||
pool_htr_set_point.modified = true;
|
||||
}
|
||||
|
||||
update_temp("pool_htr_set_pnt");
|
||||
}
|
||||
|
||||
// Adjust the Spa Heater set point. Note that its maximum value
|
||||
// is 104 and its minimum value is 0.
|
||||
function incr_spa_htr(direction) {
|
||||
if (direction == '+') {
|
||||
if (spa_htr_set_point.value < 104) {
|
||||
spa_htr_set_point.value++;
|
||||
}
|
||||
} else {
|
||||
if (spa_htr_set_point.value > 0) {
|
||||
spa_htr_set_point.value--;
|
||||
}
|
||||
}
|
||||
|
||||
if (spa_htr_set_point.value == parseInt(aqualink_data.spa_htr_set_pnt)) {
|
||||
spa_htr_set_point.modified = false;
|
||||
} else {
|
||||
spa_htr_set_point.modified = true;
|
||||
}
|
||||
|
||||
update_temp("spa_htr_set_pnt");
|
||||
}
|
||||
|
||||
// Adjust the Freeze Protection set point. Note that its maximum value
|
||||
// is 42 and its minimum value is 36.
|
||||
function incr_frz_protect(direction) {
|
||||
if (direction == '+') {
|
||||
if (freeze_protect_set_point.value < 42) {
|
||||
freeze_protect_set_point.value++;
|
||||
}
|
||||
} else {
|
||||
if (freeze_protect_set_point.value > 36) {
|
||||
freeze_protect_set_point.value--;
|
||||
}
|
||||
}
|
||||
|
||||
if (freeze_protect_set_point.value == parseInt(aqualink_data.frz_protect_set_pnt)) {
|
||||
freeze_protect_set_point.modified = false;
|
||||
} else {
|
||||
freeze_protect_set_point.modified = true;
|
||||
}
|
||||
|
||||
update_temp("frz_protect_set_pnt");
|
||||
}
|
||||
|
||||
function update_date_time() {
|
||||
var el = document.getElementById("date_time");
|
||||
|
||||
el.innerHTML = aqualink_data.time + " - " + aqualink_data.date;
|
||||
}
|
||||
|
||||
function setElementVisibility(element, visibility){
|
||||
//console.log("set "+element+" to "+visibility);
|
||||
el = document.getElementById(element);
|
||||
if (el != null) {
|
||||
el.style.visibility = visibility;
|
||||
//console.log("set "+element+" to "+visibility);
|
||||
}
|
||||
}
|
||||
|
||||
function update_leds() {
|
||||
//console.log("*****UPDATE LED*****");
|
||||
for (var obj in aqualink_data.leds) {
|
||||
//console.log("*****setting "+obj+" to "+aqualink_data.leds[obj]);
|
||||
if (aqualink_data.leds[obj] == "on") {
|
||||
setElementVisibility(obj+'_on_status', 'visible');
|
||||
setElementVisibility(obj+'_off_status', 'hidden');
|
||||
setElementVisibility(obj+'_en_status', 'hidden');
|
||||
} else if (aqualink_data.leds[obj] == "enabled") {
|
||||
setElementVisibility(obj+'_on_status', 'hidden');
|
||||
setElementVisibility(obj+'_off_status', 'hidden');
|
||||
setElementVisibility(obj+'_en_status', 'visible');
|
||||
} else if (aqualink_data.leds[obj] == "off") {
|
||||
setElementVisibility(obj+'_on_status', 'hidden');
|
||||
setElementVisibility(obj+'_off_status', 'visible');
|
||||
setElementVisibility(obj+'_en_status', 'hidden');
|
||||
} else if (aqualink_data.leds[obj] == "flash") {
|
||||
// Don't set any other visibility or it'll mess up the flasher timer.
|
||||
setElementVisibility(obj+'_en_status', 'hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function update_status(data) {
|
||||
aqualink_data = data;
|
||||
//console.log(aqualink_data.version);
|
||||
//console.log('updating status...');
|
||||
if (aqualink_data.battery == "ok") {
|
||||
document.getElementById('battery_low').style.visibility = 'hidden';
|
||||
document.getElementById('battery_ok').style.visibility = 'visible';
|
||||
} else {
|
||||
document.getElementById('battery_ok').style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
if (aqualink_data.status == "Ready") {
|
||||
document.getElementById('messages_div').innerHTML = "";
|
||||
} else if (aqualink_data.status == "Programming") {
|
||||
document.getElementById('messages_div').innerHTML = aqualink_data.status+" (please wait!)";
|
||||
} else {
|
||||
document.getElementById('messages_div').innerHTML = aqualink_data.status;
|
||||
}
|
||||
|
||||
update_temp("air_temp");
|
||||
update_temp("pool_temp");
|
||||
update_temp("spa_temp");
|
||||
update_temp("pool_htr_set_pnt");
|
||||
update_temp("spa_htr_set_pnt");
|
||||
update_temp("frz_protect_set_pnt");
|
||||
|
||||
update_date_time();
|
||||
|
||||
update_leds();
|
||||
}
|
||||
|
||||
function set_aux_button_labels(data) {
|
||||
//console.log("Aux 1=" + data.Aux_1);
|
||||
for (var obj in data) {
|
||||
//console.log("sent "+obj+" to "+data[obj]);
|
||||
button = document.getElementById(obj);
|
||||
if (button != null) {
|
||||
button.innerHTML = data[obj];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//alert(BrowserDetect.browser + ' : ' + BrowserDetect.version);
|
||||
|
||||
function get_appropriate_ws_url() {
|
||||
var pcol;
|
||||
var u = document.URL;
|
||||
|
||||
/*
|
||||
* We open the websocket encrypted if this page came on an
|
||||
* https:// url itself, otherwise unencrypted
|
||||
*/
|
||||
|
||||
if (u.substring(0, 5) == "https") {
|
||||
pcol = "wss://";
|
||||
u = u.substr(8);
|
||||
} else {
|
||||
pcol = "ws://";
|
||||
if (u.substring(0, 4) == "http")
|
||||
u = u.substr(7);
|
||||
}
|
||||
|
||||
u = u.split('/');
|
||||
|
||||
//alert (pcol + u[0] + ":6500");
|
||||
|
||||
return pcol + u[0];
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* dumb increment protocol */
|
||||
var socket_di;
|
||||
|
||||
function startWebsockets() {
|
||||
socket_di = new WebSocket(get_appropriate_ws_url());
|
||||
/*
|
||||
if (BrowserDetect.browser == "Firefox" && BrowserDetect.version < 12) {
|
||||
//socket_di = new MozWebSocket(get_appropriate_ws_url(), "dumb-increment-protocol");
|
||||
socket_di = new MozWebSocket(get_appropriate_ws_url());
|
||||
} else {
|
||||
//socket_di = new WebSocket(get_appropriate_ws_url(), "dumb-increment-protocol");
|
||||
socket_di = new WebSocket(get_appropriate_ws_url());
|
||||
}
|
||||
*/
|
||||
try {
|
||||
socket_di.onopen = function() {
|
||||
// success!
|
||||
get_aux_labels();
|
||||
net_connection = 'green';
|
||||
}
|
||||
|
||||
socket_di.onmessage = function got_packet(msg) {
|
||||
net_activity();
|
||||
var data = JSON.parse(msg.data);
|
||||
if (data.type == 'status') {
|
||||
update_status(data);
|
||||
} else if (data.type == 'aux_labels') {
|
||||
set_aux_button_labels(data);
|
||||
}
|
||||
}
|
||||
|
||||
socket_di.onclose = function() {
|
||||
// something went wrong
|
||||
net_connection = 'red';
|
||||
// Try to reconnect every 5 seconds.
|
||||
setTimeout(function() {
|
||||
startWebsockets()
|
||||
}, 5000);
|
||||
}
|
||||
} catch (exception) {
|
||||
alert('<p>Error' + exception);
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
socket_di.send("reset\n");
|
||||
}
|
||||
|
||||
function get_aux_labels() {
|
||||
//socket_di.send("GET_AUX_LABELS");
|
||||
var msg = {command: "GET_AUX_LABELS"};
|
||||
// Send the msg object as a JSON-formatted string.
|
||||
socket_di.send(JSON.stringify(msg));
|
||||
}
|
||||
|
||||
function queue_command(cmd) {
|
||||
var _cmd = {};
|
||||
_cmd.command = cmd;
|
||||
|
||||
socket_di.send(JSON.stringify(_cmd));
|
||||
}
|
||||
|
||||
function set_temperature(type) {
|
||||
var temperature = {};
|
||||
|
||||
if (type == "POOL_HTR") {
|
||||
temperature.parameter = type;
|
||||
temperature.value = pool_htr_set_point.value;
|
||||
pool_htr_set_point.modified = false;
|
||||
} else if (type == "SPA_HTR") {
|
||||
temperature.parameter = type;
|
||||
temperature.value = spa_htr_set_point.value;
|
||||
spa_htr_set_point.modified = false;
|
||||
} else if (type == "FRZ_PROTECT") {
|
||||
temperature.parameter = type;
|
||||
temperature.value = freeze_protect_set_point.value;
|
||||
freeze_protect_set_point.modified = false;
|
||||
}
|
||||
|
||||
socket_di.send(JSON.stringify(temperature));
|
||||
}
|
||||
|
||||
function set_light_mode(value) {
|
||||
var mode = {};
|
||||
|
||||
mode.parameter = 'POOL_LIGHT_MODE';
|
||||
mode.value = value;
|
||||
socket_di.send(JSON.stringify(mode));
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
startWebsockets();
|
||||
|
||||
}
|
|
@ -1,620 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<meta http-equiv='Content-Type' content='text/html; charset=windows-1252'>
|
||||
<title>AqualinkD</title>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
<meta name='mobile-web-app-capable' content='yes'>
|
||||
<meta name='apple-mobile-web-app-capable' content='yes'>
|
||||
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
|
||||
<link href='aqualinkd.png' rel='apple-touch-icon'>
|
||||
<link href='aqualinkd.png' rel='icon'>
|
||||
<script src='config.js'></script>
|
||||
<style>
|
||||
:root {
|
||||
--switch-diameter: 30px;
|
||||
--switch-on-background: #4CAAD9;
|
||||
--switch-off-background: #f1f1f1;
|
||||
--switch-enabled-background: #4cd9aa;
|
||||
--switch-color: #ffffff;
|
||||
--switch-bordercolor: #dddddd;
|
||||
|
||||
--slide-ball-diameter: 30px;
|
||||
--slide-ball-color: #4CAAD9;
|
||||
--slide-background: #f1f1f1;
|
||||
--slide-range-height: 16px;
|
||||
--slide-range-bordercolor: #dddddd;
|
||||
|
||||
--options-background: #f1f1f1;
|
||||
|
||||
--error_background: rgb(143, 43, 43);
|
||||
--error_text: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
html {}
|
||||
|
||||
body {
|
||||
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||||
font-weight: 300;
|
||||
background-color: #f1f1f1;
|
||||
color: #000000;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: var(--error_background) !important;
|
||||
color: var(--error_text) !important;
|
||||
}
|
||||
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border-collapse: collapse;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgb(189, 189, 189);
|
||||
/*width: 100%;*/
|
||||
}
|
||||
|
||||
th {
|
||||
/*width: 100vw;*/
|
||||
text-align: center;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 50px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: absolute;
|
||||
margin-left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.switch+label {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input.switch-btn-enabled+label,
|
||||
input.switch-btn-flash+label,
|
||||
input.switch-btn+label {
|
||||
padding: 2px;
|
||||
width: calc(2 * var(--switch-diameter));
|
||||
height: var(--switch-diameter);
|
||||
background-color: var(--switch-bordercolor);
|
||||
border-radius: var(--switch-diameter);
|
||||
}
|
||||
|
||||
input.switch-btn-enabled+label::before,
|
||||
input.switch-btn-enabled+label::after,
|
||||
input.switch-btn-flash+label::before,
|
||||
input.switch-btn-flash+label::after,
|
||||
input.switch-btn+label::before,
|
||||
input.switch-btn+label::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
input.switch-btn-enabled+label::before,
|
||||
input.switch-btn-flash+label::before,
|
||||
input.switch-btn+label::before {
|
||||
right: 1px;
|
||||
background-color: var(--switch-off-background);
|
||||
border-radius: var(--switch-diameter);
|
||||
transition: background 0.4s;
|
||||
}
|
||||
|
||||
input.switch-btn-enabled+label::after,
|
||||
input.switch-btn-flash+label::after,
|
||||
input.switch-btn+label::after {
|
||||
width: var(--switch-diameter);
|
||||
background-color: var(--switch-color);
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
transition: margin 0.4s;
|
||||
}
|
||||
|
||||
input.switch-btn:checked+label::before {
|
||||
background-color: var(--switch-on-background);
|
||||
}
|
||||
|
||||
input.switch-btn-enabled:checked+label::before {
|
||||
background-color: var(--switch-enabled-background);
|
||||
}
|
||||
|
||||
input.switch-btn-flash:checked+label::before {
|
||||
background-color: var(--switch-on-background);
|
||||
-webkit-animation-name: switch-flash; /* Safari 4.0 - 8.0 */
|
||||
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
|
||||
animation-name: switch-flash;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
input.switch-btn-enabled:checked+label::after,
|
||||
input.switch-btn-flash:checked+label::after,
|
||||
input.switch-btn:checked+label::after {
|
||||
margin-left: var(--switch-diameter);
|
||||
}
|
||||
|
||||
/* Safari 4.0 - 8.0 */
|
||||
@-webkit-keyframes switch-flash {
|
||||
0% {background-color: var(--switch-on-background)}
|
||||
50% {background-color: var(--switch-off-background)}
|
||||
100% {background-color: var(--switch-on-background)}
|
||||
}
|
||||
|
||||
/* Standard syntax */
|
||||
@keyframes switch-flash {
|
||||
0% {background-color: var(--switch-on-background)}
|
||||
50% {background-color: var(--switch-off-background)}
|
||||
100% {background-color: var(--switch-on-background)}
|
||||
}
|
||||
|
||||
.slidecontainer {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: var(--slide-range-height);
|
||||
background: var(--slide-background);
|
||||
transition: background 0.4s;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
border-radius: var(--slide-range-height);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: var(--slide-ball-diameter);
|
||||
height: var(--slide-ball-diameter);
|
||||
background: var(--slide-ball-color);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
cursor: pointer;
|
||||
border-radius: var(--slide-ball-diameter);
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: var(--slide-ball-diameter);
|
||||
height: var(--slide-ball-diameter);
|
||||
background: var(--slide-ball-color);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
border-radius: var(--slide-ball-diameter);
|
||||
cursor: pointer;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.slider::-moz-range-track {
|
||||
background-color: var(--slide-background);
|
||||
}
|
||||
|
||||
.options_selector {
|
||||
|
||||
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||||
font-size: 16px;
|
||||
/*background: var(--highlight);*/
|
||||
background: var(--options-background);
|
||||
border: 0;
|
||||
padding:5px;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 20px;
|
||||
text-align:center;
|
||||
text-align-last:center;
|
||||
outline: none;
|
||||
/*
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
|
||||
var _width;
|
||||
var _height;
|
||||
var _displayNames = [];
|
||||
|
||||
function getSize() {
|
||||
_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
}
|
||||
|
||||
function formatSatus(status) {
|
||||
if ((index = status.indexOf("AUX")) >= 0) {
|
||||
aux = status.substr(index, 4);
|
||||
status = status.charAt(0).toUpperCase() + status.substr(1).toLowerCase();
|
||||
if ((name = _displayNames[aux]) != undefined) {
|
||||
status = status.substr(0, index) + name + status.substr(index + 4);
|
||||
}
|
||||
} else {
|
||||
status = status.charAt(0).toUpperCase() + status.substr(1).toLowerCase();
|
||||
}
|
||||
return status;
|
||||
}
|
||||
|
||||
function deviceSort(a, b) {
|
||||
try {
|
||||
pa = devices.indexOf(a.id);
|
||||
pb = devices.indexOf(b.id);
|
||||
if (pa > pb)
|
||||
return 1;
|
||||
else if (pa < pb)
|
||||
return -1;
|
||||
} catch (e){}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
function check_devices(data) {
|
||||
_temperature_units = data['temp_units'];
|
||||
//document.getElementById("title").innerHTML = "AqualinkD <font size='-2'>"+formatSatus(data['time']+" "+data['date']+"</font>");
|
||||
setTitle(data['date'], data['time']);
|
||||
data['devices'].sort(deviceSort);
|
||||
for (var obj in data['devices']) {
|
||||
if (document.getElementById(data['devices'][obj].id) == null) {
|
||||
_displayNames[data['devices'][obj].id.replace("Aux_", "AUX")] = data['devices'][obj].name;
|
||||
console.log("Create " + data['devices'][obj].id);
|
||||
createTile(data['devices'][obj]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setTitle(date, time) {
|
||||
document.getElementById("title").innerHTML = "AqualinkD <font size='-1'>"+formatSatus(date+" "+time)+"</font>";
|
||||
}
|
||||
|
||||
function update_status(data) {
|
||||
//console.log("Received Update Satus");
|
||||
_aqualink_data = data;
|
||||
|
||||
if (data.status != "Ready") {
|
||||
document.getElementById("title").innerHTML = formatSatus(data.status);
|
||||
} else {
|
||||
//document.getElementById("title").innerHTML = 'AqualinkD';
|
||||
setTitle(data['date'], data['time']);
|
||||
}
|
||||
|
||||
setSlider("Pool_Heater", data.pool_htr_set_pnt);
|
||||
setSlider("Spa_Heater", data.spa_htr_set_pnt);
|
||||
setSlider("SWG", data.swg_percent);
|
||||
setSlider("Freeze_Protect", data.frz_protect_set_pnt);
|
||||
setLabel("SWG/PPM", data.swg_ppm);
|
||||
setLabel("Temperature/Air", data.air_temp);
|
||||
setLabel("Temperature/Pool", data.pool_temp);
|
||||
setLabel("Temperature/Spa", data.spa_temp);
|
||||
/*
|
||||
setLabel("Air", data.air_temp);
|
||||
setLabel("Pool_Water", data.pool_temp);
|
||||
setLabel("Spa_Water", data.spa_temp);
|
||||
*/
|
||||
|
||||
for (var obj in data.leds) {
|
||||
setButton(obj.toString(), data.leds[obj])
|
||||
}
|
||||
}
|
||||
|
||||
function createTile(object) {
|
||||
if (object.name == 'NONE')
|
||||
return;
|
||||
|
||||
if (typeof devices !== 'undefined' && devices.indexOf(object.id) < 0) {
|
||||
return;
|
||||
}
|
||||
//if (ignore_devices.indexOf(object.id) >= 0)
|
||||
// return;
|
||||
var table = document.getElementById("deviceList");
|
||||
var row = table.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
var cell2 = row.insertCell(1);
|
||||
var cell3 = row.insertCell(2);
|
||||
var cell4 = row.insertCell(3);
|
||||
cell1.innerHTML = object.name;
|
||||
cell2.innerHTML = " ";
|
||||
cell3.innerHTML = " ";
|
||||
cell4.innerHTML = " ";
|
||||
cell2.setAttribute('width', '100px');
|
||||
cell3.setAttribute('width', '38px');
|
||||
cell4.setAttribute('width', '70px');
|
||||
cell3.setAttribute('align', 'right');
|
||||
//cell3.setAttribute('cellpadding', '0');
|
||||
cell4.setAttribute('align', 'right');
|
||||
if (object.type == 'switch' /*&& object.type_ext != "switch_program"*/) {
|
||||
row.deleteCell(2);
|
||||
row.deleteCell(1);
|
||||
cell1.setAttribute('colspan', '3');
|
||||
cell4.innerHTML = "<div id='"+object.id+"'><input id='switch-"+object.id+"' name='"+object.id+"' class='switch switch-btn' type='checkbox' onclick='update(this);'><label for='switch-"+object.id+"'></label></div>";
|
||||
setButton(object.id, object.state);
|
||||
/* //Removing light program, too much for simple interface
|
||||
} else if (object.type == 'switch' && object.type_ext == 'switch_program') {
|
||||
row.deleteCell(2);
|
||||
cell2.setAttribute('colspan', '2');
|
||||
//cell2.setAttribute('width', '100%');
|
||||
cell2.innerHTML = "<select id='selector_"+object.id+"' onchange='update(this);' class='options_selector'><option value='0'>Program</option></select>";
|
||||
cell4.innerHTML = "<div id='"+object.id+"'><input id='switch-"+object.id+"' name='"+object.id+"' class='switch switch-btn' type='checkbox' onclick='update(this);'><label for='switch-"+object.id+"'></label></div>";
|
||||
//cell4.innerHTML = "<div class='switch'><input id='btn-toggle-"+object.id+"' name='"+object.id+"' class='btn-toggle btn-toggle-round' type='checkbox' onclick='update(this);'><label for='btn-toggle-"+object.id+"'></label></div>";
|
||||
option = document.getElementById('selector_'+object.id);
|
||||
|
||||
try {
|
||||
fLen = light_program.length;
|
||||
for (i = 0; i < fLen; i++) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = i + 1;
|
||||
opt.innerHTML = light_program[i];
|
||||
option.appendChild(opt);
|
||||
}
|
||||
} catch (e) {}
|
||||
setButton(object.id, object.state);
|
||||
*/
|
||||
} else if (object.type == 'value') {
|
||||
row.deleteCell(2);
|
||||
row.deleteCell(1);
|
||||
cell1.setAttribute('colspan', '3');
|
||||
cell4.innerHTML = "<label id='"+object.id+"' output_ext=''></label>";
|
||||
setLabel(object.id, object.value);
|
||||
} else if (object.type == 'temperature') {
|
||||
row.deleteCell(2);
|
||||
row.deleteCell(1);
|
||||
cell1.setAttribute('colspan', '3');
|
||||
cell4.innerHTML = "<label id='"+object.id+"' output_ext='°"+_temperature_units+"'></label>";
|
||||
setLabel(object.id, object.value);
|
||||
} else if (object.type == 'setpoint_thermo') {
|
||||
if (_temperature_units != 'c')
|
||||
cell2.innerHTML = "<div class='slidecontainer'><input type='range' id='slider_"+object.id+"' min='36' max='104' class='slider' output_id='"+object.id+"' oninput='sliderchange(this);' onmousedown='lock(this);' onmouseup='update(this);unlock(this);'></div>";
|
||||
else
|
||||
cell2.innerHTML = "<div class='slidecontainer'><input type='range' id='slider_"+object.id+"' min='0' max='40' class='slider' output_id='"+object.id+"' oninput='sliderchange(this);' onmousedown='lock(this);' onmouseup='update(this);unlock(this);'></div>";
|
||||
|
||||
cell3.innerHTML = "<label id='"+object.id+"' output_ext='°"+_temperature_units+"'></label>";
|
||||
cell4.innerHTML = "<div><input id='switch-"+object.id+"' name='"+object.id+"' class='switch switch-btn' type='checkbox' onclick='update(this);'><label for='switch-"+object.id+"'></label></div>";
|
||||
//cell4.innerHTML = "<div class='switch'><input id='btn-toggle-"+object.id+"' name='"+object.id+"' class='btn-toggle btn-toggle-round' type='checkbox' onclick='update(this);'><label for='btn-toggle-"+object.id+"'></label></div>";
|
||||
setSlider(object.id, object.spvalue);
|
||||
setButton(object.id, object.status);
|
||||
} else if (object.type == 'setpoint_freeze') {
|
||||
if (_temperature_units != 'c')
|
||||
cell2.innerHTML = "<div class='slidecontainer'><input type='range' id='slider_"+object.id+"' min='36' max='42' class='slider' output_id='"+object.id+"' oninput='sliderchange(this);' onmousedown='lock(this);' onmouseup='update(this);unlock(this);'></div>";
|
||||
else
|
||||
cell2.innerHTML = "<div class='slidecontainer'><input type='range' id='slider_"+object.id+"' min='1' max='5' class='slider' output_id='"+object.id+"' oninput='sliderchange(this);' onmousedown='lock(this);' onmouseup='update(this);unlock(this);'></div>";
|
||||
|
||||
cell4.innerHTML = "<label id='"+object.id+"' output_ext='°"+_temperature_units+"'></label>";
|
||||
setSlider(object.id, object.spvalue);
|
||||
} else if (object.type == 'setpoint_swg') {
|
||||
if (_width <= 390)
|
||||
cell1.innerHTML = "SWG";
|
||||
cell2.innerHTML = "<div class='slidecontainer'><input type='range' id='slider_"+object.id+"' min='0' max='100' step='5' class='slider' output_id='"+object.id+"'' oninput='sliderchange(this);' onmousedown='lock(this);' onmouseup='update(this);unlock(this);'></div>";
|
||||
cell3.innerHTML = "<label id='"+object.id+"' output_ext='%'></label>";
|
||||
cell4.innerHTML = "<div><input id='switch-"+object.id+"' name='"+object.id+"' class='switch switch-btn' type='checkbox' onclick='update(this);'><label for='switch-"+object.id+"'></label></div>";
|
||||
//cell4.innerHTML = "<div class='switch'><input id='btn-toggle-"+object.id+"' name='"+object.id+"' class='btn-toggle btn-toggle-round' type='checkbox' onclick='update(this);'><label for='btn-toggle-"+object.id+"'></label></div>";
|
||||
setSlider(object.id, object.value);
|
||||
setButton(object.id, object.state);
|
||||
}
|
||||
}
|
||||
|
||||
function update(source) {
|
||||
//console.log("Send "+source.id+" to server "+source.getAttribute("type")+" "+source.value);
|
||||
|
||||
var cmd = {};
|
||||
|
||||
switch (source.getAttribute("type")) {
|
||||
case "range":
|
||||
if ( source.id.includes("SWG") ) {
|
||||
cmd.uri = source.id.substr(7)+"/percent/set";
|
||||
cmd.value = source.value;
|
||||
} else {
|
||||
cmd.uri = source.id.substr(7)+"/setpoint/set";
|
||||
//cmd.parameter = source.id.substr(7); // remove 'slider_'
|
||||
cmd.value = source.value;
|
||||
}
|
||||
break;
|
||||
case "checkbox":
|
||||
cmd.uri = source.id.substr(7)+"/set";
|
||||
cmd.value = source.checked?"1":"0";
|
||||
//name = source.id.substr(11); //remove 'btn-toggle-''
|
||||
//state = source.checked?"on":"off";
|
||||
//cmd.command = source.id.substr(7);
|
||||
break;
|
||||
default: // type is null because it's a selector
|
||||
cmd.uri = source.id.substr(9)+"/program/set";
|
||||
cmd.button = source.id.substr(9);
|
||||
//name = source.id.substr(9); //remove 'selector_''
|
||||
//cmd.parameter = 'LIGHT_MODE';
|
||||
cmd.value = source.value;
|
||||
//cmd.button = source.id.substr(9); // remove 'selector_'
|
||||
break;
|
||||
}
|
||||
//console.log(source);
|
||||
//console.log(cmd);
|
||||
//console.log("*** NOT SENDING COMMAND ***");
|
||||
send_command(cmd);
|
||||
}
|
||||
|
||||
function sliderchange(source) {
|
||||
setLabel(source.getAttribute('output_id'), source.value);
|
||||
}
|
||||
|
||||
function setButton(id, isOn) {
|
||||
/*
|
||||
if ( (isOn != true && isOn != false) || Number.isInteger(isOn)){
|
||||
if (isOn != "enabled") {
|
||||
if (Number.isInteger(isOn))
|
||||
isOn = (isOn==1)?true:false;
|
||||
else
|
||||
isOn = (isOn=="on")?true:false;
|
||||
} else {
|
||||
//document.getElementById('btn-toggle-' + id).classList.add("btn-toggle-round_enabled");
|
||||
}
|
||||
}
|
||||
//NSF need to chance the button color if enadled is a sent state.
|
||||
if( (btn = document.getElementById('btn-toggle-' + id)) != null)
|
||||
btn.checked = isOn;
|
||||
*/
|
||||
if ( (source = document.getElementById('switch-'+id)) == null)
|
||||
return;
|
||||
|
||||
if (isOn == "on") {
|
||||
source.classList.add('switch-btn-on');
|
||||
source.classList.remove('switch-btn-flash');
|
||||
source.classList.remove('switch-btn-enabled');
|
||||
source.checked = true;
|
||||
} else if (isOn == "enabled") {
|
||||
source.classList.remove('switch-btn-on');
|
||||
source.classList.remove('switch-btn-flash');
|
||||
source.classList.add('switch-btn-enabled');
|
||||
source.checked = true;
|
||||
} else if (isOn == "flash") {
|
||||
source.classList.remove('switch-btn-on');
|
||||
source.classList.add('switch-btn-flash');
|
||||
source.classList.remove('switch-btn-enabled');
|
||||
source.checked = true;
|
||||
} else { // Off
|
||||
source.classList.remove('switch-btn-on');
|
||||
source.classList.remove('switch-btn-flash');
|
||||
source.classList.remove('switch-btn-enabled');
|
||||
source.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
function lock(source) {
|
||||
source.setAttribute('lock', 'true');
|
||||
}
|
||||
function unlock(source) {
|
||||
source.setAttribute('lock', 'false');
|
||||
}
|
||||
function setSlider(id, value) {
|
||||
slider = document.getElementById("slider_"+id);
|
||||
|
||||
try{
|
||||
if (slider.getAttribute('lock') == 'true')
|
||||
return;
|
||||
} catch (e) { return; }
|
||||
|
||||
slider.value = value;
|
||||
setLabel(slider.getAttribute('output_id'), value);
|
||||
}
|
||||
|
||||
function setLabel(id, value) {
|
||||
if ( (label = document.getElementById(id)) != null) {
|
||||
if (value != -999 && value != " ")
|
||||
label.innerHTML = value+label.getAttribute('output_ext');
|
||||
else
|
||||
label.innerHTML = "--";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function get_appropriate_ws_url() {
|
||||
var pcol;
|
||||
var u = document.URL;
|
||||
/*
|
||||
* We open the websocket encrypted if this page came on an
|
||||
* https:// url itself, otherwise unencrypted
|
||||
*/
|
||||
if (u.substring(0, 5) == "https") {
|
||||
pcol = "wss://";
|
||||
u = u.substr(8);
|
||||
} else {
|
||||
pcol = "ws://";
|
||||
if (u.substring(0, 4) == "http")
|
||||
u = u.substr(7);
|
||||
}
|
||||
u = u.split('/');
|
||||
//alert (pcol + u[0] + ":6500");
|
||||
return pcol + u[0];
|
||||
}
|
||||
/* dumb increment protocol */
|
||||
var socket_di;
|
||||
|
||||
function startWebsockets() {
|
||||
socket_di = new WebSocket(get_appropriate_ws_url());
|
||||
try {
|
||||
socket_di.onopen = function() {
|
||||
// success!
|
||||
get_devices();
|
||||
}
|
||||
socket_di.onmessage = function got_packet(msg) {
|
||||
document.getElementById("title").classList.remove("error");
|
||||
var data = JSON.parse(msg.data);
|
||||
if (data.type == 'status') {
|
||||
update_status(data);
|
||||
} else if (data.type == 'devices') {
|
||||
check_devices(data);
|
||||
}
|
||||
}
|
||||
socket_di.onclose = function() {
|
||||
// something went wrong
|
||||
document.getElementById("title").innerHTML = ' !!! Connection error !!! '
|
||||
document.getElementById("title").classList.add("error");
|
||||
// Try to reconnect every 5 seconds.
|
||||
setTimeout(function() {
|
||||
startWebsockets();
|
||||
}, 5000);
|
||||
}
|
||||
} catch (exception) {
|
||||
alert('<p>Error' + exception);
|
||||
}
|
||||
}
|
||||
|
||||
function get_devices() {
|
||||
var msg = {
|
||||
//command: "GET_DEVICES"
|
||||
uri: "devices"
|
||||
};
|
||||
socket_di.send(JSON.stringify(msg));
|
||||
}
|
||||
|
||||
function send_command(cmd) {
|
||||
socket_di.send(JSON.stringify(cmd));
|
||||
}
|
||||
|
||||
function reset() {
|
||||
socket_di.send("reset\n");
|
||||
}
|
||||
|
||||
function init() {
|
||||
getSize();
|
||||
startWebsockets();
|
||||
}
|
||||
/*
|
||||
function sendRaw() {
|
||||
var cmd = {};
|
||||
cmd.raw = "0x02"; // remove 'slider_'
|
||||
send_command(cmd);
|
||||
console.log("Sent command");
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
<body onload="init();">
|
||||
<div class="wrapper">
|
||||
<table border='0' width="100%" id="deviceList">
|
||||
<tr>
|
||||
<th colspan="4" id="title">AqualinkD</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -1,373 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<meta http-equiv='Content-Type' content='text/html; charset=windows-1252'>
|
||||
<title>AqualinkD Simulator</title>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
<meta name='apple-mobile-web-app-capable' content='yes'>
|
||||
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
|
||||
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
|
||||
<link href="aqualinkd.png" rel="apple-touch-icon">
|
||||
<link href="aqualinkd.png" rel="icon">
|
||||
<style>
|
||||
html {}
|
||||
|
||||
body {
|
||||
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||||
font-weight: 300;
|
||||
background-color: white;
|
||||
color: #000000;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: rgb(221, 221, 221);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=reset] {
|
||||
background-color: rgb(165, 165, 165);
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
padding: 2px 2px;
|
||||
text-decoration: none;
|
||||
margin: 0px 0px;
|
||||
min-width: 70px;
|
||||
border-radius: 70px;
|
||||
}
|
||||
|
||||
.led {
|
||||
border-radius: calc(var(--tile_icon-height) / 2);
|
||||
border-radius: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.on {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.off {
|
||||
background-color: rgb(116, 116, 116);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type='text/javascript'>
|
||||
function send(source) {
|
||||
console.log("from" + source.id);
|
||||
|
||||
var cmd = {};
|
||||
cmd.uri = "rawcommand"
|
||||
switch (source.id) {
|
||||
case "Filter_Pump_button":
|
||||
cmd.value = "2"; //"0x02";
|
||||
break;
|
||||
case "Spa_Mode_button":
|
||||
cmd.value = "1"; // "0x01";
|
||||
break;
|
||||
case "Aux_1_button":
|
||||
cmd.value = "5"; //"0x05";
|
||||
break;
|
||||
case "Aux_2_button":
|
||||
cmd.value = "10"; //"0x0a";
|
||||
break;
|
||||
case "Aux_3_button":
|
||||
cmd.value = "15"; //"0x0f";
|
||||
break;
|
||||
case "Aux_4_button":
|
||||
cmd.value = "6"; //"0x06";
|
||||
break;
|
||||
case "Aux_5_button":
|
||||
cmd.value = "11"; //"0x0b";
|
||||
break;
|
||||
case "Aux_6_button":
|
||||
cmd.value = "16"; //"0x10";
|
||||
break;
|
||||
case "Aux_7_button":
|
||||
cmd.value = "21"; //"0x15";
|
||||
break;
|
||||
case "Pool_Heater_button":
|
||||
cmd.value = "18"; //"0x12";
|
||||
break;
|
||||
case "Spa_Heater_button":
|
||||
cmd.value = "23"; //"0x17";
|
||||
break;
|
||||
case "Solar_Heater_button":
|
||||
cmd.value = "28"; //"0x1c";
|
||||
break;
|
||||
case "B_menu":
|
||||
//cmd.value = "0x09";
|
||||
cmd.value = "9";
|
||||
break;
|
||||
case "B_cancel":
|
||||
cmd.value = "14"; //"0x0e";
|
||||
break;
|
||||
case "B_back":
|
||||
cmd.value = "19"; //"0x13";
|
||||
break;
|
||||
case "B_forward":
|
||||
cmd.value = "24"; //"0x18";
|
||||
break;
|
||||
case "B_enter":
|
||||
cmd.value = "29"; //"0x1d";
|
||||
break;
|
||||
case "B_hold":
|
||||
cmd.value = "25"; //"0x19";
|
||||
break;
|
||||
case "B_overide":
|
||||
cmd.value = "28"; //"0x1c";
|
||||
break;
|
||||
default:
|
||||
alert("Unknown button");
|
||||
return;
|
||||
break;
|
||||
}
|
||||
|
||||
send_command(cmd);
|
||||
}
|
||||
|
||||
|
||||
function update_status(data) {
|
||||
|
||||
if (document.getElementById("status").getAttribute("raw") != data.panel_message) {
|
||||
document.getElementById("status_three").innerHTML = document.getElementById("status_two").innerHTML;
|
||||
document.getElementById("status_two").innerHTML = document.getElementById("status").innerHTML;
|
||||
document.getElementById("status").innerHTML = data.panel_message;
|
||||
document.getElementById("status").setAttribute("raw", data.panel_message);
|
||||
}
|
||||
|
||||
for (var obj in data.leds) {
|
||||
if ((led = document.getElementById(obj.toString() + "_led")) == null) {
|
||||
//console.log("Error " + obj.toString() + " LED not found");
|
||||
return;
|
||||
}
|
||||
if (data.leds[obj] == "on") {
|
||||
led.classList.add("on");
|
||||
led.classList.remove("off");
|
||||
} else {
|
||||
led.classList.add("off");
|
||||
led.classList.remove("on");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function set_labels(data) {
|
||||
for (var obj in data) {
|
||||
if ((button = document.getElementById(obj + "_button")) != null && data[obj] != "NONE") {
|
||||
button.value = data[obj];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function get_appropriate_ws_url() {
|
||||
var pcol;
|
||||
var u = document.URL;
|
||||
/*
|
||||
* We open the websocket encrypted if this page came on an
|
||||
* https:// url itself, otherwise unencrypted
|
||||
*/
|
||||
if (u.substring(0, 5) == "https") {
|
||||
pcol = "wss://";
|
||||
u = u.substr(8);
|
||||
} else {
|
||||
pcol = "ws://";
|
||||
if (u.substring(0, 4) == "http")
|
||||
u = u.substr(7);
|
||||
}
|
||||
u = u.split('/');
|
||||
//alert (pcol + u[0] + ":6500");
|
||||
return pcol + u[0];
|
||||
}
|
||||
/* dumb increment protocol */
|
||||
var socket_di;
|
||||
|
||||
function startWebsockets() {
|
||||
socket_di = new WebSocket(get_appropriate_ws_url());
|
||||
try {
|
||||
socket_di.onopen = function () {
|
||||
// success!
|
||||
start_simulator();
|
||||
}
|
||||
socket_di.onmessage = function got_packet(msg) {
|
||||
document.getElementById("status").classList.remove("error");
|
||||
var data = JSON.parse(msg.data);
|
||||
if (data.type == 'status') {
|
||||
update_status(data);
|
||||
} else if (data.type == 'devices') {
|
||||
//update_status(data);
|
||||
} else if (data.type == 'aux_labels') {
|
||||
set_labels(data);
|
||||
}
|
||||
}
|
||||
socket_di.onclose = function () {
|
||||
// something went wrong
|
||||
document.getElementById("status").innerHTML = ' !!! Connection error !!! '
|
||||
document.getElementById("status").classList.add("error");
|
||||
// Try to reconnect every 5 seconds.
|
||||
setTimeout(function () {
|
||||
startWebsockets();
|
||||
}, 5000);
|
||||
}
|
||||
} catch (exception) {
|
||||
alert('<p>Error' + exception);
|
||||
}
|
||||
}
|
||||
|
||||
function start_simulator() {
|
||||
var msg = {
|
||||
//command: "simulator"
|
||||
uri: "simulator"
|
||||
};
|
||||
socket_di.send(JSON.stringify(msg));
|
||||
|
||||
/*
|
||||
var msg = {
|
||||
command: "simulator"
|
||||
};
|
||||
socket_di.send(JSON.stringify(msg));*/
|
||||
}
|
||||
|
||||
function send_command(cmd) {
|
||||
socket_di.send(JSON.stringify(cmd));
|
||||
}
|
||||
/*
|
||||
function reset() {
|
||||
socket_di.send("reset\n");
|
||||
}
|
||||
*/
|
||||
function init() {
|
||||
startWebsockets();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<body onload="init();">
|
||||
<div class="wrapper">
|
||||
|
||||
<table border='0' id="deviceList">
|
||||
|
||||
<tr>
|
||||
<td colspan="12" align="center"><label id="status_three"> </label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="12" align="center"><label id="status_two"> </label></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th colspan="12"><label id="status">AqualinkD</label></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<div id="Filter_Pump_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Filter_Pump_button" type="button" onclick="send(this);" value="Filter Pump">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Spa_Mode_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Spa_Mode_button" type="button" onclick="send(this);" value="Spa Mode">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Aux_1_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Aux_1_button" type="button" onclick="send(this);" value="AUX1">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Aux_2_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Aux_2_button" type="button" onclick="send(this);" value="AUX2">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Aux_3_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Aux_3_button" type="button" onclick="send(this);" value="AUX3">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Aux_4_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Aux_4_button" type="button" onclick="send(this);" value="AUX4">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<div id="Aux_5_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Aux_5_button" type="button" onclick="send(this);" value="AUX5">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Aux_6_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Aux_6_button" type="button" onclick="send(this);" value="AUX6">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Aux_7_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Aux_7_button" type="button" onclick="send(this);" value="AUX7">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Pool_Heater_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Pool_Heater_button" type="button" onclick="send(this);" value="Pool Heater">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Spa_Heater_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Spa_Heater_button" type="button" onclick="send(this);" value="Spa Heater">
|
||||
</td>
|
||||
<td align="right">
|
||||
<div id="Solar_Heater_led" class="led off"></div>
|
||||
</td>
|
||||
<td align="left">
|
||||
<input id="Solar_Heater_button" type="button" onclick="send(this);" value="Solar Heater">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<TD> </TD>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" colspan="2">
|
||||
<input type="button" onclick="send(this);" id="B_menu" value="Menu">
|
||||
</td>
|
||||
<td align="center" colspan="2">
|
||||
<input type="button" onclick="send(this);" id="B_cancel" value="Cancel">
|
||||
</td>
|
||||
<td align="center" colspan="2">
|
||||
<input type="button" onclick="send(this);" id="B_back" value="Back <">
|
||||
</td>
|
||||
<td align="center" colspan="2">
|
||||
<input type="button" onclick="send(this);" id="B_forward" value="Forward >">
|
||||
</td>
|
||||
<td align="center" colspan="2">
|
||||
<input type="button" onclick="send(this);" id="B_enter" value="Enter *">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|