DEVICE ORIENTATION &   WEBSOCKET API Approfondimenti, scoperte ed esperimenti
LEVEL 0 Basics
COORDINATEFirst: Heading ~ Alpha
COORDINATESecond: Attitude ~ Beta
COORDINATEThird: Bank ~ Gamma
COORDINATE                            Tryoutwindow.addEventListener("deviceorientation", traccia, false);function traccia(...
LEVEL 1Experimenting with heading
A BIRD IN A CAGE      Heading come rotazione<body>    <div>        <img src="img/bird">        <img src="img/cage">    </d...
A BIRD IN A CAGEdiv{       width: 400px; height: 400px;       position: relative;       -webkit-transform-style: preserve-...
A BIRD IN A CAGE                Heading come rotazionewindow.addEventListener ("deviceorientation",traccia, false);functio...
ROTATING PICTURE                Questione di origin-webkit-transform-origin: 225px 150px 400px;
LEVEL 2Costruire un cubo
A CUBE                HTML and CSS<div id="container">    <div class="square   bottom"></div>    <div class="square   left...
A CUBE                       HTML and CSSbody{    -webkit-perspective: 800px;}div#container{    position: relative;    wid...
A CUBE                          HTML and CSSdiv.square{    position: absolute;    top: 0px;    left: 0px;    width: 800px;...
A CUBEHTML and CSS
A CUBE                    Let’s animate it!function traccia(evento){    document.getElementById(container).style[-webkit-t...
A CUBE                Cosa Succede se...body{    -webkit-perspective: 800px;}div#container{    -webkit-transform: translat...
A CUBEAggiungiamo una cubemap
LEVEL 3WebSocket
PREFERISCI CHUCK O DART?
IL MASTERvar socket = new WebSocket("ws://0.0.0.0:8080");socket.addEventListener("open", registratiMaster, false);socket.a...
IL SERVERws.onmessage do |msg|  case msg    when register master      puts "the master is ready"      @channel.subscribe {...
IL CLIENTvar socket = new WebSocket("ws://<%= @ip %>:8080");socket.addEventListener("open",    prontoPerVotare, false);soc...
LEVEL 4Uniamo i pezzi
IL CLIENTvar socket = new WebSocket("ws://<%= @ip %>:8080");socket.addEventListener("open",    prontoPerMuovere, false);so...
IL SERVER                    Usando JSONfunction stampaMessaggio(evento){    var angoli = JSON.parse(evento.data);    docu...
LEVEL 5molto molto molto sperimentale
ws.onmessage do |msg|  data = JSON.parse(msg);  case data[cmd]    when register_master      @masterchannels << EM::Channel...
function stampaMessaggio(evento){    var data = JSON.parse(evento.data);    switch(data.cmd) {        case your_id:       ...
THANKS!         www.compartoweb.com@compartoweb ~ facebook.com/compartoweb
Device Orientation & WebSocket API
Upcoming SlideShare
Loading in …5
×

Device Orientation & WebSocket API

896 views
838 views

Published on

Esperimenti e demo basati sull'utilizzo delle Device Orientation API e dei WebSocket.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
896
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Device Orientation & WebSocket API

  1. 1. DEVICE ORIENTATION & WEBSOCKET API Approfondimenti, scoperte ed esperimenti
  2. 2. LEVEL 0 Basics
  3. 3. COORDINATEFirst: Heading ~ Alpha
  4. 4. COORDINATESecond: Attitude ~ Beta
  5. 5. COORDINATEThird: Bank ~ Gamma
  6. 6. COORDINATE Tryoutwindow.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);}
  7. 7. LEVEL 1Experimenting with heading
  8. 8. A BIRD IN A CAGE Heading come rotazione<body> <div> <img src="img/bird"> <img src="img/cage"> </div></body>
  9. 9. A BIRD IN A CAGEdiv{ 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);}
  10. 10. A BIRD IN A CAGE Heading come rotazionewindow.addEventListener ("deviceorientation",traccia, false);function traccia(evento){ document.querySelector(div) .setAttribute(style,-webkit-transform: rotateY( + evento.alpha + deg););}
  11. 11. ROTATING PICTURE Questione di origin-webkit-transform-origin: 225px 150px 400px;
  12. 12. LEVEL 2Costruire un cubo
  13. 13. 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>
  14. 14. A CUBE HTML and CSSbody{ -webkit-perspective: 800px;}div#container{ position: relative; width: 800px; height: 800px; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-800px);}
  15. 15. A CUBE HTML and CSSdiv.square{ position: absolute; top: 0px; left: 0px; width: 800px; height: 800px;}div.square.bottom{ background: red; -webkit-transform: rotateX(90deg) translateZ(-400px);}
  16. 16. A CUBEHTML and CSS
  17. 17. A CUBE Let’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) ";}
  18. 18. A CUBE Cosa Succede se...body{ -webkit-perspective: 800px;}div#container{ -webkit-transform: translateZ(800px);}
  19. 19. A CUBEAggiungiamo una cubemap
  20. 20. LEVEL 3WebSocket
  21. 21. PREFERISCI CHUCK O DART?
  22. 22. IL MASTERvar 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;}
  23. 23. IL SERVERws.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
  24. 24. IL CLIENTvar 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){ ...}
  25. 25. LEVEL 4Uniamo i pezzi
  26. 26. IL CLIENTvar 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 }));}
  27. 27. IL SERVER Usando JSONfunction 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)";}
  28. 28. LEVEL 5molto molto molto sperimentale
  29. 29. 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
  30. 30. 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; }}
  31. 31. THANKS! www.compartoweb.com@compartoweb ~ facebook.com/compartoweb

×