Embedded Files
Mini editor gráfico
Mini editor gráfico
Para aprender a dibujar, vamos a crear un editor gráfico básico. Puedes descargarte la aplicación escaneando el código QR siguiente.
Sus características serán:
- Emplear la pantalla táctil del dispositivo
- Capaz de dibujar, con las herramientas de "CANVAS":
- Puntos
- Rectas
- Círculos
- Texto
- Borrar el área de dibujo
- Salir
La pantalla de diseño queda así
Escanea el código QR de la izquierda, descarga y prueba el programa
Para dibujar una línea debemos definir un origen y un final, para los círculos, el centro y el radio. Dentro de las posibilidades que ofrece "Canvas" son:
Dragged: hace referencia a arrastrar el dedo. Ofrece coordenadas "X" e "Y" iniciales, previas (intermedias) y actuales.
Flung: hace referencia al gesto de lanzar arrastrando el dedo por la pantalla. Ofrece datos como coordenadas y velocidad.
TouchDown: se activa cuando empezamos a tocar la pantalla.
TouchUp: se activa cuando dejamos de pulsar la pantalla.
Touched: la diferencia con TouchUp es que el tiempo del toque debe ser pequeño para que este bloque se active.
La elección empleada es, para el origen de la línea o las coordenadas del centro del círculo la opción TouchDown, para el resto y pintar TouchUp.
Porque necesitamos memorizar coordenadas (x,y) iniciales, y para ello crearemos las variables correspondientes "Xini" e "Yini", así como definir otra que guarde la elección del tipo de elemento que queremos dibujar "Acción".
Al pulsar el botón de salir, cerramos la aplicación desde la opción que encontramos en el bloque común "Control" con la opción "close application".
Al pulsar el botón de borrar, llamamos a la función "Clear" dentro de las opciones de "CANVAS".
Al pulsar los botones de los elementos gráficos, redefinimos la variable Acción para saber qué es lo que tenemos que dibujar cuando tocamos el lienzo de la pantalla.
La parte de bloques, pues, es:
Con el bloque:
- "when Canvas1.TouchDown" guardamos en variables la posición del dedo al tocar la pantalla.
- "when Aceptar.Click" ponemos en la dirección memorizada de la pantalla el texto que hay en el campo de texto "TextBox1"
- "when Canvas1.TouchUp", dependiendo del valor de la variable "Acción":
- Si es "Línea", de la opción "CANVAS" seleccionamos "call Canvas1.DrawLine" indicando la posición memorizada de la pantalla cuando pusimos el dedo y la posición de cuando lo separamos de la misma.
- Si es "Círculo" seleccionamos "call Canvas1.DrawCircle" indicando la posición memorizada de la pantalla cuando pusimos el dedo y, como radio, el mínimo de la distancia en horizontal vertical con respecto a la posición de cuando lo separamos de la pantalla.
- Si es "Punto", seleccionamos "call Canvas1.DrawPoint" indicando la posición del dedo en la pantalla.
PÁGINA DE CARGA
PÁGINA DE CARGA
Ejemplo de programa con 2 ventanas (Screen) en la inicial "Screen1" se hace como página de carga con barra de progreso.
La parte de diseño de pantalla se muestra en la siguiente imagen
y los bloques necesarios para conseguirlo son los que aparecen a la derecha.
Se crea una variable "cuento" que vaya contando, inicialmente a cero.
Cuando el sensor Clock1 de señal:
- se incrementa la variable "cuento"
- Se pinta una linea de color celeste y 20 puntos de grosor que empieza en (0,0) y termina en ("cuento",0).
- Si la variable "cuento" llega a 100, se abre otra ventana llamada "Ej2Pant"
Pantalla de carga distinta de Screen1
Pantalla de carga distinta de Screen1
Cuando queremos poner una página de carga y el programa está en el Screen1, hay que hacer un bypass antes de ejecutar el programa. Veamos el ejemplo.
Imagen de la parte de diseño del Screen1, correspondiente a una brújula con sensor de inclinación.
En la parte de bloques, se determina una variable para saber si es la primera vez que se carga "0" o no "1"
Si es que se ha ejecutado la aplicación, la variable "MiPRimeraVez" valdrá "0", le cambiamos a "1" y nos vamos al Screen "cARGA"
El Screen de carga "cARGA" es
y sus bloques
Google Sites
Report abuse