Added Msg Counter and msg/sec information

.gitignore

@@ -22,3 +22,5 @@ erl_crash.dump
 # secrets file as long as you replace its contents by environment
 # variables.
 /config/prod.secret.exs
+.DS_Store
+/log

lib/grains.ex

@@ -13,6 +13,7 @@ defmodule Grains do
       # Start your own worker by calling: Grains.Worker.start_link(arg1, arg2, arg3)
       # worker(Grains.Worker, [arg1, arg2, arg3]),
       worker(Grains.CounterAgent, []),
+      worker(Grains.MsgCounterAgent, []),
       worker(Grains.StatefulMap, []),
       worker(Grains.Beat, [60]),
       supervisor(Grains.Presence, []),

mix.exs

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

web/channels/acceleration_channel.ex

@@ -11,7 +11,8 @@ defmodule Grains.AccelerationChannel do
   end
 
   def handle_in("acceleration", params, socket) do
-    Logger.info("acceleration #{inspect(params)}")
+
+    Grains.MsgCounterAgent.click()
 
     uuid = socket.assigns.user_uuid
     z = params["z"]

web/channels/xy_channel.ex

@@ -3,8 +3,8 @@ defmodule Grains.XyChannel do
 
   require Logger
 
-  alias Grains.StatefulMap
-  alias Grains.ValueView
+  alias Grains.{StatefulMap, MsgCounterAgent}
+
 
   def join("xy:" <> _xy_id, _params, socket) do
     Logger.info("joined xy")
@@ -16,6 +16,7 @@ defmodule Grains.XyChannel do
   end
 
   def handle_in("xy", params, socket) do
+    nr = MsgCounterAgent.click()
     uuid = socket.assigns.user_uuid
     x   = params["x"]
     y   = params["y"]
@@ -26,7 +27,7 @@ defmodule Grains.XyChannel do
                                     }
     )
 
-    Grains.Endpoint.broadcast "visuals:data", "velocity", %{user: uuid, dx: x, dy: y}
+    Grains.Endpoint.broadcast "visuals:data", "velocity", %{user: uuid, dx: x, dy: y, msgs: nr}
 
 
     {:reply, :ok, socket}

web/static/css/app.css

@@ -8,6 +8,37 @@
     margin-top: 40px;
 }
 
+.mixerPanel {
+    display: block;
+    position: fixed;
+    top: 50px;
+    right: 0;
+    height: 300px;
+    width: 300px;
+}
+
+#counter {
+    position: fixed;
+    top: 400px;
+    right: 0;
+    width: 300p;
+    height: 200px;
+    background-color: #ddd;
+    font-size: 2em;
+    margin: auto;
+}
+
+#counter table th {
+    width: 5em;
+}
+
+#counter table td {
+    text-align: right;
+    width: 5em;
+}
+
+
+
 .interfacePanel_hidden {
     display: none;
 }

web/static/js/bpm.js

@@ -8,69 +8,69 @@ let BpmPanel = {
 
 
 
-    init(socket, domId) {
-        if (!document.getElementById(domId)) {
-            console.log("No element found: " + domId);
-            return;
-        }
+  init(socket, domId) {
+    if (!document.getElementById(domId)) {
+      console.log("No element found: " + domId);
+      return;
+    }
 
 
-        let that = this;
-        socket.connect();
-        this.sliderChannel = socket.channel("conductor:" + domId);
+    let that = this;
+    socket.connect();
+    this.sliderChannel = socket.channel("conductor:" + domId);
 
-        this.sliderChannel.join()
-        .receive("ok", response => {
-          that.bpmLabel.setValue(response.bpm);
-          that.bpmSlider.setValue(response.bpm);
-        })
-        .receive("error", reason => console.log("join failed", reason));
-
-      this.sliderChannel.on("set_bpm", response =>{
+    this.sliderChannel.join()
+      .receive("ok", response => {
         that.bpmLabel.setValue(response.bpm);
-        console.log("set bpm", response.bpm);
-      });
+        that.bpmSlider.setValue(response.bpm);
+      })
+      .receive("error", reason => console.log("join failed", reason));
+
+    this.sliderChannel.on("set_bpm", response =>{
+      that.bpmLabel.setValue(response.bpm);
+      console.log("set bpm", response.bpm);
+    });
 
-        let a = new Interface.Panel({
-            container:document.getElementById(domId)
-        });
+    let a = new Interface.Panel({
+      container:document.getElementById(domId)
+    });
 
 
-      this.bpmLabel = new Interface.Label({
-        bounds: [.8, .1, .2, .9],
-        hAlign: 'center',
-        value: '0',
-        size: 28,
-        style: 'bold'
-      });
+    this.bpmLabel = new Interface.Label({
+      bounds: [.8, .1, .2, .9],
+      hAlign: 'center',
+      value: '0',
+      size: 28,
+      style: 'bold'
+    });
 
-      this.bpmSlider = new Interface.Slider({
-        bounds: [.05, .05, .7, 0.9],
-        label: 'BPM',
-        min: 30,
-        max: 180,
-        isVertical: false,
-        onvaluechange: function() {
-          that.send_value(this.value);
-        }
+    this.bpmSlider = new Interface.Slider({
+      bounds: [.05, .05, .7, 0.9],
+      label: 'BPM',
+      min: 30,
+      max: 180,
+      isVertical: false,
+      onvaluechange: function() {
+        that.send_value(this.value);
+      }
 
-      });
+    });
 
-      a.add(this.bpmSlider, this.bpmLabel);
+    a.add(this.bpmSlider, this.bpmLabel);
 
 
 
 
-        a.background = 'black';
-        console.log("initialized bpm");
-    },
+    a.background = 'black';
+    console.log("initialized bpm");
+  },
 
-    send_value(value) {
-        let payload = {slider: 'bpm', value: value};
-        this.sliderChannel.push("master", payload)
-                          .receive("error", e => console.log(e));
+  send_value(value) {
+    let payload = {slider: 'bpm', value: value};
+    this.sliderChannel.push("master", payload)
+      .receive("error", e => console.log(e));
 
-    },
+  },
 
 
 };

web/static/js/counter.js

+let Counter = {
+
+  msgs: 0,
+  msgs_sec: 0,
+  msgs_last: 0,
+
+  timer: {},
+  msgElem: {},
+
+  set_nr_messages(nr) {
+    this.msgs = nr;
+    this.msgElem.innerHTML = nr;
+  },
+
+  calculate() {
+    let mps = (this.msgs - this.msgs_last);
+    this.msgs_last = this.msgs;
+    this.mpsElem.innerHTML = mps;
+  },
+
+  unmount() {
+
+    clearInterval(this.timer);
+  },
+
+  init(domId) {
+
+    if (!document.getElementById(domId)) {
+      return;
+    }
+
+    this.msgElem = document.getElementById(domId + "_msg");
+    this.mpsElem = document.getElementById(domId + "_mps");
+
+    this.timer = setInterval(function() { Counter.calculate(); }, 1000);
+
+
+
+  }
+
+
+}
+
+export default Counter;

web/static/js/mixerpanel.js

@@ -2,7 +2,6 @@ import Interface from "interface.js";
 
 let MixerPanel = {
 
-  visualsChannel : null,
   presence: {},
 
   sliders: {},
@@ -16,18 +15,8 @@ let MixerPanel = {
 
 
     let that = this;
-    socket.connect();
     console.log(presence);
     this.presence = presence;
-    this.sliderChannel = socket.channel("slider:" + domId);
-
-    this.sliderChannel.join()
-      .receive("ok", resp => {
-        resp.values.forEach( (element) => {
-          this.setSliderValue(element);
-        } );
-      })
-      .receive("error", reason => console.log("join failed", reason));
 
 
     let a = new Interface.Panel({

web/static/js/presencesketch.js

@@ -296,8 +296,8 @@ Master.prototype.send_osc = function() {
   let v = [0,0];
   if (this.absolute) {
 
-    v[0] = (this.position.x * PresenceSketch.scale_x) + 3.14;
-    v[1] = (this.position.y * PresenceSketch.scale_y) + 3.14;
+    v[0] = (this.position.x * PresenceSketch.scale_x) + 3.0;
+    v[1] = (this.position.y * PresenceSketch.scale_y) + 3.0;
 
   } else {
     v = this.velocity.array();
@@ -581,8 +581,8 @@ let PresenceSketch = {
     PresenceSketch.width = w;
     PresenceSketch.height = h;
 
-    PresenceSketch.scale_x = -6.28 / w;
-    PresenceSketch.scale_y = -6.28 / h;
+    PresenceSketch.scale_x = -6.0 / w;
+    PresenceSketch.scale_y = -6.0 / h;
 
     PresenceSketch.osc = new OSC();
     PresenceSketch.osc.open();  // connect to ws://localhost:8080

web/static/js/views/conductor.js

@@ -6,6 +6,8 @@ import socket from "../socket";
 import BpmPanel from "../bpm.js";
 import PresenceSketch from "../presencesketch";
 import MixerPanel from "../mixerpanel";
+import Counter from "../counter";
+
 
 
 
@@ -15,8 +17,9 @@ export default class View extends MainView {
 
 
     BpmPanel.init(socket, "bpmPanel");
-    PresenceSketch.init(socket, "sketch", window.innerWidth, window.innerHeight);
+    PresenceSketch.init(socket, "sketch", window.innerWidth-300, window.innerHeight);
     MixerPanel.init(socket, "mixer", ["circle", "square", "triangle", "star"], PresenceSketch);
+    Counter.init("counter");
 
 
 
@@ -25,8 +28,9 @@ export default class View extends MainView {
       let visuals = socket.channel("visuals:data", {});
 
       visuals.on("velocity", state => {
-        // console.log("velocity: ", state);
+       // console.log("velocity: ", state);
         PresenceSketch.set_velocity(state.user, state.dy, state.dx);
+        Counter.set_nr_messages(state.msgs);
       });
 
       visuals.on("acceleration", state => {
@@ -47,7 +51,7 @@ export default class View extends MainView {
 
   unmount() {
     super.unmount();
-
+    Mixer.unmount();
     console.log("ConductorIndexView unmounted");
   }
 

web/static/js/xypanel.js

@@ -11,6 +11,7 @@ let XyPanel = {
   old_y: 0,
   dot_id: 'na',
   timer: {},
+  initalized: false,
 
   init(socket, domId, width) {
 
@@ -28,6 +29,9 @@ let XyPanel = {
 
     this.xyChannel.join()
       .receive("ok", resp => {
+        if (this.initialized) { return true; }
+        this.initialized = true;
+
         console.log("join xy: ", resp.dot_id);
         that.dot_id = resp.dot_id;
         var a = new Interface.Panel({  background:"#000", container: element });
@@ -52,7 +56,7 @@ let XyPanel = {
         //    this.setSliderValue(element);
         // } );
       })
-      .receive("error", reason => console.log("join failed", reason));
+      .receive("error", reason => console.log(reason));
     console.log(width);
     element.style.width = width;
     element.style.height = width;
@@ -72,7 +76,7 @@ let XyPanel = {
                   };
     // console.log(payload);
     this.xyChannel.push("xy", payload)
-      .receive("error", e => console.log(e));
+      .receive("error", e => console.log("foo"));
 
 
 

web/templates/conductor/index.html.eex

@@ -2,7 +2,20 @@
 
 <!-- <div id="bpmPanel" class="bpmPanel"></div> -->
 <div id="sketch"></div>
-<div id="mixer" class="interfacePanel"></div>
+<div id="mixer" class="mixerPanel"></div>
+<div id="counter">
+  <table>
+    <tr>
+      <th>Msg rec:</th>
+      <td><span id="counter_msg"></span></td>
+    </tr>
+    <tr>
+      <th>Msg/sec:</th>
+      <td><span id="counter_mps"></span></td>
+    </tr>
+
+  </table>
+</div>
 <div class="row">
   <div class="col-md-8">
     <ul id="UserList" class="list-unstyled">