Add plot widget

Fixed to first simuator, first signal
Add flot to project

app/components/draggable-dropzone.js

@@ -34,8 +34,6 @@ export default Ember.Component.extend({
       y: event.originalEvent.pageY - $(event.target).offset().top - parseFloat(event.dataTransfer.getData('offset/y'))
     }
 
-    console.log(position);
-
     this.sendAction('dropped', data, position);
 
     set(this, 'dragClass', 'deactivated');

app/components/widget-container.js

@@ -16,7 +16,7 @@ export default Ember.Component.extend({
 
   widgets: null,
   editing: false,
-  grid: true,
+  grid: false,
   data: null,
 
   style: Ember.computed('widgets.@each.height', 'widgets.@each.y', function() {

app/controllers/visualization/edit.js

@@ -34,20 +34,46 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
 
               // create widget
               let widget = null;
+              let properties = {
+                x: position.x,
+                y: position.y,
+                name: 'widget',
+                type: null
+              };
 
               if (name === 'label') {
-                widget = this.store.createRecord('widget', { name: 'Label', type: 'widget-label', width: 100, height: 20, x: position.x, y: position.y });
+                properties.type = 'widget-label';
+                properties.width = 100;
+                properties.height = 20;
+                properties.name = 'Label';
               } else if (name === 'table') {
-                widget = this.store.createRecord('widget', { name: 'Table 1', type: 'widget-table', width: 500, height: 200, x: position.x, y: position.y, widgetData: { simulator: defaultSimulatorid } });
+                properties.type = 'widget-table';
+                properties.name = "Table";
+                properties.width = 500;
+                proeprties.height = 200;
+                properties.widgetData = { simulator: defaultSimulatorid };
               } else if (name === 'value') {
-                widget = this.store.createRecord('widget', { name: 'Value 1', type: 'widget-value', width: 250, height: 20, x: position.x, y: position.y, widgetData: { signal: 0, simulator: defaultSimulatorid } });
+                properties.type = 'widget-value';
+                properties.name = 'Value';
+                properties.width = 250;
+                properties.height = 20;
+                properties.widgetData = { signal: 0, simulator: defaultSimulatorid };
+              } else if (name === 'plot') {
+                properties.type = 'widget-plot';
+                properties.name = 'Plot';
+                properties.width = 500;
+                properties.height = 200;
+                properties.widgetData = { signal: 0, simulator: defaultSimulatorid };
               } else {
                 // DEBUG
-                console.log('Add widget ' + name);
+                console.log('Add unknown widget ' + name);
                 return;
               }
 
-              if (widget != null) {
+              if (properties.type != null) {
+                // create widget
+                widget = this.store.createRecord('widget', properties);
+
                 // add widget to visualization
                 this.get('model.widgets').pushObject(widget);
 

app/mixins/live-data.js

@@ -141,10 +141,12 @@ export default Ember.Mixin.create({
     var simulationData = this.store.peekRecord('simulation-data', message.simulator);
     if (simulationData != null) {
       simulationData.set('sequence', message.sequence);
+      simulationData.set('timestamp', new Date(message.timestamp).getTime());
       simulationData.set('values', message.values);
     } else {
       this.store.createRecord('simulation-data', {
         sequence: message.sequence,
+        timestamp: new Date(message.timestamp).getTime(),
         values: message.values,
         id: message.simulator
       });

app/models/simulation-data.js

@@ -15,18 +15,28 @@ import attr from 'ember-data/attr';
 export default Model.extend({
   simulator: Ember.computed.alias('id'),
   sequence: attr('number'),
+  timestamp: attr('number'),
   values: attr('array'),
 
-  /*historyValues() {
+  flotValues: Ember.computed('_flotValues', function() {
+    return this._flotValues;
+  }),
+
+  _flotValues: [],
+
+  historyValues: Ember.computed('_history', function() {
     return this._history;
-  },
+  }),
 
   _history: [],
 
-  _updateHistory: Ember.observer('values', function() {
-    this._history.unshift(this.get('values'));
-    while (this._history.length > 5) {
-      this._history.shift();
+  _updateHistories: Ember.observer('values', function() {
+    // save set of values with timestamp
+    this._flotValues.push([this.get('timestamp'), this.get('values')[0]]);
+
+    // discard old values
+    while (this._flotValues.length > 100) {
+      this._flotValues.shift();
     }
-  })*/
+  })
 });

app/models/visualization.js

@@ -14,6 +14,5 @@ import { belongsTo, hasMany } from 'ember-data/relationships';
 export default Model.extend({
   name: attr('string'),
   widgets: hasMany('widget', { async: true }),
-  project: belongsTo('project', { async: true }),
-  rows: attr('number', { defaultValue: 1 })
+  project: belongsTo('project', { async: true })
 });

app/templates/visualization/edit.hbs

@@ -14,6 +14,10 @@
     <span>Label</span>
   {{/draggable-item}}
 
+  {{#draggable-item content='plot'}}
+    <span>Plot</span>
+  {{/draggable-item}}
+
   <p>
     <i>Hint: Double click widgets to edit or delete them.</i>
   </p>

bower.json

@@ -6,7 +6,8 @@
     "ember-cli-test-loader": "0.2.2",
     "ember-qunit-notifications": "0.1.0",
     "jquery-ui": "1.11.4",
-    "bootstrap": "~3.3.5"
+    "bootstrap": "~3.3.5",
+    "flot": "~0.8.3"
   },
   "resolutions": {
     "ember": "~2.5.0"

ember-cli-build.js

@@ -21,6 +21,7 @@ module.exports = function(defaults) {
   // along with the exports of each module as its value.
 
   app.import('bower_components/bootstrap/dist/js/bootstrap.js');
+  app.import('bower_components/flot/jquery.flot.time.js');
 
   return app.toTree();
 };

package.json

@@ -25,6 +25,7 @@
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-babel": "^5.1.6",
     "ember-cli-dependency-checker": "^1.2.0",
+    "ember-cli-flot": "0.0.3",
     "ember-cli-htmlbars": "^1.0.3",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.4.0",

todo.md

@@ -1,13 +1,8 @@
 # To-Do
  - Change password
- - Move plot attributes/styling from plot-container into actual plots
- - Move drag-n-drop to mixins
  - Go into edit mode if visualization is empty
  - Auto-detect if simulators are running
  - Remove running socket if it's not in the updated list
- - Rebrand plots into widgets
- - Change widget model (plot) to custom data to provide mechanism for all widgets
- - Add widgets where dropped
 
 websocketserverip/config.json
 {