This tutorial explains the steps involved in building a Web-based Device Control Block to control the operation of a Buzzer Block in the Temperature & Fire Monitoring & Alerting Tinker Block Application.
Before building Web-based Device Control Block, please make sure to build:
Buzzer Block, Processor Block and Power Block
IoT-based Server Block
IoT-based Device Control Block
Device Integration Block
Copy the below HTML, CSS and Java Script code into a Notepad.
Edit the code as follows:
Replace 99999 with the TalkBack ID of your ThingSpeak channel (replace in two places).
Replace XXXXXXXXXXXXXXXX with the TalkBack API key of your ThingSpeak channel (replace in two places).
View HTML, CSS and Java Script code here...
<html>
<style type="text/css">
body { background-color: white; }
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var turnOnBuzzer = function() {
$.post('https://api.thingspeak.com/talkbacks/99999/commands.json?api_key=XXXXXXXXXXXXXXXX&command_string=TURN_ON&position=1');
document.getElementById("buzzer_status").innerHTML = "<span class=\"green_dot\"></span>";
}
var turnOffBuzzer = function() {
$.post('https://api.thingspeak.com/talkbacks/99999/commands.json?api_key=XXXXXXXXXXXXXXXX&command_string=TURN_OFF&position=1');
document.getElementById("buzzer_status").innerHTML = "<span class=\"grey_dot\"></span>";
}
</script>
<head>
<style>
.green_dot {
height: 180px;
width: 180px;
background-color: green;
border-radius: 50%;
display: inline-block;
}
.grey_dot {
height: 180px;
width: 180px;
background-color: grey;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<center>
<p>
<span id="buzzer_status" class="grey_dot"> </span>
<br><br>
<input type="button" class="buttonAction" id="buzzerOnButton" value="Turn On" onClick=turnOnBuzzer() />
<input type="button" class="buttonAction" id="buzzerOffButton" value="Turn Off" onClick=turnOffBuzzer() />
</p>
</center>
</body>
</html>
3. Open Google Sites web-site builder tool here: https://sites.google.com
4. Click "+" to create a new website or choose to open an existing website (previously created)
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 Lamp indicator with two buttons - "Turn On" and "Turn Off" below it. When you click the Turn On button, the lamp indicator turns green and send a command to turn off the device. When you click the Turn Off button, the lamp indicator turns grey and sends a command to turn off the device.
8. Click the buttons "Turn On" and "Turn Off" to control the Buzzer Block remotely.