Aula 3 do curso HTML5 Mobile da Especializa. Tratamos sobre os sensores de posicionamento e movimento do aparelho. A leitura desses sensores varia de acordo com o browser mas já é plenamente viável no iOS e Androids mais atuais (acima do honeycomb).

2. HTML5 MOBILE
Front-end Web para Mobile Apps

3. EMENTA
• Imersão em mobile browsers
• Mobile Displays
• Touchscreen
• Sensores
• Frameworks e bibliotecas
3

4. O QUE VEREMOS AGORA
• Touchscreen
• Sensores
• Bússulas, acelerômetros e giroscópios
• DeviceOrientation
• DeviceMotion
• Frameworks e bibliotecas
4

5. 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

6. ACELERÔMETRO
• Montado sobre uma estrutura que utiliza a força
da gravidade para detectar a movimentacão
6

7. ACELERÔMETRO
•A estrutura é capaz de
calcular o
posicionamento por
estar montada em três
eixos
7

8. GIROSCÓPIO
• Artefato
que gira em
torno de um eixo
8

9. GIROSCÓPIO
• Artefato
que gira em
torno de um eixo
• Possuem a capacidade
de manterem a
orientação de seu eixo
quando estão girando
8

10. GIROSCÓPIO
• Artefato
que gira em
torno de um eixo
• Possuem a capacidade
de manterem a
orientação de seu eixo
quando estão girando
• Chegam a desafiar as
leis da física
8

11. 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
• Ponha um smartphone deitado sobre a
mesa, com a parte inferior mais próxima
de 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
9

12. 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
• Ponha um smartphone deitado sobre a
mesa, com a parte inferior mais próxima
de 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
9

13. 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
• Ponha um smartphone deitado sobre a
mesa, com a parte inferior mais próxima
de 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
9

14. 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

15. 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

16. ROTAÇÕES NO APARELHO
• Aparelho solto em • Aparelho rolou pra
superfície plana esquerda 30 graus
apontando pro norte • alpha: 0, beta: 0, gamma: 30
• alpha: 0, beta: 0, gamma: 0
12

17. ROTAÇÕES NO APARELHO
• Aparelho solto em • Aparelho rolou pra
superfície plana esquerda 30 graus
apontando pro norte • alpha: 0, beta: 0, gamma: 30
• alpha: 0, beta: 0, gamma: 0
12

18. 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

19. 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