spectrum data visible using websocket

Radioberry - Frontend/bower.json

@@ -2,10 +2,11 @@
   "name": "fountain-inject",
   "version": "0.0.1",
   "dependencies": {
-    "angular": "^1.5.0",
-    "angular-ui-router": "1.0.0-beta.1"
+    "angular": "1.5.8",
+    "angular-ui-router": "1.0.0-beta.1",
+    "angular-websocket": "^2.0.0"
   },
   "devDependencies": {
-    "angular-mocks": "^1.5.0"
+    "angular-mocks": "1.5.8"
   }
 }

Radioberry - Frontend/gulp_tasks/build.js

@@ -34,16 +34,16 @@ function build() {
     .pipe(sourcemaps.init())
     .pipe(ngAnnotate())
     .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
-    .pipe(rev())
+    //.pipe(rev())
     .pipe(sourcemaps.write('maps'))
     .pipe(jsFilter.restore)
     .pipe(cssFilter)
     .pipe(sourcemaps.init())
     .pipe(cssnano())
-    .pipe(rev())
+    //.pipe(rev())
     .pipe(sourcemaps.write('maps'))
     .pipe(cssFilter.restore)
-    .pipe(revReplace())
+    //.pipe(revReplace())
     .pipe(htmlFilter)
     .pipe(htmlmin())
     .pipe(htmlFilter.restore)

Radioberry - Frontend/src/app/demo/demo.html

@@ -7,9 +7,9 @@ <h1> Radio Widgets / Control Demo Page</h1>
 
 <p> Radio control properties, state of the radio {{radioState}}</p>
 
-
-		<bandselector radio="radioState"></bandselector>
 
+		<bandselector radio="radioState"></bandselector>
+
 		<attselector radio="radioState"> </attselector>
 
 		<frequencycontrol radio="radioState"></frequencycontrol>
@@ -18,13 +18,14 @@ <h1> Radio Widgets / Control Demo Page</h1>
 
 		<spectrum radio="radioState"> </spectrum>
 
+
 		<modeselector radio="radioState" mode="modes"></modeselector>
 
 		<agcselector radio="radioState" agcmode="agcmode"></agcselector>
 
 		<bandwithselector radio="radioState"></bandwithselector>
 
-		<volume radio="radioState"></volume>
+		<volume radio="radioState" ></volume>
 
 <br><br><br><br>
 		<p>the widgets as shown will be described...i have to think about styling.. </p>

Radioberry - Frontend/src/app/services/websocket_service..js

@@ -0,0 +1,26 @@
+angular
+    .module('app')
+    .factory('WebSocketService', ['$window', '$rootScope', '$websocket', function ($window, $rootScope, $websocket) {
+
+        // Open a WebSocket connection
+        //using for local test... 
+        //var dataStream = $websocket('ws://169.254.214.88:8000/ws');
+        var dataStream = $websocket('ws://' + $window.location.host + '/ws');
+
+        $rootScope.spectrumData={};
+
+        dataStream.onMessage(function (message) {
+            $rootScope.spectrumData.spectrum = JSON.parse(message.data);
+            $rootScope.$emit('spectrum-event');
+        });
+
+        return {
+            data: $rootScope.spectrumData,
+
+            subscribe: function (scope, callback) {
+                var handler = $rootScope.$on('spectrum-event', callback);
+                scope.$on('$destroy', handler);
+            }
+        };
+
+    }]);

Radioberry - Frontend/src/app/widgets/agc-selector_component.js

@@ -9,7 +9,7 @@ angular
         controller: function ($window, $scope, $log, RadiostateService) {
             var self = this;
 
-            self.selectedMode = self.agcmode[self.radio.mode];
+            self.selectedMode = self.agcmode[self.radio.agcmode];
 
             self.setAGCMode = function () {
                  self.radio.agcmode = self.selectedMode.code;

Radioberry - Frontend/src/app/widgets/spectrum_component.js

@@ -5,20 +5,22 @@ angular
         bindings: {
             radio: '='
         },
-        controller: function ($window, $scope, $interval, NotifyingService) {
+        controller: function ($window, $scope, $interval, NotifyingService, WebSocketService) {
             var self = this;
 
-            this.canvasElement = $window.document.getElementById('visualizer');
+            self.ws = WebSocketService;
 
-            NotifyingService.subscribe($scope, function somethingChanged() {
-                // Handle notification
-                console.log("Iam notified....")
+            this.canvasElement = $window.document.getElementById('visualizer');
 
+            WebSocketService.subscribe($scope, function newSpectrumData() {
+                showSpectrum();
             });
 
-            var createData = function () {
+            var showSpectrum = function () {
 
                 var dataArray = new Float32Array(1280);
+                dataArray = self.ws.data.spectrum;
+
                 var bandWidth = 0;
 
                 WIDTH = 900;
@@ -83,7 +85,7 @@ angular
                     var k = 1;
                     for (var i = 0; i < bufferLength; i++) {
                         k = k * -1;
-                        var y = 240.0 + ( (Math.random() * 4) * k) ; //dataArray[i] * -1 * 2;
+                        var y = dataArray.spectrum[i] * -1 * 2; //240.0 + ( (Math.random() * 4) * k) ; //
                         if (i === 0) {
                             canvasCtx.moveTo(x, y);
                         } else {
@@ -139,7 +141,7 @@ angular
                 draw();
             };
             //using interval
-            $interval(createData, 50);
+            //$interval(createData, 50);
         }
     });
 

Radioberry - Frontend/src/index.js

@@ -1,2 +1,2 @@
 angular
-  .module('app', ['ui.router']);
+  .module('app', ['ui.router', 'ngWebSocket']);