Retro Gadgets: guia básico de programação (botões, interruptores, botões giratórios e mais)

O Retro Gadgets tem uma variedade de componentes que você pode usar para fornecer informações do usuário aos seus gadgets. Somos fornecidos com uma variedade de botões, interruptores, botões giratórios, controles deslizantes e muito mais. Neste guia, demonstrarei como usar esses componentes e codificá-los em seu gadget.

Este guia destina-se àqueles que têm pouca ou nenhuma experiência em programação e também servirá como um rápido curso intensivo sobre os fundamentos da programação e da Lua. Vou tentar manter este guia o mais rápido e conciso possível.

Começaremos montando um novo gadget do zero. Puxe sua multiferramenta do lado esquerdo da tela e crie um novo gadget no menu principal ou guarde o atual na gaveta do arquivo. Em nosso novo gadget, vamos usar o maior tabuleiro quadrado. Vá até a gaveta das tábuas e puxe uma delas, é a quarta de cima para baixo, e coloque-a em sua mesa.

Puxe um segundo e conecte-o ao outro, depois use o ferro de solda para “fundi-los”.

Agora, vamos começar com um simples botão liga/desliga. Vá para a gaveta de entradas, encontre os interruptores e coloque um de sua escolha em seu gadget (para sua informação, você pode girá-lo usando um clique de RMB). Coloquei o meu no canto esquerdo para dar espaço para outras coisas depois. Em seguida, precisamos de algum tipo de componente de saída. Vá para a gaveta de saída, vá para os LEDs e pegue um único LED (não um multi-LED) e coloque-o no lado direito do seu gadget. Eu escolhi o LED em forma de quadrado.

Vamos economizar algum tempo depois e adicionar o restante das peças que usaremos neste guia. Coloque um botão, botão giratório e controle deslizante de sua escolha (pequenos, porém) no lado esquerdo e, em seguida, coloque uma pequena tela no lado direito do seu gadget, sob o LED. Eu também pintei para fins de visualização, mas você não precisa fazer isso. Aqui está a minha configuração neste momento:

Vermelho: Interruptor liga/desliga
Amarelo: Botão
Azul: botão
Verde: controle deslizante

Também precisamos de uma CPU, ROM e chip de vídeo da gaveta Misc. Não se preocupe, explicarei tudo mais tarde, mas por enquanto pegue o menor de cada um e coloque-os no seu gadget. Não haverá espaço na frente do quadro, então abra a tampa e vire o quadro e coloque-os na parte de trás.

Nosso dispositivo está totalmente montado para o guia, então vamos começar a programação. Deslize sua multiferramenta da esquerda e vá para o menu principal, Edit Gadget. Em seguida, clique em Editar na página do gadget para abrir a lista de ativos. Haverá um arquivo “CPU0.lua” lá. Clique nele, depois clique em Editar, e você será levado para a tela de codificação onde poderá programar sua CPU. A CPU é o “cérebro” do seu gadget e é onde vai toda a sua programação. É o que diz a todos os outros componentes o que fazer. Ignore o código que já está lá. Selecione tudo isso com Ctrl-A e exclua-o. Vou explicar o que era aquilo (e você vai usar depois), mas acredito que é melhor aprender começando do nada. Você verá o porquê.

Lua é uma linguagem muito simples e amigável para iniciantes. Se você nunca codificou antes, não se preocupe, este guia é destinado a você e explicarei o que tudo significa e como funciona. A primeira coisa que queremos fazer é ligar o LED. Adicione a seguinte linha de código ao seu programa, lembrando que é maiúsculas e Minúsculas:

Você notará enquanto digita que um pop-up apareceu, dando-lhe sugestões de preenchimento automático. Esta é uma ferramenta muito valiosa para um novo programador, não a ignore. Ele fornece uma lista de maneiras disponíveis para completar o código e fornece uma descrição simples do que cada item significa. Você pode usar as setas para cima e para baixo para destacar coisas diferentes e visualizar suas descrições.

Agora, vamos examinar a linha de código que acabamos de adicionar:

Existem diferentes partes desse código, separadas por pontos e um sinal de igual. A primeira parte “gdt” é chamada de espaço básico. É um pedaço de código que permite acessar os componentes do gadget (interruptor, botões, LED, etc) e usá-lo na linha de código atual. Pense nisso como abrir uma pasta em seu computador. Para acessar os arquivos dentro da pasta, primeiro você deve abrir a pasta. Funciona da mesma forma na codificação, nossos componentes são “arquivos” dentro de uma “pasta” que é o próprio gadget, e para acessar os componentes do gadget temos que “abrir a pasta” chamando o “gdt” básico espaço. Depois de digitar “gdt.” com um ponto, você verá uma lista de todos os componentes do gadget.

A próxima parte, “Led0” é o nome do nosso LED. Você pode ver o nome de qualquer componente clicando nele enquanto o dispositivo está desligado. Depois de adicionar um ponto ao final, serão mostrados outros dois comandos possíveis: Color e State. estado é um booleano significando que está ligado ou desligado, representado por “verdadeiro” ou “falso”. Ao adicionar “true” permitimos que nosso LED acenda sempre que o dispositivo estiver ligado. Então, vá em frente e aperte o botão liga / desliga e veja o LED acender.

Podemos mudar a cor também. Digite este código:

São várias opções de cores, como você já deve ter visto. Temos a opção de selecionar uma cor predefinida, como acabamos de fazer usando o código acima (e recebemos uma lista de cores disponíveis no pop-up de preenchimento automático) ou podemos criar nossa própria cor especificando os valores RGB, o que poderíamos fazer assim:

Isso também tornará o LED verde. Observe que “Cor” está em maiúscula neste aqui, para diferenciá-la da cor pré-definida que usamos anteriormente. Lua diferencia maiúsculas de minúsculas, lembre-se sempre disso. Os três números entre parênteses são os valores de vermelho, verde e azul, respectivamente, em uma escala de 0 a 255. Brinque com esses números e veja que tipo de cores você obtém, lembre-se de separá-los com uma vírgula.

Faça o LED da cor que você quiser usando o método que quiser, então vamos continuar.

Nossa próxima tarefa é fazer o LED acender quando ligamos o interruptor.

Um interruptor está ligado ou desligado. Eu sei, Capitão Óbvio. Digo isso porque é uma visualização de valores booleanos. Um interruptor está ligado ou desligado e emite um booleano “verdadeiro” ou “falso” dependendo do estado em que se encontra.

Exclua o código Led State que adicionamos antes:

Você pode deixar seu código de cores no lugar, se desejar. Esse código faz com que o LED fique aceso sempre que o dispositivo for ligado. Queremos que ele acenda apenas quando o interruptor estiver ligado. Isso é muito fácil de fazer, basta usar a seguinte linha de código:

Estamos literalmente dizendo ao computador “o estado do LED é o mesmo que o estado do interruptor”. Portanto, se o estado do switch estiver ligado ou “verdadeiro”, ele também tornará o estado do LED verdadeiro. Vamos apertar o botão liga / desliga e ver nosso glorioso LED brilhar com brilho!

.. Uh oh, algo está errado. O LED não está aceso mesmo depois que eu liguei o interruptor. Esse guia é uma merda! Mas espere um segundo, se eu deixar o interruptor ligado, desligue o botão liga / desliga e ligue novamente, o LED acende. Surpresa, acabei de demonstrar o trabalho do função update (), que é o código que estava em nosso programa por padrão quando criamos nosso novo gadget e abrimos a tela de codificação da CPU pela primeira vez. Veja bem, sem a função de atualização, o código que inserimos é executado apenas uma vez, começando quando ligamos o gadget. Ele não executará o código novamente até a próxima vez que for ligado. Assim, quando o ligamos, ele verifica o estado do interruptor, vê que o interruptor está desligado e, portanto, não acende o LED. Então, quando ligamos o switch, nada acontece porque o código já foi executado e não está mais procurando uma mudança no estado do switch. Da mesma forma, se deixarmos o interruptor ligado e, em seguida, desligarmos e ligarmos o gadget novamente, ele executará o código novamente, verá que o interruptor está ligado e definirá o LED para que fique aceso também.

Usar a função update() significa que qualquer código inserido na função será executado a cada novo tick. Você pode pensar em um tick como um quadro individual ao renderizar gráficos. Seu dispositivo funciona a uma velocidade definida em “tps” ou tiques por segundo (assim como FPS em gráficos), que você pode ver na janela de codificação sempre que seu gadget estiver ligado. Quanto mais complexo e exigente for o seu gadget, menor será o seu tps, assim como um jogo graficamente exigente terá menor FPS.

De qualquer forma, para usar a função update(), simplesmente adicione isso bem no topo do seu código:

Todas as funções precisam ter um fim, portanto, na parte inferior do seu código, basta adicionar uma linha que diga apenas “fim”.

Agora ligue seu gadget e gire o interruptor um monte, e você verá nosso LED ligar e desligar com o interruptor como queríamos. Parabéns!

Portanto, para resumir, qualquer coisa que precise ser alterada ao vivo deve ser colocada em uma função update(). Como apertar um botão, acionar um interruptor, mover um controle deslizante ou botão. O código dentro da função update() será executado a cada tick. O código fora dele será executado apenas uma vez.

Os botões funcionam de maneira muito semelhante a um switch, no fato de gerar um valor booleano. Mas ele faz isso de algumas maneiras diferentes:

O comando “ButtonState” será o ideal aqui, pois irá gerar um valor de “true” enquanto o botão estiver pressionado. Os outros dois serão produzidos apenas para um único tick. Não é isso que eu quero, quero que o botão funcione enquanto eu estiver pressionando, então usarei o ButtonState nesta próxima tarefa.

Temos um interruptor para ligar e desligar o LED. Poderíamos usar o botão para fazer a mesma coisa, substituindo o código do switch por este:

Mas eu quero usar o botão para fazer outra coisa, em vez de ter 2 entradas fazendo a mesma coisa. Quero fazer com que o LED mude para uma cor diferente enquanto mantenho o botão pressionado e mude de volta quando soltar. Então, deixei o código no lugar que usa o interruptor para ligar e desligar o LED.

Como você pode ver na imagem acima, mudei a cor do meu LED para verde. E se eu quiser que o LED fique vermelho quando eu pressionar e segurar o botão? Podemos fazer isso usando um declaração se/então.

Adicione o seguinte código ao final do programa (mas antes do “fim” da função de atualização):

Recuar a segunda linha com a tecla TAB é uma boa prática para manter seu código organizado e legível, mas não é obrigatório.

O que esse código faz é dizer ao computador “Se o botão for pressionado, faça o LED ficar vermelho”. Ao usar uma instrução if/then, você especifica um condição – que o estado do botão é “verdadeiro” ou que está sendo pressionado. Quando a condição for atendida, como quando o botão é pressionado, ele executará o código dentro da instrução que deve definir a cor do LED para vermelho. Além disso, observe os sinais de igual duplos na linha de condição. É assim que as condições devem ser escritas.

Agora, quando ligo meu dispositivo e aciono o botão, meu LED acende em verde. Quando pressiono o botão, ele fica vermelho e volta a ficar verde quando libero o botão. Viva! Agora, se eu não tivesse aquele “gdt.Led0.Color = Color(0, 255, 0) no topo, a cor não voltaria para verde. Ficaria vermelho porque não há nenhum código especificando qual deve ser a cor se o botão NÃO for pressionado. Você poderia deixar do jeito que eu fiz, mas outra forma de lidar com essa tarefa seria adicionar um outro após a instrução if/then.

É bastante auto-explicativo. Ele diz ao computador “se o estado do botão for verdadeiro, defina a cor do LED para vermelho. Caso contrário, defina a cor do LED para verde”.

Agora, assim como antes, podemos acender nossa luz e alternar o botão para frente e para trás para fazer o LED mudar de cor, e nosso código parece um pouco mais limpo do que antes, graças à instrução if/then.

Ok, agora somos especialistas booleanos. Vamos trabalhar com algo diferente. Controles deslizantes e botões são diferentes, eles não geram valores booleanos, em vez disso, eles geram um valor numérico. Um controle deslizante vai de 0 a 100, enquanto um botão tem uma faixa negativa e vai de -100 a 100.

Vamos fazer algo diferente usando o controle deslizante. Vamos usá-lo para controlar o nível de azul no LED. Para fazer isso, vamos alterar as duas funções de “cor” dentro da instrução if/then de cores predefinidas para RGB, assim.

Agora, até este ponto, sempre que estou usando a função de cor RGB, conforme mostrado acima, eu mesmo especifico os valores RGB usando um número concreto. 255 vermelho, 0 verde, 0 azul ou 0 vermelho, 255 verde, 0 azul. Você não precisa configurá-lo codificando-o, você pode configurá-lo usando qualquer coisa que gere um número. Vê isto!

Essa linha de código informa ao computador que os valores vermelho e verde são 0 e que o valor azul é qualquer que seja o valor do Slider. Mas espere, o controle deslizante vai apenas de 0 a 100 e o intervalo RGB é de 0 a 255! Portanto, temos que multiplicar o valor desse controle deslizante por 2.55 ao mesmo tempo!

Ok, isso está começando a parecer um pouco confuso. é aqui variáveis vir a calhar. Uma variável armazena informações sob um nome que você especifica. Vamos colocar todo esse jumbo azul em uma variável para que não tenhamos que digitar toda a equação várias vezes. No topo do programa (mas dentro da função de atualização) adicione:

A palavra “local” cria uma variável, e depois disso é como você deseja chamar a variável. Chamei a variável de “azul” porque o propósito da variável é armazenar o valor da cor azul. Você pode chamá-lo do que quiser, no entanto.

Agora, ao invés de digitar “gdt.Slider0.Value * 2.55” no lugar do valor azul na função RGB, podemos usar apenas o nome da variável, que é “blue”:

Agora, podemos ligar nosso gadget e usar o controle deslizante para definir o nível de azul de nosso LED. Muito legal, hein?

Poderíamos usar o botão para fazer a mesma coisa, mas um botão vai de -100 a 100, então metade de seu alcance não faria nada porque você não pode ter um valor RGB negativo. Em vez disso, gostaria de fazer outra coisa, com isso, quero imprimir o valor do botão na tela que colocamos há muito tempo atrás do LED.

Já existe um bom guia sobre como renderizar texto em uma tela. Leia-o SUA PARTICIPAÇÃO FAZ A DIFERENÇA antes de continuar.

Uma vez que você saiba como exibir o texto na tela, vamos usar nossa tela para exibir o valor do nosso botão. Adicione este código ao final, separe-o do resto do nosso código usando um monte de teclas Return. Mas mantenha-o dentro da função de atualização!

Para esclarecer o que estamos fazendo aqui, passo a passo, configuramos o chip de vídeo do gadget para uma variável chamada videochip, configuramos a fonte interna para uma variável chamada font, pareamos a tela com o videochip e criamos uma variável para nosso valor de botão. Em seguida, iniciamos cada tick limpando a tela e, em seguida, desenhando o texto contido na variável do botão na tela. Aperte o botão liga/desliga e vamos ver a mágica acontecer!

Uh oh, meu guia é péssimo de novo! Estou brincando. Estamos recebendo um erro porque o comando DrawText requer que o texto seja um corda, não um número (chamado inteiro na programação). Uma string é uma série de caracteres que são interpretados literalmente, ou seja, exibidos exatamente como inseridos.

Portanto, para exibir o valor de nosso botão na tela, temos que converter seu valor em uma string. Felizmente, isso é tão fácil que só precisamos modificar uma única linha de código – a linha onde criamos a variável do botão. Ao invés de:

Vamos modificá-lo assim:

Isso converterá o valor do botão em uma string. Agora, podemos ligar nosso gadget e pronto!

Este é o nosso produto totalmente acabado! O interruptor liga e desliga nosso LED, o botão muda entre verde e vermelho, o controle deslizante controla o nível de azul e a tela exibe o valor do botão. Nós terminamos!