1. PubNub.com has provided great tools for publish channel over PubNub service over internet, the website can response to the request by subscribe the channel, only subscribe key is needed for this service. Of course, this can be done by AWS IoT service, but PubNub is the easiest and secure.
2. I have registered one simple website for this project as flood_alarm,
Then power the development board with CC3100 boostpack plugged, waiting for publish over pubNub,
The web subscribe the channel and response with flooding now alert.
3. Now the design loop closes. The alarm pack get water level by capacitive sensing, publish the topic (or Channel) via pubNub service to web portal that subscribe the topic (or Channel).
More service like SMS can be added later. Now I can polish the code and adjust the parameter.
4. Reference code for pubnub Web,
<script>
// Application object.
var app = {}
var pubnub = new PubNub({
subscribeKey: 'sub-c-xxxxxxxxxxxxxxxxxxxxxxxx', // always required
publishKey: 'pub-c-xxxxxxxxxxx' // only required if publishing
});
pubnub.addListener({
status: function(statusEvent) {
if (statusEvent.category === "PNConnectedCategory") {
var payload = {
my: 'payload'
};
pubnub.publish(
{
message: payload
},
function (status) {
// handle publish response
}
);
}
},
message: function(message) {
// handle message
app.showMessage("---Flooding Now----");
},
presence: function(presenceEvent) {
// handle presence
}
})
pubnub.subscribe({
channels: ['flood_alarm_signal']
});
// Connected device.
app.device = null;
app.showMessage = function(info)
{
document.getElementById('info').innerHTML = info
};
</script> for html design,
<!DOCTYPE html> <html> <!-- This is an demo app for Flood Alarm Alert --> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <title>Flood Alarm Pack Website</title> <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.12.0.js"></script> </head> <body ontouchstart="" ><!-- ontouchstart="" enables low-delay CSS transitions. --> <header align="center"> <button class="back" onclick="history.back()"> <img src="back.jpg" /> </button> <img class="logotype" src="flood_alarm.jpg" alt="Evothings" /> </header> <h1 align="center"> Flood Alarm Pack </h1> <p id="info" align="center" >Initializing...</p> </body> </html>