Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
@themakerbro themakerbro typo 7f60f92 Oct 22, 2018
1 contributor

Users who have contributed to this file

157 lines (143 sloc) 4.59 KB
/*------------------------------------------------------------------------------
10/20/2018
Author: Makerbro
Platforms: ESP8266
Language: C++/Arduino
File: bmp180_gui.ino
------------------------------------------------------------------------------
Description:
Code for YouTube video demonstrating how to plot sensor data from a BMP180 tem-
perature, and barometric pressure sensor. A web server running on the ESP8266
serves a web page that uses Chart.js and websockets to plot the data.
https://youtu.be/lEVoRJSsEa8
Do you like my videos? You can support the channel:
https://patreon.com/acrobotic
https://paypal.me/acrobotic
------------------------------------------------------------------------------
Please consider buying products from ACROBOTIC to help fund future
Open-Source projects like this! We'll always put our best effort in every
project, and release all our design files and code for you to use.
https://acrobotic.com/
https://amazon.com/acrobotic
------------------------------------------------------------------------------
License:
Please see attached LICENSE.txt file for details.
------------------------------------------------------------------------------*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include <Adafruit_BMP085.h>
#include <Ticker.h>
// Collecting BMP180 sensor data
Ticker timer;
Adafruit_BMP085 bmp;
// Connecting to the Internet
char * ssid = "YOUR_SSID";
char * password = "YOUR_PASSWORD";
// Running a web server
ESP8266WebServer server;
// Adding a websocket to the server
WebSocketsServer webSocket = WebSocketsServer(81);
// Serving a web page (from flash memory)
// formatted as a string literal!
char webpage[] PROGMEM = R"=====(
<html>
<!-- Adding a data chart using Chart.js -->
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
</head>
<body onload="javascript:init()">
<!-- Adding a slider for controlling data rate -->
<div>
<input type="range" min="1" max="10" value="5" id="dataRateSlider" oninput="sendDataRate()" />
<label for="dataRateSlider" id="dataRateLabel">Rate: 0.2Hz</label>
</div>
<hr />
<div>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>
<!-- Adding a websocket to the client (webpage) -->
<script>
var webSocket, dataPlot;
var maxDataPoints = 20;
function removeData(){
dataPlot.data.labels.shift();
dataPlot.data.datasets[0].data.shift();
}
function addData(label, data) {
if(dataPlot.data.labels.length > maxDataPoints) removeData();
dataPlot.data.labels.push(label);
dataPlot.data.datasets[0].data.push(data);
dataPlot.update();
}
function init() {
webSocket = new WebSocket('ws://' + window.location.hostname + ':81/');
dataPlot = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [],
datasets: [{
data: [],
label: "Temperature (C)",
borderColor: "#3e95cd",
fill: false
}]
}
});
webSocket.onmessage = function(event) {
var data = JSON.parse(event.data);
var today = new Date();
var t = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
addData(t, data.value);
}
}
function sendDataRate(){
var dataRate = document.getElementById("dataRateSlider").value;
webSocket.send(dataRate);
dataRate = 1.0/dataRate;
document.getElementById("dataRateLabel").innerHTML = "Rate: " + dataRate.toFixed(2) + "Hz";
}
</script>
</body>
</html>
)=====";
void setup() {
// put your setup code here, to run once:
WiFi.begin(ssid, password);
Serial.begin(115200);
while(WiFi.status()!=WL_CONNECTED) {
Serial.print(".");
delay(500);
}
Serial.println("");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
server.on("/",[](){
server.send_P(200, "text/html", webpage);
});
server.begin();
webSocket.begin();
webSocket.onEvent(webSocketEvent);
bmp.begin();
timer.attach(5, getData);
}
void loop() {
// put your main code here, to run repeatedly:
webSocket.loop();
server.handleClient();
}
void getData() {
// Serial.println(bmp.readTemperature());
String json = "{\"value\":";
json += bmp.readTemperature();
json += "}";
webSocket.broadcastTXT(json.c_str(), json.length());
}
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length){
// Do something with the data from the client
if(type == WStype_TEXT){
float dataRate = (float) atof((const char *) &payload[0]);
timer.detach();
timer.attach(dataRate, getData);
}
}
You can’t perform that action at this time.