Download - HTML5 Mobile - Aula 3 - Device Orientation
![Page 1: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/1.jpg)
![Page 2: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/2.jpg)
HTML5 MOBILEFront-end Web para Mobile Apps
![Page 3: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/3.jpg)
• Imersão em mobile browsers• Mobile Displays• Touchscreen• Sensores• Frameworks e bibliotecas
EMENTA
3
![Page 4: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/4.jpg)
• Touchscreen• Sensores
• Bússulas, acelerômetros e giroscópios• DeviceOrientation• DeviceMotion
• Frameworks e bibliotecas
O QUE VEREMOS AGORA
4
![Page 5: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/5.jpg)
MOVIMENTOS• Dispositivos móveis já são dotados de:
• Magnetômetros - Medidores de campos magnéticos, são usados em bússulas digitais
• Acelerometros - Calcula a força g incidente no aparelho para verificar se foi movido.
• Giroscópio - Calcula movimentos em torno do seu próprio eixo e em outros eixos também
• Com esses equipamentos, os browsers conseguem detectar posicionamentos e ações de movimentos do aparelho• http://viagem.hsw.uol.com.br/bussolas.htm
• http://www.tecmundo.com.br/celular/4406-como-funcionam-acelerometros-e-giroscopios-.htm
5
![Page 6: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/6.jpg)
ACELERÔMETRO• Montado sobre uma estrutura que utiliza a força
da gravidade para detectar a movimentacão
6
![Page 7: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/7.jpg)
ACELERÔMETRO• A estrutura é capaz de
calcular o posicionamento por estar montada em três eixos
7
![Page 8: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/8.jpg)
GIROSCÓPIO• Artefato que gira em
torno de um eixo
8
![Page 9: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/9.jpg)
GIROSCÓPIO• Artefato que gira em
torno de um eixo
8
• Possuem a capacidade de manterem a orientação de seu eixo quando estão girando
![Page 10: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/10.jpg)
GIROSCÓPIO• Artefato que gira em
torno de um eixo
8
• Possuem a capacidade de manterem a orientação de seu eixo quando estão girando
• Chegam a desafiar as leis da física
![Page 11: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/11.jpg)
MOVIMENTOS• Dispositivos mobile são dotados dessas
ferramenta para que sejam capazes de detectar sua posição atual nos eixos:• x - corta a largura do aparelho• y - corta a altura do aparelho• z - corta a espessura do aparelho
9
• Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próximade você
• O valor de x vai aumentar se você empurrá-lo pra direita
• O de y aumenta se empurrá-lo pra frente• E o de z se o empurrá-lo pra cima
![Page 12: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/12.jpg)
MOVIMENTOS• Dispositivos mobile são dotados dessas
ferramenta para que sejam capazes de detectar sua posição atual nos eixos:• x - corta a largura do aparelho• y - corta a altura do aparelho• z - corta a espessura do aparelho
9
• Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próximade você
• O valor de x vai aumentar se você empurrá-lo pra direita
• O de y aumenta se empurrá-lo pra frente• E o de z se o empurrá-lo pra cima
![Page 13: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/13.jpg)
MOVIMENTOS• Dispositivos mobile são dotados dessas
ferramenta para que sejam capazes de detectar sua posição atual nos eixos:• x - corta a largura do aparelho• y - corta a altura do aparelho• z - corta a espessura do aparelho
9
• Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próximade você
• O valor de x vai aumentar se você empurrá-lo pra direita
• O de y aumenta se empurrá-lo pra frente• E o de z se o empurrá-lo pra cima
![Page 14: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/14.jpg)
ROTAÇÕES• A rotação de cada um dos
três eixos é chamada de:• yaw: alpha α - Ação: dizer não• pitch: beta - ϐ - Ação: empinar• roll: gamma γ - Ação: rolar
10
![Page 15: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/15.jpg)
ROTAÇÕES• Esses dados são expressos em ângulos (angulos de
Euler)• yaw - α: giro sobre o eixo z
• O zero grau é o norte da bússula• pitch - ϐ: giro sobre o eixo x• roll - γ: giro sobre o eixo y
11
![Page 16: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/16.jpg)
ROTAÇÕES NO APARELHO
• Aparelho solto em superfície plana apontando pro norte• alpha: 0, beta: 0, gamma: 0
12
• Aparelho rolou pra esquerda 30 graus
• alpha: 0, beta: 0, gamma: 30
![Page 17: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/17.jpg)
ROTAÇÕES NO APARELHO
• Aparelho solto em superfície plana apontando pro norte• alpha: 0, beta: 0, gamma: 0
12
• Aparelho rolou pra esquerda 30 graus
• alpha: 0, beta: 0, gamma: 30
![Page 18: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/18.jpg)
DEVICE ORIENTATION• Objeto DeviceOrientationEvent
• if (window.DeviceOrientationEvent) { ...}• Se o dispositivo o tiver, ele possui suporte a orientação
• Obs.: O browser do primeiro iPad dizia que tinha mas era caô• Objeto que traz os atributos alpha, beta e gamma• No Firefox é um OrientationEvent e funciona diferente
• if (window.OrientationEvent) { ... }
• Evento onDeviceOrientation• window.addEventListener('deviceorientation', callback, phase);• No Firefox:
• window.addEventListener('MozOrientation', callback, phase);
13
![Page 19: HTML5 Mobile - Aula 3 - Device Orientation](https://reader033.vdocument.in/reader033/viewer/2022052601/558a2919d8b42a4c028b45aa/html5/thumbnails/19.jpg)
DEVICE MOTION• Objeto DeviceMotionEvent
• if (window.DeviceMotionEvent) { ...}• Traz os atributos nos três eixos x, y, z (em m/s2):
• accelerationIncludingGravity • acceleration - aceleração excluindo os efeitos da gravidade
• Evento onDeviceMotion• window.addEventListener('devicemotion', callback, phase);
14