device orientation & websocket api
DESCRIPTION
Esperimenti e demo basati sull'utilizzo delle Device Orientation API e dei WebSocket.TRANSCRIPT
DEVICE ORIENTATION & WEBSOCKET API
Approfondimenti, scoperte ed esperimenti
LEVEL 0Basics
COORDINATEFirst: Heading ~ Alpha
COORDINATESecond: Attitude ~ Beta
COORDINATEThird: Bank ~ Gamma
COORDINATETryout
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 1Experimenting with heading
A BIRD IN A CAGEHeading 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 CAGEHeading come rotazione
window.addEventListener ("deviceorientation", traccia, false);
function traccia(evento){ document.querySelector('div') .setAttribute('style','-webkit-transform: rotateY(' + evento.alpha + 'deg);');}
ROTATING PICTUREQuestione di origin
-webkit-transform-origin: 225px 150px 400px;
LEVEL 2Costruire un cubo
A CUBEHTML 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 CUBEHTML and CSS
body{ -webkit-perspective: 800px;}div#container{ position: relative; width: 800px; height: 800px; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-800px);}
A CUBEHTML 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 CUBEHTML and CSS
A CUBELet’s animate it!
function traccia(evento){ document.getElementById('container').style['-webkit-transform'] = "translateZ(-800px)" + "rotateY(" + ( -evento.gamma ) + "deg) " + "rotateX(" + evento.beta + "deg) " + "rotateZ(" + ( evento.alpha ) + "deg) ";}
A CUBECosa Succede se...
body{ -webkit-perspective: 800px;}div#container{ -webkit-transform: translateZ(800px);}
A CUBEAggiungiamo una cubemap
LEVEL 3WebSocket
PREFERISCI CHUCK O DART?
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 MASTER
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 msgend
IL SERVER
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
LEVEL 4Uniamo i pezzi
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 CLIENT
function stampaMessaggio(evento){ 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)";}
IL SERVER Usando JSON
LEVEL 5molto 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
function stampaMessaggio(evento){ 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