Phi: add Screenshot page

webgui/topics/Simulator.js

@@ -1,6 +1,10 @@
 define([
         'knockout', 'text!./Simulator.html'
 ], function(ko, htmlString) {
+    ko.components.register('Simulator/Screenshot', {
+        require : 'topics/Simulator/Screenshot'
+    });
+
     ko.components.register('Simulator/Properties', {
         require : 'topics/Simulator/Properties'
     });
@@ -21,7 +25,7 @@ define([
         var self = this;
 
         self.topics = [
-                'Properties', 'Config', 'Reset', 'Exit'
+                'Screenshot', 'Properties', 'Config', 'Reset', 'Exit'
         ];
 
         self.selectedTopic = ko.observable();

webgui/topics/Simulator/Screenshot.html

@@ -0,0 +1,9 @@
+<div class="ui-widget ui-corner-all">
+    <div>
+    <span>Refresh image every</span>
+        <input data-bind="spinner: { value: updateInterval, min: 1, spin: spinUpdateInterval }" , style="width: 2em;">
+    <span>seconds</span>
+    </div>
+
+    <img data-bind="attr: { src: imageUrl }" style="width: 100%;">
+</div>

webgui/topics/Simulator/Screenshot.js

@@ -0,0 +1,38 @@
+define([
+        'jquery', 'knockout', 'text!./Screenshot.html', 'kojqui/spinner'
+], function(jquery, ko, htmlString, fgcommand ) {
+    
+    function ViewModel(params) {
+        var self = this;
+        
+        self.imageUrl = ko.observable("");
+        self.updateInterval = ko.observable(5);
+        self.spinUpdateInterval = function(evt, ui) {
+            $(evt.target).spinner("value",ui.value);
+            return true;
+        }
+        
+        self.updateId = 0;
+        
+        self.update = function( id ) {
+            if( id != self.updateId )
+                return;
+            self.imageUrl("/screenshot?type=jpg&t=" + Date.now());
+            console.log(self.updateInterval(), self.imageUrl());
+            
+            setTimeout( function() { self.update(id); }, self.updateInterval()*1000);
+        };
+        
+        self.update(++self.updateId);
+    }
+
+    ViewModel.prototype.dispose = function() {
+        ++self.updateId;
+    }
+
+    // Return component definition
+    return {
+        viewModel : ViewModel,
+        template : htmlString
+    };
+});