Skip to content

Commit 3444940

Browse files
stevetreasestevetrease
committed
More intelligent construction of targets on clientside web page
1 parent 0235586 commit 3444940

File tree

1 file changed

+49
-45
lines changed

1 file changed

+49
-45
lines changed

‎mqtt/index.html‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,24 @@
66
</head>
77
<body style="font-family:Verdana;">
88

9-
<table><tr>
9+
<table border="1"><tr>
1010
<td>
1111
<table id="myTablePower" border="1"><tr>
12-
<td id="myTablePowerTopicsensors/power/0">Total power</td>
13-
<td id="myTablePowerPowersensors/power/0"></td>
12+
<td id="sensors/power/0">Total power</td>
13+
<td id="sensors/power/0"></td>
1414
</tr>
1515
</table>
1616
</td>
1717
<td>
1818
<table id="myTableTemp" border="1"></table>
1919
</td>
20+
<td>
21+
<table id="myTableHumidity" border="1"></table>
22+
</td>
2023
</tr></table>
24+
<table id="myTableNO2" border="1"></table>
25+
<table id="myTablePressure" border="1"></table>
26+
<table id="myTableCO" border="1"></table>
2127
<P>
2228
Total power consumed since start <div id="powercumulative"></div>
2329
<P>
@@ -44,59 +50,57 @@
4450

4551
var socket = io.connect("http://192.168.1.103:8500");
4652
socket.on('data', function(data) {
53+
// console.log("Message received " + data.topic + " of " + data.value);
4754

48-
var topictag = "sensors/power/";
49-
if (data.topic.substring(0,topictag.length) == topictag) {
50-
// console.log("Power match - " + data.topic + " " + typeof(data.topic));
51-
// check if the table cells exists, if not create it and then set value
52-
if (!ElementExists ("myTablePowerPower" + data.topic)) {
55+
// check the target topic exisits & if not create a target table entry
56+
if (!ElementExists (data.topic)) {
57+
// console.log("Creating target " + data.topic);
58+
var topictag = "sensors/power/";
59+
if (data.topic.substring(0,topictag.length) == topictag) {
5360
var table=document.getElementById("myTablePower");
54-
var row=table.insertRow(1);
55-
var cell=row.insertCell(0);
56-
cell.id = "myTablePowerPower" + data.topic;
57-
document.getElementById("myTablePowerPower" + data.topic).style.textAlign="right";
58-
var cell=row.insertCell(0);
59-
cell.id = "myTablePowerTopic" + data.topic;
60-
document.getElementById("myTablePowerTopic" + data.topic).innerHTML= data.topic;
61-
}
62-
document.getElementById("myTablePowerPower" + data.topic).innerHTML= data.value;
63-
64-
// if data topic is 0 it is the overall power consumption, so update the graph
65-
if (data.topic == "sensors/power/0") {
66-
line1.append (new Date().getTime(), data.value);
6761
}
68-
}
69-
70-
var topictag = "powercumulative";
71-
if (data.topic.substring(0,topictag.length) == topictag) {
72-
// console.log("Powercumulative - " + data.value);
73-
document.getElementById("powercumulative").innerHTML= data.value;
74-
75-
}
76-
77-
var topictag = "sensors/temperature/";
78-
if (data.topic.substring(0,topictag.length) == topictag) {
79-
// console.log("Temperature match - " + data.topic + " " + typeof(data.topic));
80-
// check if the table cells exists, if not create it and then set value
81-
if (!ElementExists ("myTableTempTemp" + data.topic)) {
62+
var topictag = "sensors/temperature/";
63+
if (data.topic.substring(0,topictag.length) == topictag) {
8264
var table=document.getElementById("myTableTemp");
83-
var row=table.insertRow(0);
84-
var cell=row.insertCell(0);
85-
cell.id = "myTableTempTemp" + data.topic;
86-
document.getElementById("myTableTempTemp" + data.topic).style.textAlign="right";
87-
var cell=row.insertCell(0);
88-
cell.id = "myTableTempTopic" + data.topic;
89-
document.getElementById("myTableTempTopic" + data.topic).innerHTML= data.topic;
9065
}
91-
document.getElementById("myTableTempTemp" + data.topic).innerHTML= data.value;
92-
}
66+
var topictag = "sensors/humidity/";
67+
if (data.topic.substring(0,topictag.length) == topictag) {
68+
var table=document.getElementById("myTableHumidity");
69+
}
70+
var topictag = "sensors/co/";
71+
if (data.topic.substring(0,topictag.length) == topictag) {
72+
var table=document.getElementById("myTableCO");
73+
}
74+
var topictag = "sensors/no2/";
75+
if (data.topic.substring(0,topictag.length) == topictag) {
76+
var table=document.getElementById("myTableNO2");
77+
}
78+
var topictag = "sensors/pressure/";
79+
if (data.topic.substring(0,topictag.length) == topictag) {
80+
var table=document.getElementById("myTablePressure");
81+
}
9382

9483

84+
var row=table.insertRow(0);
85+
var cell=row.insertCell(0);
86+
cell.id = data.topic + "name";
87+
document.getElementById(data.topic + "name").style.textAlign="right";
88+
document.getElementById(data.topic + "name").innerHTML= data.topic;
89+
var cell=row.insertCell(0);
90+
cell.id = data.topic;
91+
}
92+
// new we know there is a target, update it
93+
// console.log("Setting target " + data.topic + " to " + data.value);
94+
document.getElementById(data.topic).innerHTML= data.value;
95+
96+
// if data topic is 0 it is the overall power consumption, so update the graph
97+
if (data.topic == "sensors/power/0") {
98+
line1.append (new Date().getTime(), data.value);
99+
}
95100

96101
// print the time the refresh happened
97102
var dt = new Date();
98103
document.getElementById("time").innerHTML= dt.toLocaleTimeString();
99-
100104
});
101105
</script>
102106
</body>

0 commit comments

Comments
 (0)