Skip to content

Commit 93b44d7

Browse files
bloftbloft
committed
Merge changes from next
2 parents ba008e2 + 60e4291 commit 93b44d7

File tree

14 files changed

+876
-232
lines changed

14 files changed

+876
-232
lines changed

‎README.md‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# EasyMqtt
22
Easy handling of Mqtt on esp8266
33

4-
This library is currentlly under heavy development.
4+
Including a web interface to se current values, and avalible topic, and a rest api
55

66
## Examble usage EasyMqtt
77
```C++
@@ -10,13 +10,9 @@ This library is currentlly under heavy development.
1010
EasyMqtt mqtt;
1111

1212
void setup() {
13-
Serial.begin(115200);
14-
Serial.println();
15-
16-
// Setup wifi
17-
mqtt.wifi("ssid", "password");
18-
mqtt.mqtt("host", 1883, "user", "pass");
19-
13+
// Setup wifi
14+
mqtt.wifi("ssid", "password");
15+
mqtt.mqtt("host", 1883, "user", "pass");
2016

2117
mqtt["foo"] << [](){ return String("bar"); };
2218
}

‎examples/temperature/temperature.ino‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ void setup() {
1616
} else {
1717
return String(value);
1818
}
19-
}
19+
};
2020

2121
mqtt["humidity"] << []() {
22-
float value = dht.dht.readHumidity();
22+
float value = dht.readHumidity();
2323
if(isnan(value)) {
2424
return String("");
2525
} else {
2626
return String(value);
2727
}
28-
}
28+
};
2929

3030
}
3131

‎html/generateC‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
#!/usr/bin/php
2+
<?php
3+
4+
$html = file_get_contents("template.html");
5+
$pattern = "|<!-- split:(.*) -->|U";
6+
7+
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
8+
9+
$split = preg_split($pattern, $html);
10+
11+
$tmp = array();
12+
foreach($matches as $key => $value) {
13+
if(!array_key_exists($value[1], $tmp)) {
14+
$tmp[$value[1]] = addslashes(trimContent($split[$key + 1]));
15+
}
16+
}
17+
18+
function trimContent($str) {
19+
$arr = explode("\n",$str);
20+
$output = "";
21+
foreach($arr as $line) {
22+
$output .= trim($line);
23+
}
24+
return $output;
25+
}
26+
27+
$fp = fopen("../src/html.h", "w");
28+
fputs($fp, "#ifndef html_h\n");
29+
fputs($fp, "#define html_h\n");
30+
fputs($fp, "\n");
31+
foreach($tmp as $header => $content) {
32+
$header = strtoupper($header);
33+
fputs ($fp, "const char HTML_${header}[] PROGMEM = \"$content\";\n");
34+
}
35+
fputs($fp, "\n");
36+
fputs($fp, "#endif\n");
37+
fclose ($fp);

‎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: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<!-- split:main1 -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Device Info - {device_id}</title>
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
11+
</head>
12+
<body>
13+
<script type="application/javascript">
14+
function sendValue(input) {
15+
$.ajax({
16+
url: input.dataset.url, method: "POST", data: $(input).closest("form").find("input").val()
17+
}).complete(function (data, textStatus, jqXHR) {
18+
alert(textStatus);
19+
});
20+
}
21+
setInterval(function() {
22+
$("[data-ajaxurl]").each(function(index) {
23+
var ele = $(this);
24+
$.ajax(ele.data("ajaxurl")).success(function (data) {
25+
ele.html(data);
26+
});
27+
});
28+
}, 1000);
29+
</script>
30+
<div class="container">
31+
<h1>Device Info - {device_id}</h1>
32+
<ul class="nav nav-tabs" role="tablist">
33+
<li role="presentation" class="active"><a href="#devices" aria-controls="devices" role="tab" data-toggle="tab">
34+
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Devices
35+
</a></li>
36+
<li role="presentation"><a href="#input" aria-controls="input" role="tab" data-toggle="tab">
37+
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Input
38+
</a></li>
39+
<li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">
40+
<span class="glyphicon glyphicon-book" aria-hidden="true"></span> About
41+
</a></li>
42+
</ul>
43+
<div class="tab-content" style="border-style: solid; border-color: #ddd; border-width: 0px 1px 1px 1px">
44+
<div role="tabpanel" class="tab-pane active" id="devices">
45+
<br />
46+
<div class="container-fluid">
47+
<div class="row">
48+
<!-- split:main1 -->
49+
50+
<!-- split:sensor -->
51+
<div class="col-md-4">
52+
<div class="panel panel-info">
53+
<div class="panel-heading"><strong>{name}</strong></div>
54+
<div class="panel-body" data-ajaxurl="{path}" style="font-size: 24px;">
55+
{value}
56+
</div>
57+
</div>
58+
</div>
59+
<!-- split:sensor -->
60+
61+
<!-- Single sensor info -->
62+
<div class="col-md-4">
63+
<div class="panel panel-info">
64+
<div class="panel-heading"><strong>audio/mute</strong></div>
65+
<div class="panel-body" style="font-size: 24px;">
66+
<!-- split:value_on -->
67+
<span class="label label-success">{value}</span>
68+
<!-- split:value_on -->
69+
<!-- split:value_off -->
70+
<span class="label label-danger">{value}</span>
71+
<!-- split:value_off -->
72+
</div>
73+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> {last_updated}</div>
74+
</div>
75+
</div>
76+
77+
<!-- Single sensor info -->
78+
<div class="col-md-4">
79+
<div class="panel panel-info">
80+
<div class="panel-heading"><strong>model</strong></div>
81+
<div class="panel-body" style="font-size: 24px;">W1110S</div>
82+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
83+
</div>
84+
</div>
85+
86+
<!-- Single sensor info -->
87+
<div class="col-md-4">
88+
<div class="panel panel-info">
89+
<div class="panel-heading"><strong>source</strong></div>
90+
<div class="panel-body" style="font-size: 24px;">RGB</div>
91+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
92+
</div>
93+
</div>
94+
95+
<!-- Single sensor info -->
96+
<div class="col-md-4">
97+
<div class="panel panel-info">
98+
<div class="panel-heading"><strong>lamp/mode</strong></div>
99+
<div class="panel-body" style="font-size: 24px;">LNOR</div>
100+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
101+
</div>
102+
</div>
103+
104+
<!-- Single sensor info -->
105+
<div class="col-md-4">
106+
<div class="panel panel-info">
107+
<div class="panel-heading"><strong>lamp/time</strong></div>
108+
<div class="panel-body" style="font-size: 24px;">84</div>
109+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
110+
</div>
111+
</div>
112+
113+
<!-- Single sensor info -->
114+
<div class="col-md-4">
115+
<div class="panel panel-info">
116+
<div class="panel-heading"><strong>audio/volume</strong></div>
117+
<div class="panel-body" style="font-size: 24px;">10</div>
118+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
119+
</div>
120+
</div>
121+
122+
<!-- Single sensor info -->
123+
<div class="col-md-4">
124+
<div class="panel panel-info">
125+
<div class="panel-heading"><strong>picture/aspect</strong></div>
126+
<div class="panel-body" style="font-size: 24px;">AUTO</div>
127+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
128+
</div>
129+
</div>
130+
131+
<!-- Single sensor info -->
132+
<div class="col-md-4">
133+
<div class="panel panel-info">
134+
<div class="panel-heading"><strong>picture/sharpness</strong></div>
135+
<div class="panel-body" style="font-size: 24px;">15</div>
136+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
137+
</div>
138+
</div>
139+
140+
<!-- Single sensor info -->
141+
<div class="col-md-4">
142+
<div class="panel panel-info">
143+
<div class="panel-heading"><strong>picture/brightness</strong></div>
144+
<div class="panel-body" style="font-size: 24px;">50</div>
145+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
146+
</div>
147+
</div>
148+
149+
<!-- Single sensor info -->
150+
<div class="col-md-4">
151+
<div class="panel panel-info">
152+
<div class="panel-heading"><strong>picture/contrast</strong></div>
153+
<div class="panel-body" style="font-size: 24px;">50</div>
154+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
155+
</div>
156+
</div>
157+
158+
<!-- Single sensor info -->
159+
<div class="col-md-4">
160+
<div class="panel panel-info">
161+
<div class="panel-heading"><strong>picture/mode</strong></div>
162+
<div class="panel-body" style="font-size: 24px;">FOOTBALL</div>
163+
<div class="panel-footer" style="padding: 5px 15px; font-size: 85%"><strong>Last updated:</strong> 2017-09-29 8:30:23</div>
164+
</div>
165+
</div>
166+
167+
<!-- split:main2 -->
168+
</div>
169+
</div>
170+
</div>
171+
172+
<div role="tabpanel" class="tab-pane" id="input">
173+
<br />
174+
<div class="container-fluid">
175+
<div class="row">
176+
<!-- split:main2 -->
177+
178+
<!-- Input data -->
179+
<!-- split:input -->
180+
<div class="col-md-4">
181+
<div class="panel panel-success">
182+
<div class="panel-heading"><strong>{name}</strong></div>
183+
<div class="panel-body" style="font-size: 24px;">
184+
<form>
185+
<div class="input-group">
186+
<input type="text" class="form-control" placeholder="value">
187+
<span class="input-group-btn">
188+
<button class="btn btn-default" type="button" data-url="{name}" onclick="sendValue(this);">
189+
Send
190+
</button>
191+
</span>
192+
</div>
193+
</form>
194+
</div>
195+
</div>
196+
</div>
197+
<!-- split:input -->
198+
199+
<!-- split:main3 -->
200+
</div>
201+
</div>
202+
</div>
203+
204+
<div role="tabpanel" class="tab-pane" id="about">
205+
<br />
206+
<div class="container-fluid">
207+
<div class="row">
208+
<div class="col-md-12">
209+
<h1>About</h1>
210+
<p>Device is using EasyMqtt version 0.0.1</p>
211+
<dl class="dl-horizontal">
212+
<dt>Device Id</dt><dd>{device_id}</dd>
213+
<dt>Topic</dt><dd>{topic}</dd>
214+
</dl>
215+
<hr />
216+
<h3>MQTT API:</h3>
217+
<ul class="list-group">
218+
<!-- split:main3 -->
219+
<li class="list-group-item">
220+
{path}
221+
<span class="badge">Set</span>
222+
<span class="badge">Get</span>
223+
</li>
224+
<li class="list-group-item">
225+
EasyMqtt/123456/model
226+
<span class="badge">Get</span>
227+
</li>
228+
<!-- split:main4 -->
229+
</ul>
230+
<hr />
231+
<h3>Rest API:</h3>
232+
<ul class="list-group">
233+
<!-- split:main4 -->
234+
<!-- split:api_doc -->
235+
<li class="list-group-item">
236+
{path}
237+
</li>
238+
<!-- split:api_doc -->
239+
<li class="list-group-item">
240+
http://192.168.1.72/model
241+
<span class="badge">GET</span>
242+
</li>
243+
<li class="list-group-item">
244+
http://192.168.1.72/source
245+
<span class="badge">GET</span>
246+
<span class="badge">POST</span>
247+
</li>
248+
<li class="list-group-item">
249+
http://192.168.1.72/lamp/mode
250+
<span class="badge">GET</span>
251+
<span class="badge">POST</span>
252+
</li>
253+
<!-- split:main5 -->
254+
</ul>
255+
</div>
256+
</div>
257+
</div>
258+
</div>
259+
260+
</div>
261+
</div>
262+
263+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
264+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
265+
</body>
266+
</html>
267+
<!-- split:main5 -->

‎keywords.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
#######################################
88

99
EasyMqtt KEYWORD1
10-
MqttMap KEYWORD1
10+
MqttEntry KEYWORD1
1111

1212
#######################################
1313
# Methods and Functions (KEYWORD2)

‎library.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"type": "git",
77
"url": "https://github.com/bloft/EasyMqtt.git"
88
},
9-
"version": "0.2",
9+
"version": "0.3",
1010
"exclude": "tests",
1111
"examples": "examples/*/*.ino",
1212
"frameworks": "arduino",

0 commit comments

Comments
 (0)