Retro Gadgets: Guía básica de programación (botones, interruptores, perillas y más)

Retro Gadgets tiene una variedad de componentes que puede usar para proporcionar información de usuario a sus dispositivos. Contamos con una variedad de botones, interruptores, perillas, controles deslizantes y más. En esta guía, demostraré cómo usar estos componentes y codificarlos en su dispositivo.

Esta guía está dirigida a aquellos que tienen poca o ninguna experiencia en programación y también servirá como un curso intensivo rápido sobre los conceptos básicos de programación y Lua. Trataré de mantener esta guía lo más rápida y concisa posible.

Comenzaremos ensamblando un nuevo dispositivo desde cero. Saque su multiherramienta del lado izquierdo de la pantalla y cree un nuevo dispositivo desde el menú principal, o guarde el actual en el cajón de archivo. En nuestro nuevo gadget, usemos el tablero cuadrado más grande. Ve al cajón de tableros y saca uno de esos, es el cuarto desde arriba, y colócalo en tu escritorio.

Saque un segundo y conéctelo al otro, luego use el soldador para "fusionarlos".

Ahora, comenzaremos con un simple interruptor de encendido/apagado. Vaya al cajón de entradas, busque los interruptores y coloque uno de su elección en su dispositivo (para su información, puede girarlo con un clic de RMB). Puse el mío en la esquina izquierda para dejar espacio para otras cosas más tarde. A continuación, necesitamos un componente de salida de algún tipo. Diríjase al cajón de salida, vaya a los LED y tome un solo LED (no un LED múltiple) y colóquelo en el lado derecho de su dispositivo. Elegí el LED de forma cuadrada.

Ahorremos algo de tiempo más tarde y sigamos agregando el resto de las partes que usaremos en esta guía. Coloque un botón, una perilla y un control deslizante de su elección (aunque sean pequeños) en el lado izquierdo y luego coloque una pequeña pantalla en el lado derecho de su dispositivo, debajo del LED. También seguí adelante y lo pinté con fines de visualización, pero no tienes que hacer eso. Aquí está mi configuración en este punto:

Rojo: interruptor de encendido/apagado
Amarillo: Botón
Azul: Perilla
Verde: control deslizante

También necesitamos una CPU, ROM y un chip de video del cajón Misc. No se preocupe, lo explicaré todo más adelante, pero por ahora solo tome el más pequeño de cada uno y colóquelo en su dispositivo. No habrá espacio en la parte frontal de la pizarra, así que quita la tapa, voltea la pizarra y colócalas en la parte posterior.

Nuestro dispositivo está completamente ensamblado para la guía, así que comencemos con la programación. Deslice su multiherramienta desde la izquierda, luego vaya al menú principal, Editar Gadget. Luego haga clic en Editar en la página del gadget y aparecerá la lista de activos. Habrá un archivo "CPU0.lua" allí. Haga clic en él, luego haga clic en Editar y lo llevará a la pantalla de codificación donde puede programar su CPU. La CPU es el "cerebro" de su dispositivo y es donde va toda su programación. Es lo que le dice a todos los demás componentes qué hacer. Ignora el código que ya está ahí. Selecciónelo todo con Ctrl-A y elimínelo. Explicaré qué era eso (y lo usarás más adelante), pero creo que es mejor aprender a partir de nada. Verás por qué.

Lua es un lenguaje muy simple y amigable para principiantes. Si nunca ha codificado antes, no se preocupe, esta guía está dirigida a usted y le explicaré qué significa todo y cómo funciona. Lo primero que queremos hacer es encender el LED. Agregue la siguiente línea de código a su programa, teniendo en cuenta que es distingue mayúsculas y minúsculas:

Notará que, mientras escribía, apareció una ventana emergente que le brinda sugerencias de autocompletar. Esta es una herramienta muy valiosa para un nuevo programador, no la pase por alto. Proporciona una lista de formas disponibles para completar el código y proporciona una descripción simple de lo que significa cada elemento. Puede usar las flechas hacia arriba y hacia abajo para resaltar diferentes cosas y ver sus descripciones.

Ahora, examinemos esa línea de código que acabamos de agregar:

Hay diferentes partes de ese código, separadas por puntos y un signo igual. La primera parte "gdt" se llama espacio basíco. Es un fragmento de código que le permite acceder a los componentes del dispositivo (el interruptor, los botones, el LED, etc.) y usarlo en la línea de código actual. Piense en ello como abrir una carpeta en su computadora. Para acceder a los archivos dentro de la carpeta, primero debe abrir la carpeta. Funciona de la misma manera en la codificación, nuestros componentes son "archivos" dentro de una "carpeta" que es el propio dispositivo, y para acceder a los componentes del dispositivo tenemos que "abrir la carpeta" llamando al "gdt" básico espacio. Después de escribir "gdt". con un punto, verá una lista de todos los componentes del gadget.

La siguiente parte, “Led0” es el nombre de nuestro LED. Puede ver el nombre de cualquier componente haciendo clic en él mientras el dispositivo está apagado. Después de agregar un punto al final de eso, se nos mostrarán otros dos comandos posibles: Color y Estado. Estado es un booleano lo que significa que está encendido o apagado, representado con "verdadero" o "falso". Al agregar "verdadero", hemos habilitado nuestro LED para que esté encendido siempre que el dispositivo tenga energía. Entonces, adelante, presione el botón de encendido y vea cómo se enciende el LED.

También podemos cambiar el color. Introduce este código:

Hay múltiples opciones de color, como habrás visto. Tenemos la opción de seleccionar un color predefinido como acabamos de hacer usando el código anterior (y se nos da una lista de colores disponibles en la ventana emergente de autocompletar) o podemos hacer nuestro propio color especificando los valores RGB nosotros mismos, lo cual podríamos hacer como esto:

Esto también hará que el LED se ponga verde. Tenga en cuenta que "Color" está en mayúsculas en este, para diferenciarlo del color predefinido que usamos antes. Lua distingue entre mayúsculas y minúsculas, recuérdalo siempre. Los tres números entre paréntesis son los valores del rojo, verde y azul respectivamente, en una escala de 0 a 255. Juega con esos números y ve qué tipo de colores obtienes, solo recuerda separarlos con una coma.

Haga que el LED sea del color que desee utilizando el método que desee, luego continuemos.

Nuestra próxima tarea es hacer que el LED se encienda cuando encendemos el interruptor.

Un interruptor está encendido o apagado. Lo sé, Capitán Obvio. Digo eso porque es una visualización de valores booleanos. Un interruptor está activado o desactivado y emite un valor booleano "verdadero" o "falso" según el estado en el que se encuentre.

Elimine el código de estado de Led que agregamos antes:

Puede dejar su código de color en su lugar si lo desea. Este código hace que el LED esté encendido cada vez que se enciende el dispositivo. Queremos que solo se encienda cuando el interruptor esté encendido. Esto es muy fácil de hacer, solo use la siguiente línea de código:

Literalmente le estamos diciendo a la computadora "el estado del LED es el mismo que el estado del interruptor". Entonces, si el estado del interruptor está encendido o es "verdadero", también hará que el estado del LED sea verdadero. ¡Presionemos el botón de encendido y veamos nuestro glorioso LED brillar con brillo!

.. Uh oh, algo anda mal. El LED no se enciende incluso después de encender el interruptor. ¡Esta guía apesta! Pero espere un segundo, si dejo el interruptor encendido, luego apago el botón de encendido y lo vuelvo a encender, el LED se enciende. Sorpresa, acabo de demostrar el trabajo del función de actualización (), que es el código que estaba en nuestro programa de forma predeterminada cuando creamos nuestro nuevo dispositivo y abrimos la pantalla de codificación de la CPU por primera vez. Verá, sin la función de actualización, el código que ingresamos solo se ejecuta una vez, comenzando cuando encendemos el dispositivo. No volverá a ejecutar el código hasta la próxima vez que se encienda. Entonces, cuando lo encendemos, mira el estado del interruptor, ve que el interruptor está apagado y, por lo tanto, no enciende el LED. Luego, cuando encendemos el interruptor, no sucede nada porque el código ya se ejecutó y ya no busca un cambio en el estado del interruptor. Del mismo modo, si dejamos el interruptor encendido, y luego apagamos y volvemos a encender el dispositivo, ejecuta el código nuevamente y ve que el interruptor está encendido, y configura el LED para que también se encienda.

El uso de la función actualizar () significa que cualquier código colocado dentro de la función se ejecutará con cada nuevo tic. Puede pensar en una marca como un cuadro individual al renderizar gráficos. Su dispositivo funciona a una velocidad definida en "tps" o tics por segundo (al igual que FPS en gráficos), que puede ver desde la ventana de codificación cada vez que su dispositivo está encendido. Cuanto más complejo y exigente sea su dispositivo, menor será su tps, al igual que un juego gráficamente exigente tendrá un FPS más bajo.

De todos modos, para usar la función de actualización (), simplemente agregue esto en la parte superior de su código:

Todas las funciones deben tener un final, por lo que en la parte inferior de su código, simplemente agregue una línea que diga "fin".

Ahora encienda su dispositivo y mueva el interruptor un montón, y verá que nuestro LED se enciende y apaga con el interruptor como queríamos. ¡Felicitaciones!

Entonces, para resumir, cualquier cosa que tenga que cambiar en vivo debe colocarse dentro de una función de actualización (). Como presionar un botón, accionar un interruptor, mover un control deslizante o una perilla. El código dentro de la función actualizar () se ejecutará en cada marca. El código fuera de él solo se ejecutará una vez.

Los botones funcionan de manera muy similar a un interruptor, en el hecho de que genera un valor booleano. Pero lo hace de diferentes maneras:

El comando "ButtonState" será el ideal aquí, ya que generará un valor de "verdadero" siempre que se presione el botón. Los otros dos solo generarán un solo tic. Eso no es lo que quiero, quiero que el botón funcione mientras lo presiono, así que usaré ButtonState en la próxima tarea.

Disponemos de un interruptor para encender y apagar el LED. Podríamos usar el botón para hacer lo mismo reemplazando el código del interruptor con esto:

Pero quiero usar el botón para hacer otra cosa, en lugar de tener 2 entradas para hacer lo mismo. Quiero que el LED cambie a un color diferente mientras mantengo presionado el botón y que vuelva a cambiar cuando lo suelte. Entonces, dejé el código en su lugar que usa el interruptor para encender y apagar el LED.

Como puede ver en la imagen de arriba, he cambiado el color de mi LED a verde. ¿Qué pasa si quiero que el LED esté rojo cuando presiono y mantengo presionado el botón? Podemos hacer eso usando un declaración si / entonces.

Agregue el siguiente código al final del programa (pero antes del "fin" de la función de actualización):

Sangrar la segunda línea con una tecla TAB es una buena práctica para mantener su código organizado y legible, pero no es obligatorio.

Lo que hace este código es decirle a la computadora "Si se presiona el botón, entonces haga que el LED sea de color rojo". Al usar una declaración si/entonces, se especifica un condición – que el estado del botón sea “verdadero” o que esté siendo presionado. Cuando se cumple la condición, como cuando se presiona el botón, ejecutará el código dentro de la instrucción que establecerá el color del LED en rojo. Además, observe los signos de doble igual en la línea de condición. Así es como deben escribirse las condiciones.

Ahora, cuando enciendo mi dispositivo y presiono el interruptor, mi LED se ilumina en verde. Cuando presiono el botón, se vuelve rojo y vuelve a ser verde cuando suelto el botón. ¡Hurra! Ahora, si no tuviera ese “gdt.Led0.Color = Color(0, 255, 0) en la parte superior, el color no volvería a ser verde. Permanecería en rojo porque no hay un código que especifique de qué color debe ser si NO se presiona el botón. Podrías dejarlo como lo tenía yo, pero otra forma de manejar esa tarea sería agregar un más después de la instrucción si/entonces.

Es bastante autoexplicativo. Le dice a la computadora “si el estado del botón es verdadero, configure el color del LED en rojo. De lo contrario, establezca el color del LED en verde”.

Ahora, al igual que antes, podemos encender nuestra luz y alternar el botón hacia adelante y hacia atrás para hacer que el LED cambie de color, y nuestro código se ve un poco más limpio que antes gracias a la declaración si/entonces.

Ok, ahora somos expertos booleanos. Trabajemos con algo diferente. Los controles deslizantes y las perillas son diferentes, no generan valores booleanos, sino que generan un valor numérico. Un control deslizante va de 0 a 100, mientras que una perilla tiene un rango negativo y va de -100 a 100.

Hagamos algo diferente usando el control deslizante. Lo usaremos para controlar el nivel azul en el LED. Para hacer eso, cambiemos las dos funciones de "color" dentro de la instrucción si/entonces de colores predefinidos a RGB, así.

Ahora, hasta este punto, cada vez que uso la función de color RGB, como se muestra arriba, especifico los valores RGB yo mismo usando un número fijo. 255 rojo, 0 verde, 0 azul o 0 rojo, 255 verde, 0 azul. No tiene que configurarlo codificando, puede configurarlo usando cualquier cosa que genere un número. ¡Ver este!

Esta línea de código le dice a la computadora que los valores rojo y verde son 0, y que el valor azul es cualquiera que sea el valor del control deslizante. Pero espere, ¡el control deslizante solo va de 0 a 100 y el rango RGB es de 0 a 255! ¡Entonces tenemos que multiplicar el valor de ese control deslizante por 2.55 al mismo tiempo!

Ok, esto está empezando a verse un poco desordenado. Aquí es donde las variables Ser util. Una variable almacena información bajo un nombre que usted especifique. Pongamos todo este galimatías azul en una variable para que no tengamos que escribir toda esta ecuación varias veces. En la parte superior del programa (pero dentro de la función de actualización) agregue:

La palabra "local" crea una variable, y después de eso es lo que quieres llamar a la variable. He llamado a la variable "azul" porque el propósito de la variable es almacenar el valor del color azul. Aunque puedes llamarlo como quieras.

Ahora, en lugar de escribir "gdt.Slider0.Value * 2.55" en lugar del valor azul en la función RGB, podemos usar el nombre de la variable, que es "azul":

Ahora, podemos encender nuestro dispositivo y usar el control deslizante para establecer el nivel azul de nuestro LED. Muy bien, ¿eh?

Podríamos usar la perilla para hacer lo mismo también, pero una perilla va de -100 a 100, por lo que la mitad de su rango no haría nada porque no puedes tener un valor RGB negativo. Entonces, en cambio, me gustaría hacer otra cosa, con eso, quiero imprimir el valor de la perilla en la pantalla que colocamos hace tanto tiempo debajo del LED.

Ya existe una buena guía sobre cómo representar texto en una pantalla. léelo esta página antes de continuar

Una vez que sepa cómo mostrar texto en la pantalla, usemos nuestra pantalla para mostrar el valor de nuestra perilla. Agregue este código al final, sepárelo del resto de nuestro código usando un montón de teclas de Retorno. ¡Pero manténgalo dentro de la función de actualización!

Para aclarar lo que estamos haciendo aquí paso a paso, configuramos el chip de video del dispositivo en una variable llamada chip de video, configuramos la fuente integrada en una variable llamada fuente, emparejamos la pantalla con el chip de video y luego creamos una variable para nuestro valor de perilla. Luego, comenzamos cada marca limpiando la pantalla y luego dibujando el texto contenido en la variable de perilla en la pantalla. ¡Presiona el botón de encendido y veamos cómo sucede la magia!

¡Oh, oh, mi guía apesta otra vez! Es una broma. Estamos recibiendo un error porque el comando DrawText requiere que el texto sea un cadena, no un número (llamado entero en programación). Una cadena es una serie de caracteres que se interpretan literalmente, en otras palabras, se muestran exactamente como se ingresaron.

Entonces, para mostrar el valor de nuestra perilla en la pantalla, tenemos que convertir su valor en una cadena. Afortunadamente, es muy fácil, solo tenemos que modificar una sola línea de código: la línea donde creamos la variable de perilla. En vez de:

Lo modificaremos así:

Esto convertirá el valor de la perilla en una cadena. Ahora, podemos encender nuestro dispositivo, ¡y listo!

¡Este es nuestro producto completamente terminado! El interruptor enciende y apaga nuestro LED, el botón lo cambia entre verde y rojo, el control deslizante controla el nivel de azul y la pantalla muestra el valor de la perilla. ¡Terminamos!