Arduino para Iniciantes

Cursos


Simulados


P&R

Arduino-36 Projetos

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.


Tutoriais App Inventor - 55

Usando o Aceler�metro para Mudar a Cor de Fundo


  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

*****


Tutoriais


Programas



Projetos


O Catador de Lixo Arduino para Iniciantes Programando com Arduino-12 Projetos
Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL
P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python
Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL
Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python
Projetos

Android
App Inventor 2
Arduino

Copyright 2020 - Simulados & Tutoriais - Todos os Direitos Reservados.