This tutorial explains the steps involved in building a Web-based Data Visualization Block to visualize data from a Temperature & Fire Monitoring & Alerting Tinker Block Application.
Before building Web-based Data Visualization Block, please make sure to build:
Temperature Block, Fire Block, Processor Block and Power Block
IoT-based Server Block
Device Integration Block
1. Copy the below HTML, CSS and Java Script code into a Notepad.
2. Edit the code as follows:
Replace 99999 with the Channel ID of your ThingSpeak channel.
Replace XXXXXXXXXXXXXXXX with the Read API key of your ThingSpeak channel.
View HTML, CSS and Java Script code here...
<html>
<head>
<!--
NOTE: This plugin will not be visible on public views of a channel.
If you intend to make your channel public, consider using the
MATLAB Visualization App to create your visualizations.
-->
<style type="text/css">
body { background-color: white; }
</style>
<body>
<center>
<canvas id="canvas-id"
data-type="linear-gauge"
data-width="120"
data-height="240"
data-units="°C"
data-min-value="0"
data-start-angle="90"
data-ticks-angle="180"
data-value-box="false"
data-max-value="100"
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
data-minor-ticks="2"
data-stroke-ticks="true"
data-highlights='[ {"from": 0, "to": 100, "color": "rgba(200, 50, 50, .75)"} ]'
data-color-plate="#fff"
data-border-shadow-width="0"
data-borders="false"
data-needle-type="arrow"
data-needle-width="2"
data-needle-circle-size="7"
data-needle-circle-outer="true"
data-needle-circle-inner="false"
data-animation-duration="1500"
data-animation-rule="linear"
data-bar-width="10"
data-value="35"
></canvas>
</center>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"></script>
<script>
// set your channel id here
var channel_id = 999999;
// set your channel's read api key here if necessary
var api_key = 'XXXXXXXXXXXXXXXX';
var gauge;
// display the data
function displayData(point) {
gauge.value = point;
gauge.draw();
}
// load the data
function loadData() {
// variable for the data point
var p;
// get the data from thingspeak
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {
// get the data point
p = data.field1;
// if there is a data point display it
displayData(p);
});
}
function init() {
gauge = new LinearGauge({
renderTo: 'canvas-id',
width: 120,
height: 240,
units: "°C",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
valueBox: false,
maxValue: 100,
majorTicks: [
"0",
"10",
"20",
"30",
"40",
"50",
"60",
"70",
"80",
"90",
"100"
],
minorTicks: 2,
strokeTicks: true,
highlights: [
{
"from": -100,
"to": 220,
"color": "rgba(200, 50, 50, .75)"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear",
barWidth: 10,
value: 35
});
loadData();
// load new data every 15 seconds
setInterval('loadData()', 15000);
}
init();
</script>
</body>
</head>
</html>
3. Open Google Sites web-site builder tool here: https://sites.google.com
4. Click "+" to create a new website.
5. In the home page, click the menus: Insert --> Embed --> Embed Code.
6. Paste the code you copied earlier into the Embed Code window and click "Save".
7. You will then see a thermometer visual that shows the live temperature reading from a temperature sensor (similar to the one on the left side).
1. Copy the below HTML, CSS and Java Script code into a Notepad.
2. Edit the code as follows:
Replace 99999 with the Channel ID of your ThingSpeak channel.
Replace XXXXXXXXXXXXXXXX with the Read API key of your ThingSpeak channel.
View HTML, CSS and Java Script code here...
<html>
<head>
<!--
NOTE: This plugin will not be visible on public views of a channel.
If you intend to make your channel public, consider using the
MATLAB Visualization App to create your visualizations.
-->
<style type="text/css">
body { background-color: white; }
</style>
<body>
<center>
<canvas id="canvas-id"
data-type="radial-gauge"
data-width="240"
data-height="240"
data-units="%"
data-title="Humidity"
data-min-value="0"
data-max-value="100"
data-major-ticks="[0,10,20,30,40,50,60,70,80,90,100]"
data-minor-ticks="2"
data-stroke-ticks="true"
data-highlights='[ {"from": 0, "to": 50, "color": "rgba(0,0, 255, .3)"},
{"from": 50, "to": 100, "color": "rgba(255, 0, 0, .3)"} ]'
data-ticks-angle="225"
data-start-angle="67.5"
data-color-major-ticks="#ddd"
data-color-minor-ticks="#ddd"
data-color-title="#eee"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-plate="#222"
data-border-shadow-width="0"
data-borders="true"
data-needle-type="arrow"
data-needle-width="2"
data-needle-circle-size="7"
data-needle-circle-outer="true"
data-needle-circle-inner="false"
data-animation-duration="1500"
data-animation-rule="linear"
data-color-border-outer="#333"
data-color-border-outer-end="#111"
data-color-border-middle="#222"
data-color-border-middle-end="#111"
data-color-border-inner="#111"
data-color-border-inner-end="#333"
data-color-needle-shadow-down="#333"
data-color-needle-circle-outer="#333"
data-color-needle-circle-outer-end="#111"
data-color-needle-circle-inner="#111"
data-color-needle-circle-inner-end="#222"
data-value-box-border-radius="0"
data-color-value-box-rect="#222"
data-color-value-box-rect-end="#333"
></canvas>
</center>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"></script>
<script>
// set your channel id here
var channel_id = 99999;
// set your channel's read api key here if necessary
var api_key = 'XXXXXXXXXXXXXXXX';
var gauge;
// display the data
function displayData(point) {
gauge.value = point;
gauge.draw();
}
// load the data
function loadData() {
// variable for the data point
var p;
// get the data from thingspeak
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {
// get the data point
p = data.field2;
// if there is a data point display it
displayData(p);
});
}
function init() {
gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 240,
height: 240,
units: "%",
title: "Humidity",
minValue: 0,
maxValue: 100,
majorTicks: [
0,
10,
20,
30,
40,
50,
60,
70,
80,
90,
100
],
minorTicks: 2,
strokeTicks: true,
highlights: [
{
"from": 0,
"to": 50,
"color": "rgba(0,0, 255, .3)"
},
{
"from": 50,
"to": 100,
"color": "rgba(255, 0, 0, .3)"
}
],
ticksAngle: 225,
startAngle: 67.5,
colorMajorTicks: "#ddd",
colorMinorTicks: "#ddd",
colorTitle: "#eee",
colorUnits: "#ccc",
colorNumbers: "#eee",
colorPlate: "#222",
borderShadowWidth: 0,
borders: true,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear",
colorBorderOuter: "#333",
colorBorderOuterEnd: "#111",
colorBorderMiddle: "#222",
colorBorderMiddleEnd: "#111",
colorBorderInner: "#111",
colorBorderInnerEnd: "#333",
colorNeedleShadowDown: "#333",
colorNeedleCircleOuter: "#333",
colorNeedleCircleOuterEnd: "#111",
colorNeedleCircleInner: "#111",
colorNeedleCircleInnerEnd: "#222",
valueBoxBorderRadius: 0,
colorValueBoxRect: "#222",
colorValueBoxRectEnd: "#333"
});
loadData();
// load new data every 15 seconds
setInterval('loadData()', 15000);
}
init();
</script>
</body>
</head>
</html>
3. In your Google Sites website's home-page, click the menus Insert --> Embed --> Embed Code.
4. In the home page, click the menus: Insert --> Embed --> Embed Code.
5. Paste the code you copied earlier into the Embed Code window and click "Save".
6. You will then see a gauge visual that shows the live humidity reading from a humidity sensor (similar to the one on the left side).
Place the individual visual displays and indicators side-by-side or in a grid fashion to create your own web dashboard to remotely monitor and control various Sensor and Actuator Tinker Blocks.
Create a QR code and link it with your website that displays the Web dashboard.
Print the QR Code on physical paper or sticker and stick it on a the Temperature Tinker Block:
3. Ask your friends to scan the QR Code on the Temperature Block using any QR code raeding App on a Smartphone or Computer. As soon as they scan the QR Code, the temperature and humidity reading will be displayed within the Smartphone's web-browser as shown below: