Commit b0eb0a11 authored by Jens-Christian Fischer's avatar Jens-Christian Fischer
Browse files

Allow conductor to set sending interval of players

In order to manage bandwidth and performance, the conductor can set the
interval at which clients send information between 1 and 30 times per
second.
parent d771d9ce
...@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do ...@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
def project do def project do
[app: :grains, [app: :grains,
version: "0.0.100", version: "0.0.101",
elixir: "~> 1.2", elixir: "~> 1.2",
elixirc_paths: elixirc_paths(Mix.env), elixirc_paths: elixirc_paths(Mix.env),
compilers: [:phoenix, :gettext] ++ Mix.compilers, compilers: [:phoenix, :gettext] ++ Mix.compilers,
......
...@@ -18,13 +18,33 @@ defmodule Grains.ConductorChannel do ...@@ -18,13 +18,33 @@ defmodule Grains.ConductorChannel do
value = round(params["value"]) value = round(params["value"])
uuid = socket.assigns.user_uuid uuid = socket.assigns.user_uuid
Grains.Beat.set_bpm(value) if slider == "master" do
push socket, "set_bpm", %{bpm: value} Grains.Beat.set_bpm(value)
push socket, "set_bpm", %{bpm: value}
end
if slider == "interval" do
push socket, "set_interval", %{interval: value}
Grains.Endpoint.broadcast "xy:all", "interval", %{interval: value}
end
{:reply, :ok, socket} {:reply, :ok, socket}
end end
def handle_in("interval", params, socket) do
IO.puts "interval: #{params}"
interval = params['value']
push socket, "set_interval", %{interval: interval}
Grains.Endpoint.broadcast "xy:all", "interval", %{interval: interval}
{:reply, :ok, socket}
end
end end
...@@ -3,15 +3,16 @@ defmodule Grains.XyChannel do ...@@ -3,15 +3,16 @@ defmodule Grains.XyChannel do
require Logger require Logger
alias Grains.{StatefulMap, MsgCounterAgent} alias Grains.{StatefulMap, MsgCounterAgent, Type}
def join("xy:" <> _xy_id, _params, socket) do def join("xy:" <> _id, _params, socket) do
Logger.info("joined xy") Logger.info("joined xy")
uuid = socket.assigns.user_uuid uuid = socket.assigns.user_uuid
nr = StatefulMap.get(uuid) nr = StatefulMap.get(uuid)
resp = %{dot_id: nr} shape = Type.select_type(uuid)
resp = %{dot_id: nr, shape: shape}
{:ok, resp, socket} {:ok, resp, socket}
end end
......
...@@ -19,13 +19,14 @@ ...@@ -19,13 +19,14 @@
#counter { #counter {
position: fixed; position: fixed;
top: 400px; top: 380px;
right: 0; right: 0;
width: 300p; width: 300p;
height: 200px; height: 100px;
background-color: #ddd; background-color: #ddd;
font-size: 2em; font-size: 2em;
margin: auto; margin: auto;
padding-left: 0.7em;
} }
#counter table th { #counter table th {
...@@ -46,6 +47,10 @@ ...@@ -46,6 +47,10 @@
.bpmPanel { .bpmPanel {
display: block; display: block;
height: 40px; height: 40px;
position: fixed;
top: 350px;
width: 300px;
right: 0;
} }
.play { .play {
......
...@@ -5,6 +5,8 @@ let BpmPanel = { ...@@ -5,6 +5,8 @@ let BpmPanel = {
sliderChannel : null, sliderChannel : null,
bpmLabel: null, bpmLabel: null,
bpmSlider: null, bpmSlider: null,
intervalLabel: null,
intervalSlider: null,
...@@ -31,6 +33,11 @@ let BpmPanel = { ...@@ -31,6 +33,11 @@ let BpmPanel = {
console.log("set bpm", response.bpm); console.log("set bpm", response.bpm);
}); });
this.sliderChannel.on("set_interval", response =>{
that.intervalLabel.setValue(response.interval);
console.log("set interval", response.interval);
});
let a = new Interface.Panel({ let a = new Interface.Panel({
container:document.getElementById(domId) container:document.getElementById(domId)
}); });
...@@ -56,9 +63,30 @@ let BpmPanel = { ...@@ -56,9 +63,30 @@ let BpmPanel = {
}); });
a.add(this.bpmSlider, this.bpmLabel); // a.add(this.bpmSlider, this.bpmLabel);
this.intervalLabel = new Interface.Label({
bounds: [.8, .1, .2, .9],
hAlign: 'center',
value: '0',
size: 28,
style: 'bold'
});
this.intervalSlider = new Interface.Slider({
bounds: [.05, .05, .7, 0.9],
label: 'interval',
min: 1,
max: 30,
isVertical: false,
onvaluechange: function() {
that.send_interval(this.value);
}
});
a.add(this.intervalSlider, this.intervalLabel);
a.background = 'black'; a.background = 'black';
...@@ -71,6 +99,13 @@ let BpmPanel = { ...@@ -71,6 +99,13 @@ let BpmPanel = {
.receive("error", e => console.log(e)); .receive("error", e => console.log(e));
}, },
send_interval(value) {
console.log("send_interval", value);
let payload = {slider: 'interval', value: value};
this.sliderChannel.push("master", payload)
.receive("error", e => console.log(e));
},
}; };
......
...@@ -398,7 +398,8 @@ Boid.prototype.render = function(list) { ...@@ -398,7 +398,8 @@ Boid.prototype.render = function(list) {
if (this.name) { if (this.name) {
this.p.rotate(-this.p.frameCount / this.spin); this.p.rotate(-this.p.frameCount / this.spin);
this.p.textSize(19).textStyle(this.p.BOLD).strokeWeight(2).stroke(200).fill(0); this.p.translate(-4, 4);
this.p.textSize(18).textStyle(this.p.BOLD).strokeWeight(2).stroke(200).fill(0);
this.p.text(this.name, 0, 0); this.p.text(this.name, 0, 0);
} }
this.p.pop(); this.p.pop();
......
...@@ -12,6 +12,8 @@ let XyPanel = { ...@@ -12,6 +12,8 @@ let XyPanel = {
dot_id: 'na', dot_id: 'na',
timer: {}, timer: {},
initalized: false, initalized: false,
interval: 30,
types: {0: 'circle', 1: 'square', 2: 'triangle', 3: 'star' },
init(socket, domId, width) { init(socket, domId, width) {
...@@ -24,7 +26,7 @@ let XyPanel = { ...@@ -24,7 +26,7 @@ let XyPanel = {
let that = this; let that = this;
socket.connect(); socket.connect();
this.xyChannel = socket.channel("xy:" + domId); this.xyChannel = socket.channel("xy:all");
this.xyChannel.join() this.xyChannel.join()
...@@ -34,34 +36,38 @@ let XyPanel = { ...@@ -34,34 +36,38 @@ let XyPanel = {
console.log("join xy: ", resp.dot_id); console.log("join xy: ", resp.dot_id);
that.dot_id = resp.dot_id; that.dot_id = resp.dot_id;
that.shape = that.types[resp.shape] || 'circle';
var a = new Interface.Panel({ background:"#000", container: element }); var a = new Interface.Panel({ background:"#000", container: element });
that.xy = new Interface.XY({ that.xy = new Interface.XY({
childWidth: 45, childWidth: 45,
numChildren: 1, numChildren: 1,
childIds: [that.dot_id], childIds: [that.dot_id],
shapes: [that.shape],
background:"#111", background:"#111",
fill: "rgba(127,127,127,.2)", fill: "rgba(127,127,127,.2)",
bounds:[0,0,1,1], 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]);
}
}); });
// send regular timed data
that.timer = setInterval( function() { that.send_value(that.xy.values); }, 30); that.timer = setInterval( function() { that.send_value(that.xy.values); }, that.interval);
a.background = 'black'; a.background = 'black';
a.add(that.xy); a.add(that.xy);
// resp.values.forEach( (element) => {
// this.setSliderValue(element);
// } );
}) })
.receive("error", reason => console.log(reason)); .receive("error", reason => console.log(reason));
console.log(width); this.xyChannel.on('interval', state => {
that.interval = parseInt(1000 / state.interval);
clearInterval(that.timer);
that.timer = setInterval( function() { that.send_value(that.xy.values); }, that.interval);
});
element.style.width = width; element.style.width = width;
element.style.height = width; element.style.height = width;
console.log("adding xy"); console.log("adding xy");
}, },
send_value(values) { send_value(values) {
...@@ -69,12 +75,9 @@ let XyPanel = { ...@@ -69,12 +75,9 @@ let XyPanel = {
let x = Math.round(200 * (values[0].x - 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; let y = Math.round(200 * (values[0].y - 0.5) * 3.14) / 100;
// console.log(scaled);
let payload = {x: x, let payload = {x: x,
y: y y: y
}; };
// console.log(payload);
this.xyChannel.push("xy", payload) this.xyChannel.push("xy", payload)
.receive("error", e => console.log("foo")); .receive("error", e => console.log("foo"));
...@@ -84,9 +87,14 @@ let XyPanel = { ...@@ -84,9 +87,14 @@ let XyPanel = {
stopTimer() { stopTimer() {
clearInterval(this.timer); clearInterval(this.timer);
},
setInterval(interval) {
this.interval = interval;
} }
}; };
export default XyPanel; export default XyPanel;
<h1>Grains Conductor</h1> <h1>Grains Conductor</h1>
<!-- <div id="bpmPanel" class="bpmPanel"></div> -->
<div id="sketch"></div> <div id="sketch"></div>
<div id="mixer" class="mixerPanel"></div> <div id="mixer" class="mixerPanel"></div>
<div id="counter"> <div id="counter">
...@@ -16,6 +15,7 @@ ...@@ -16,6 +15,7 @@
</table> </table>
</div> </div>
<div id="bpmPanel" class="bpmPanel"></div>
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<ul id="UserList" class="list-unstyled"> <ul id="UserList" class="list-unstyled">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment