Device Orientation & WebSocket API

DEVICE ORIENTATION &
WEBSOCKET API
Approfondimenti, scoperte ed esperimenti

COORDINATE
First: Heading ~ Alpha

COORDINATE
Second: Attitude ~ Beta

COORDINATE
Third: Bank ~ Gamma

COORDINATE
Tryout

window.addEventListener("deviceorientation", traccia, false);

function traccia(evento){
document.querySelector('div.alpha span')
.innerHTML = Math.round(evento.alpha);
document.querySelector('div.beta span')
.innerHTML = Math.round(evento.beta);
document.querySelector('div.gamma span')
.innerHTML = Math.round(evento.gamma);
}

LEVEL 1
Experimenting with heading

A BIRD IN A CAGE
Heading come rotazione

<body>
<div>
<img src="img/bird">
<img src="img/cage">
</div>
</body>

A BIRD IN A CAGE
div{
width: 400px; height: 400px;
position: relative;
-webkit-transform-style: preserve-3d;
}
img{
-webkit-backface-visibility: hidden;
display: block;
position: absolute;
top: 0px; left: 0px;
width: 400px; height: 400px;
}
img:last-child{
-webkit-transform: rotateY(180deg);
}

A BIRD IN A CAGE
Heading come rotazione

window.addEventListener ("deviceorientation",
traccia, false);

document.querySelector('div')
.setAttribute('style','-webkit-
transform: rotateY(' + evento.alpha + 'deg);');
}

ROTATING PICTURE
Questione di origin

-webkit-transform-origin: 225px 150px 400px;

A CUBE
HTML and CSS

<div id="container">
<div class="square bottom"></div>
<div class="square left"></div>
<div class="square right"></div>
<div class="square front"></div>
<div class="square top"></div>
<div class="square back"></div>
</div>

A CUBE
HTML and CSS

body{
-webkit-perspective: 800px;
}
div#container{
position: relative;
width: 800px;
height: 800px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(-800px);
}

A CUBE
HTML and CSS

div.square{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 800px;
}

div.square.bottom{
background: red;
-webkit-transform: rotateX(90deg) translateZ(-400px);
}

A CUBE
Let’s animate it!

document.getElementById('container').style['-
webkit-transform'] =
"translateZ(-800px)" +
"rotateY(" + ( -evento.gamma ) + "deg) " +
"rotateX(" + evento.beta + "deg) " +
"rotateZ(" + ( evento.alpha ) + "deg) ";
}

A CUBE
Cosa Succede se...

body{
-webkit-perspective: 800px;
}
div#container{
-webkit-transform: translateZ(800px);
}

A CUBE
Aggiungiamo una cubemap

IL MASTER
var socket = new WebSocket("ws://0.0.0.0:8080");
socket.addEventListener("open", registratiMaster, false);
socket.addEventListener("message", stampaMessaggio,
false);

function registratiMaster(evento){
socket.send('register master');
}
function stampaMessaggio(evento){
console.log(evento.data);
var elemento = document.querySelector('span#' +
evento.data);
if (elemento != undefined)
elemento.innerHTML = parseInt(elemento.innerHTML)
+ 1;
}

IL SERVER

ws.onmessage do |msg|
case msg
when 'register master'
puts "the master is ready"
@channel.subscribe { |m| ws.send m }
else
puts "sending #{msg} to master"
@channel.push msg
end
ws.send msg
end

IL CLIENT

var socket = new WebSocket("ws://<%= @ip %>:8080");
socket.addEventListener("open", prontoPerVotare, false);
socket.addEventListener("message", nuovoMessaggio, false);

function prontoPerVotare(){
...
document.querySelector('a').addEventListener('click', vota,
false);
}

function vota(evento){
socket.send(evento.target.getAttribute('data-vote'));
}

function nuovoMessaggio(evento){
...
}

IL CLIENT

var socket = new WebSocket("ws://<%= @ip %>:8080");
socket.addEventListener("open", prontoPerMuovere, false);
socket.addEventListener("message", nuovoMessaggio, false);

function prontoPerMuovere(){
window.addEventListener ("deviceorientation", muovi,
false);
}

function muovi(evento){
socket.send(JSON.stringify({
alpha: evento.alpha,
beta: evento.beta,
gamma: evento.gamma
}));
}

IL SERVER
Usando JSON

var angoli = JSON.parse(evento.data);
document.getElementById('container').style['-
webkit-transform'] =
"translateZ(-400px) " +
"rotateZ(" + ( -angoli.gamma ) + "deg) " +
"rotateX(" + ( -angoli.beta) + "deg) " +
"rotateY(" + ( angoli.alpha - 180 ) + "deg)";
}

LEVEL 5
molto molto molto sperimentale

ws.onmessage do |msg|
data = JSON.parse(msg);
case data['cmd']

when 'register_master'
@masterchannels << EM::Channel.new
@masterchannels.last.subscribe { |m| ws.send m }
ws.send( { cmd: :your_id, value: @masterchannels.size - 1 }.to_json )
puts "added master nr #{@masterchannels.size - 1}"

when 'register_client'
if !data['value'].nil?
@clients << { master_id: ( id = data['value']), channel: EM::Channel.new }
@clients.last[:channel].subscribe { |m| ws.send m }
@masterchannels[id].push( { cmd: :create_id, value: @clients.size -
1 }.to_json )
ws.send( { cmd: :your_id, value: @clients.size - 1 }.to_json )
puts "added #{@clients.size - 1} to master #{id}"
end

when 'position',
if !data['ship_id'].nil?
@masterchannels[@clients[data['ship_id']][:master_id]].push msg
end

end

var data = JSON.parse(evento.data);
switch(data.cmd) {
case 'your_id':
document.querySelector('h1 > span').innerText =
data.value
break;
case 'create_id':
setupShip(data.value);
break;
case 'position':
moveShip(
document.querySelector('figure[data-id="' +
data.ship_id + '"]'),
data.value
);
break;
}
}

THANKS!
www.compartoweb.com
@compartoweb ~ facebook.com/compartoweb

Device Orientation & WebSocket API

Recommended

Recommended

More Related Content

Featured

Featured (20)

Device Orientation & WebSocket API