XY Panel sends continous data

mix.exs

@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
 
   def project do
     [app: :grains,
-     version: "0.0.90",
+     version: "0.0.91",
      elixir: "~> 1.2",
      elixirc_paths: elixirc_paths(Mix.env),
      compilers: [:phoenix, :gettext] ++ Mix.compilers,

web/static/css/app.css

@@ -2,9 +2,12 @@
 
 .interfacePanel {
     display: block;
-    height: 450px;
-    width: 450px;
-    border: 1px solid blue;
+    height: 400px;
+    width: 400px;
+}
+
+.interfacePanel_hidden {
+    display: none;
 }
 
 .bpmPanel {

web/static/js/views/player.js

@@ -22,6 +22,7 @@ export default class View extends MainView {
 
   unmount() {
     super.unmount();
+    XyPanel.stopTimer();
 
     console.log("PlayerView unmounted");
   }

web/static/js/xypanel.js

@@ -4,11 +4,13 @@ import _ from "underscore";
 
 let XyPanel = {
 
+  xy: {},
   xyChannel : null,
 
   old_x: 0,
   old_y: 0,
   dot_id: 'na',
+  timer: {},
 
   init(socket, domId) {
 
@@ -27,7 +29,7 @@ let XyPanel = {
         console.log("join xy: ", resp.dot_id);
         that.dot_id = resp.dot_id;
         var a = new Interface.Panel({  background:"#000", container:document.getElementById(domId) });
-        var xy = new Interface.XY({
+        that.xy = new Interface.XY({
           childWidth: 45,
           numChildren: 1,
           childIds: [that.dot_id],
@@ -36,18 +38,22 @@ let XyPanel = {
           bounds:[0,0,1,1],
           onvaluechange: function() {
             // just send the first array entry as we only have one dot to control
-            that.send_value(this.values[0]);
+            // that.send_value(this.values[0]);
           }
         });
 
+        that.timer = setInterval( function() { that.send_value(that.xy.values); }, 10);
+
         a.background = 'black';
-        a.add(xy);    console.log("adding xy");
+        a.add(that.xy);
         // resp.values.forEach( (element) => {
         //    this.setSliderValue(element);
         // } );
       })
       .receive("error", reason => console.log("join failed", reason));
 
+
+
     console.log("adding xy");
   },
 
@@ -55,15 +61,15 @@ let XyPanel = {
 
     let d = new Date();
     if (d.getTime() % 5 == 0)  {
-      let x = Math.round(200 * (values.x - 0.5) * 3.14) / 100;
-      let y = Math.round(200 * (values.y - 0.5) * 3.14) / 100;
+      let x = Math.round(200 * (values[0].x - 0.5) * 3.14) / 100;
+      let y = Math.round(200 * (values[0].y - 0.5) * 3.14) / 100;
 
     // console.log(scaled);
 
       let payload = {x: x,
                      y: y
                     };
-      console.log(payload);
+      // console.log(payload);
       this.xyChannel.push("xy", payload)
         .receive("error", e => console.log(e));
     }
@@ -72,6 +78,11 @@ let XyPanel = {
 
   },
 
+  stopTimer() {
+    clearInterval(this.timer);
+  }
+
+
 };
 
 export default XyPanel;

web/templates/grains/play.html.eex

@@ -3,4 +3,4 @@
 
 <div id="xyPanel" class="interfacePanel"></div>
 
-<div id="accelerationPanel" class="interfacePanel"></div>
+<div id="accelerationPanel" class="interfacePanel_hidden"></div>