Skip to content

Commit 4a29cb6

Browse files
stevetreasestevetrease
committed
Started to use Bootstrap for client page layout and formatting
1 parent d704b3b commit 4a29cb6

16 files changed

+9774
-44
lines changed

‎mqtt/config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
"mqtt":
33
{
44
"host": "127.0.0.1",
5-
"port": "1833"
5+
"port": "1883"
66
}
77
}

‎mqtt/pages/app.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,18 @@ p {
99
}
1010

1111
table, th, td {
12-
border: 1px solid #CABFAF;
1312
border-spacing: 3px;
1413
table-layout:fixed;
15-
border-collapse: collapse;
14+
border-collapse: separate;
1615
vertical-align: top;
1716
}
18-
17+
#myTablePower, #myTableTemp, #myTableHumidity, #myTableNO2, #myTableCO {
18+
border: 1px solid AntiqueWhite;
19+
border-spacing: 3px;
20+
table-layout: fixed;
21+
vertical-align: top;
22+
background-color: #CABFAF;
23+
}
1924

2025
.clear {
2126
clear: both;

‎mqtt/pages/index.html‎

Lines changed: 134 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,143 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>
5-
Index
6-
</title>
4+
<title>Index</title>
5+
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
76
</head>
87
<body>
9-
<div id="example">
10-
<ul>
11-
<li><a href="sensors.html"><span>Sensors</span></a></li>
12-
<li><a href="mqtt.html"><span>MQTT</span></a></li>
13-
<li><a href="mqttstats.html"><span>MQTT Broker Stats</span></a></li>
14-
</ul>
8+
<P>
9+
<P>
10+
<div class="container">
11+
<div class="row">
12+
<div class="span3">
13+
<big><big><big>
14+
<span id="sensors/power/0"> </span>W
15+
</big></big></big>
16+
<P>
17+
<span id="sensors/power/0/cumulative/daily"></span> KWh used today
18+
<br>
19+
<span id="sensors/power/0/cumulative/hour"></span> KWh this hour
20+
</div>
21+
<div class="span9">
22+
<canvas id="mycanvas" width="500" height="150"></canvas>
23+
</div>
24+
</div>
25+
26+
<div class="row">
27+
<div class="span3">
28+
<table id="myTableTemp" class="table table-striped" style="width:100%"><caption>Temperatures</caption></table>
29+
</div>
30+
<div class="span3">
31+
<table id="myTableHumidity" class="table table-striped" style="width:100%"><caption>Humidity</caption></table>
32+
</div>
33+
<div class="span3">
34+
<table id="myTablePower" class="table table-striped" style="width:100%"><caption>Power</caption></table>
35+
</div>
36+
<div class="span3">
37+
</div>
38+
</div>
39+
40+
<div class="row">
41+
<div class="span3">
42+
<table id="myTableNO2" class="table table-striped" style="width:100%"><caption>NO2</caption></table>
43+
</div>
44+
<div class="span3">
45+
<table id="myTableCO" class="table table-striped" style="width:100%"><caption>CO</caption></table>
46+
</div>
47+
<div class="span3">
48+
49+
</div>
50+
<div class="span3">
51+
<table id="myTablePressure" class="table table-striped" style="width:100%"><caption>Pressure</caption></table>
52+
</div>
53+
</div>
54+
<div class="row">
55+
<div class="span12">
56+
<div id="time" style="font-size:x-small"></div>
57+
</div>
58+
</div>
1559
</div>
16-
<link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
17-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
18-
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
60+
61+
62+
63+
<script src="http://www.trease.eu:8500/socket.io/socket.io.js"></script>
64+
<script src="http://code.jquery.com/jquery-latest.js"></script>
65+
<script src="bootstrap/js/bootstrap.min.js"></script>
66+
<script type="text/javascript" src="http://www.trease.eu:8500/smoothie.js"></script>
67+
1968
<script>
20-
$(function() {
21-
$("#example").tabs();
22-
});
69+
ElementExists = function(id) {
70+
return !!document.getElementById(id);
71+
};
72+
BeginsWith = function(needle, haystack){
73+
return (haystack.substr(0, needle.length) == needle);
74+
}
75+
76+
77+
var smoothie = new SmoothieChart({millisPerPixel:1000,timestampFormatter:SmoothieChart.timeFormatter,minValue:0});
78+
var line1 = new TimeSeries();
79+
smoothie.streamTo(document.getElementById("mycanvas"));
80+
smoothie.addTimeSeries(line1);
81+
82+
var socket = io.connect("http://192.168.1.103:8500/sensors");
83+
socket.on('data', function(data) {
84+
// console.log("Message received " + data.topic + " of " + data.value);
85+
86+
// check the target topic exisits & if not create a target table entry
87+
if (!ElementExists (data.topic)) {
88+
// console.log("Creating target " + data.topic);
89+
var topictag = "sensors/power/";
90+
if (data.topic.substring(0,topictag.length) == topictag) {
91+
var table=document.getElementById("myTablePower");
92+
}
93+
var topictag = "sensors/temperature/";
94+
if (data.topic.substring(0,topictag.length) == topictag) {
95+
var table=document.getElementById("myTableTemp");
96+
}
97+
var topictag = "sensors/humidity/";
98+
if (data.topic.substring(0,topictag.length) == topictag) {
99+
var table=document.getElementById("myTableHumidity");
100+
}
101+
var topictag = "sensors/co/";
102+
if (data.topic.substring(0,topictag.length) == topictag) {
103+
var table=document.getElementById("myTableCO");
104+
}
105+
var topictag = "sensors/no2/";
106+
if (data.topic.substring(0,topictag.length) == topictag) {
107+
var table=document.getElementById("myTableNO2");
108+
}
109+
var topictag = "sensors/pressure/";
110+
if (data.topic.substring(0,topictag.length) == topictag) {
111+
var table=document.getElementById("myTablePressure");
112+
}
113+
114+
115+
var row=table.insertRow(0);
116+
var cell=row.insertCell(0);
117+
cell.id = data.topic;
118+
var cell=row.insertCell(0);
119+
cell.id = data.topic + "name";
120+
document.getElementById(data.topic).style.textAlign="right"
121+
document.getElementById(data.topic).style.width="25%"
122+
document.getElementById(data.topic + "name").innerHTML= data.topic.slice(data.topic.lastIndexOf('/')+1);
123+
document.getElementById(data.topic + "name").style.textAlign="left"
124+
document.getElementById(data.topic + "name").style.width="75%"
125+
}
126+
// new we know there is a target, update it
127+
// console.log("Setting target " + data.topic + " to " + data.value);
128+
document.getElementById(data.topic).innerHTML= data.value;
129+
130+
// if data topic is 0 it is the overall power consumption, so update the graph and the counter at the top of the page
131+
// if (data.topic == "sensors/power/0") {
132+
// line1.append (new Date().getTime(), data.value);
133+
// document.getElementById("sensors/power/00").innerHTML= data.value;
134+
// }
135+
136+
// print the time the refresh happened
137+
var dt = new Date();
138+
document.getElementById("time").innerHTML= dt.toLocaleTimeString();
139+
});
23140
</script>
141+
24142
</body>
25-
</html>
26-
143+
</html>

0 commit comments

Comments
 (0)