App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

299H.- Extensión. Dibujar un gráfico dinámico. Desplazamiento a la izquierda.

com.KIO4_DynamicGraph.aix

- En esta página 91C_grafico_dinamico.htm vimos cómo crear un código para presentar un gráfico dinámico, es decir y gráfico que se desplace a la izquierda:

- Ahora vamos a realizar la misma operación pero con un extensión.

___________________________
0.- Bloques de la extensión.

___________________________
1.- Creación de gráfica con valores aleatorios. Desplazamiento a la izquierda.

p299H_GraficoDinamico.aia

- En este ejemplo se generan números aleatorios del 1 al 1000. Eso valores se dibujan en la gráfica. La gráfica se desplaza a la izquierda.

- Mediante el botón "Continuous or restart" podemos hacer que la gráfica se mueva continuamente o que se reinicie en la ventana cada vez que alcance la parte derecha.

- ListValues presenta una lista con los valores que en ese momento se encuentren en la gráfica.

- Mediante ValorMáximo y ValorMínimo establecemos el valor superior e inferior de la gráfica.

- Resolución. Está relacionado con la cantidad de valores que formarán la gráfica, un número más bajo mostrará más valores.

___________________________
- Diseño.

___________________________
- Bloques.

___________________________
___________________________
___________________________
2.- Creación de gráfica sinusoidal. Desplazamiento a la izquierda.

p299H_GraficoDinamico_2.aia

- Dibuja una señal sinusoidal.

- Observa los valores máximo y mínimo en las Propiedades.

___________________________
- Diseño.

___________________________
- Bloques.

___________________________
___________________________
___________________________
3.- Arduino. Bluetooth. Potenciómetro.

p299H_GraficoDinamico_3.aia

- Enviamos los valores del potenciómetro a la aplicación mediante Bluetooth.

- El potenciómetro crea unos valores entre 0 y 1023 en la entrada analógica A0.

- El IntervaloDelTemporizador a 50.

- El retardo del Arduino a 100.

// Juan A. Villalpando
// http://kio4.com/appinventor/299H_extension_GraficoDinamico.htm

int value_pot0;

void setup() { 
  Serial.begin(9600);
}

void loop() { 
    value_pot0 = analogRead(A0);
    // value_pot0 = (int) random(0,1023);
    Serial.println(value_pot0);
    delay(100); // It should be slower than the Clock Interval.
}

___________________________
- Diseño.

___________________________
- Bloques.

___________________________
___________________________
___________________________
4.- Dibujar dos gráficos de números aleatorios.

p299H_GraficoDinamico_4.aia

- Dibujamos en el mismo Lienzo dos gráfica generadas por números aleatorios.

___________________________
- Diseño.

___________________________
- Bloques.

___________________________
___________________________
___________________________
5.- Bluetooth y dos pantallas. Una para conectar, otra para ver.

p299H_GraficoDinamico_5.aia

- La aplicación debe estar instalada (no funciona en emulación).

- Conectamos el Bluetooth en la Screen1. Abrimos la Screen2 y visualizamos el gráfico en esta pantalla.

- Podemos pasar de una Screen a otra.

- El siguiente código:

- Envía números aleatorios del 0 al 1000 cada 800 ms por BT.

- Si recibe un dato por BT lo escribe en el Monitor Serie.

- Se escribimos algo en el Monitor Serie se envía por BT.

// Juan A. Villalpando
// http://kio4.com/appinventor/299H_extension_GraficoDinamico.htm

#include <SoftwareSerial.h>
SoftwareSerial BT(2,3);

String texto = "";

void setup(){
 BT.begin(9600);
 Serial.begin(9600);
}
 
void loop(){
  // Send random every 800 ms.
  delay(800);
  texto = (String) random(0,1000);
  // Serial.println(texto);
  texto = texto + '\n';
  BT.write(texto.c_str());

  // If receive BT, write.    
  if(BT.available()) {
    Serial.write(BT.read());
    }

  // If Serial Monitor, send data by BT
  if(Serial.available()){
    texto = Serial.readStringUntil('\n');
    texto = texto + '\n';
    BT.write(texto.c_str());}
}

- Conectamos el Bluetooth a los terminales 2 y 3.

___________________________
- Diseño. Screen1.

___________________________
- Bloques. Screen1.

___________________________
- Diseño. Screen2.

___________________________
- Bloques. Screen2.

___________________________
___________________________
___________________________
6.- Bloque con tres valores.

p299Hi_GraficoDinamico_6.aia

- Mediante este bloque podemos visualizar tres señales, además podemos establecer el valor máximo y mínimo de cada una.

- También podemos visualizar solamente un valor o dos valores, estableciendo el color que no queremos observar en 16774127.

___________________________
- Diseño.

___________________________
- Bloques.

___________________________
___________________________
___________________________
7.- Guardar todos los valores en una lista para verlos después.

p299Hi_GraficoDinamico_7.aia

- Vamos guardando en una lista todos los valores.

- Pulsamos "Pausa"

- Al mover el Deslizador se mostrará la gráfica de los valores comprendidos entre el máximo y el mínimo del Deslizador.

___________________________
- Diseño.

___________________________
- Bloques.

___________________________