ALL POSTS BY

Blog

The IoT candle Software Tutorial

If your family is across the city, country or world this holiday season, you can keep track of one another (and when your candles are lit) on this interactive map.

 

There are two parts to this tutorial. You can start with setting up the hardware, or read on for the IoT candle software tutorial. All the details and code can also be found in our GitHub repository.

 

This simple holiday project exemplifies how easy getting into the Internet of Things can be. With some inexpensive sensors and basic programming, we connected flame sensors to the internet and were able to publish their current readings. To make things more interesting, we connected candles around Berlin, and published their current states to a map.

 

IoT_Candle_Hardware

 

 

This could also be the beginning of any IoT project. Switch the candles for vending machines and the flame sensors for gyroscopes and you have vandalism detection on machines around the country or globe. Scale up to add more sensors and features for full scale, interactive maps that give you up to date information on whatever you're interested in.

 

So, let's get started. To show the results of the sensor, we've built a small webpage using LeafletJS. Each time a candle is lit (i.e. the flame sensor detects a flame) a candle pops up on the map.

 

The project is rather small which is why we've decided to keep it all in one HTML page. If you are more experienced programmer, this can be scaled up and additional features can be implemented.

Start by creating a file by the name of index.html

 

Define the html and add some styling

             <!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <!-- for mobile -->
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <!-- font -->
<link href='https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700' rel='stylesheet' type='text/css'>
            <!-- Leaflet CSS -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<style>
            #header {
                text-shadow: 2px 2px #888888;
                position: absolute;
                z-index: 10;
                color: #000;
                width:100%;
                text-align: center;
                font-size: 90px;
                font-family: 'Mountains of Christmas', cursive;
            }
            /*defined height for the map*/  
            html,
            body,
            #map {
                height: 100%;
            }

            body {

                position: relative;
                padding: 0;
                margin: 0;
            }
            </style>

        </head>

In the body define some div and load the Javascripts

Download LeafletJS and save it in the same folder as your index.html file. Download stamen tile and the relayr browser SDK. We've used SnowstormJS to make the page more 'Christmasy'.

 <body>
        <!-- div to put the map in -->
<h1 id="header">Your Candle Map</h1>
<div id="map"></div>

        <!-- include LeafletJS -->
        <script src="leaflet/leaflet.js"></script>
        <!-- for your eye pleasure add the toner map -->
        <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
        <!-- include RelayrJS -->
        <script src="https://developer.relayr.io/relayr-browser-sdk.min.js"></script>\
        <!-- snowstorm -->
        <script src="snowstorm/snowstorm.js"></script>

Set up the map using the following code

<script>
// load the map and set the view
var map = new L.map('map').setView([52.5167, 13.3833], 13);
//load the toner layer
var layer = new L.StamenTileLayer("toner");
//add a layer
map.addLayer(layer);
//or add a tile layer get from Mapbox.com
// L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
//     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
// }).addTo(map);
//define an icon class 
var CandleIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaflet/images/candle-shadow.png',
        iconSize: [38, 95],
        shadowSize: [50, 64],
        iconAnchor: [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor: [-3, -76]
    }
});
//create icons
var candle1Icon = new CandleIcon({
        iconUrl: 'leaflet/images/candle-red.png'
    }),
    candle2Icon = new CandleIcon({
        iconUrl: 'leaflet/images/candle-red.png'
    }),
    candle3Icon = new CandleIcon({
        iconUrl: 'leaflet/images/candle-red.png'
    });
//shortcut for easy naming
L.icon = function(options) {
    return new L.Icon(options);
};
//set the marker and some random start values
var candle1 = L.marker([52.5168, 13.3809], {
    icon: candle1Icon
}).addTo(map);
var candle2 = L.marker([52.51675, 13.2083], {
    icon: candle2Icon
}).addTo(map);
var candle3 = L.marker([52.5043, 13.31], {
    icon: candle3Icon
}).addTo(map);      

 

Finally use the following code to call the relayr cloud

//Relayr Credentials
    var AppID = "d4ed9e3b-00dc-4d94-a8be-0d3de9cfff62";
    var toke = "C3RjzG7blCFjAOHPz-Iv5QNaYXICNl-q";
    var Candle1_deviceId = "ef805ac8-74b1-4ad9-874f-d08c9f99f20c";

    var relayr = RELAYR.init({
        appId: AppID
    });

    relayr.devices().getDeviceData({
        token: toke,
        deviceId: Candle1_deviceId,
        incomingData: function(data) {
            console.log("co");
                console.log(data.readings[0].meaning);
            if (data.readings[0].meaning == "Fire") {
                console.log(data.readings[0].value);

                //if true then
                if (data.readings[0].value == 0) {

                    marker = L.marker()

                    //set LatLng
                    candle1.setLatLng([data.readings[1].value, data.readings[2].value]);
                    //show candle
                    candle1.addTo(map);

                    //false
                } else {

                    //remove candle
                    map.removeLayer(candle1);

                }
            }
        }
    });
    </script>
</body>

 

Have a look at the repository for more information on the code and have fun integrating maps into your IoT projects!