Changeset 394

Timestamp:

2015-03-16 00:56:05 (10 years ago)

Author:

amg0

Message:

experimental google gauge

Location:

trunk/AltUI

Files:

• J_ALTUI_uimgr.js (modified) (10 diffs)
• L_ALTUI.lua (modified) (1 diff)

trunk/AltUI/J_ALTUI_uimgr.js ¶

@@ -28 +28 @@
 var cameraGlyph = glyphTemplate.format( "facetime-video", "Camera" );
 var onoffGlyph = glyphTemplate.format( "off", "On Off" );
+var scaleGlyph = glyphTemplate.format( "scale", "Gauge" );
 var smallbuttonTemplate = "<button id='{0}' type='button' class='{1} btn btn-default btn-sm' aria-label='tbd' title='{3}'>{2}</button>";
 var buttonTemplate      = "<button id='{0}' type='button' class='{1} btn btn-{3}' aria-label='tbd'>{2}</button>";
@@ -1538 +1539 @@
             $(".altui-mainpanel div.altui-page-contents").html( Html );
             $("#"+activepage).addClass("active");
+            _updateDynamicDisplayTools( false );
         }
     
@@ -2098 +2100 @@
             _replaceElementKeepAttributes( $(".altui-custompage-canvas .altui-widget#"+real_widget.id) , _getWidgetHtml(real_widget,true) );
         });
+    };
+
+    function _onDisplayGauge(widgetid,bEdit)
+    {
+        var data = google.visualization.arrayToDataTable([
+          ['Label', 'Value'],
+          ['Memory', 80],
+        ]);
+
+        var options = {
+          width: 400, height: 120,
+          redFrom: 90, redTo: 100,
+          yellowFrom:75, yellowTo: 90,
+          minorTicks: 5
+        };
+
+        var chart = new google.visualization.Gauge(document.getElementById(widgetid));
+        chart.draw(data, options);
+
+        setInterval(function() {
+          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
+          chart.draw(data, options);
+        }, 1000);
     };
         
@@ -2336 +2361 @@
             } 
         }
-        // ,{   id:80, 
-            // cls:'altui-widget-gauge', 
-            // html: _toolHtml(cameraGlyph,"Gauge"),
-            // resizable: true,
-            // aspectRatio: true,
-            // property: _onPropertyCamera, 
-            // widgetdisplay: function(widget,bEdit)    { 
-                // return (widget.properties.deviceid>0) ? _cameraDraw(widget.properties.deviceid,1) : "<img src='{0}'></img>".format(cameraURI);   //"<div class='altui-camera-div'>xxx</div>";
-            // },
-            // properties: {    //( deviceID, service, action, params, cbfunc )
-                // deviceid:0
-            // } 
-        // }    
+        ,{  id:80, 
+            cls:'altui-widget-gauge', 
+            html: _toolHtml(scaleGlyph,"Gauge"),
+            property: _onPropertyVariable, 
+            widgetdisplay: function(widget,bEdit)   { 
+                return "<div class='altui-gauge-div' id='{0}'></div>".format(widget.id);
+            },
+            onWidgetDisplay: _onDisplayGauge,
+            properties: {   //( deviceID, service, action, params, cbfunc )
+                deviceid:0,
+                service:'',
+                variable:''
+            } 
+        }   
         ];      
     
@@ -2428 +2454 @@
     };
     
+    function _updateDynamicDisplayTools( bEdit )
+    {
+        $.each(tools, function(idx,tool) {
+            if ($.isFunction( tool.onWidgetDisplay) )
+            {
+                $(".altui-custompage-canvas ."+tool.cls).each( function(idx,elem) {
+                    var widgetid = $(elem).prop('id');
+                    (tool.onWidgetDisplay)(widgetid, bEdit);        // edit mode                            
+                })
+            }
+        }); 
+    };
+    
     // explicitly return public methods when this object is instantiated
   return {
@@ -2435 +2474 @@
     initEngine      : _initEngine, 
     initCustomPages : _initCustomPages,
+    loadScript : _loadScript,   //(scriptLocationAndName) 
     
     // UI helpers
@@ -3141 +3181 @@
         
         $(".altui-mainpanel").html( pageTabs + Html );
+        _updateDynamicDisplayTools( false );
+
         $('#altui-page-tabs a:first').tab('show');
     },
@@ -3229 +3271 @@
             var pageEditorHtml = _createPageEditorHtml();
             $(".altui-mainpanel").html( pageEditorHtml );
-
+            _updateDynamicDisplayTools( true ); //edit mode
             // make all reloaded children draggable
             $(".altui-mainpanel .altui-widget")                         
                 .draggable(_widgetOnCanvasDraggableOptions)
 
-            // add resizable
+            // add resizable & gauges
             $.each(tools, function(idx,tool){
                 if (tool.resizable==true) {
@@ -3314 +3356 @@
                             });
                         }
+                        if ($.isFunction( tool.onWidgetDisplay) )
+                        {
+                            (tool.onWidgetDisplay)(widgetid, true);     // edit mode                            
+                        }
                     }
                 }
@@ -3591 +3637 @@
 })( window );100
 
-// $("#menu_room,#menu_device,#menu_scene,#menu_plugins,#menu_custom,#menu_plugins").toggle();
+// UIManager.loadScript('https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table","gauge"]}]}');
 $(document).ready(function() {
     $(window).on('resize', function () {

trunk/AltUI/L_ALTUI.lua ¶

@@ -531 +531 @@
     <script src="J_ALTUI_verabox.js"></script>
     <script src="J_ALTUI_uimgr.js"></script>
+    <script type="text/javascript"
+      src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["gauge","table"]}]}'>
+    </script>
+    
     @optional_scripts@
     <script type='text/javascript'>
+        google.setOnLoadCallback(drawVisualization);
+        function drawVisualization() {
+            AltuiDebug.debug('google loaded');
+        };
         var g_DeviceTypes =  JSON.parse('@devicetypes@');
         var g_CustomPages = @custompages@;