Simplify movement of feedback shapes

- Make SVG transformations, they work on all shapes (unlike setting x/y
  or cx/cy coordinates
- Added a first setup screen that asks people to set device orientation
  lock
parent 89f71e07
defmodule Grains.Type do
@nr_types 2
@nr_types 1
def select_type(uuid) do
{i, _} = Integer.parse(uuid, 16)
......
......@@ -5,6 +5,11 @@ defmodule Grains.GrainsController do
render conn, "index.html"
end
def play(conn, _) do
render conn, "play.html"
end
def show(conn, %{"grain" => grain}) do
render conn, "#{grain}.html", grain: grain
end
......
......@@ -23,6 +23,7 @@ defmodule Grains.Router do
pipe_through :browser # Use the default browser stack
get "/play", GrainsController, :index
get "/play/play", GrainsController, :play
get "/grains/:grain", GrainsController, :show
get "/", PageController, :index
......
......@@ -16,7 +16,7 @@
font-size: 2em;
}
#svg-container {
#svg-container1 {
width: 300px;
height: 300px;
border: black 1px solid;
......@@ -27,3 +27,11 @@ svg {
fill: green;
display: block;
}
.conductor {
width: 100%;
}
.jumbotron .small {
font-size: 0.7em;
}
......@@ -13,7 +13,7 @@
// to also remove its path from "config.paths.watched".
import "phoenix_html";
import {Socket, Presence} from "phoenix"
import {Socket, Presence} from "phoenix";
import loadView from "./views/loader.js";
......
......@@ -7,7 +7,9 @@ let OrientationPanel = {
sliders: {},
slider_titles: ["pitch", "roll"],
old_values: [0,0],
old_values: [0,0],
scale_roll: 1,
scale_pitch: 1,
init(socket, domId) {
......@@ -44,8 +46,12 @@ let OrientationPanel = {
let shape = document.getElementById("shape");
//console.log(values[0], values[1]);
shape.setAttribute("cx", roll * 250);
shape.setAttribute("cy", pitch * 250);
let x = roll * 80;
let y = pitch * 80;
shape.setAttribute('transform','translate(' + (x) + ', ' + (y) + ')');
that.send_value([pitch, roll]);
}
......
......@@ -399,7 +399,6 @@ let PresenceSketch = {
if (!PresenceSketch.p5) { return; };
_.each(joins, function(val, name) {
console.log(val.type);
if (name) {
PresenceSketch.boids[name] = new Boid(PresenceSketch.p5,
Math.random() * PresenceSketch.width,
......@@ -419,11 +418,8 @@ let PresenceSketch = {
syncBoids(currentActive) {
if (!PresenceSketch.p5) { return; };
console.log("sync");
_.each(currentActive, function(p) {
console.log(p.user);
if (PresenceSketch.boids[p.user]) {
// console.log("have boid");
} else
{
if (p.user) {
......@@ -520,11 +516,13 @@ let PresenceSketch = {
},
init(socket, domId) {
init(socket, domId, w, h) {
if (!document.getElementById(domId)) {
return;
}
PresenceSketch.width = w;
PresenceSketch.height = h;
PresenceSketch.osc = new OSC();
PresenceSketch.osc.open(); // connect to ws://localhost:8080
......
......@@ -14,7 +14,7 @@ export default class View extends MainView {
BpmPanel.init(socket, "bpmPanel");
PresenceSketch.init(socket, "sketch");
PresenceSketch.init(socket, "sketch", window.innerWidth, window.innerHeight);
......
import MainView from './main';
import ConductorIndexView from './conductor';
import GrainsIndexView from './player';
import GrainsPlayView from './player';
// Collection of specific view modules
const views = {
ConductorIndexView,
GrainsIndexView
GrainsPlayView
};
export default function loadView(viewName) {
......
<h1>Play</h1>
<div class="jumbotron">
<h2>Orient yourself</h2>
<p class="lead">
For best results, please enable your phones orientation lock.
</p>
<div class="icon">
<div id="svg-container">
<%= if assigns[:user_type] == 0 do %>
<svg width="290" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-circle">
<circle cx="150" cy="150" r="50" id="shape"/>
</svg>
<% end %>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
xml:space="preserve"><path d="M82.304,61.239L96,45.587H84.066C82.102,25.812,65.42,10.37,45.13,10.37C23.519,10.37,6,27.894,6,49.5
c0,21.61,17.519,39.13,39.13,39.13c12.824,0,24.168-6.19,31.304-15.725v-3.84h-2.042C68.07,78.496,57.317,84.717,45.13,84.717
c-19.42,0-35.217-15.793-35.217-35.217c0-19.42,15.797-35.217,35.217-35.217c18.094,0,33.036,13.726,34.988,31.304h-11.51
L82.304,61.239z"/><path d="M56.87,45.587v-7.826c0-6.481-5.254-11.739-11.739-11.739c-6.483,0-11.739,5.258-11.739,11.739v7.826h-3.913v23.479h31.305
V45.587H56.87z
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"/>
<%= if assigns[:user_type] == 1 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-square">
<rect width="100" height="100" class="svg-square svg" id="shape"/>
</svg>
<% end %>
</svg>
<a href="/play/play" class="btn-lg btn-success btn-block play">Play</a>
<p class="small">Icon by Vicons Design from the Noun project</p>
<%= if assigns[:user_type] == 2 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<polygon points="0,0 100,0 50,100" class="svg-triangle svg" id="shape"/>
</svg>
<% end %>
<%= if assigns[:user_type] == 3 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
class="svg-star">
<polygon points="50,5 20,99 95,39 5,39 80,99" class="svg-star svg" id="shape"/>
</svg>
<% end %>
</div>
</div>
<div id="orientationPanel" class="interfacePanel"></div>
<div id="accelerationPanel" class="interfacePanel"></div>
<div>
</div>
<h1>Play</h1>
<div id="svg-container">
<%= 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"
xml:space="preserve"
>
<circle cx="0" cy="0" r="12"
transform="translate(50, 50)"
id="shape"/>
</svg>
<% end %>
<%= 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"
xml:space="preserve"
>
<rect x="0" y="0" width="20" height="20"
transform="translate(50, 50)"
id="shape"/>
</svg>
<% end %>
<%= 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"
xml:space="preserve"
>
<polygon x="0" y="0"
points="0,0 10,0 5,10"
transform="translate(50, 50)"
id="shape"/>
</svg>
<% end %>
<%= 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"
xml:space="preserve"
>
<polygon points="15,1.5 6,29.7 28.5,11.7 1.5,11.7 24,29.7"
transform="translate(50, 50)"
id="shape"/>
</svg>
<% end %>
</div>
<div id="orientationPanel" class="interfacePanel"></div>
<div id="accelerationPanel" class="interfacePanel"></div>
......@@ -13,16 +13,14 @@
</head>
<body data-js-view-name="<%= js_view_name(@conn, @view_template) %>">
<div class="container">
<div class="conductor">
<header class="header">
<img src="/images/switch.png" alt="SWITCH" height="46" width="180" />
<p>Online players: <span id="UserCount"></span></p>
</header>
<main role="main">
<%= render @view_module, @view_template, assigns %>
</main>
</div> <!-- /container -->
<script>window.userToken = "<%= assigns[:user_token] %>"</script>
......
......@@ -5,5 +5,5 @@
</div>
<div>
<a href="/play" class="btn-lg btn-success btn-block play">Play</a>
<a href="/play" class="btn-lg btn-success btn-block play">Setup</a>
</div>
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