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
def project do
[app: :grains,
version: "0.0.76",
version: "0.0.77",
elixir: "~> 1.2",
elixirc_paths: elixirc_paths(Mix.env),
compilers: [:phoenix, :gettext] ++ Mix.compilers,
......
......@@ -9,7 +9,6 @@ defmodule Grains.GrainsController do
render conn, "play.html"
end
def show(conn, %{"grain" => grain}) do
render conn, "#{grain}.html", grain: grain
end
......
......@@ -8,8 +8,39 @@ let OrientationPanel = {
sliders: {},
slider_titles: ["pitch", "roll"],
old_values: [0,0],
scale_roll: 1,
min_pitch: 99,
max_pitch: -99,
min_roll: 99,
max_roll: -99,
scale_pitch: 1,
scale_roll: 1,
calibrate(pitch, roll) {
this.min_pitch = Math.min(pitch, this.min_pitch);
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 min_pitch = document.getElementById('min_pitch');
// let max_pitch = document.getElementById('max_pitch');
// 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;
// let min_roll = document.getElementById('min_roll');
// let max_roll = document.getElementById('max_roll');
// let scale_roll = document.getElementById('scale_roll');
// min_roll.innerHTML = this.min_roll;
// max_roll.innerHTML = this.max_roll;
// scale_roll.innerHTML = this.scale_roll;
},
init(socket, domId) {
......@@ -31,24 +62,34 @@ let OrientationPanel = {
})
.receive("error", reason => console.log("join failed", reason));
let a = new Interface.Panel({
container:document.getElementById(domId)
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);
// let _oroll = document.getElementById("oroll");
// let _opitch = document.getElementById("opitch");
// _oroll.innerHTML = parseInt(roll * 100) / 100;
// _opitch.innerHTML = parseInt(pitch * 100) / 100;
that.calibrate(pitch, roll);
let shape = document.getElementById("shape");
//console.log(values[0], values[1]);
let x = roll * 80;
let y = pitch * 80;
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);
shape.setAttribute('transform','translate(' + (x) + ', ' + (y) + ')');
......@@ -67,7 +108,7 @@ let OrientationPanel = {
});
console.log(s);
// a.add(this.sliders[s]);
// a.add(this.sliders[s]);
});
a.background = 'black';
......
......@@ -39,7 +39,7 @@ Boid.prototype.set_velocity = function(dx, dy) {
Boid.prototype.set_acceleration = function(z) {
if (Math.abs(z) > 0.5) {
this.radius = 32;
this.radius = 48;
}
};
......
......@@ -9,7 +9,6 @@ export default class View extends MainView {
mount() {
super.mount();
// SliderPanel.init(socket, "sliderPanel", ["s1", "s2", "s3"]);
OrientationPanel.init(socket, "orientationPanel");
AccelerationPanel.init(socket, "accelerationPanel");
......
<div class="jumbotron">
<h2>Orient yourself</h2>
<h2>Orient yourself</2>
<p class="lead">
For best results, please enable your phones orientation lock.
</p>
......@@ -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"/>
</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>
</div>
......
......@@ -6,8 +6,8 @@
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0" y="0"
viewBox="0 0 100 100"
enable-background="new 0 0 100 100"
viewBox="0 0 120 120"
enable-background="new 0 0 120 120"
xml:space="preserve"
>
<circle cx="0" cy="0" r="12"
......@@ -19,8 +19,8 @@
<%= if assigns[:user_type] == 1 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="0" y="0"
viewBox="0 0 100 100"
enable-background="new 0 0 100 100"
viewBox="0 0 120 120"
enable-background="new 0 0 120 120"
xml:space="preserve"
>
<rect x="0" y="0" width="20" height="20"
......@@ -32,8 +32,8 @@
<%= if assigns[:user_type] == 1 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="10px" y="0px"
viewBox="0 0 100 100"
enable-background="new 0 0 100 100"
viewBox="0 0 120 120"
enable-background="new 0 0 120 120"
xml:space="preserve"
>
<polygon x="0" y="0"
......@@ -46,8 +46,8 @@
<%= if assigns[:user_type] == 0 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="0px" y="0px"
viewBox="0 0 100 100"
enable-background="new 0 0 100 100"
viewBox="0 0 120 120"
enable-background="new 0 0 120 120"
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