- Sat Jun 24, 2017 8:35 am
#67532
The displaying of real data from local & remote ESP8266 sensors using very simple CSS/JS/HTML, with CORS (Cross Origin Resource Sharing).
The data is being presented via a client.print() but easily adapted for server.streamFile().
The required Justgage files should be downloaded and compressed with GZIP for uploading to the SPIFFS to save space. Only the 3 files declared in the webpages need to uploaded to SPIFFS.
https://github.com/toorshia/justgage
The links in the files are actively presenting data, so the Webpages will work without editing if you have downloaded the files from the Github.....
The Sketch snippet presentation of the JSON Data...(Not using JSON Library as it is too Slow)......
Data here from ESP8266 with DHT22....
The Webpage for the snippet above presenting DHT22 data.
This Webpage is for a WH1080 Weather-station to be hosted either from SPIFFS or elsewhere........
The Webpage Data is from an ESP8266 relay that is pulling the data from my weather-station.......
The data is being presented via a client.print() but easily adapted for server.streamFile().
The required Justgage files should be downloaded and compressed with GZIP for uploading to the SPIFFS to save space. Only the 3 files declared in the webpages need to uploaded to SPIFFS.
https://github.com/toorshia/justgage
The links in the files are actively presenting data, so the Webpages will work without editing if you have downloaded the files from the Github.....
The Sketch snippet presentation of the JSON Data...(Not using JSON Library as it is too Slow)......
Data here from ESP8266 with DHT22....
Code: Select all
if(sPath=="/jsread")
{
timeClient.update(); // Using NTP
String Dnow=timeClient.getFormattedTime();
ulJReqcount++;
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/json");
client.println("Connection: close");
// client.println("Connection: keep-alive");
client.println("Access-Control-Allow-Origin: *");
client.println("Access-Control-Allow-Methods: GET");
client.println("Access-Control-Allow-Headers: Content-Type");
client.println("Access-Control-Max-Age: 300");
client.println();
sResponse = ("{\r\n\"temperature\": [\r\n");
sResponse += pfTemp;
sResponse += ("\r\n],\r\n\"humidity\": [\r\n");
sResponse += pfHum;
sResponse += ("\r\n],\r\n\"dewpoint\": [\r\n");
sResponse += pfDew;
sResponse += ("\r\n],\r\n\"Systemv\": [\r\n");
sResponse += pfVcC/1000;
sResponse += ("\r\n],\r\n\"Low_Hum_Today\": [\r\n");
sResponse += pfHumLow;
sResponse += ("\r\n],\r\n\"High_Hum_Today\": [\r\n");
sResponse += pfHumHigh;
sResponse += ("\r\n],\r\n\"Low_Temp_Today\": [\r\n");
sResponse += pfTempLow;
sResponse += ("\r\n],\r\n\"High_Temp_Today\": [\r\n");
sResponse += pfTempHigh;
sResponse += ("\r\n],\n\"Jsreqs\": [\r\n");
sResponse += ulJReqcount;
sResponse += ("\r\n],\r\n\"Uptime\": [\r\n\"");
sResponse += duration1;
sResponse += ("\"\r\n],\r\n\"TiMestamp\": [\r\n\"");
sResponse += Dnow;
sResponse += ("\"\r\n]\r\n}");
// Send the JSON response to the client
client.println(sResponse);
}
The Webpage for the snippet above presenting DHT22 data.
Code: Select all
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Esp8266 with DHT22</title>
<meta name="viewport" content="width=device-width">
<style>
.wrapper {
position: relative;
width: 640px;
height: 480px;
margin: 50px auto 0 auto;
padding-bottom: 30px;
border: 1px solid #ccc;
border-radius: 3px;
clear: both;
}
.box {
float: left;
width: 50%;
height: 33%;
box-sizing: border-box;
}
.container {
width: 450px;
margin: 0 auto;
text-align: center;
}
.gauge {
width: 320px;
height: 160px;
}
button {
margin: 30px 5px 0 2px;
padding: 16px 40px;
border-radius: 5px;
font-size: 18px;
border: none;
background: #34aadc;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div id="g1" class="gauge"></div>
</div>
<div class="box">
<div id="g2" class="gauge"></div>
</div>
<div class="box">
<div id="g3" class="gauge"></div>
</div>
<div class="box">
<div id="g4" class="gauge"></div>
</div>
<div class="box">
<div id="g5" class="gauge"></div>
</div>
<div class="box">
<div id="g6" class="gauge"></div>
</div>
</div>
<div class="container">
</div>
<script src="/jquery.min.js"></script>
<script src="/raphael-2.1.4.min.js"></script>
<script src="/justgage.js"></script>
<script>
$(document).ready(function(){
$.getJSON("http://82.5.78.180:81/jsread", function(result){
var g1 = new JustGage({
id: 'g1',
value: result.temperature,
title: 'Latest Temperature',
min: 0,
max: 50,
symbol: '\260C',
pointer: true,
gaugeWidthScale: 0.6,
customSectors: [{
color: '#ff0000',
lo: 25,
hi: 50
}, {
color: "#00ff00",
lo: 0,
hi: 25
}],
counter: true
});
var g2 = new JustGage({
id: 'g2',
value: result.humidity,
title: 'Latest Humidity',
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
gaugeWidthScale: 0.6,
counter: true
});
var g3 = new JustGage({
id: 'g3',
value: result.High_Temp_Today,
title: 'High Temperature',
min: 0,
max: 50,
symbol: '\260C',
pointer: true,
gaugeWidthScale: 0.4,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 8,
color: '#000'
},
customSectors: [{
color: "#ff0000",
lo: 25,
hi: 50
}, {
color: "#00ff00",
lo: 0,
hi: 25
}],
counter: true
});
var g4 = new JustGage({
id: 'g4',
value: result.High_Hum_Today,
title: 'High Humidity',
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: 8,
bottomlength: -20,
bottomwidth: 6,
color: '#8e8e93'
},
gaugeWidthScale: 0.1,
counter: true
});
var g5 = new JustGage({
id: 'g5',
value: result.Low_Temp_Today,
title: 'Low Temperature',
min: 0,
max: 50,
symbol: '\260C',
pointer: true,
gaugeWidthScale: 0.4,
pointerOptions: {
toplength: -25,
bottomlength: -25,
bottomwidth: 8,
color: '#000'
},
customSectors: [{
color: "#ff0000",
lo: 25,
hi: 50
}, {
color: "#00ff00",
lo: 0,
hi: 25
}],
counter: true
});
var g6 = new JustGage({
id: 'g6',
value: result.Low_Hum_Today,
title: 'Low Humidity',
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: 8,
bottomlength: -20,
bottomwidth: 6,
color: '#8e8e93'
},
gaugeWidthScale: 0.1,
counter: true
});
});
});
</script>
</body>
</html>
This Webpage is for a WH1080 Weather-station to be hosted either from SPIFFS or elsewhere........
The Webpage Data is from an ESP8266 relay that is pulling the data from my weather-station.......
Code: Select all
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Data</title>
<meta name="viewport" content="width=device-width">
<style>
.wrapper {
position: relative;
width: 440px;
height: 500px;
margin: 20px auto 0 auto;
padding-bottom: 30px;
border: 1px solid #ccc;
border-radius: 3px;
clear: both;
}
.box {
float: left;
width: 50%;
height: 33%;
box-sizing: border-box;
}
.container {
width: 430px;
margin: 0 auto;
text-align: center;
color: white;
}
.gauge {
width: 220px;
height: 160px;
}
button {
margin: 30px 5px 0 2px;
padding: 16px 40px;
border-radius: 5px;
font-size: 18px;
border: 2px;
background: #404040;
color: white;
cursor: pointer;
}
</style>
</head>
<body bgcolor="#000">
<div class="wrapper">
<div class="container">
WH1080 PWS Weather Data<BR>
<div id="title" class="tile1"><h3></h3></div>
</div>
<div class="box">
<div id="g1" class="gauge"></div>
</div>
<div class="box">
<div id="g2" class="gauge"></div>
</div>
<div class="box">
<div id="g5" class="gauge"></div>
</div>
<div class="box">
<div id="g4" class="gauge"></div>
</div>
<div class="box">
<div id="g3" class="gauge"></div>
</div>
<div class="box">
<div id="g6" class="gauge"></div>
</div>
</div>
<div class="container">
<a href="/gaugeJSON.htm"><button type="button">Refresh Gauges</button></a>
</div>
<BR><BR><BR><BR>
<script src="/jquery.min.js"></script>
<script src="/raphael-2.1.4.min.js"></script>
<script src="/justgage.js"></script>
<script>
$(document).ready(function(){
$.getJSON("http://82.5.78.180:5080/realtime", function(result){
$(title).text("Time Sampled (UTC) : " + result.date);
var g1 = new JustGage({
id: 'g1',
value: result.temp,
title: 'External Temperature',
min: 0,
max: 50,
symbol: '\260C',
pointer: true,
gaugeWidthScale: 0.6,
pointerOptions: {
color: '#ffff00'
},
customSectors: [{
color: '#ff0000',
lo: 25,
hi: 50
}, {
color: "#00ff00",
lo: 0,
hi: 25
}],
valueFontColor: '#ffffff',
counter: true
});
var g2 = new JustGage({
id: 'g2',
value: result.hum,
title: 'External Humidity',
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#ffff00',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
gaugeWidthScale: 0.6,
valueFontColor: '#ffffff',
counter: true
});
var g3 = new JustGage({
id: 'g3',
value: result.bearing,
title: 'Wind Direction',
min: 0,
max: 360,
symbol: '\260',
donut: true,
pointer: true,
gaugeWidthScale: 0.4,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 8,
color: '#ffff00'
},
valueFontColor: '#ffffff',
counter: true
});
var g4 = new JustGage({
id: 'g4',
value: result.rfall,
title: 'Rainfall Today',
min: 0,
max: 100,
symbol: 'mm',
pointer: true,
pointerOptions: {
toplength: 8,
bottomlength: -20,
bottomwidth: 6,
color: '#ffff00'
},
gaugeWidthScale: 0.1,
valueFontColor: '#ffffff',
counter: true
});
var g5 = new JustGage({
id: 'g5',
value: result.press,
title: 'Barometer',
min: 980,
max: 1030,
symbol: 'mb',
pointer: true,
gaugeWidthScale: 0.4,
pointerOptions: {
toplength: -25,
bottomlength: -25,
bottomwidth: 8,
color: '#ffff00'
},
customSectors: [{
color: "#ff0000",
lo: 1010,
hi: 1030
}, {
color: "#00ff00",
lo: 980,
hi: 1010
}],
valueFontColor: '#ffffff',
counter: true
});
var g6 = new JustGage({
id: 'g6',
value: result.wspeed,
title: 'Latest Windspeed',
min: 0,
max: 50,
symbol: 'MPH',
pointer: true,
pointerOptions: {
toplength: 8,
bottomlength: -20,
bottomwidth: 6,
color: '#ffff00'
},
gaugeWidthScale: 0.1,
valueFontColor: '#ffffff',
counter: true
});
});
});
</script>
</body>
</html>
