HTML To Display your data......
Posted: Sat Dec 26, 2015 12:58 pmUse the simple html below to retrieve your data from thingspeak into one page, simple example of multiple channel and multiple sensor data......
Freeboard and other links also in the html edit to your setup.......then use it in your sketch for the device......do something useful with the JSON Frame............(See my other post on stripping data from webpages).....
Even Simpler way.....
This will import the tweet to your sketch just embed the html....
Freeboard and other links also in the html edit to your setup.......then use it in your sketch for the device......do something useful with the JSON Frame............(See my other post on stripping data from webpages).....
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<h2>Using the XMLHttpRequest object To Retrieve JSON Frame<BR>
Plus Visualisation from Thingspeak</h2>
<button type="button" onclick="loadXMLDoc()">Get Raw JSON</button>
<p id="ESP8266"></p>
<p>Press the button to get RAW JSON Frame<BR>
For just 1 of the temperature readings......<BR>
ESP8266-12(Yellow Development Board) providing the full JSON Frame<BR>
this includes the output from 2 * DHT22 plus 4 * DS18B20 <BR>
The Chart is readings from Multiple Channels into 1 Visualisation on Thingspeak.....</p>
<p><a href="https://thingspeak.com/channels/73594">ESP8266-12 Channel</a></p>
<p><a href="https://freeboard.io/board/PLCLH6">Freeboard.io Dashboard</a></p>
<p><a href="http://www.esp8266.com">ESP8266 Support Forum</a></p>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("ESP8266").innerHTML =
xhttp.responseText;
}
};
xhttp.open("GET", "https://api.thingspeak.com/channels/73594/feeds.json?results=1", true);
xhttp.send();
}
</script>
<iframe width="500" height="380" style="border: 1px solid #cccccc;"
src="http://api.thingspeak.com/apps/matlab_visualizations/41029" ></iframe>
</body>
</html>
</html>
Even Simpler way.....
This will import the tweet to your sketch just embed the html....
Code: Select all
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>ESP8266 Get TWEET</title>
<blockquote class="twitter-tweet" lang="en-gb"><p lang="en" dir="ltr">The Otput From ESP8266 to Twitter <a
href="https://twitter.com/MCUAutomation/status/679560984898359297"></a></blockquote>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<style>
body { font-family: Arial; font-size:14px; line-height:20px; padding:30px; background: #f1f1f1}
</style>
</head>
</html>
Code: Select all
The link to the tweet...
https://twitter.com/MCUAutomation/status/679560984898359297
The HTML for this alone....
<blockquote class="twitter-tweet" lang="en-gb"><p lang="en" dir="ltr">The Otput From ESP8266 to Twitter <a
href="https://twitter.com/MCUAutomation/status/679560984898359297"></a></blockquote>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>