Added calibration to phone player

The pitch/roll axis are constantly calibrated when a player plays
parent b02dcc16
...@@ -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.76", version: "0.0.77",
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,
......
...@@ -9,7 +9,6 @@ defmodule Grains.GrainsController do ...@@ -9,7 +9,6 @@ defmodule Grains.GrainsController do
render conn, "play.html" render conn, "play.html"
end end
def show(conn, %{"grain" => grain}) do def show(conn, %{"grain" => grain}) do
render conn, "#{grain}.html", grain: grain render conn, "#{grain}.html", grain: grain
end end
......
...@@ -3,76 +3,117 @@ import _ from "underscore"; ...@@ -3,76 +3,117 @@ import _ from "underscore";
let OrientationPanel = { let OrientationPanel = {
orientationChannel : null, orientationChannel : null,
sliders: {}, sliders: {},
slider_titles: ["pitch", "roll"], slider_titles: ["pitch", "roll"],
old_values: [0,0], old_values: [0,0],
scale_roll: 1, min_pitch: 99,
max_pitch: -99,
min_roll: 99,
max_roll: -99,
scale_pitch: 1, scale_pitch: 1,
scale_roll: 1,
init(socket, domId) { calibrate(pitch, roll) {
if (!document.getElementById(domId)) { this.min_pitch = Math.min(pitch, this.min_pitch);
return; this.max_pitch = Math.max(pitch, this.max_pitch);
} this.min_roll = Math.min(roll, this.min_roll);
this.max_roll = Math.max(roll, this.max_roll);
this.scale_pitch = (this.max_pitch - this.min_pitch);
this.scale_roll = (this.max_roll - this.min_roll);
let that = this; // let min_pitch = document.getElementById('min_pitch');
socket.connect(); // let max_pitch = document.getElementById('max_pitch');
this.orientationChannel = socket.channel("orientation:" + domId); // let scale_pitch = document.getElementById('scale_pitch');
// min_pitch.innerHTML = this.min_pitch;
// max_pitch.innerHTML = this.max_pitch;
// scale_pitch.innerHTML = this.scale_pitch;
this.orientationChannel.join() // let min_roll = document.getElementById('min_roll');
.receive("ok", resp => { // let max_roll = document.getElementById('max_roll');
// resp.values.forEach( (element) => { // let scale_roll = document.getElementById('scale_roll');
// this.setSliderValue(element);
// } );
})
.receive("error", reason => console.log("join failed", reason));
// min_roll.innerHTML = this.min_roll;
// max_roll.innerHTML = this.max_roll;
// scale_roll.innerHTML = this.scale_roll;
},
init(socket, domId) {
if (!document.getElementById(domId)) {
return;
}
let a = new Interface.Panel({ let that = this;
container:document.getElementById(domId) socket.connect();
}); this.orientationChannel = socket.channel("orientation:" + domId);
console.log("adding orientation");
this.orientation = new Interface.Orientation({
onvaluechange: function(pitch, roll, _yaw, _heading) {
that.sliders['pitch'].setValue(pitch);
that.sliders['roll'].setValue(roll);
let shape = document.getElementById("shape");
//console.log(values[0], values[1]);
let x = roll * 80; this.orientationChannel.join()
let y = pitch * 80; .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 orientation");
this.orientation = new Interface.Orientation({
onvaluechange: function(pitch, roll, _yaw, _heading) {
pitch = pitch - 0.5; // beacuse 1 is straigh up
roll = roll - 0.5;
that.sliders['pitch'].setValue(pitch);
that.sliders['roll'].setValue(roll);
shape.setAttribute('transform','translate(' + (x) + ', ' + (y) + ')'); // let _oroll = document.getElementById("oroll");
// let _opitch = document.getElementById("opitch");
// _oroll.innerHTML = parseInt(roll * 100) / 100;
// _opitch.innerHTML = parseInt(pitch * 100) / 100;
that.send_value([pitch, roll]); that.calibrate(pitch, roll);
}
}).start(); let shape = document.getElementById("shape");
//console.log(values[0], values[1]);
let nrSliders = this.slider_titles.length; let x = 100 * (roll - that.min_roll) / that.scale_roll;
let y = 100 * (pitch - that.min_pitch) / that.scale_pitch;
// let _roll = document.getElementById("roll");
// let _pitch = document.getElementById("pitch");
// _roll.innerHTML = parseInt(x);
// _pitch.innerHTML = parseInt(y);
this.slider_titles.forEach( (s, idx) => { shape.setAttribute('transform','translate(' + (x) + ', ' + (y) + ')');
this.sliders[s] = new Interface.Slider({
bounds: [(1/nrSliders) * idx, .1, 1 / nrSliders, .5],
label: s,
that.send_value([pitch, roll]);
}
}); }).start();
console.log(s);
// a.add(this.sliders[s]);
});
a.background = 'black'; let nrSliders = this.slider_titles.length;
console.log("initialized orientation");
}, this.slider_titles.forEach( (s, idx) => {
this.sliders[s] = new Interface.Slider({
bounds: [(1/nrSliders) * idx, .1, 1 / nrSliders, .5],
label: s,
});
console.log(s);
// a.add(this.sliders[s]);
});
a.background = 'black';
console.log("initialized orientation");
},
send_value(values) { send_value(values) {
......
...@@ -39,7 +39,7 @@ Boid.prototype.set_velocity = function(dx, dy) { ...@@ -39,7 +39,7 @@ Boid.prototype.set_velocity = function(dx, dy) {
Boid.prototype.set_acceleration = function(z) { Boid.prototype.set_acceleration = function(z) {
if (Math.abs(z) > 0.5) { if (Math.abs(z) > 0.5) {
this.radius = 32; this.radius = 48;
} }
}; };
......
...@@ -9,7 +9,6 @@ export default class View extends MainView { ...@@ -9,7 +9,6 @@ export default class View extends MainView {
mount() { mount() {
super.mount(); super.mount();
// SliderPanel.init(socket, "sliderPanel", ["s1", "s2", "s3"]);
OrientationPanel.init(socket, "orientationPanel"); OrientationPanel.init(socket, "orientationPanel");
AccelerationPanel.init(socket, "accelerationPanel"); AccelerationPanel.init(socket, "accelerationPanel");
......
<div class="jumbotron"> <div class="jumbotron">
<h2>Orient yourself</h2> <h2>Orient yourself</2>
<p class="lead"> <p class="lead">
For best results, please enable your phones orientation lock. For best results, please enable your phones orientation lock.
</p> </p>
...@@ -17,7 +17,8 @@ ...@@ -17,7 +17,8 @@
M37.304,37.761c0-4.314,3.512-7.826,7.826-7.826c4.316,0,7.826,3.512,7.826,7.826v7.826H37.304V37.761z"/> M37.304,37.761c0-4.314,3.512-7.826,7.826-7.826c4.316,0,7.826,3.512,7.826,7.826v7.826H37.304V37.761z"/>
</svg> </svg>
<a href="/play/play" class="btn-lg btn-success btn-block play">Play</a> <a href="/play/play" class="btn-success btn-block
play">Play</a>
<p class="small">Icon by Vicons Design from the Noun project</p> <p class="small">Icon by Vicons Design from the Noun project</p>
</div> </div>
......
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
version="1.1" version="1.1"
x="0" y="0" x="0" y="0"
viewBox="0 0 100 100" viewBox="0 0 120 120"
enable-background="new 0 0 100 100" enable-background="new 0 0 120 120"
xml:space="preserve" xml:space="preserve"
> >
<circle cx="0" cy="0" r="12" <circle cx="0" cy="0" r="12"
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<%= if assigns[:user_type] == 1 do %> <%= if assigns[:user_type] == 1 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="0" y="0" x="0" y="0"
viewBox="0 0 100 100" viewBox="0 0 120 120"
enable-background="new 0 0 100 100" enable-background="new 0 0 120 120"
xml:space="preserve" xml:space="preserve"
> >
<rect x="0" y="0" width="20" height="20" <rect x="0" y="0" width="20" height="20"
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
<%= if assigns[:user_type] == 1 do %> <%= if assigns[:user_type] == 1 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="10px" y="0px" x="10px" y="0px"
viewBox="0 0 100 100" viewBox="0 0 120 120"
enable-background="new 0 0 100 100" enable-background="new 0 0 120 120"
xml:space="preserve" xml:space="preserve"
> >
<polygon x="0" y="0" <polygon x="0" y="0"
...@@ -46,8 +46,8 @@ ...@@ -46,8 +46,8 @@
<%= if assigns[:user_type] == 0 do %> <%= if assigns[:user_type] == 0 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="0px" y="0px" x="0px" y="0px"
viewBox="0 0 100 100" viewBox="0 0 120 120"
enable-background="new 0 0 100 100" enable-background="new 0 0 120 120"
xml:space="preserve" xml:space="preserve"
> >
......
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