Skip to content

Commit 177e310

Browse files
author
Bjarne Loft
committed
Better handling of input and output in the same entry, some UI update
1 parent 365f423 commit 177e310

File tree

5 files changed

+66
-46
lines changed

5 files changed

+66
-46
lines changed

‎html/template.html‎

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -100,41 +100,20 @@
100100
{name}
101101
</strong>
102102
</div>
103-
<div class="panel-body" style="font-size: 24px;">
104-
{value}
105-
</div>
103+
<ul class="list-group">
104+
{input}
105+
{output}
106+
</ul>
106107
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> <span>{last_updated}</span></div>
107108
</div>
108109
</div>
109110
<!-- split:sensor -->
110111

111-
<!-- split:input -->
112112
<div class="col-md-4">
113-
<div class="panel panel-success">
113+
<div class="panel panel-primary">
114114
<div class="panel-heading"><strong>{name}</strong></div>
115-
<div class="panel-body" style="font-size: 24px;">
116-
<form>
117-
<div class="input-group">
118-
<input type="text" class="form-control" placeholder="value">
119-
<span class="input-group-btn">
120-
<button class="btn btn-default" type="button" data-url="{path}" onclick="sendValue(this);">
121-
Send
122-
</button>
123-
</span>
124-
</div>
125-
</form>
126-
</div>
127-
</div>
128-
</div>
129-
<!-- split:input -->
130-
131-
<div class="col-md-4">
132-
<div class="panel panel-warning">
133-
<div class="panel-heading" style="background-image: linear-gradient(to bottom,#444 0,#aaa 100%); color: #fff;"><strong>{name}</strong></div>
134115
<ul class="list-group">
135-
<li class="list-group-item" style="font-size: 24px;">
136-
{value}
137-
</li>
116+
<!-- split:sensor_input -->
138117
<li class="list-group-item">
139118
<form>
140119
<div class="input-group">
@@ -147,31 +126,66 @@
147126
</div>
148127
</form>
149128
</li>
129+
<!-- split:sensnor_input -->
130+
<!-- split:sensor_output -->
131+
<li class="list-group-item" style="font-size: 24px;">
132+
<span>{value}</span>
133+
</li>
134+
<!-- split:sensor_output -->
150135
</ul>
136+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> <span>{last_updated}</span></div>
151137
</div>
152138
</div>
153139

154140
<!-- Single sensor info -->
155141
<div class="col-md-4">
156-
<div class="panel panel-info">
142+
<div class="panel panel-primary">
157143
<div class="panel-heading"><strong>audio/mute</strong></div>
158-
<div class="panel-body" style="font-size: 24px;">
144+
<ul class="list-group">
145+
<li class="list-group-item" style="font-size: 24px;">
159146
<!-- split:value_on -->
160147
<span class="label label-success">{value}</span>
161148
<!-- split:value_on -->
162149
<!-- split:value_off -->
163150
<span class="label label-danger">{value}</span>
164151
<!-- split:value_off -->
165-
</div>
152+
</li>
153+
</ul>
166154
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> {last_updated}</div>
167155
</div>
168156
</div>
169157

170158
<!-- Single sensor info -->
171159
<div class="col-md-4">
172-
<div class="panel panel-info">
160+
<div class="panel panel-primary">
173161
<div class="panel-heading"><strong>model</strong></div>
174-
<div class="panel-body" style="font-size: 24px;">W1110S</div>
162+
<ul class="list-group">
163+
<li class="list-group-item" style="font-size: 24px;">
164+
W1110S
165+
</li>
166+
</ul>
167+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
168+
</div>
169+
</div>
170+
171+
<!-- Single sensor info -->
172+
<div class="col-md-4">
173+
<div class="panel panel-primary">
174+
<div class="panel-heading"><strong>model</strong></div>
175+
<ul class="list-group">
176+
<li class="list-group-item">
177+
<form>
178+
<div class="input-group">
179+
<input type="text" class="form-control" placeholder="value">
180+
<span class="input-group-btn">
181+
<button class="btn btn-default" type="button" data-url="{path}" onclick="sendValue(this);">
182+
Send
183+
</button>
184+
</span>
185+
</div>
186+
</form>
187+
</li>
188+
</ul>
175189
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
176190
</div>
177191
</div>

‎src/Entry.cpp‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ void Entry::callback(const char* topic, uint8_t* payload, unsigned int length) {
8282
for (int i = 0; i < length; i++) {
8383
_payload += (char)payload[i];
8484
}
85-
if(!isIn() || _payload != getValue()) {
85+
if(!isIn() || (millis() - lastPublish) > 1000 || strcmp(lastValue, _payload.c_str()) != 0) {
8686
update(_payload);
8787
}
8888
}
@@ -204,6 +204,7 @@ long Entry::getLastUpdate() {
204204
void Entry::publish(const char *message) {
205205
auto function = getPublishFunction();
206206
if(function) {
207+
lastPublish = millis();
207208
function(this, String(message));
208209
}
209210
}

‎src/Entry.h‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class Entry {
1515
int interval = -1;
1616
int forceUpdate = -1;
1717
unsigned long lastUpdate = 0;
18+
unsigned long lastPublish = 0;
1819
char* lastValue = NULL;
1920
bool persist = false;
2021

‎src/WebPortal.cpp‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -74,25 +74,27 @@ void WebPortal::handleRoot() {
7474
}
7575

7676
void WebPortal::sendSensor(Entry* entry) {
77-
String page = "";
77+
String page = FPSTR(HTML_SENSOR);
78+
page.replace("{color}", entry->isInternal() ? "warning" : "primary");
79+
page.replace("{name}", getName(entry));
80+
if(entry->isOut()) {
81+
page.replace("{input}", FPSTR(HTML_SENSOR_INPUT));
82+
page.replace("{path}", getRestPath(entry));
83+
} else {
84+
page.replace("{input}", "");
85+
}
7886
String value = entry->getValue();
7987
if(value != NULL) {
80-
page += FPSTR(HTML_SENSOR);
88+
page.replace("{output}", FPSTR(HTML_SENSOR_OUTPUT));
8189
if(getName(entry).endsWith("password")) {
8290
page.replace("{value}", "***");
8391
} else {
84-
value.replace("{value}", entry->getValue());
8592
page.replace("{value}", value);
8693
}
87-
page.replace("{last_updated}", time(entry->getLastUpdate()));
88-
}
89-
if(entry->isOut()) {
90-
page += FPSTR(HTML_INPUT);
94+
} else {
95+
page.replace("{output}", "");
9196
}
92-
93-
page.replace("{color}", entry->isInternal() ? "warning" : "primary");
94-
page.replace("{name}", getName(entry));
95-
page.replace("{path}", getRestPath(entry));
97+
page.replace("{last_updated}", time(entry->getLastUpdate()));
9698
webServer->sendContent(page);
9799
}
98100

‎src/html.h‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
#pragma once
22

33
const char HTML_MAIN1[] PROGMEM = "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>Device Info - {device_id}</title><link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\"><link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css\" integrity=\"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp\" crossorigin=\"anonymous\"></head><body><style>body {background-color: #ffdd99;background-image: url(\"data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100%25\'%3E%3Cdefs%3E%3ClinearGradient id=\'a\' gradientUnits=\'userSpaceOnUse\' x1=\'0\' x2=\'0\' y1=\'0\' y2=\'100%25\' gradientTransform=\'rotate(240)\'%3E%3Cstop offset=\'0\' stop-color=\'%23ffdd99\'/%3E%3Cstop offset=\'1\' stop-color=\'%234FE\'/%3E%3C/linearGradient%3E%3Cpattern patternUnits=\'userSpaceOnUse\' id=\'b\' width=\'540\' height=\'450\' x=\'0\' y=\'0\' viewBox=\'0 0 1080 900\'%3E%3Cg fill-opacity=\'0.1\'%3E%3Cpolygon fill=\'%23444\' points=\'90 150 0 300 180 300\'/%3E%3Cpolygon points=\'90 150 180 0 0 0\'/%3E%3Cpolygon fill=\'%23AAA\' points=\'270 150 360 0 180 0\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'450 150 360 300 540 300\'/%3E%3Cpolygon fill=\'%23999\' points=\'450 150 540 0 360 0\'/%3E%3Cpolygon points=\'630 150 540 300 720 300\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'630 150 720 0 540 0\'/%3E%3Cpolygon fill=\'%23444\' points=\'810 150 720 300 900 300\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'810 150 900 0 720 0\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'990 150 900 300 1080 300\'/%3E%3Cpolygon fill=\'%23444\' points=\'990 150 1080 0 900 0\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'90 450 0 600 180 600\'/%3E%3Cpolygon points=\'90 450 180 300 0 300\'/%3E%3Cpolygon fill=\'%23666\' points=\'270 450 180 600 360 600\'/%3E%3Cpolygon fill=\'%23AAA\' points=\'270 450 360 300 180 300\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'450 450 360 600 540 600\'/%3E%3Cpolygon fill=\'%23999\' points=\'450 450 540 300 360 300\'/%3E%3Cpolygon fill=\'%23999\' points=\'630 450 540 600 720 600\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'630 450 720 300 540 300\'/%3E%3Cpolygon points=\'810 450 720 600 900 600\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'810 450 900 300 720 300\'/%3E%3Cpolygon fill=\'%23AAA\' points=\'990 450 900 600 1080 600\'/%3E%3Cpolygon fill=\'%23444\' points=\'990 450 1080 300 900 300\'/%3E%3Cpolygon fill=\'%23222\' points=\'90 750 0 900 180 900\'/%3E%3Cpolygon points=\'270 750 180 900 360 900\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'270 750 360 600 180 600\'/%3E%3Cpolygon points=\'450 750 540 600 360 600\'/%3E%3Cpolygon points=\'630 750 540 900 720 900\'/%3E%3Cpolygon fill=\'%23444\' points=\'630 750 720 600 540 600\'/%3E%3Cpolygon fill=\'%23AAA\' points=\'810 750 720 900 900 900\'/%3E%3Cpolygon fill=\'%23666\' points=\'810 750 900 600 720 600\'/%3E%3Cpolygon fill=\'%23999\' points=\'990 750 900 900 1080 900\'/%3E%3Cpolygon fill=\'%23999\' points=\'180 0 90 150 270 150\'/%3E%3Cpolygon fill=\'%23444\' points=\'360 0 270 150 450 150\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'540 0 450 150 630 150\'/%3E%3Cpolygon points=\'900 0 810 150 990 150\'/%3E%3Cpolygon fill=\'%23222\' points=\'0 300 -90 450 90 450\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'0 300 90 150 -90 150\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'180 300 90 450 270 450\'/%3E%3Cpolygon fill=\'%23666\' points=\'180 300 270 150 90 150\'/%3E%3Cpolygon fill=\'%23222\' points=\'360 300 270 450 450 450\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'360 300 450 150 270 150\'/%3E%3Cpolygon fill=\'%23444\' points=\'540 300 450 450 630 450\'/%3E%3Cpolygon fill=\'%23222\' points=\'540 300 630 150 450 150\'/%3E%3Cpolygon fill=\'%23AAA\' points=\'720 300 630 450 810 450\'/%3E%3Cpolygon fill=\'%23666\' points=\'720 300 810 150 630 150\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'900 300 810 450 990 450\'/%3E%3Cpolygon fill=\'%23999\' points=\'900 300 990 150 810 150\'/%3E%3Cpolygon points=\'0 600 -90 750 90 750\'/%3E%3Cpolygon fill=\'%23666\' points=\'0 600 90 450 -90 450\'/%3E%3Cpolygon fill=\'%23AAA\' points=\'180 600 90 750 270 750\'/%3E%3Cpolygon fill=\'%23444\' points=\'180 600 270 450 90 450\'/%3E%3Cpolygon fill=\'%23444\' points=\'360 600 270 750 450 750\'/%3E%3Cpolygon fill=\'%23999\' points=\'360 600 450 450 270 450\'/%3E%3Cpolygon fill=\'%23666\' points=\'540 600 630 450 450 450\'/%3E%3Cpolygon fill=\'%23222\' points=\'720 600 630 750 810 750\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'900 600 810 750 990 750\'/%3E%3Cpolygon fill=\'%23222\' points=\'900 600 990 450 810 450\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'0 900 90 750 -90 750\'/%3E%3Cpolygon fill=\'%23444\' points=\'180 900 270 750 90 750\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'360 900 450 750 270 750\'/%3E%3Cpolygon fill=\'%23AAA\' points=\'540 900 630 750 450 750\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'720 900 810 750 630 750\'/%3E%3Cpolygon fill=\'%23222\' points=\'900 900 990 750 810 750\'/%3E%3Cpolygon fill=\'%23222\' points=\'1080 300 990 450 1170 450\'/%3E%3Cpolygon fill=\'%23FFF\' points=\'1080 300 1170 150 990 150\'/%3E%3Cpolygon points=\'1080 600 990 750 1170 750\'/%3E%3Cpolygon fill=\'%23666\' points=\'1080 600 1170 450 990 450\'/%3E%3Cpolygon fill=\'%23DDD\' points=\'1080 900 1170 750 990 750\'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x=\'0\' y=\'0\' fill=\'url(%23a)\' width=\'100%25\' height=\'100%25\'/%3E%3Crect x=\'0\' y=\'0\' fill=\'url(%23b)\' width=\'100%25\' height=\'100%25\'/%3E%3C/svg%3E\");background-attachment: fixed;background-size: cover;background-position: center;padding: 20px;}.boxshadow {box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);background-color: #FFF;border-style: solid;border-color: #ddd;border-width: 1px;}.panel {box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);}</style><script type=\"application/javascript\">function sendValue(input) {$.ajax({url: input.dataset.url, method: \"POST\", data: $(input).closest(\"form\").find(\"input\").val()}).complete(function (data, textStatus, jqXHR) {alert(textStatus);});}setInterval(function() {$(\"[data-ajaxurl]\").each(function(index) {var ele = $(this);$.getJSON( ele.data(\"ajaxurl\"), function (data) {var eleValue = $(ele.find(\".panel-body\")[0]);if(data.value.toUpperCase() == \"OPEN\") {eleValue.html(\"<span class=\\\"label label-success\\\">\" + data.value + \"</span>\");} else if(data.value.toUpperCase() == \"CLOSE\") {eleValue.html(\"<span class=\\\"label label-danger\\\">\" + data.value + \"</span>\");} else {eleValue.html(data.value);}var eleTime = $(ele.find(\".panel-footer span\")[0]);eleTime.html(data.updated);});});}, 1000);</script><div class=\"container\"><nav class=\"navbar navbar-default\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\">{device_id}</a></div><div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\"><ul class=\"nav navbar-nav navbar-right\"><li role=\"presentation\" class=\"active\"><a href=\"#devices\" aria-controls=\"devices\" role=\"tab\" data-toggle=\"tab\"><span class=\"glyphicon glyphicon-dashboard\" aria-hidden=\"true\"></span> Devices</a></li><li role=\"presentation\"><a href=\"#config\" aria-controls=\"config\" role=\"tab\" data-toggle=\"tab\"><span class=\"glyphicon glyphicon-pencil\" aria-hidden=\"true\"></span> Config</a></li><li role=\"presentation\"><a href=\"#about\" aria-controls=\"about\" role=\"tab\" data-toggle=\"tab\"><span class=\"glyphicon glyphicon-book\" aria-hidden=\"true\"></span> About</a></li></ul></div></div></nav><div class=\"tab-content panel panel-default\"><div role=\"tabpanel\" class=\"tab-pane active\" id=\"devices\"><br /><div class=\"container-fluid\"><div class=\"row\" style=\"min-height: 600px\">";
4-
const char HTML_SENSOR[] PROGMEM = "<div class=\"col-md-4\"><div class=\"panel panel-{color}\" data-ajaxurl=\"{path}\"><div class=\"panel-heading\"><strong>{name}</strong></div><div class=\"panel-body\" style=\"font-size: 24px;\">{value}</div><div class=\"panel-footer\" style=\"padding: 5px 15px; font-size: 85%\"><strong>Last updated:</strong> <span>{last_updated}</span></div></div></div>";
5-
const char HTML_INPUT[] PROGMEM = "<div class=\"col-md-4\"><div class=\"panel panel-success\"><div class=\"panel-heading\"><strong>{name}</strong></div><div class=\"panel-body\" style=\"font-size: 24px;\"><form><div class=\"input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"value\"><span class=\"input-group-btn\"><button class=\"btn btn-default\" type=\"button\" data-url=\"{path}\" onclick=\"sendValue(this);\">Send</button></span></div></form></div></div></div>";
4+
const char HTML_SENSOR[] PROGMEM = "<div class=\"col-md-4\"><div class=\"panel panel-{color}\" data-ajaxurl=\"{path}\"><div class=\"panel-heading\"><strong>{name}</strong></div><ul class=\"list-group\">{input}{output}</ul><div class=\"panel-footer\" style=\"padding: 5px 15px; font-size: 85%\"><strong>Last updated:</strong> <span>{last_updated}</span></div></div></div>";
5+
const char HTML_SENSOR_INPUT[] PROGMEM = "<li class=\"list-group-item\"><form><div class=\"input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"value\"><span class=\"input-group-btn\"><button class=\"btn btn-default\" type=\"button\" data-url=\"{path}\" onclick=\"sendValue(this);\">Send</button></span></div></form></li>";
6+
const char HTML_SENSNOR_INPUT[] PROGMEM = "";
7+
const char HTML_SENSOR_OUTPUT[] PROGMEM = "<li class=\"list-group-item\" style=\"font-size: 24px;\"><span>{value}</span></li>";
68
const char HTML_VALUE_ON[] PROGMEM = "<span class=\"label label-success\">{value}</span>";
79
const char HTML_VALUE_OFF[] PROGMEM = "<span class=\"label label-danger\">{value}</span>";
810
const char HTML_MAIN2[] PROGMEM = "</div></div></div><div role=\"tabpanel\" class=\"tab-pane\" id=\"config\"><div class=\"container-fluid\"><div class=\"row\"><div class=\"col-md-12\"><form class=\"form-horizontal\" action=\"/save\" method=\"POST\">";

0 commit comments

Comments
 (0)