Phi: add 'display nearby METAR' widget

webgui/main.js

@@ -311,8 +311,6 @@ require([
                     "gnd-temp", "/environment/config/boundary/entry/temperature-degc"
             ], [
                     "gnd-dewp", "/environment/config/boundary/entry/dewpoint-degc"
-            ], [
-                    "metar", "/environment/metar/data"
             ], [
                     "metar-valid", "/environment/metar/valid"
             ],
@@ -322,7 +320,7 @@ require([
         var self = this;
         self.props = props;
         self.widgets = ko.observableArray([
-                "efis", "radiostack", "map"
+                "metar", "efis", "radiostack", "map"
         ]);
 
         self.topics = [
@@ -343,13 +341,11 @@ require([
         // Client-side routes
         Sammy(function() {
             this.get('#:topic', function() {
-                console.log("a", this.params );
                 self.selectedTopic( this.params.topic );
                 self.selectedSubtopic('');
             });
 
             this.get('#:topic/:subtopic', function() {
-                console.log("b", this.params );
                 self.selectedTopic( this.params.topic );
                 self.selectedSubtopic( this.params.subtopic );
             });
@@ -392,6 +388,10 @@ require([
         require : 'widgets/radiostack'
     });
 
+    ko.components.register('metar', {
+        require : 'widgets/metar'
+    });
+
     ko.components.register('efis', {
         require : 'widgets/efis'
     });

webgui/widgets/metar.html

@@ -0,0 +1,4 @@
+<style>
+</style>
+<pre data-bind="text: scrolledMetar" style="text-align: center; font-family: 'Liberation Mono'; margin: 0 0; background: #101010; color: red;">
+</pre>

webgui/widgets/metar.js

@@ -0,0 +1,46 @@
+define([
+        'jquery', 'knockout', 'text!./metar.html' 
+], function(jquery, ko, htmlString) {
+
+    function ViewModel(params) {
+      var NO_METAR = "no METAR";
+      self.scrolledMetar = ko.observable("");
+      self.textStart = 0;
+      self.metar = ko.observable(NO_METAR);
+      self.valid = ko.observable(false).extend({ fgprop: 'metar-valid' });
+      self.valid.subscribe(function(newValue) {
+        self.textStart = 0;
+        if( false == newValue ) {
+          self.metar(NO_METAR);
+          return;
+        }
+        self.metar("Wait..");
+        jquery.get('/json/environment/metar/data', null, function(data) {
+          self.textStart = 0;
+          self.metar(data.value);
+        });
+      });
+
+      self.textLength = 20;
+      self.timeout = 300;
+      self.timerId = setInterval(function() {
+          var t = self.metar() + " " + self.metar();
+          var a = self.textStart;
+          var b = a+self.textLength;
+          self.scrolledMetar( t.substring(a,b) );
+          if( ++a  >= self.metar().length )
+            a = 0;
+          self.textStart = a;
+      }, self.timeout );
+    }
+
+    ViewModel.prototype.dispose = function() {
+      clearInterval( self.timerId );
+    }
+
+    // Return component definition
+    return {
+        viewModel : ViewModel,
+        template : htmlString
+    };
+});