diff --git a/README.md b/README.md
index 05d2f90..382d4a0 100644
--- a/README.md
+++ b/README.md
@@ -5,11 +5,12 @@ linux daemon to control Aqualink RS pool controllers. Provides web UI, MQTT clie
## Builtin WEB Interface.
-## New WEB UI interface (in beta)
+## New WEB interface (in beta)
* The layout & functionality are a from Appple HomeKit interface, only this works in any browser or mobile device.
* Customizable tile icons & background image. (can hide any tile)
* Thermostst, SWG & Light tiles have more options (like setting heater setpoint, light mode etc) that can be accessed with a long press
+* Support live background imags (ie poll camera for still image every X seconds)
* Like the old UI, if you load the web page in a mobile device browser, then save to desktop an app will be created for you.
## In Apple Home app.
@@ -58,7 +59,7 @@ Manual install for init-d systems
-## New WEB UI (in beta)
+## New WEB interface (in beta)
* Doesn't work in MS Edge or MS Exploder browsers. (Firefox, Chrome, Safari & mobile versions of each) all seem to be fine.
* use http://aqualink.ip.address/hk/ to access new UI
* look in `/web/hk` hopefully customizing icon and background images are self explanatory.
diff --git a/json_messages.c b/json_messages.c
index d012b11..5978b25 100644
--- a/json_messages.c
+++ b/json_messages.c
@@ -190,7 +190,7 @@ int build_device_JSON(struct aqualinkdata *aqdata, int programable_switch, char*
if ( aqdata->swg_ppm != TEMP_UNKNOWN ) {
length += sprintf(buffer+length, "{\"type\": \"value\", \"id\": \"%s\", \"name\": \"%s\", \"state\": \"%s\", \"value\": \"%d\" },",
SWG_PPM_TOPIC,
- "Salt Water Generator PPM",
+ "Salt Level PPM",
"on",
aqdata->swg_ppm);
}
@@ -493,4 +493,4 @@ bool parseJSONmqttrequest(const char *str, size_t len, int *idx, int *nvalue, ch
return true;
}
return false;
-}
\ No newline at end of file
+}
diff --git a/release/aqualinkd b/release/aqualinkd
index 4a2981a..141072a 100755
Binary files a/release/aqualinkd and b/release/aqualinkd differ
diff --git a/web/hk/index.html b/web/hk/index.html
index 3ffafa8..fc6e993 100644
--- a/web/hk/index.html
+++ b/web/hk/index.html
@@ -47,6 +47,14 @@
"USA - Show",
"Mardi Gras - Show",
"Cool Cabaret - Show"];
+
+ // Background image, delete or leave blank for solid color
+ //var background_url="http://192.168.144.224/snap.jpeg";
+ var background_url='background.jpg';
+
+ // Reload background image every X seconds.(useful if camera snapshot)
+ // 0 means only load once when page loads.
+ var background_reload=0;
AqualinkD
@@ -63,12 +71,14 @@
--tile_name-height: 32px;
--tile_status-height: 15px;
--tile_grid-gap: 10px;
+ --tile_name-lineheight: 1.2;
/*
--tile-width: 125px;
--tile_icon-height: 45px;
--tile_name-height: 42px;
--tile_status-height: 15px;
--tile_grid-gap: 20px;
+ --tile_name-lineheight: 1.4;
*/
--slider-ball: 30;
--slider-highlight: #2196F3;
@@ -117,7 +127,8 @@
height:100%;
top:0px;
left:0px;
- background-image: url("background.jpg");
+ /*background-image: url("background.jpg");*/
+ /*background-image: url("http://192.168.144.224/snap.jpeg");*/
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@@ -230,6 +241,7 @@
.tile_name {
height: var(--tile_name-height);
/*background-color: green;*/
+ line-height: var(--tile_name-lineheight);
}
.tile_status {
@@ -399,9 +411,9 @@
option = document.getElementById('pswitch_option_list');
fLen = light_program.length;
- for (i = 1; i < fLen; i++) {
+ for (i = 0; i < fLen; i++) {
var opt = document.createElement('option');
- opt.value = i;
+ opt.value = i+1;
opt.innerHTML = light_program[i];
option.appendChild(opt);
}
@@ -422,6 +434,7 @@
document.documentElement.style.setProperty('--tile_name-height', '42px');
document.documentElement.style.setProperty('--tile_status-height', '15px');
document.documentElement.style.setProperty('--tile_grid-gap', '20px');
+ document.documentElement.style.setProperty('--tile_name-lineheight', '1.4');
}
if (w > h)
_landscape = true;
@@ -441,6 +454,23 @@
}, false);
}
+function load_background()
+{
+ if (! background_url)
+ return;
+
+ //alert("load");
+ // call the notify_complete function when the image has loaded
+ var image = new Image();
+ image.onload = function() {
+ document.getElementById("body_wrap").style.backgroundImage = "url('"+this.src+"')";
+ };
+ image.src = background_url+'?' + new Date().getTime();
+
+ if (background_reload > 0)
+ setTimeout(load_background, (background_reload * 1000) );
+}
+
function interval(duration, fn) {
this.baseline = undefined
@@ -753,39 +783,47 @@
}
}
- function showTileOptions(show, id) {
+ function showTileOptions(show, id, contex) {
+ var active_option;
+
if (show == true) {
var wrapH = document.getElementById('wrapper').clientHeight+'px';
if (id != null && document.getElementById(id).getAttribute('type') == 'setpoint_thermo') {
+ active_option = document.getElementById('thermostat_options');
document.getElementById('thermostat_options').style.height = wrapH;
- document.getElementById('thermostat_options').style.display = 'flex';
+ //document.getElementById('thermostat_options').style.display = 'flex';
document.getElementById('swg_options').style.display = 'none';
document.getElementById('pswitch_options').style.display = 'none';
} else if (id != null && document.getElementById(id).getAttribute('type') == 'switch_program') {
+ active_option = document.getElementById('pswitch_options');
document.getElementById('pswitch_options').style.height = wrapH;
document.getElementById('thermostat_options').style.display = 'none';
document.getElementById('swg_options').style.display = 'none';
- document.getElementById('pswitch_options').style.display = 'flex';
+ //document.getElementById('pswitch_options').style.display = 'flex';
} else /*if (id != null && document.getElementById(id).getAttribute('type') == 'setpoint_swg')*/ {
+ active_option = document.getElementById('swg_options');
document.getElementById('swg_options').style.height = wrapH;
document.getElementById('thermostat_options').style.display = 'none';
- document.getElementById('swg_options').style.display = 'flex';
+ //document.getElementById('swg_options').style.display = 'flex';
document.getElementById('pswitch_options').style.display = 'none';
}
+ active_option.style.display = 'flex';
document.getElementById('wrapper').classList.add("opaque");
} else {
// Fake onclick to close and save any values if open
- if (document.getElementById('thermostat_options').style.display == 'flex')
+ if (contex == null) {
+ if (document.getElementById('thermostat_options').style.display == 'flex')
document.getElementById("options_close").click();
- else if (document.getElementById('swg_options').style.display == 'flex')
+ else if (document.getElementById('swg_options').style.display == 'flex')
document.getElementById("swg_options_close").click();
- else if (document.getElementById('pswitch_options').style.display == 'flex')
+ else if (document.getElementById('pswitch_options').style.display == 'flex')
document.getElementById("pswitch_options_close").click();
-
+ }
document.getElementById('thermostat_options').style.display = 'none';
document.getElementById('swg_options').style.display = 'none';
document.getElementById('pswitch_options').style.display = 'none';
document.getElementById('wrapper').classList.remove("opaque");
+ return;
}
if (show == true) {
@@ -870,7 +908,17 @@
}
}
+ // Should look info Date.now() for old browsers, but then can't use event for time
+ var cTime = performance.now();
+ var clickHandler = function(e) {
+ // Short time diff means event was the one that launched the options pane, so ignore
+ if ( (e.timeStamp - cTime) > 1000)
+ showTileOptions(false);
+ };
+ document.getElementById("body_wrap").addEventListener("click", clickHandler);
+
close_button.onclick = function() {
+ document.getElementById("body_wrap").removeEventListener("click", clickHandler);
state = oswitch.checked;
if (type == 'switch_program') {
if (pswitch.selectedIndex > 0)
@@ -884,7 +932,9 @@
if (sp_value != slider.value)
setThermostatSetpoint(id, slider.value)
}
- showTileOptions(false);
+ //showTileOptions(false, null, 'this');
+ active_option.style.display = 'none';
+ document.getElementById('wrapper').classList.remove("opaque");
}
}
}
@@ -1045,9 +1095,9 @@
-
-
-