Skip to content

Commit cf25f4d

Browse files
bloftbloft
committed
Update to html
1 parent dcb7ebd commit cf25f4d

File tree

4 files changed

+84
-18
lines changed

4 files changed

+84
-18
lines changed

‎html/linegraph.txt‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
2+
<div id="chart_div"></div>
3+
4+
<script type="text/javascript">
5+
google.charts.load('current', {packages: ['corechart', 'line']});
6+
google.charts.setOnLoadCallback(drawBasic);
7+
8+
function drawBasic() {
9+
var data = new google.visualization.DataTable();
10+
data.addColumn('number', 'X');
11+
data.addColumn('number', '');
12+
13+
data.addRow([0,0]);
14+
15+
var options = {
16+
curveType: 'function',
17+
legend: { position: 'none' }
18+
};
19+
20+
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
21+
chart.draw(data, options);
22+
23+
setInterval(function() {
24+
data.addRow([data.getNumberOfRows()+1, Math.round(60 * Math.random())]);
25+
chart.draw(data, options);
26+
}, 1000);
27+
}
28+
</script>

‎html/template.html‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ <h1>Device Info - {device_id}</h1>
7373
<span class="label label-danger">{value}</span>
7474
<!-- split:value_off -->
7575
</div>
76-
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
7776
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> {last_updated}</div>
7877
</div>
7978
</div>
@@ -273,22 +272,52 @@ <h3>Other</h3><hr/>
273272
<div class="container-fluid">
274273
<div class="row">
275274
<div class="col-md-12">
275+
<h1>About</h1>
276276
<p>Device is using EasyMqtt version 0.0.1</p>
277-
Device Id: {device_id}<br />
278-
Topic: {topic}<br />
277+
<dl class="dl-horizontal">
278+
<dt>Device Id</dt><dd>{device_id}</dd>
279+
<dt>Topic</dt><dd>{topic}</dd>
280+
</dl>
279281
<hr />
280-
Rest API:<br />
281-
<ul>
282+
<h3>MQTT API:</h3>
283+
<ul class="list-group">
282284
<!-- split:main4 -->
283-
<!-- split:rest_doc -->
284-
<li>{path}</li>
285-
<!-- split:rest_doc -->
286-
<li>http://192.168.1.72/audio/mute</li>
287-
<li>http://192.168.1.72/model</li>
288-
<li>http://192.168.1.72/source</li>
289-
<li>http://192.168.1.72/lamp/mode</li>
285+
<li class="list-group-item">
286+
{path}
287+
<span class="badge">Set</span>
288+
<span class="badge">Get</span>
289+
</li>
290+
<li class="list-group-item">
291+
EasyMqtt/123456/model
292+
<span class="badge">Get</span>
293+
</li>
290294
<!-- split:main5 -->
291295
</ul>
296+
<hr />
297+
<h3>Rest API:</h3>
298+
<ul class="list-group">
299+
<!-- split:main5 -->
300+
<!-- split:api_doc -->
301+
<li class="list-group-item">
302+
{path}
303+
</li>
304+
<!-- split:api_doc -->
305+
<li class="list-group-item">
306+
http://192.168.1.72/model
307+
<span class="badge">GET</span>
308+
</li>
309+
<li class="list-group-item">
310+
http://192.168.1.72/source
311+
<span class="badge">GET</span>
312+
<span class="badge">POST</span>
313+
</li>
314+
<li class="list-group-item">
315+
http://192.168.1.72/lamp/mode
316+
<span class="badge">GET</span>
317+
<span class="badge">POST</span>
318+
</li>
319+
<!-- split:main6 -->
320+
</ul>
292321
</div>
293322
</div>
294323
</div>
@@ -301,4 +330,4 @@ <h3>Other</h3><hr/>
301330
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
302331
</body>
303332
</html>
304-
<!-- split:main5 -->
333+
<!-- split:main6 -->

‎src/WebPortal.h‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,19 @@ class WebPortal {
9292
page += FPSTR(HTML_MAIN4);
9393
mqtt->each([&](MqttEntry* entry) {
9494
if(entry->isOut() || entry->isIn()) {
95-
page += FPSTR(HTML_REST_DOC);
96-
page.replace("{path}", getName(entry));
95+
page += FPSTR(HTML_API_DOC);
96+
page.replace("{path}", entry->getTopic());
9797
}
9898
});
99+
99100
page += FPSTR(HTML_MAIN5);
101+
mqtt->each([&](MqttEntry* entry) {
102+
if(entry->isOut() || entry->isIn()) {
103+
page += FPSTR(HTML_API_DOC);
104+
page.replace("{path}", getName(entry));
105+
}
106+
});
107+
page += FPSTR(HTML_MAIN6);
100108
// About
101109
page.replace("{device_id}", mqtt->get("system/deviceId").getValue());
102110
page.replace("{topic}", mqtt->getTopic());

‎src/html.h‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ const char HTML_INPUT[] PROGMEM = "<div class=\"col-md-4\"><div class=\"panel pa
1010
const char HTML_MAIN3[] 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\">";
1111
const char HTML_CONFIG_HEADER[] PROGMEM = "<br /><h3>{title}</h3><hr/>";
1212
const char HTML_CONFIG_ENTRY[] PROGMEM = "<div class=\"form-group\"><label for=\"{key}\" class=\"col-sm-2 control-label\">{key}</label><div class=\"col-sm-8\"><input type=\"{type}\" class=\"form-control\" id=\"{key}\" placeholder=\"\" value=\"{value}\"></div></div>";
13-
const char HTML_MAIN4[] PROGMEM = "<hr/><div class=\"form-group\"><div class=\"col-sm-offset-9 col-sm-2\"><button type=\"submit\" class=\"btn btn-default\">Save</button></div></div></form></div></div></div></div><div role=\"tabpanel\" class=\"tab-pane\" id=\"about\"><br /><div class=\"container-fluid\"><div class=\"row\"><div class=\"col-md-12\"><p>Device is using EasyMqtt version 0.0.1</p>Device Id: {device_id}<br />Topic: {topic}<br /><hr />Rest API:<br /><ul>";
14-
const char HTML_REST_DOC[] PROGMEM = "<li>{path}</li>";
15-
const char HTML_MAIN5[] PROGMEM = "</ul></div></div></div></div></div></div><script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script><script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\"></script></body></html>";
13+
const char HTML_MAIN4[] PROGMEM = "<hr/><div class=\"form-group\"><div class=\"col-sm-offset-9 col-sm-2\"><button type=\"submit\" class=\"btn btn-default\">Save</button></div></div></form></div></div></div></div><div role=\"tabpanel\" class=\"tab-pane\" id=\"about\"><br /><div class=\"container-fluid\"><div class=\"row\"><div class=\"col-md-12\"><h1>About</h1><p>Device is using EasyMqtt version 0.0.1</p>Device Id: {device_id}<br />Topic: {topic}<br /><hr /><h3>MQTT API:</h3><ul class=\"list-group\">";
14+
const char HTML_MAIN5[] PROGMEM = "</ul><hr /><h3>Rest API:</h3><ul class=\"list-group\">";
15+
const char HTML_API_DOC[] PROGMEM = "<li class=\"list-group-item\">{path}</li>";
16+
const char HTML_MAIN6[] PROGMEM = "</ul></div></div></div></div></div></div><script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script><script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\"></script></body></html>";
1617

1718
#endif

0 commit comments

Comments
 (0)