Added Acceleration channel & different layouts for instruments

Every grain controller now has its own html page for individual customisations

web/channels/acceleration_channel.ex

+defmodule Grains.AccelerationChannel do
+  use Grains.Web, :channel
+
+  require Logger
+
+  def join("acceleration:" <> _orientation_id, _params, socket) do
+    Logger.info("joined orientation")
+
+    resp = %{values: []}
+    {:ok, resp, socket}
+  end
+
+  def handle_in("acceleration", params, socket) do
+    Logger.info("acceleration #{inspect(params)}")
+
+    uuid = socket.assigns.user_uuid
+    x = params["x"]
+    y = params["y"]
+    z = params["z"]
+
+    Grengine.Performance.set_values(uuid, %{
+          x: x,
+          y: y,
+          z: z
+                                    } )
+
+
+    {:reply, :ok, socket}
+
+  end
+
+
+
+end

web/channels/user_socket.ex

@@ -6,6 +6,7 @@ defmodule Grains.UserSocket do
   ## Channels
   channel "slider:*", Grains.SliderChannel
   channel "orientation:*", Grains.OrientationChannel
+  channel "acceleration:*", Grains.AccelerationChannel
 
   channel "conductor:*", Grains.ConductorChannel
   channel "presence:*", Grains.PresenceChannel
@@ -39,8 +40,8 @@ defmodule Grains.UserSocket do
       {:ok, uuid} ->
         IO.puts "verified : #{uuid}"
         {:ok, assign(socket, :user_uuid, uuid) }
-      {:error, _reason} ->
-        IO.puts "error: #{_reason}"
+      {:error, reason} ->
+        IO.puts "error: #{reason}"
         :error
 
     end

web/controllers/grains_controller.ex

@@ -2,7 +2,7 @@ defmodule Grains.GrainsController do
   use Grains.Web, :controller
 
   def show(conn, %{"grain" => grain}) do
-    render conn, "show.html", grain: grain
+    render conn, "#{grain}.html", grain: grain
   end
 
 end

web/static/js/acceleration.js

+import Interface from "interface.js";
+import _ from "underscore";
+
+let AccelerationPanel = {
+
+    accelerationChannel : null,
+
+    sliders: {},
+    slider_titles: ["x", "y", "z"],
+    old_values: [0,0,0],
+
+    init(socket, domId) {
+
+        if (!document.getElementById(domId)) {
+            return;
+        }
+
+
+        let that = this;
+        socket.connect();
+        this.accelerationChannel = socket.channel("acceleration:" + domId);
+
+
+        this.accelerationChannel.join()
+            .receive("ok", resp => {
+                // resp.values.forEach( (element) => {
+                //    this.setSliderValue(element);
+                // } );
+            })
+            .receive("error", reason => console.log("join failed", reason));
+
+
+        let a = new Interface.Panel({
+            container:document.getElementById(domId)
+        });
+        console.log("adding acceleration");
+        this.orientation = new Interface.Accelerometer({
+          onvaluechange: function(x,y,z) {
+              that.sliders['x'].setValue(x);
+              that.sliders['y'].setValue(y);
+              that.sliders['z'].setValue(z);
+
+            that.send_value([z,y,z]);
+            }
+
+        }).start();
+
+        let nrSliders = this.slider_titles.length;
+
+        this.slider_titles.forEach( (s, idx) => {
+            this.sliders[s] = new Interface.Slider({
+                bounds: [(1/nrSliders) * idx, .1, 1 / nrSliders, .5],
+                label: s
+
+            });
+            a.add(this.sliders[s]);
+        });
+
+        a.background = 'black';
+        console.log("initialized acceleration");
+    },
+
+    send_value(values) {
+        let scaled = values.map(function(i) {
+            return parseInt(i * 127);
+        });
+        if (!_.isEqual(scaled, this.old_values)) {
+            // console.log(scaled);
+            let payload = {x: scaled[0],
+                        y: scaled[1],
+                        z: scaled[2]
+                        };
+            this.acclerationChannel.push("acceleration", payload)
+                            .receive("error", e => console.log(e));
+            this.old_values = scaled;
+        }
+
+
+
+    },
+
+};
+
+export default AccelerationPanel;

web/static/js/app.js

@@ -19,10 +19,12 @@ import _ from "underscore"
 import socket from "./socket"
 import SliderPanel from "./slider";
 import OrientationPanel from "./orientation";
+import AccelerationPanel from "./acceleration";
 import BpmPanel from "./bpm.js";
 
 SliderPanel.init(socket, "sliderPanel", ["s1", "s2", "s3"]);
 OrientationPanel.init(socket, "orientationPanel");
+AccelerationPanel.init(socket, "accelerationPanel");
 BpmPanel.init(socket, "bpmPanel");
 
 // Presence

web/templates/grains/bass.html.eex

+<h1>Grain <%= @grain %></h1>
+
+<p>Orientation</p>
+<div id="orientationPanel" class="interfacePanel"></div>

web/templates/grains/chords.html.eex

+<h1>Grain <%= @grain %></h1>
+
+<p>Orientation</p>
+<div id="orientationPanel" class="interfacePanel"></div>

web/templates/grains/melody.html.eex

+<h1>Grain <%= @grain %></h1>
+
+<p>Orientation</p>
+<div id="orientationPanel" class="interfacePanel"></div>

web/templates/grains/rhythm.html.eex

+<h1>Grain <%= @grain %></h1>
+
+<p>Acceleration</p>
+<div id="accelerationPanel" class="interfacePanel"></div>