Lata rolante no Intel XDK

O código fonte deste exemplo pode ser encontrado aqui: https://github.com/gomobile/sample-accelerometer ou faça o download do Intel(R) XDK para ver todos os exemplos de HTML5.

Propósito

O exemplo de lata rolante é uma grande demonstração de como uma aplicação híbrida pode capturar os dados do acelerômetro de um dispositivo e animar um elemento HTML utilizando transformações CSS. Seu propósito é de demonstrar como ler os dados do acelerômetro em uma app híbrida e utilizar estes dados de forma bastante criativa.

Código Fonte

Tão logo a biblioteca de bridge tenha sido carregada (intelxdk.js), o evento onDeviceReady é disparado, chamando a seguinte função:.
Esta função irá travar a orientação da aplicação, irá se certificar de que o dispositivo não entre em time out e desligue a tela enquanto a app está ativa, ocultará a splash screen e iniciará a leitura constante do acelerômetro.
O código que monitora o acelerômetro é setado para disparar um evento JavaScript a cada 5 milisegundos. O resultado deste evento será então interpretado pela função de leitura com sucesso chamada suc.
Finalmente, esta função de leitura com sucesso é uma função que irá interpretar os dados do acelerômetro e renderizar a ação na imagem da lata.

Easter Eggs

Não possui um dispositivo com acelerômetro ? Existem alguns botões de seta comentados no código no final do arquivo index.html que podem ser descomentados para utilizar esta aplicação mesmo sem acelerômetro. Além disso, a etiqueta e a sombra da lata podem ser alteradas para uma aparência "Mountain Doug" trocando a linha do elemento de imagem pela linha comentada abaixo dela.

Testando

Esta aplicação de exemplo foi testada em uma variedade de dispositivos iOS e Android.

Limitações

Em um dispositivo iOS, o sistema operacional irá virar a aplicação se o dispositivo for segurado de cabeça para baixo. Enquanto isso pode ser interessante para qualquer usuário que não saiba como segurar seu dispositivo do jeito certo, pode ser frustrante para uma app de demo de acelerômetro como esta, quando alguém pode desejar rolar a lata de volta para o topo da tela.

A física não leva em conta a rolagem para um canto. Se alguém rolar a lata transversalmente para um canto, a aplicação irá responder redimensionando a tela em tempo real, causando resultados não previstos. Isso pode ser contornado com um pouco mais de matemática no código da app, caso necessário.