Skip to content

Instantly share code, notes, and snippets.

@justinecodez

justinecodez/wazi-bees

Created November 24, 2019 11:41
Show Gist options
  • Save justinecodez/3de104f214442450d5950c5c69637914 to your computer and use it in GitHub Desktop.
Save justinecodez/3de104f214442450d5950c5c69637914 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wazi-bees
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
/>
<title>WaziUp</title>
</head>
<body>
<!-- Sidebar -->
<ul class="sidebar" id="mtabs">
<img src="waziupLogo.png" class="logo" alt="Waziup" />
<h4 class="text-center">App Title</h4>
<li class="active">
<a href="#context" rel="context">Device Context</a>
</li>
<li><a href="#value" rel="value">Device Value</a></li>
<li><a href="#map" rel="map">Map</a></li>
<li><a href="#graph" rel="graph">Graph</a></li>
</ul>
<!-- Page Content -->
<div class="content">
<div id="mtabs_content_container">
<!-- Device Selecter -->
<div class="form-group row">
<div class="col-sm">
<label for="select">Devices</label>
<select
class="form-control"
id="selectDevice"
onchange="onDeviceSelect()"
>
</select>
</div>
<div class="col-sm">
<label for="select">Sensors</label>
<select
class="form-control"
id="selectSensor"
onchange="onSensorSelect()"
>
</select>
</div>
</div>
<div id="context" class="mtab_content" style="display: block;">
<div>
<ul class="list-group">
<li class="list-group-item active">Device Context</li>
<li class="list-group-item" id="device_name_context">Name</li>
<li class="list-group-item" id="device_owner">Owner</li>
<li class="list-group-item" id="device_domain">Domain</li>
<li class="list-group-item" id="device_gateway">Gateway</li>
</ul>
</div>
</div>
<div id="value" class="mtab_content">
<div>
<ul class="list-group">
<li class="list-group-item active">
Device Value for Sensor <span id="device_value_id"></span>
</li>
<li class="list-group-item" id="device_name_value">Name</li>
<li class="list-group-item" id="device_last_value">Last Value</li>
<li class="list-group-item" id="device_quantity_kind">
Quantity Kind
</li>
<li class="list-group-item" id="device_sensing_device">
Sensing Device
</li>
<li class="list-group-item" id="device_unit">Unit</li>
</ul>
</div>
</div>
<div id="map" class="mtab_content">
<div id="mapid" style="height:600px"></div>
</div>
<div id="graph" class="mtab_content">
<canvas id="myChart" width="800" height="600">Loading...</canvas>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/Waziup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
$(document).ready(function() {
// When user clicks on tab, this code will be executed
$("#mtabs li").click(function() {
// First remove class "active" from currently active tab
$("#mtabs li").removeClass("active");
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".mtab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this)
.find("a")
.attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
</script>
<script>
Waziup.ApiClient.instance.basePath = "https://api.waziup.io/api/v2";
var devicesApi = new Waziup.DevicesApi();
var sensorsApi = new Waziup.SensorsApi();
// default device values
var device_id = "b827ebdd24bf_5";
var sensor_id = "TEMP";
var sensorValues = [];
var graphLabel = [];
var myChart;
// initializing
loadDevices();
loadSensors();
function loadDevices() {
// list of devices
var selectDevice = document.getElementById("selectDevice");
devicesApi.getDevices("waziup").then(devices => {
for (device of devices) {
// create and populate an option for the select
var opt = document.createElement("option");
opt.value = device.id;
opt.innerHTML = device.id;
// then append it to the select element
selectDevice.appendChild(opt);
}
});
}
function loadSensors() {
// list of sensors
var selectSensor = document.getElementById("selectSensor");
// reset sensor values
sensorValues = [];
devicesApi.getDeviceSensors(device_id).then(sensors => {
sensors.forEach((sensor, index) => {
// set sensor_id to the first sensor
if (index == 0) {
sensor_id = sensor.id;
}
// create and populate an option for the select
var opt = document.createElement("option");
opt.value = sensor.id;
opt.innerHTML = sensor.id;
// then append it to the select element
selectSensor.appendChild(opt);
// get sensor values for each sensor
sensorsApi
.getSensorsData({ device_id, sensor_id: sensor.id })
.then(values => {
var data = [];
// reset graph label
if (values.length > 0) graphLabel = [];
// add each sensor values in an array
for (value of values) {
data.push(value.value);
if (value.timestamp) graphLabel.push(value.timestamp);
}
//
if (data.length > 0)
sensorValues.push({
label:
sensor.id + (sensor.unit ? "(" + sensor.unit + ")" : ""),
data: data,
borderColor: dynamicColors()
});
})
.finally(values => {
loadGraph();
});
});
loadValues();
});
}
// select device
function onDeviceSelect() {
var devicesList = document.getElementById("selectDevice");
var selectedDevice =
devicesList.options[devicesList.selectedIndex].value;
device_id = selectedDevice;
// reset sensors list
document.getElementById("selectSensor").innerText = null;
loadSensors();
}
// select sensor
function onSensorSelect() {
var sensorsList = document.getElementById("selectSensor");
var selectedSensor =
sensorsList.options[sensorsList.selectedIndex].value;
sensor_id = selectedSensor;
loadValues();
}
// random color generator
var dynamicColors = function() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
// load device and sensor values
function loadValues() {
// device context
devicesApi.getDevice(device_id).then(device => {
document.getElementById("device_name_context").innerHTML =
"Name : " + device.name;
document.getElementById("device_owner").innerHTML =
"Owner : " + device.owner;
document.getElementById("device_domain").innerHTML =
"Domain : " + device.domain;
document.getElementById("device_gateway").innerHTML =
"Gateway : " + device.gateway_id;
});
// device value
sensorsApi.getSensor(device_id, sensor_id).then(device => {
document.getElementById("device_value_id").innerHTML = device.id;
document.getElementById("device_name_value").innerHTML =
"Name : " + device.name;
document.getElementById("device_last_value").innerHTML =
"Last Value : " + device.value.value;
document.getElementById("device_quantity_kind").innerHTML =
"Quantity Kind : " + device.quantity_kind;
document.getElementById("device_sensing_device").innerHTML =
"Sensing Device : " + device.sensing_device;
document.getElementById("device_unit").innerHTML =
"Unit : " + device.unit;
});
}
// load graph with device values
function loadGraph() {
// if chart already exists update dataset
if (myChart) {
myChart.data.labels = graphLabel;
myChart.data.datasets = sensorValues;
myChart.update();
} else {
var ctx = document.getElementById("myChart").getContext("2d");
myChart = new Chart(ctx, {
type: "line",
data: {
labels: graphLabel,
datasets: sensorValues
},
options: {
responsive: false
}
});
}
}
// map
var mymap = L.map("mapid").setView([-1.97, 30.1], 8);
L.tileLayer(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
{
attribution:
'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 8,
id: "mapbox.streets",
accessToken:
"pk.eyJ1IjoiY2R1cG9udDIiLCJhIjoiY2pnZTVkZ2xsMGxyZTJ4cjA5dDZ4cjNneSJ9.NJT7CULfcY0mjeavffR_vg"
}
).addTo(mymap);
var markers = [];
devicesApi
.getDevices({
limit: 1000
})
.then(devices => {
for (device of devices) {
if (device.location) {
L.marker([
device.location.latitude,
device.location.longitude
]).addTo(mymap);
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment