Classic UI - Gauge web element

Tutorials & Examples Solutions
, ,
1

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 :slight_smile: …

with kind regards,
Patrik

6 Likes
2

I do not really know, what I should do?

  1. put “Gauge.html” to “OpenHAB2\conf\html” folder
  2. put “openHAB.js” to “OpenHAB2\conf\scripts”

What to do with the first htmp-file with no name?
Can you share a sitemap example?