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: 


<!DOCTYPE html>
<html>
<head>
    <script src="https://beta.simplysense.nl/static/simplysense-api-1.0.js"></script>
</head>
<body>
    <h1>Sensors</h1>
    <!--The div element for the devices view -->
    <div id="devicesView"></div>
    <script>
        (function(){
            new SIMPLYSENSE.SensorsDetail("API_KEY","API_ORGANISATION_NAME",
                {
                    container:document.querySelector("#devicesView"),
                    uniqueID:"box1",
                    language:"nl",
                    temperaturegraph:{
                        color:"steelblue",
                        height:250,
                    },
                    batterygraph:{
                        color:"green",
                        height:350,
                    },
                    brush:{
                        height:250,
                    }
                });
            }());
    </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>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 and an uniqueID to the uniqueID between brackets. 


 <script>
        (function(){
            new SIMPLYSENSE.SensorsDetail("API_KEY","API_ORGANISATION_NAME",
                {
                    container:document.querySelector("#devicesView"),
                    uniqueID:"box1",
                    language:"nl",
                    temperaturegraph:{
                        color:"steelblue",
                        height:250,
                    },
                    batterygraph:{
                        color:"green",
                        height:350,
                    },
                    brush:{
                        height:250,
                    }
                });
            }());
</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.SensorsDetail("YOUR_API_KEY_HERE","YOUR_API_ORGANISATION_NAME_HERE");
    }());
</script>

Step 3: Add extra style through Javascript API in HTML.

This section explains how to add extra style to the devices visualization.

The devices visualization contains a temperature graph, battery graph and brush.
Of the above the color, height and language can be customized by replacing the value of the parameter. The language choice is for the labels and date of the graphs.
You can choose between Dutch and English. Replace the value in language between brackets with the following:
    1. "en" for English
    2. "nl" for Dutch 


 <script>
        (function(){
            new SIMPLYSENSE.SensorsDetail("API_KEY","API_ORGANISATION_NAME",
                {
                    container:document.querySelector("#devicesView"),
                    uniqueID:"box1",
                    language:"nl",
                    temperaturegraph:{
                        color:"steelblue",
                        height:250,
                    },
                    batterygraph:{
                        color:"green",
                        height:350,
                    },
                    brush:{
                        height:250,
                    }
                });
            }());
</script>