|
Nesse tutorial vamos utilizar um componente SensorAceler�metro e mais algumas legendas, de forma que, quando o celular for
sacudido, os valores dos tr�s eixos (x, y e z) ser�o mostrados em tr�s legendas, e ao mesmo tempo a cor de fundo da tela ser� alterada
para uma cor aleat�ria entre milh�es de cores (RGB).
Vejamos como funciona o aceler�metro de um celular no App Inventor:
� SensorAceler�metro � componente invis�vel que mede a acelera��o aproximada em tr�s dimens�es usando unidades do SI (m/s2),
e detecta se o telefone est� sendo sacudido ou n�o. Os valores s�o os seguintes:
� xAcel - igual a 0 (zero) quando o telefone est� em repouso sobre uma superf�cie plana, positivo quando o telefone est�
inclinado para a direita (ou seja, o lado esquerdo levantado), e negativo quando o telefone est� inclinado para a esquerda (ou seja, o
lado direito levantado).
� yAcel � igual a 0 (zero) quando o telefone est� em repouso sobre uma superf�cie plana, positivo quando a base � elevada, e
negativo quando o topo � elevado.
� zAcel - igual a -9,8 (acelera��o da gravidade da Terra), quando o dispositivo est� em repouso paralelo ao ch�o com a tela
virada para cima, +9,8, quando na mesma situa��o com a tela virada para baixo, 0 (zero) quando perpendicular ao solo. O valor muda
conforme o telefone � acelerado contra ou a favor da gravidade.
Ent�o vejamos como desenvolver esse projeto:
� Abra o App Inventor acessando o link:
App Inventor 2
� Na tela apresentada, clique no Bot�o Create Apps!, em seguida entre com sua conta.
� Crie um novo projeto com o nome: AcelerometroAlteraCorDeFundo.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades da Tela Principal:
� Clique em Screen1 na se��o Componentes.
� AlinhamentoHorizontal: Centro: 3.
� CorDeFundo: Amarelo.
� Theme: Dark.
� T�tulo: Aceler�metro - Cor de Fundo.
Agora vamos inserir os componentes do nosso projeto na seguinte ordem:
� 1 Legenda.
� 1 layout Organiza��oEmTabela.
� 6 Legendas (insira as legendas dentro do layout).
� 1 SensorAceler�metro.
Agora vamos alterar algumas propriedades dos componentes:
Alterando as propriedades da primeira Legenda:
� Nome: legMensagem.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Fam�liaDaFonte: com serifa.
� HTMLFormat: marque o checkbox para o texto aceitar formata��o HTML.
� Texto: Sacuda o Celular para alterar a Cor de Fundo.
� AlinhamentoDoTexto: Centro: 1.
� CorDeTexto: Azul.
Alterando as propriedades do layout Organiza��oEmTabela:
� Nome: layoutOrgEmTabela.
� Linhas: 3.
Alterando as propriedades da segunda Legenda:
� Nome: legEixoX.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Texto: Eixo X:
� AlinhamentoDoTexto: Esquerda: 0.
� CorDeTexto: Azul.
Alterando as propriedades da terceira Legenda:
� Nome: legEixoY.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Texto: Eixo Y:
� AlinhamentoDoTexto: Esquerda: 0.
� CorDeTexto: Azul.
Alterando as propriedades da quarta Legenda:
� Nome: legEixoZ.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Texto: Eixo Z:
� AlinhamentoDoTexto: Esquerda: 0.
� CorDeTexto: Azul.
Alterando as propriedades da quinta Legenda:
� Nome: legValorX.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Texto: 0:
� AlinhamentoDoTexto: Esquerda: 0.
� CorDeTexto: Azul.
Alterando as propriedades da sexta Legenda:
� Nome: legValorY.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Texto: 0:
� AlinhamentoDoTexto: Esquerda: 0.
� CorDeTexto: Azul.
Alterando as propriedades da s�tima Legenda:
� Nome: legValorZ.
� FonteNegrito: marque o checkbox para alterar o texto para negrito.
� TamanhoDaFonte: 20.
� Texto: 0:
� AlinhamentoDoTexto: Esquerda: 0.
� CorDeTexto: Azul.
Alterando as propriedades do SensorAceler�metro:
� Nome: aceCorDeFundo.
Feito isso, o seu projeto dever� ficar igual ao da Figura 55.1:

Figura 55.1 � Projeto com os componentes
inseridos e configurados.
Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional.
Vamos l� ent�o:
C�digo para o componente SensorAceler�metro (Acelera��oAcelerada):
� Na se��o Blocos, clique no componente aceCorDeFundo e arraste o primeiro bloco para a �rea em branco.
� Clique no componente legValorX, arraste o segundo bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
CorDeFundo para: Texto.
� Passe o mouse sobre o bot�o xAcel do bloco marrom, clique na primeira op��o e encai-xe no final do bloco verde.
� Clique no componente legValorY, arraste o segundo bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
CorDeFundo para: Texto.
� Passe o mouse sobre o bot�o yAcel do bloco marrom, clique na primeira op��o e encai-xe no final do bloco verde.
� Clique no componente legValorZ, arraste o segundo bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
CorDeFundo para: Texto.
� Passe o mouse sobre o bot�o zAcel do bloco marrom, clique na primeira op��o e encai-xe no final do bloco verde.
Feito isso, seu projeto dever� ficar igual ao da Figura 55.2:

Figura 55.2 � C�digo para a fun��o Acelera��oAlterada do Aceler�metro.
Esse bloco nos diz o seguinte:
Sempre que a acelera��o do celular for alterada, mostre em tr�s legendas os valores dos tr�s eixos do aceler�metro (x, y e z).
C�digo para o componente SensorAceler�metro (Sacudindo):
� Na se��o Blocos, clique no componente aceCorDeFundo e arraste o segundo bloco para a �rea em branco.
� Clique no componente Screen1, arraste o segundo bloco verde e encaixe na lacuna �fazer� do bloco marrom. Altere a op��o
TelaSobre para: CorDeFundo.
� Clique na categoria Cores, arraste o bloco �criar cores� e encaixe no final do bloco verde.
� Clique na categoria Matem�tica, arraste o bloco �inteiro aleat�rio de� e encaixe na primeira lacuna do bloco �criar lista�.
� Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na primeira lacuna do bloco azul. Altere o valoro para:
1.
� Clique na categoria Matem�tica, arraste o primeiro bloco e encaixe na segunda lacuna do bloco azul. Altere o valoro para:
255.
Repita esse mesmo processo para as duas lacunas restantes do bloco azul.
Feito isso, seu projeto dever� ficar igual ao da Figura 55.3:

Figura 55.3 � C�digo para a fun��o Sacudindo do Aceler�metro.
Esse bloco nos diz o seguinte:
Sempre que o celular for agitado ou sacudido, a cor de fundo da tela ser� alterada para uma cor aleat�ria entre milh�es de cores.
Dessa forma, conclu�mos o nosso projeto. Teste seu projeto em um dispositivo real e confira o resultado.
Voc� pode baixar o c�digo completo desse projeto acessando os links:
AcelerometroAlteraCorDeFundo.aia
AcelerometroAlteraCorDeFundo.apk
|