Add Simply Sense devices visualization with Javascript API

Introduction

This tutorial shows you how to add the devices visualization with a javascript API to a web page. Knowledge of HTML, CSS and JavaScript is needed to add the javascript API.

Sensors

Getting started

Follow the three steps to add the devices visualization on your web page:

Step 1: Create an HTML page

Here's the code for a basic HTML web page: 


<html>
<head>
    <script src="http://example.com/static/simplysense-api-1.0.2.js"></script>
</head>
<body>
    <h1>Sensors</h1>
    <!--The div element for the devices view -->
    <div id="devicesView"></div>
    <script>
        (function(){
            new SIMPLYSENSE.SensorsAlert("REFRESH_TOKEN", "ORGANISATION",
                {
                    container:document.querySelector("#devicesView"),
                    status_code:true
                });
            }());
    </script>
</body>
</html>

This is a basic page with a heading level one(h1), and a div element(div). You can add any content and style you like to the web page.

Let's go through the code.

The code below creates an HTML page consisting of a head and a body. 


<html>
    <head>
    </head>
    <body>
    </body>
</html>

You can add a heading level one with your own text above the devices visualization using the code below. 


<h1>Waterleak Sensors</h1>

The code below defines the area of the page for the devices visualization. 


<!--The div element for the devices visualization -->
<div id="devicesView"></div>

The code below add the devices visualization Javascript API to load the devices view.
Add the div element to the container between brackets. 


<script>
    (function(){
        new SIMPLYSENSE.SensorsAlert("YOUR_API_KEY_HERE", "YOUR_API_ORGANISATION_NAME_HERE",
            {
                container:document.querySelector("#devicesView"),
                status_code:true
            });
        }());
</script>

Step 2: Add your API key and API organisation name.

This section explains how to authenticate and authorize your app to access the Javascript API.

Replace "YOUR_API_KEY_HERE"" with your API key and "YOUR_API_ORGANISATION_NAME_HERE"" with your API organisation name. 


<script>
    (function(){
        new SIMPLYSENSE.SensorsAlert("YOUR_API_KEY_HERE", "YOUR_API_ORGANISATION_NAME_HERE");
    }());
</script>