Hi all,
below an example of gauge elements for classic ui:
Required files:
<html>
<head>
<style>
body {
margin: 0px;
}
</style>
<!--
- Google jQuery API
- Google Charts API (https://developers.google.com/chart/)
- openHAB API
-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var baseURL = "../../";
</script>
<script type="text/javascript" src="../javascript/openHAB.js"></script>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<center>
<div id="chart_div"></div>
</center>
<script type="text/javascript">
// Load package and register callback ...
// https://developers.google.com/chart/interactive/docs/gallery/gauge
google.charts.load('current', { 'packages': ['gauge'] });
google.charts.setOnLoadCallback(draw);
function draw() {
var openHABValue = Math.round(GetOpenHABItem("ItemPowerHouseTotal"));
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['[W]', openHABValue]]);
var options = {
min : 0,
max : 3000,
width : 110,
height : 110,
redFrom : 2000,
redTo : 3000,
yellowFrom: 1000,
yellowTo : 1999,
minorTicks: 250
};
var pageElement = document.getElementById('chart_div');
var powerGauge = new google.visualization.Gauge(pageElement);
powerGauge.draw(data, options);
setInterval(function () {
var openHABValue = Math.round(GetOpenHABItem("ItemPowerHouseTotal"));
data.setValue(0, 1, openHABValue);
powerGauge.draw(data, options);
}, 2500);
}
</script>
</body>
</html>
Gauge.html:
<html>
<!--
Parameters
item: openHAB item
unit:
-->
<head>
<style>
body {
margin: 0px;
}
</style>
<!--
- Google jQuery API
- Google Charts API (https://developers.google.com/chart/)
- openHAB API
-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var baseURL = "../../";
</script>
<script type="text/javascript" src="../javascript/openHAB.js"></script>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<center>
<div id="chart_div"></div>
</center>
<script type="text/javascript">
$(document).ready(function () {
var item = GetParameter("item");
var unit = GetParameter("unit");
// Load package and register callback ...
// https://developers.google.com/chart/interactive/docs/gallery/gauge
google.charts.load('current', { 'packages': ['gauge'] });
google.charts.setOnLoadCallback(draw);
function draw() {
var openHABValue = Math.round(GetOpenHABItem(item));
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['[' + unit + ']', openHABValue]]);
var options = {
min : 0,
max : 3000,
width : 110,
height : 110,
redFrom : 2000,
redTo : 3000,
yellowFrom: 1000,
yellowTo : 1999,
minorTicks: 250
};
var pageElement = document.getElementById('chart_div');
var powerGauge = new google.visualization.Gauge(pageElement);
powerGauge.draw(data, options);
setInterval(function () {
var openHABValue = Math.round(GetOpenHABItem(item));
data.setValue(0, 1, openHABValue);
powerGauge.draw(data, options);
}, 2500);
}
});
</script>
</body>
</html>
openHAB.js:
// ***
// * Required definitions:
// * - var baseURL = "../";
// *
// ***
// * Required API
// * - Google jQuery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// ***
function _GetData(itemUrl) {
var itemValue = null;
$.ajax({
contentType: 'text/plain',
url: itemUrl,
data: {},
async: false,
success: function (data) {
if (data != "NULL") {
itemValue = data;
}
}
});
return itemValue;
}
// JSON to CSV Converter
function _ConvertToCSV(objArray) {
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';
for (var i = 0; i < array.data.length; i++) {
var line = '';
for (var index in array.data[i]) {
if (line != '') line += ','
line += array.data[i][index];
}
str += line + '\r\n';
}
return str;
}
function GetOpenHABItem(item) {
var itemUrl = baseURL.concat("rest/items/").concat(item).concat("/state/");
var itemValue = null;
return _GetData(itemUrl)
}
function GetOpenHABItemIntValue(item) {
return Math.round(GetOpenHabItem(item));
}
function GetOpenHABItemHistoryJSON(item) {
var itemUrl = baseURL.concat("rest/persistence/items/").concat(item);
var jsonData = null;
jsonData = _GetData(itemUrl);
return jsonData;
}
function GetOpenItemHABHistoryCSV(item) {
var jsonData = GetOpenHABItemHistoryJSON(item);
return _ConvertToCSV(jsonData);
}
function GetParameter(parameterName) {
var result = null,
tmp = [];
location.search.substr(1).split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) {
result = decodeURIComponent(tmp[1]);
}
}
);
return result;
}
hope it is of use …
with kind regards,
Patrik