From eb472eb5644e8d0d55f6b6bb2adfc665d923e630 Mon Sep 17 00:00:00 2001 From: RalfMayet Date: Thu, 8 Dec 2016 18:15:32 +0800 Subject: [PATCH] minor refactoring and implementation of only poll attention values when graph is loaded --- glimpse/bower.json | 3 +- glimpse/index.html | 2 - glimpse/index.js | 3 +- glimpse/js/directives/graph.js | 90 ++++++++------------------------- glimpse/js/factories.js | 44 ++++++++++++++++ glimpse/js/main.js | 5 ++ glimpse/js/templates/graph.html | 30 +++++------ 7 files changed, 87 insertions(+), 90 deletions(-) diff --git a/glimpse/bower.json b/glimpse/bower.json index cfa6c7ac..c42a83bb 100644 --- a/glimpse/bower.json +++ b/glimpse/bower.json @@ -28,6 +28,7 @@ "d3": "3.5.16", "angular-resource": "1.5", "v-accordion": "^1.5.1", - "dock-spawn": "https://github.com/Selameab/dock-spawn.git#23e7be1da69aa2095dd51e2cee7854598a2b8a5b" + "dock-spawn": "https://github.com/Selameab/dock-spawn.git#23e7be1da69aa2095dd51e2cee7854598a2b8a5b", + "highcharts-ng": "^0.0.13" } } diff --git a/glimpse/index.html b/glimpse/index.html index 2a94b5e4..9363ee0c 100644 --- a/glimpse/index.html +++ b/glimpse/index.html @@ -231,8 +231,6 @@ - - diff --git a/glimpse/index.js b/glimpse/index.js index 3e0e781f..eb9a6e6c 100644 --- a/glimpse/index.js +++ b/glimpse/index.js @@ -27,7 +27,8 @@ if (environment == "test") { }); test_atoms.use('/api/v1.1/scheme', function(req, res) { - res.send('{\"arousal\": '+Math.random()+', \"sadness\": '+Math.random()+'}'); + data = {"arousal": Math.random(), "sadness": Math.random()} + res.send({"response": JSON.stringify(data)}); }); test_atoms.listen(5000, function() { diff --git a/glimpse/js/directives/graph.js b/glimpse/js/directives/graph.js index a556a8a3..530c680f 100644 --- a/glimpse/js/directives/graph.js +++ b/glimpse/js/directives/graph.js @@ -1,16 +1,14 @@ -angular.module('glimpse').directive('graph', function ($http) { +angular.module('glimpse').directive('graph', function ($rootScope, $http, AtomsFactory) { - //Todo: These should be read from config or set through the app - var psiVariables = ["arousal", "positive-valence", "negative-valence", - "power","voice width"]; var historyTimeLength = 10; //length of plot line in number of seconds var refreshRate = 100; // rate in ms that values are updated from server // Set number of plot line points to show data for specified time period var numPlotLinePts = Math.round(1000/refreshRate)*historyTimeLength; - var link = function (scope, element, attributes, $parent, $scope) { - scope.chartTypes = [ + var controller = function($scope, $rootScope) { + //var link = function (scope, rootScope, element, attributes, $parent, $scope) { + $scope.chartTypes = [ {"id": "line", "title": "Line"}, {"id": "spline", "title": "Smooth line"}, {"id": "area", "title": "Area"}, @@ -21,14 +19,10 @@ angular.module('glimpse').directive('graph', function ($http) { {"id": "scatter", "title": "Scatter"} ]; - scope.init = function () { - scope.chartSeries = []; + $scope.init = function () { + $scope.chartSeries = []; - scope.chartConfig = { - //Note: Setting the default line type (and I'm guessing other properties - //in chartConfig.options) does not work when set in the directive link - //function, so setting it in the controller function instead. - /* + $scope.chartConfig = { options: { chart: { type: 'spline' @@ -39,8 +33,7 @@ angular.module('glimpse').directive('graph', function ($http) { } } }, - */ - series: scope.chartSeries, + series: $scope.chartSeries, title: { text: 'OpenPSI Variables' }, @@ -62,34 +55,16 @@ angular.module('glimpse').directive('graph', function ($http) { window.setInterval(function() { //periodically update data - scope.update(); + $scope.update(); }, refreshRate); }; - scope.update = function() { + $scope.update = function() { - //TODO: endpoint URL should use the same server/port as the main application, - //with "/api/v1.1/scheme" appended - var endpointURL = "http://localhost:5000/api/v1.1/scheme"; + AtomsFactory.updateAttentionValues(function(){ - var vars = "" - for (i in psiVariables) { - vars += "\"" + psiVariables[i] + "\""; - } - //var scm = "(psi-get-number-values-for-vars \"arousal\" \"positive-valence\" \"negative-valence\")"; - var scm = "(psi-get-number-values-for-vars" + vars + ")"; - //console.log("scm command: " + scm); - - $http.post(endpointURL, {command: scm}, {headers: {'Content-Type': 'application/json'} }).then(function (response,status) { - var responseString = response.data.response; - console.log("\nresponseString: " + responseString); - - var results = JSON.parse(responseString); - console.log("results: "); - for (varname in results) { - console.log(" " + varname + ": " + results[varname]) - } + results = AtomsFactory.attention //iterate over each psi variable and feed into chartseries object for (varName in results) { @@ -102,8 +77,8 @@ angular.module('glimpse').directive('graph', function ($http) { //figure out if data point is already in chartSeries var variableExists = false; - for (i in scope.chartSeries) { - chartSeriesObject = scope.chartSeries[i]; + for (i in $scope.chartSeries) { + chartSeriesObject = $scope.chartSeries[i]; if (chartSeriesObject.name == varName) { //it already exists, update array //remove the first element and add current value to the end @@ -118,7 +93,7 @@ angular.module('glimpse').directive('graph', function ($http) { console.log("Found new variable: " + varName) // plot the full line at the current value for initiating var values = Array(numPlotLinePts).fill(value); - scope.chartSeries.push({name: varName, data: values, + $scope.chartSeries.push({name: varName, data: values, marker: {enabled: false}, connectNulls: true}); } @@ -128,44 +103,19 @@ angular.module('glimpse').directive('graph', function ($http) { console.log(err.message) }); - //console.log("scope.chartSeries: " + scope.chartSeries); - } // update() - //TODO: This executes as soon as glimpse loads, it should only load when graph is loaded / server is connected... - scope.init(); - - }; // link function + // This is being triggered from main.js when panel comes up. + // Until there is better detection in dock-spawn for when panels + // Open and close, this is a dirty hack. + $rootScope.initGraphView = $scope.init - var controller = function($scope) { - // Set the default line type in controller function because it doesn't work - // to set it in the directive link function (and I'm guessing the same for - // other properties in chartConfig.options). - $scope.chartConfig = { - options: { - chart: { - type: 'spline' - }, - plotOptions: { - series: { - stacking: '' - }, - line: { - marker: { - enabled: false - } - } - } - }, - }; - } + }; // link function return { - link: link, controller: controller, restrict: 'E', - scope: {atoms: '='}, templateUrl: 'js/templates/graph.html' } }); \ No newline at end of file diff --git a/glimpse/js/factories.js b/glimpse/js/factories.js index f5eac539..a2f93373 100644 --- a/glimpse/js/factories.js +++ b/glimpse/js/factories.js @@ -9,6 +9,9 @@ angular.module('glimpse') atomsFactory.server = ""; atomsFactory.nodeTypes = []; atomsFactory.types = []; + + //Todo: These should be read from config or set through the app + atomsFactory.psiVariables = ["arousal", "positive-valence", "negative-valence", "power","voice width"]; // Member functions atomsFactory.updateAtoms = function (successCB, failureCB) { @@ -20,6 +23,7 @@ angular.module('glimpse') function (response) { atomsFactory.atoms = response.data.result.atoms; atomsFactory.atomsCount = response.data.result.total; + console.log("[AF] updated atoms...") if (typeof successCB === "function") successCB(); }, function (error) { @@ -27,6 +31,7 @@ angular.module('glimpse') } ); }; + atomsFactory.setServer = function (s) { atomsFactory.server = s; }; @@ -55,6 +60,7 @@ angular.module('glimpse') method: 'GET', url: atomsFactory.server + 'api/v1.1/types' }).then(function (response) { + console.log("[AF] updated atom types...") atomsFactory.types = response.data.types; atomsFactory.nodeTypes = response.data.types.filter(function (atom) { return atom.indexOf("Node") > -1; @@ -108,6 +114,44 @@ angular.module('glimpse') ); }; + atomsFactory.updateAttentionValues = function (successCB, failureCB) { + if (atomsFactory.server == "") { + //we are not connected. + if (typeof failureCB === "function") failureCB({"message": "not connected"}); + return + } + + var vars = "" + for (i in atomsFactory.psiVariables) { + vars += "\"" + atomsFactory.psiVariables[i] + "\""; + } + //var scm = "(psi-get-number-values-for-vars \"arousal\" \"positive-valence\" \"negative-valence\")"; + var scm = "(psi-get-number-values-for-vars" + vars + ")"; + //console.log("scm command: " + scm); + + $http({ + method: 'POST', + url: atomsFactory.server + "api/v1.1/scheme", //TODO: this is a placeholder and will just work for test data, should fetch POST w. correct scm command. + cache: false, + headers: { + 'Content-Type': 'application/json' + }, + data: {command: scm} + }).then( + function (response) { + var responseString = response.data.response; + var results = JSON.parse(responseString); + + atomsFactory.attention = results; + console.log("[AF] updated attention...") + if (typeof successCB === "function") successCB(); + }, + function (error) { + if (typeof failureCB === "function") failureCB(); + } + ); + }; + return atomsFactory; }) ; diff --git a/glimpse/js/main.js b/glimpse/js/main.js index c5fa669a..f378eec1 100644 --- a/glimpse/js/main.js +++ b/glimpse/js/main.js @@ -41,6 +41,11 @@ glimpse.controller("mainCtrl", function ($rootScope, $scope, $window, $timeout, connectDialog.setPosition((window.innerWidth - connectPanel._cachedWidth) / 2, (window.innerHeight - connectPanel._cachedHeight) / 2); } else if (panel == 'graph2' && documentManagerNode.children.indexOf(graphNode) == -1) { graphNode = dockManager.dockFill(documentManagerNode, graphPanel); + + // This is defined in graph.js + console.log("graph loaded... starting periodic update") + $rootScope.initGraphView() + } else if (panel == 'json' && documentManagerNode.children.indexOf(jsonNode) == -1) { jsonNode = dockManager.dockFill(documentManagerNode, jsonPanel); } else if (panel == 'planar' && documentManagerNode.children.indexOf(planarNode) == -1) { diff --git a/glimpse/js/templates/graph.html b/glimpse/js/templates/graph.html index 9ade6487..7ee26959 100644 --- a/glimpse/js/templates/graph.html +++ b/glimpse/js/templates/graph.html @@ -1,20 +1,18 @@
- -
- -
Width
-
Height
- -
Default Type
- -
Min:
-
Max:
-
-
- -
- -
+
+
Width
+
Height
+ +
Default Type
+ +
Min:
+
Max:
+
+ +
+ +
+