Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Device Orientation & WebSocket API

1,117 views

Published on

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

  • Be the first to comment

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

×