<!DOCTYPE html>
<html>
<head>
<title>Aqualink RS8</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
padding: .80em 2em;
width:100%;
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 {
position: relative;
top: 1px;
}
.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 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);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
.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))
);}
.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))
);}
div{border-width:0px; border-style:solid;padding:5px;}
body,html{margin:0; padding:0;color:#f4f4f4;font-family:Arial,Helvetica,sans-serif;}
#main_div{width:760px;height:500px;margin-left:0;padding:0px;}
#header_div{position:relative;height:75px;}
#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:300%;}
#date_time{position:absolute;top:55px;right:0;}
#body_div{position:relative;height:370px;}
#leds_div{position:absolute;top:5px;right:10px;height:355px;width:225px;}
#pool_temp_div{position:absolute;top:5px;height:190px;width:225px;right:505px;}
#spa_temp_div{position:absolute;top:5px;height:190px;width:225px;right:257px;}
#solar_htr_div{position:absolute;top:215px;height:45px;width:473px;right:257px;}
#solar_button_div{position:absolute;top:8px;right:5px;width:300px;}
#frz_protect_div{position:absolute;top:281px;height:79px;width:473px;right:257px;}
#frz_protect_set_pnt{position:absolute;top:15px;height:50px;right:80px;font-size:300%;}
#fp_set_pnt_button_div{position:absolute;top:15px;height:0px;right:5px;width:60px;}
#fp_set_button_div{position:absolute;top:45px;width:110px;}
.battery_image_div{position:absolute;top:0;right:5px;width:30px;}
.net_activity_div{position:absolute;top:55px;left:0;}
.led_button_div{position:relative;top:0;padding:0;height:40px;}
.led_div{position:absolute;top:2px;left:5px;padding:0;}
.button_div{position:absolute;top:1px;height:30px;right:5px;width:180px;padding:0;}
.htr_led_div{position:absolute;top:55px;left:15px;padding:0;}
.htr_button_div{position:absolute;top:55px;height:45px;right:5px;width:160px;padding:0;margin: 0px auto;}
.body_sub_div{border:2px solid #a1a1a1;border-radius:15px;}
.temp_title_div{position:relative;top:0;height:50px;float:left;font-size:175%;}
.temp_val_div{position:relative;top:0;height:55px;float:right;font-size:250%;}
.set_pnt_val_div{position:absolute;top:90px;height:50px;right:75px;font-size:300%;}
.set_pnt_button_div{position:absolute;top:100px;height:0px;right:5px;width:60px;}
.set_button_div{position:absolute;top:150px;width:110px;}
.solar_led_div{position:absolute;top:8px;right:325px;}
</style>
<script type="text/javascript" language="javascript">
function BlockMove(event) {
// Tell Safari not to move the window.
event.preventDefault() ;
}
// Preload the images.
var delay = 100;
if (document.images) {
setTimeout(get_batt_ok_img, delay);
}
function get_batt_ok_img() {
document.getElementById('battery_ok').src = "images/battery_ok.png";
setTimeout(get_batt_low_img, delay);
}
function get_batt_low_img() {
setTimeout(get_batt_blank_img, delay);
document.getElementById('battery_low').src = "images/battery_low.png";
}
function get_batt_blank_img() {
setTimeout(get_led_on_img, delay);
document.getElementById('battery_blank').src = "images/battery_blank.png";
}
function get_led_on_img() {
setTimeout(get_led_off_img, delay);
document.getElementById('pump_on_status').src = "images/led_on.png";
document.getElementById('spa_on_status').src = "images/led_on.png";
document.getElementById('aux1_on_status').src = "images/led_on.png";
document.getElementById('aux2_on_status').src = "images/led_on.png";
document.getElementById('aux3_on_status').src = "images/led_on.png";
document.getElementById('aux4_on_status').src = "images/led_on.png";
document.getElementById('aux5_on_status').src = "images/led_on.png";
document.getElementById('aux6_on_status').src = "images/led_on.png";
document.getElementById('aux7_on_status').src = "images/led_on.png";
document.getElementById('pool_htr_on_status').src = "images/led_on.png";
document.getElementById('spa_htr_on_status').src = "images/led_on.png";
document.getElementById('solar_htr_on_status').src = "images/led_on.png";
}
function get_led_off_img() {
setTimeout(get_led_enabled_img, delay);
document.getElementById('pump_off_status').src = "images/led_off.png";
document.getElementById('spa_off_status').src = "images/led_off.png";
document.getElementById('aux1_off_status').src = "images/led_off.png";
document.getElementById('aux2_off_status').src = "images/led_off.png";
document.getElementById('aux3_off_status').src = "images/led_off.png";
document.getElementById('aux4_off_status').src = "images/led_off.png";
document.getElementById('aux5_off_status').src = "images/led_off.png";
document.getElementById('aux6_off_status').src = "images/led_off.png";
document.getElementById('aux7_off_status').src = "images/led_off.png";
document.getElementById('pool_htr_off_status').src = "images/led_off.png";
document.getElementById('spa_htr_off_status').src = "images/led_off.png";
document.getElementById('solar_htr_off_status').src = "images/led_off.png";
}
function get_led_enabled_img() {
setTimeout(get_net_off_img, delay);
document.getElementById('pool_htr_en_status').src = "images/led_enabled.png";
document.getElementById('spa_htr_en_status').src = "images/led_enabled.png";
}
function get_net_off_img() {
setTimeout(get_net_yellow_img, delay);
document.getElementById('net_off').src = "images/net_off.png";
}
function get_net_yellow_img() {
setTimeout(get_net_green_img, delay);
document.getElementById('net_yellow').src = "images/net_yellow.png";
}
function get_net_green_img() {
setTimeout(get_net_red_img, delay);
document.getElementById('net_green').src = "images/net_green.png";
}
function get_net_red_img() {
document.getElementById('net_red').src = "images/net_red.png";
}
function LedsData() {
this.pump = "off";
this.spa = "off";
this.aux1 = "off";
this.aux2 = "off";
this.aux3 = "off";
this.aux4 = "off";
this.aux5 = "off";
this.aux6 = "off";
this.aux7 = "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.pool_htr_set_pnt = "0";
this.spa_htr_set_pnt = "102";
this.frz_protect_set_pnt = "36";
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 aqualink_port = '';
var poll_count = 0;
var command_queued = false;
var command;
var net_connection = 'red';
function poll_system() {
if(command_queued == true) {
send_command(command);
command_queued = false;
poll_count = 9;
console.log('command: ' + command);
}
else {
if(poll_count >= 10) {
get_status();
}
}
poll_count += 1;
setTimeout("poll_system()", 500);
//console.log('poll count = ' + poll_count);
}
function send_command(cmd) {
var _cmd = {};
_cmd.command = cmd;
//alert(JSON.stringify(_cmd));
var req = new XMLHttpRequest();
req.open("POST", "/AqualinkRS8/command", true);
req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
//req.onreadystatechange = get_status;
req.send(JSON.stringify(_cmd));
}
function received_status() {
if(this.readyState == this.DONE) {
if(this.status == 200) {
// success!
net_connection = 'green';
var a_data = JSON.parse(this.responseText);
update_status(a_data);
return;
}
// something went wrong
net_connection = 'red';
}
}
function get_status() {
document.getElementById('net_yellow').style.visibility='visible';
net_connection = 'yellow';
poll_count = 0;
var req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.onreadystatechange = received_status;
req.open("GET", '/AqualinkRS8', true);
req.send();
}
function queue_command(cmd) {
//alert('queue_command(): ' + cmd);
command_queued = true;
command = cmd;
}
function received_labels() {
if(this.readyState == this.DONE) {
if(this.status == 200) {
// success!
net_connection = 'green';
var a_data = JSON.parse(this.responseText);
set_aux_button_labels(a_data);
return;
}
// something went wrong
//alert("didn't get labels!");
net_connection = 'red';
}
}
function get_aux_labels() {
document.getElementById('net_yellow').style.visibility='visible';
net_connection = 'yellow';
poll_count = 0;
var req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.onreadystatechange = received_labels;
req.open("GET", '/Config/aux_labels', true);
req.send();
}
function set_aux_button_labels(data) {
document.getElementById('aux1_button').value = data.aux1_label;
document.getElementById('aux2_button').value = data.aux2_label;
document.getElementById('aux3_button').value = data.aux3_label;
document.getElementById('aux4_button').value = data.aux4_label;
document.getElementById('aux5_button').value = data.aux5_label;
document.getElementById('aux6_button').value = data.aux6_label;
document.getElementById('aux7_button').value = data.aux7_label;
}
window.onload = function() {
get_aux_labels();
poll_system();
}
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;
}
else if(id == "spa_temp") {
temp_string = aqualink_data.spa_temp;
}
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;
}
function incr_pool_htr(direction) {
if(direction == '+') {
pool_htr_set_point.value++;
}
else {
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");
}
function incr_spa_htr(direction) {
if(direction == '+') {
spa_htr_set_point.value++;
}
else {
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");
}
function incr_frz_protect(direction) {
if(direction == '+') {
freeze_protect_set_point.value++;
}
else {
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 net_connection_icon() {
if(net_connection == "red") {
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 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 update_date_time() {
var el = document.getElementById("date_time");
el.innerHTML = aqualink_data.time + " - " + aqualink_data.date;
}
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 update_leds() {
if(aqualink_data.leds.pump == "on") {
document.getElementById('pump_off_status').style.visibility='hidden';
document.getElementById('pump_on_status').style.visibility='visible';
}
else {
document.getElementById('pump_on_status').style.visibility='hidden';
document.getElementById('pump_off_status').style.visibility='visible';
}
if(aqualink_data.leds.spa == "on") {
document.getElementById('spa_off_status').style.visibility='hidden';
document.getElementById('spa_on_status').style.visibility='visible';
}
else {
document.getElementById('spa_on_status').style.visibility='hidden';
document.getElementById('spa_off_status').style.visibility='visible';
}
if(aqualink_data.leds.aux1 == "on") {
document.getElementById('aux1_off_status').style.visibility='hidden';
document.getElementById('aux1_on_status').style.visibility='visible';
}
else {
document.getElementById('aux1_on_status').style.visibility='hidden';
document.getElementById('aux1_off_status').style.visibility='visible';
}
if(aqualink_data.leds.aux2 == "on") {
document.getElementById('aux2_off_status').style.visibility='hidden';
document.getElementById('aux2_on_status').style.visibility='visible';
}
else {
document.getElementById('aux2_on_status').style.visibility='hidden';
document.getElementById('aux2_off_status').style.visibility='visible';
}
if(aqualink_data.leds.aux3 == "on") {
document.getElementById('aux3_off_status').style.visibility='hidden';
document.getElementById('aux3_on_status').style.visibility='visible';
}
else {
document.getElementById('aux3_on_status').style.visibility='hidden';
document.getElementById('aux3_off_status').style.visibility='visible';
}
if(aqualink_data.leds.aux4 == "on") {
document.getElementById('aux4_off_status').style.visibility='hidden';
document.getElementById('aux4_on_status').style.visibility='visible';
}
else {
document.getElementById('aux4_on_status').style.visibility='hidden';
document.getElementById('aux4_off_status').style.visibility='visible';
}
if(aqualink_data.leds.aux5 == "on") {
document.getElementById('aux5_off_status').style.visibility='hidden';
document.getElementById('aux5_on_status').style.visibility='visible';
}
else {
document.getElementById('aux5_on_status').style.visibility='hidden';
document.getElementById('aux5_off_status').style.visibility='visible';
}
if(aqualink_data.leds.aux6 == "on") {
document.getElementById('aux6_off_status').style.visibility='hidden';
document.getElementById('aux6_on_status').style.visibility='visible';
}
else {
document.getElementById('aux6_on_status').style.visibility='hidden';
document.getElementById('aux6_off_status').style.visibility='visible';
}
if(aqualink_data.leds.aux7 == "on") {
document.getElementById('aux7_off_status').style.visibility='hidden';
document.getElementById('aux7_on_status').style.visibility='visible';
}
else {
document.getElementById('aux7_on_status').style.visibility='hidden';
document.getElementById('aux7_off_status').style.visibility='visible';
}
if(aqualink_data.leds.pool_heater == "off") {
document.getElementById('pool_htr_on_status').style.visibility='hidden';
document.getElementById('pool_htr_en_status').style.visibility='hidden';
document.getElementById('pool_htr_off_status').style.visibility='visible';
}
else if(aqualink_data.leds.pool_heater == "on") {
document.getElementById('pool_htr_on_status').style.visibility='visible';
document.getElementById('pool_htr_en_status').style.visibility='hidden';
document.getElementById('pool_htr_off_status').style.visibility='hidden';
}
else if(aqualink_data.leds.pool_heater == "enabled") {
document.getElementById('pool_htr_on_status').style.visibility='hidden';
document.getElementById('pool_htr_en_status').style.visibility='visible';
document.getElementById('pool_htr_off_status').style.visibility='hidden';
}
if(aqualink_data.leds.spa_heater == "off") {
document.getElementById('spa_htr_on_status').style.visibility='hidden';
document.getElementById('spa_htr_en_status').style.visibility='hidden';
document.getElementById('spa_htr_off_status').style.visibility='visible';
}
else if(aqualink_data.leds.spa_heater == "on") {
document.getElementById('spa_htr_on_status').style.visibility='visible';
document.getElementById('spa_htr_en_status').style.visibility='hidden';
document.getElementById('spa_htr_off_status').style.visibility='hidden';
}
else if(aqualink_data.leds.spa_heater == "enabled") {
document.getElementById('spa_htr_on_status').style.visibility='hidden';
document.getElementById('spa_htr_en_status').style.visibility='visible';
document.getElementById('spa_htr_off_status').style.visibility='hidden';
}
if(aqualink_data.leds.solar_heater == "off") {
document.getElementById('solar_htr_on_status').style.visibility='hidden';
document.getElementById('solar_htr_en_status').style.visibility='hidden';
document.getElementById('solar_htr_off_status').style.visibility='visible';
}
else if(aqualink_data.leds.solar_heater == "on") {
document.getElementById('solar_htr_on_status').style.visibility='visible';
document.getElementById('solar_htr_en_status').style.visibility='hidden';
document.getElementById('solar_htr_off_status').style.visibility='hidden';
}
else if(aqualink_data.leds.solar_heater == "enabled") {
document.getElementById('solar_htr_on_status').style.visibility='hidden';
document.getElementById('solar_htr_en_status').style.visibility='visible';
document.getElementById('solar_htr_off_status').style.visibility='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';
}
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();
}
</script>
</head>
<body ontouchmove="BlockMove(event);" >
<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][/img]</div>
<div id="battery_low_div" class="battery_image_div">[img][/img]</div>
<div id="battery_blank_div" class="battery_image_div">[img][/img]</div>
</div>
<div id="line2">
<div id="net_off_div" class="net_activity_div">[img][/img]</div>
<div id="net_green_div" class="net_activity_div">[img][/img]</div>
<div id="net_yellow_div" class="net_activity_div">[img][/img]</div>
<div id="net_red_div" class="net_activity_div">[img][/img]</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="led_button_div" id="pool_htr">
<div class="htr_led_div">[img][/img]</div>
<div class="htr_led_div">[img][/img]</div>
<div class="htr_led_div">[img][/img]</div>
<div class="htr_button_div"><input class='button black' type="button" onclick="queue_command('KEY_HTR_POOL')" value="Heater"/></div>
</div>
<div id="pool_htr_set_pnt" class="set_pnt_val_div">000 F</div>
<div class="set_pnt_button_div">
<input class='button black' type="button" onclick="incr_pool_htr('+')" value="+"/>
<input class='button black' type="button" onclick="incr_pool_htr('-')" value="-"/>
</div>
<div class="set_button_div"><input class='button black' type="button" onclick="set_pool_htr" value="Set"/></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="led_button_div" id="pool_htr">
<div class="htr_led_div">[img][/img]</div>
<div class="htr_led_div">[img][/img]</div>
<div class="htr_led_div">[img][/img]</div>
<div class="htr_button_div"><input class='button black' type="button" onclick="queue_command('KEY_HTR_SPA')" value="Heater"/></div>
</div>
<div id="spa_htr_set_pnt" class="set_pnt_val_div">000 F</div>
<div class="set_pnt_button_div">
<input class='button black' type="button" onclick="incr_spa_htr('+')" value="+"/>
<input class='button black' type="button" onclick="incr_spa_htr('-')" value="-"/>
</div>
<div class="set_button_div"><input class='button black' type="button" onclick="set_spa_htr" value="Set"/></div>
</div>
<div id="solar_htr_div" class="body_sub_div">
<div class="temp_title_div">Solar:</div>
<div class="solar_led_div">[img][/img]</div>
<div class="solar_led_div">[img][/img]</div>
<div class="solar_led_div">[img][/img]</div>
<div id="solar_button_div"><input class='button black' type="button" onclick="queue_command('KEY_HTR_SOLAR')" value="Heater"/></div>
</div>
<div id="frz_protect_div" class="body_sub_div">
<div class="temp_title_div">Freeze Protection:</div>
<div id="frz_protect_set_pnt">000 F</div>
<div id="fp_set_pnt_button_div">
<input class='button black' type="button" onclick="incr_frz_protect('+')" value="+"/>
<input class='button black' type="button" onclick="incr_frz_protect('-')" value="-"/>
</div>
<div id="fp_set_button_div"><input class='button black' type="button" onclick="set_frz_protect" value="Set"/></div>
</div>
<div id="leds_div" class="body_sub_div">
<div class="led_button_div" id="filter_pump">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input class='button black' type="button" onclick="queue_command('KEY_PUMP')" value="Filter Pump"/></div>
</div>
<div class="led_button_div" id="spa_mode">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input class='button black' type="button" onclick="queue_command('KEY_SPA')" value="Spa"/></div>
</div>
<div class="led_button_div" id="aux1">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input id="aux1_button" class='button black' type="button" onclick="queue_command('KEY_AUX1')" value="Aux 1"/></div>
</div>
<div class="led_button_div" id="aux2">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input id="aux2_button" class='button black' type="button" onclick="queue_command('KEY_AUX2')" value="Aux 2"/></div>
</div>
<div class="led_button_div" id="aux3">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input id="aux3_button" class='button black' type="button" onclick="queue_command('KEY_AUX3')" value="Aux 3"/></div>
</div>
<div class="led_button_div" id="aux4">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input id="aux4_button" class='button black' type="button" onclick="queue_command('KEY_AUX4')" value="Aux 4"/></div>
</div>
<div class="led_button_div" id="aux5">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input id="aux5_button" class='button black' type="button" onclick="queue_command('KEY_AUX5')" value="Aux 5"/></div>
</div>
<div class="led_button_div" id="aux6">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input id="aux6_button" class='button black' type="button" onclick="queue_command('KEY_AUX6')" value="Aux 6"/></div>
</div>
<div class="led_button_div" id="aux7">
<div class="led_div">[img][/img]</div>
<div class="led_div">[img][/img]</div>
<div class="button_div"><input id="aux7_button" class='button black' type="button" onclick="queue_command('KEY_AUX7')" value="Aux 7"/></div>
</div>
</div>
</div>
<div id="footer_div" class="bgimg">
</div>
</div>
</body>
</html>