integrated justgage gauges
integrated justgage gauges

--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -40,6 +40,7 @@
         'data-control': '{"pageName": "Custom", "pageId": 1000, "widget":"data-control", "format":"int", "title":"Heater", "value": "22", "valuedescription": "degrees C", "template": "template-3", "icon": "ion-ios-home", "class": "bg-green", "class2": "text-center", "order": 40}',
     },
     charts: {},
+    gauges: {},
     init: function() {
         if (typeof jQuery == 'undefined') {
             this.showNotification('jQuery', 'IoT Control Center requires jQuery', 'dashboard-notification', 'danger');
@@ -195,6 +196,21 @@
                         iotCC.createChart(widgetId, json);
                         iotCC.animate($('canvas[name="' + widgetId + '"]').closest(".widgetcontainer"));
                     }
+                } else if (json.widget == 'gauge') {
+                    if ($('div[name="' + widgetId + '"]').exists() == false) {
+                        html = '';
+                        html += '<div name="' + widgetId + '" id="' + widgetId + '" data-widget="' + json.widget + '" data-minvalue="' + json.minValue + '" data-maxvalue="' + json.maxValue + '" class="{class10}" width="{width}" height="{height}"></div> ' + (json.valuedescription?'<span class="text {class11}">' + json.valuedescription + '</span>':'') + '';
+                        json.content = html;
+                        json.widgetId = widgetId;
+                        iotCC.addWidget(json, function() {
+                            iotCC.createGauge(widgetId, json);
+                        });
+                    } else {
+                        json.minValue = $('div[name="' + widgetId + '"]').data('minvalue');
+                        json.maxValue = $('div[name="' + widgetId + '"]').data('maxvalue');
+                        iotCC.createGauge(widgetId, json);
+                        iotCC.animate($('div[name="' + widgetId + '"]').closest(".widgetcontainer"));
+                    }
                 }
             } else if (topicPath[4] == 'data') {
                 widget = $('*[name="' + widgetId + '"]').first().data('widget');
@@ -217,6 +233,10 @@
                 } else if (widget == 'chart.js') {
                     var chart = $('canvas[name="' + widgetId + '"]').first().data('chart');
                     iotCC.createChart(widgetId, {chart: chart, value: json.value});
+                } else if (widget == 'gauge') {
+                    var minValue = $('div[name="' + widgetId + '"]').first().data('minvalue');
+                    var maxValue = $('div[name="' + widgetId + '"]').first().data('maxvalue');
+                    iotCC.createGauge(widgetId, {minValue: minValue, maxValue: maxValue, value: json.value});
                 }
             } else if (topicPath[3] == 'device') {
                 $(json.pages).each(function(k, page) {
@@ -517,6 +537,20 @@
                 maintainAspectRatio: true
             }
         });
+    },
+    createGauge: function(id, json) {
+        if (this.gauges[id]) {
+            this.gauges[id].destroy();
+        }
+        this.gauges[id] = new JustGage({
+            id: id,
+            value: json.value,
+            min: json.minValue || 0,
+            max: json.maxValue || 100,
+            label: json.valuedescription || '',
+            symbol: json.symbol || '',
+            levelColors: json.invertColors ? ["#ff0000", "#f9c802", "#a9d70b"] : ["#a9d70b", "#f9c802", "#ff0000"]
+        });
     }
 }
 

--- a/assets/js/simulateDevices.js
+++ b/assets/js/simulateDevices.js
@@ -45,8 +45,14 @@
         iotCC.mqttClient.publish('/iotcc/greenhouse/heater/config', '{"pageName": "Greenhouse", "pageId": 40, "widget":"data-control", "format":"int", "title":"Heater", "topic":"/iotcc/greenhouse/heater", "value": "22", "valuedescription": "degrees C", "template": "template-3", "icon": "ion-ios-home", "class": "bg-green", "class2": "text-center", "class10": "xs", "order": 30}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/greenhouse/heater/data', '{"value":"' + (Math.floor(Math.random() * (10)) + 20) + '"}');
 
-        iotCC.mqttClient.publish('/iotcc/watertank/device', '{"name":"Watertank","desc":"", "pages" : [{"pageId" : 1000, "pageName" : "Watertank", "icon": "ion-ios-home", "class1":"bg-green", "order": "100"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/watertank/level/config', '{"pageName": "Greenhouse", "pageId": 1000, "widget": "chart.js", "chart": "pie", "title": "Watertank level", "topic":"/iotcc/watertank/level", "value": {"labels": ["Full", "Empty"], "datasets": [{"data": [70, 30], "backgroundColor": ["#3c8dbc", "#fff"], "hoverBackgroundColor": [ "#3c8dbc", "#fff"]}]}, "template": "template-3", "icon": "ion-ios-home", "class": "bg-green", "order": 30}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/watertank/level1/config', '{"pageName": "Greenhouse", "pageId": 1000, "widget": "chart.js", "chart": "doughnut", "title": "Watertank level 2", "topic":"/iotcc/watertank/level2", "value": {"labels": ["Full", "Empty"], "datasets": [{"data": [70, 30], "backgroundColor": ["#3c8dbc", "#fff"], "hoverBackgroundColor": [ "#3c8dbc", "#fff"]}]}, "template": "template-3", "icon": "ion-ios-home", "class": "bg-green", "order": 30}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/charts/device', '{"name":"Charts","desc":"", "pages" : [{"pageId" : 1000, "pageName" : "Charts", "icon": "ion-ios-home", "class1":"bg-yellow", "order": "100"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/charts/pie/config', '{"pageName": "Charts", "pageId": 1000, "widget": "chart.js", "chart": "pie", "title": "Pie chart", "topic":"/iotcc/charts/pie", "value": {"labels": ["Water", "Air"], "datasets": [{"data": [70, 30], "backgroundColor": ["#3c8dbc", "#fff"], "hoverBackgroundColor": [ "#3c8dbc", "#fff"]}]}, "template": "template-3", "icon": "fa fa-pie-chart", "class": "bg-yellow", "order": 30}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/charts/doughnut/config', '{"pageName": "Charts", "pageId": 1000, "widget": "chart.js", "chart": "doughnut", "title": "Doughnut chart", "topic":"/iotcc/charts/doughnut", "value": {"labels": ["Water", "Air"], "datasets": [{"data": [70, 30], "backgroundColor": ["#3c8dbc", "#fff"]}]}, "template": "template-3", "icon": "fa fa-pie-chart", "class": "bg-yellow", "order": 30}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/charts/bar/config', '{"pageName": "Charts", "pageId": 1000, "widget": "chart.js", "chart": "bar", "title": "Bar chart", "topic":"/iotcc/charts/bar", "value": {"labels": ["Water", "Air"], "datasets": [{"label": "Bar chart", "data": [70, 30], "backgroundColor": ["#3c8dbc", "#fff"]}]}, "template": "template-3", "icon": "fa fa-pie-chart", "class": "bg-yellow", "order": 30}', {qos: 1, retained: false});
+
+        iotCC.mqttClient.publish('/iotcc/gauges/device', '{"name":"Gauges","desc":"", "pages" : [{"pageId" : 2000, "pageName" : "Gauges", "icon": "ion-ios-home", "class1":"bg-green", "order": "100"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/gauges/thermometer/config', '{"pageName": "Gauges", "pageId": 2000, "widget": "gauge", "title": "Thermometer", "topic":"/iotcc/gauges/thermometer", "value": 10, "minValue": -20, "maxValue": 50, "symbol": " C", "template": "template-3", "icon": "fa fa-thermometer-half", "class": "bg-green", "order": 10}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/gauges/hygrometer/config', '{"pageName": "Gauges", "pageId": 2000, "widget": "gauge", "title": "Humidity", "topic":"/iotcc/gauges/hygrometer", "value": 60, "minValue": 0, "maxValue": 100, "symbol": "%", "template": "template-3", "icon": "ion-thermometer", "class": "bg-green", "order": 20}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/gauges/waterlevel/config', '{"pageName": "Gauges", "pageId": 2000, "widget": "gauge", "title": "Water level", "topic":"/iotcc/gauges/waterlevel", "value": 100, "minValue": 0, "maxValue": 2000, "symbol": " L", "invertColors": true, "template": "template-3", "icon": "ion-waterdrop", "class": "bg-green", "order": 30}', {qos: 1, retained: false});
     }
 });

file:a/bower.json -> file:b/bower.json
--- a/bower.json
+++ b/bower.json
@@ -22,7 +22,8 @@
     "jquery-serialize-object": "^2.5.0",
     "font-awesome": "fontawesome#^4.7.0",
     "Ionicons": "ionicons#^2.0.1",
-    "chart.js": "^2.5.0"
+    "chart.js": "^2.5.0",
+    "justgage-toorshia": "justgage-official#^1.2.9"
   }
 }
 

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -422,7 +422,10 @@
 <script type="text/javascript" src="assets/js/iotcc.js"></script>
 <script type="text/javascript" src="assets/js/simulateDevices.js"></script>
 
+<!-- widgets -->
 <script src="bower_components/chart.js/dist/Chart.min.js"></script>
+<script src="bower_components/justgage-toorshia/justgage.js"></script>
+<script src="bower_components/raphael/raphael-min.js"></script>
 
 </body>
 </html>

comments