Gadgets rétro : Guide de programmation de base (boutons, interrupteurs, boutons, etc.)

Retro Gadgets a une variété de composants que vous pouvez utiliser pour fournir une entrée utilisateur à vos gadgets. Nous disposons d'un assortiment de boutons, commutateurs, boutons, curseurs, etc. Dans ce guide, je vais vous montrer comment utiliser ces composants et les coder dans votre gadget.

Ce guide est destiné à ceux qui ont peu ou pas d'expérience en programmation et servira également de cours intensif rapide sur les bases de la programmation et de Lua. Je vais essayer de garder ce guide aussi rapide et concis que possible.

Nous allons commencer par assembler un nouveau gadget à partir de zéro. Sortez votre multitool du côté gauche de l'écran et créez un nouveau gadget à partir du menu principal, ou rangez votre actuel dans le tiroir des archives. Dans notre nouveau gadget, utilisons le plus grand plateau carré. Allez dans le tiroir des planches et sortez-en une, c'est la quatrième en partant du haut, et placez-la sur votre bureau.

Sortez-en un deuxième et connectez-le à l'autre, puis utilisez le fer à souder pour les "fusionner" ensemble.

Maintenant, nous allons commencer avec un simple interrupteur marche/arrêt. Allez dans le tiroir des entrées, trouvez les commutateurs et placez celui de votre choix sur votre gadget (pour votre information, vous pouvez le faire pivoter à l'aide d'un clic RMB). J'ai mis le mien dans le coin gauche pour faire de la place pour d'autres trucs plus tard. Ensuite, nous avons besoin d'un composant de sortie quelconque. Dirigez-vous vers le tiroir de sortie, accédez aux LED et saisissez une seule LED (pas une multi-LED) et placez-la sur le côté droit de votre gadget. J'ai choisi la LED de forme carrée.

Gagnons du temps plus tard et continuons à ajouter le reste des pièces que nous allons utiliser dans ce guide. Placez un bouton, un bouton et un curseur de votre choix (des petits cependant) sur le côté gauche, puis placez un petit écran sur le côté droit de votre gadget, sous la LED. Je suis également allé de l'avant et l'ai peint à des fins de visualisation, mais vous n'êtes pas obligé de le faire. Voici ma configuration à ce stade:

Rouge : interrupteur marche/arrêt
Jaune : Bouton
Bleu : Bouton
Vert : curseur

Nous avons également besoin d'un processeur, d'une ROM et d'une puce vidéo du tiroir Misc. Ne vous inquiétez pas, je vous expliquerai tout plus tard, mais pour l'instant, prenez simplement le plus petit de chacun et placez-le sur votre gadget. Il n'y aura pas de place à l'avant du tableau, alors retirez le couvercle et retournez le tableau et placez-les à l'arrière.

Notre appareil est entièrement assemblé pour le guide, alors commençons par la programmation. Faites glisser votre multitool depuis la gauche, puis accédez au menu principal, Modifier le gadget. Cliquez ensuite sur Modifier sur la page du gadget et la liste des ressources s'affichera. Il y aura un fichier "CPU0.lua" là-bas. Cliquez dessus, puis cliquez sur Modifier, et cela vous amènera à l'écran de codage où vous pourrez programmer votre CPU. Le CPU est le "cerveau" de votre gadget et c'est là que va toute votre programmation. C'est ce qui indique à tous les autres composants quoi faire. Ignorez le code déjà présent. Sélectionnez tout avec Ctrl-A et supprimez-le. Je vais vous expliquer ce qu'était ce truc (et vous l'utiliserez plus tard) mais je crois qu'il vaut mieux apprendre en partant de rien. Vous verrez pourquoi.

Lua est un langage très simple et convivial pour les débutants. Si vous n'avez jamais codé auparavant, ne vous inquiétez pas, ce guide vous est destiné et je vais vous expliquer ce que tout signifie et comment cela fonctionne. La toute première chose que nous voulons faire est d'allumer la LED. Ajoutez la ligne de code suivante à votre programme, en gardant à l'esprit qu'il est sensible aux majuscules et minuscules:

Vous remarquerez au fur et à mesure que vous tapez qu'une fenêtre contextuelle est apparue, vous donnant des suggestions de remplissage automatique. C'est un outil très précieux pour un nouveau programmeur, ne le négligez pas. Il fournit une liste des moyens disponibles pour compléter le code et fournit une description simple de la signification de chaque élément. Vous pouvez utiliser les flèches haut et bas pour mettre en évidence différentes choses et afficher leurs descriptions.

Maintenant, examinons cette ligne de code que nous venons d'ajouter :

Ce code comporte différentes parties, séparées par des points et un signe égal. La première partie « gdt » est appelée un espace de base. C'est un morceau de code qui vous permet d'accéder aux composants du gadget (l'interrupteur, les boutons, la LED, etc.) et de l'utiliser dans la ligne de code actuelle. Pensez-y comme si vous ouvriez un dossier sur votre ordinateur. Pour accéder aux fichiers à l'intérieur du dossier, vous devez d'abord ouvrir le dossier. Cela fonctionne de la même manière dans le codage, nos composants sont des "fichiers" à l'intérieur d'un "dossier" qui est le gadget lui-même, et pour accéder aux composants du gadget, nous devons "ouvrir le dossier" en appelant le "gdt" basic espace. Après avoir tapé "gdt." avec un point, vous verrez une liste de tous les composants du gadget.

La partie suivante, "Led0" est le nom de notre LED. Vous pouvez voir le nom de n'importe quel composant en cliquant dessus lorsque l'appareil est éteint. Après avoir ajouté un point à la fin, deux autres commandes possibles s'afficheront : Couleur et État. L'État est un booléen ce qui signifie qu'il est activé ou désactivé, signifié par "vrai" ou "faux". En ajoutant "true", nous avons permis à notre LED de s'allumer chaque fois que l'appareil est sous tension. Alors, allez-y et appuyez sur le bouton d'alimentation et voyez la LED s'allumer.

Nous pouvons aussi changer la couleur. Entrez ce code :

Il existe plusieurs options de couleur, comme vous l'avez peut-être vu. Nous avons la possibilité de sélectionner une couleur prédéfinie comme nous venons de le faire en utilisant le code ci-dessus (et recevons une liste des couleurs disponibles dans la fenêtre de remplissage automatique) ou nous pouvons créer notre propre couleur en spécifiant nous-mêmes les valeurs RVB que nous pourrions faire comme ça:

Cela rendra également la LED verte. Notez que "Couleur" est en majuscule dans celui-ci, pour le différencier de la couleur prédéfinie que nous utilisions auparavant. Lua est sensible à la casse, souvenez-vous toujours de cela. Les trois nombres entre parenthèses sont respectivement les valeurs du rouge, du vert et du bleu, sur une échelle de 0 à 255. Jouez avec ces nombres et voyez quel type de couleurs vous obtenez, n'oubliez pas de les séparer par une virgule.

Donnez à la LED la couleur de votre choix en utilisant la méthode de votre choix, puis continuons.

Notre tâche suivante consiste à allumer la LED lorsque nous actionnons l'interrupteur.

Un interrupteur est allumé ou éteint. Je sais, Capitaine Obvious. Je dis cela parce que c'est une visualisation de valeurs booléennes. Un interrupteur est activé ou désactivé et émet un booléen "vrai" ou "faux" selon l'état dans lequel il se trouve.

Supprimez le code Led State que nous avons ajouté auparavant :

Vous pouvez laisser votre code couleur en place si vous le souhaitez. Ce code fait en sorte que la LED soit allumée à chaque fois que l'appareil est sous tension. Nous voulons qu'il ne s'allume que lorsque l'interrupteur est allumé. C'est très simple à faire, il suffit d'utiliser la ligne de code suivante :

Nous disons littéralement à l'ordinateur "l'état de la LED est le même que l'état de l'interrupteur". Ainsi, si l'état de l'interrupteur est activé ou "vrai", cela rendra également l'état de la LED vrai. Appuyons sur le bouton d'alimentation et voyons notre magnifique LED briller de luminosité !

.. Oh oh, quelque chose ne va pas. La LED ne s'allume pas même après avoir allumé l'interrupteur. Ce guide est nul ! Mais attendez une seconde, si je laisse l'interrupteur allumé, puis éteignez le bouton d'alimentation et rallumez-le, la LED s'allume. Surprise, je viens de démontrer le travail du fonction mise à jour(), qui est le code qui était dans notre programme par défaut lorsque nous avons créé notre nouveau gadget et ouvert l'écran de codage du processeur pour la première fois. Vous voyez, sans la fonction de mise à jour, le code que nous entrons n'est exécuté qu'une seule fois, à commencer par la mise sous tension du gadget. Il n'exécutera plus le code jusqu'à la prochaine mise sous tension. Ainsi, lorsque nous l'allumons, il regarde l'état de l'interrupteur, voit que l'interrupteur est éteint, et n'allume donc pas la LED. Ensuite, lorsque nous activons l'interrupteur, rien ne se passe car le code a déjà été exécuté et il ne recherche plus de changement dans l'état de l'interrupteur. De même, si nous laissons l'interrupteur allumé, puis éteignons et rallumons le gadget, il exécute à nouveau le code et voit que l'interrupteur est allumé, et allume également la LED.

L'utilisation de la fonction update() signifie que tout code placé dans la fonction sera exécuté à chaque nouveau tick. Vous pouvez considérer une coche comme une image individuelle lors du rendu de graphiques. Votre appareil fonctionne à une vitesse définie en "tps" ou ticks par seconde (tout comme les FPS dans les graphiques), que vous pouvez voir dans la fenêtre de codage chaque fois que votre gadget est allumé. Plus votre gadget est complexe et exigeant, plus votre tps peut baisser, tout comme un jeu graphiquement exigeant aura des FPS inférieurs.

Quoi qu'il en soit, pour utiliser la fonction update(), ajoutez simplement ceci tout en haut de votre code :

Toutes les fonctions doivent avoir une fin, donc tout en bas de votre code, ajoutez simplement une ligne qui dit simplement "fin".

Maintenant, allumez votre gadget et actionnez l'interrupteur un tas, et vous verrez notre LED s'allumer et s'éteindre avec l'interrupteur comme nous le voulions. Félicitations!

Donc, pour résumer, tout ce qui doit changer en direct doit être placé dans une fonction update(). Comme appuyer sur un bouton, actionner un interrupteur, déplacer un curseur ou un bouton. Le code de la fonction update() sera exécuté à chaque tick. Le code en dehors de celui-ci ne s'exécutera qu'une seule fois.

Les boutons fonctionnent de manière très similaire à un commutateur, dans le sens où ils génèrent une valeur booléenne. Mais il le fait de différentes manières :

La commande "ButtonState" sera la commande idéale ici, car elle affichera une valeur "true" tant que le bouton sera enfoncé. Les deux autres ne sortiront que pour un seul tick. Ce n'est pas ce que je veux, je veux que le bouton fonctionne tant que j'appuie dessus, donc j'utiliserai ButtonState dans cette prochaine tâche.

Nous avons un interrupteur pour allumer et éteindre la LED. Nous pourrions utiliser le bouton pour faire la même chose en remplaçant le code du commutateur par ceci :

Mais je veux utiliser le bouton pour faire autre chose à la place, plutôt que d'avoir 2 entrées faisant la même chose. Je souhaite que la LED change de couleur pendant que je maintiens le bouton enfoncé et revienne lorsque je relâche. Donc, j'ai laissé le code en place qui utilise l'interrupteur pour allumer et éteindre la LED.

Comme vous pouvez le voir sur l'image ci-dessus, j'ai changé la couleur de ma LED en vert. Que se passe-t-il si je veux que le voyant soit rouge lorsque j'appuie sur le bouton et que je le maintiens enfoncé ? Nous pouvons le faire en utilisant un instruction si/alors.

Ajoutez le code suivant en bas du programme (mais avant la « fin » de la fonction de mise à jour) :

L'indentation de la deuxième ligne avec une touche TAB est une bonne pratique pour garder votre code organisé et lisible, mais pas obligatoire.

Ce que fait ce code, c'est dire à l'ordinateur "Si le bouton est enfoncé, alors mettez la LED en rouge". Lors de l'utilisation d'une instruction if/then, vous spécifiez un condition – que l'état du bouton est "vrai" ou qu'il est enfoncé. Lorsque la condition est remplie, par exemple lorsque le bouton est enfoncé, il exécute le code à l'intérieur de l'instruction qui doit définir la couleur de la LED sur rouge. Notez également les doubles signes égal dans la ligne de condition. C'est ainsi que les conditions doivent être écrites.

Maintenant, lorsque j'allume mon appareil et que j'appuie sur l'interrupteur, ma LED s'allume en vert. Lorsque j'appuie sur le bouton, il devient rouge et redevient vert lorsque je relâche le bouton. Hourra ! Maintenant, si je n'avais pas ce "gdt.Led0.Color = Color(0, 255, 0) en haut, la couleur ne reviendrait pas au vert. Il resterait rouge car il n'y a pas de code spécifiant de quelle couleur il devrait être si le bouton n'est PAS enfoncé. Vous pouvez le laisser comme je l'avais, mais une autre façon de gérer cette tâche serait d'ajouter un d'autre après l'instruction si/alors.

C'est assez explicite. Il dit à l'ordinateur "si l'état du bouton est vrai, réglez la couleur de la LED sur rouge. Sinon, réglez la couleur de la LED sur le vert ».

Maintenant, comme avant, nous pouvons allumer notre lumière et basculer le bouton d'avant en arrière pour que la LED change de couleur, et notre code semble un peu plus propre qu'avant grâce à l'instruction if/then.

Ok, nous sommes des experts booléens maintenant. Travaillons avec quelque chose de différent. Les curseurs et les boutons sont différents, ils ne produisent pas de valeurs booléennes, mais produisent une valeur numérique. Un curseur va de 0 à 100, tandis qu'un bouton a une plage négative et va de -100 à 100.

Faisons quelque chose de différent en utilisant le curseur. Nous l'utiliserons pour contrôler le niveau de bleu dans la LED. Pour ce faire, changeons plutôt les deux fonctions "couleur" dans l'instruction if/then de couleurs prédéfinies en RVB, comme ceci.

Maintenant, jusqu'à présent, chaque fois que j'utilise la fonction de couleur RVB, comme indiqué ci-dessus, je spécifie moi-même les valeurs RVB à l'aide d'un nombre dur. 255 rouge, 0 vert, 0 bleu ou 0 rouge, 255 vert, 0 bleu. Vous n'avez pas besoin de le définir en le codant en dur, vous pouvez le définir en utilisant tout ce qui génère un nombre. Regarde ça!

Cette ligne de code indique à l'ordinateur que les valeurs rouge et verte sont 0 et que la valeur bleue est quelle que soit la valeur du curseur. Mais attendez, le curseur ne va que de 0 à 100 et la plage RVB est de 0 à 255 ! Nous devons donc multiplier la valeur de ce curseur par 2.55 en même temps !

Ok, ça commence à être un peu brouillon. C'est ici que les variables être utile. Une variable stocke des informations sous un nom que vous spécifiez. Mettons tout ce charabia bleu dans une variable afin que nous n'ayons pas à taper toute cette équation plusieurs fois. En haut du programme (mais dans la fonction de mise à jour) ajoutez :

Le mot "local" crée une variable, et après c'est ce que vous voulez appeler la variable. J'ai appelé la variable "bleu" car le but de la variable est de stocker la valeur de la couleur bleue. Vous pouvez cependant l'appeler comme vous voulez.

Maintenant, au lieu de taper "gdt.Slider0.Value * 2.55" à la place de la valeur bleue dans la fonction RVB, nous pouvons simplement utiliser le nom de la variable, qui est "bleu":

Maintenant, nous pouvons allumer notre gadget et utiliser le curseur pour régler le niveau de bleu de notre LED. Plutôt cool, hein ?

Nous pourrions également utiliser le bouton pour faire la même chose, mais un bouton va de -100 à 100, donc la moitié de sa plage ne ferait rien car vous ne pouvez pas avoir une valeur RVB négative. Donc, à la place, j'aimerais faire autre chose, avec ça, je veux imprimer la valeur du bouton sur l'écran que nous avons placé il y a tout ce temps sous la LED.

Il existe déjà un bon guide sur la façon de rendre du texte sur un écran. Lis le ici avant de continuer.

Une fois que vous savez comment afficher du texte à l'écran, utilisons notre écran pour afficher la valeur de notre bouton. Ajoutez ce code en bas, séparez-le du reste de notre code en utilisant un groupe de touches de retour. Mais gardez-le dans la fonction de mise à jour !

Pour clarifier ce que nous faisons ici étape par étape, nous avons défini la puce vidéo du gadget sur une variable appelée puce vidéo, nous avons défini la police intégrée sur une variable appelée police, nous avons associé l'écran à la puce vidéo, puis avons créé une variable pour notre valeur de bouton. Ensuite, nous commençons chaque tick en effaçant l'écran, puis en dessinant le texte contenu dans la variable du bouton à l'écran. Appuyez sur le bouton d'alimentation et voyons la magie opérer !

Oh oh, mon guide craint encore ! Je rigole. Nous obtenons une erreur car la commande DrawText nécessite que le texte soit un un magnifique, pas un nombre (appelé entier en programmation). Une chaîne est une série de caractères qui sont interprétés littéralement, c'est-à-dire affichés exactement tels qu'ils ont été saisis.

Donc, pour afficher la valeur de notre bouton à l'écran, nous devons convertir sa valeur en une chaîne. Heureusement, c'est si simple, nous n'avons qu'à modifier une seule ligne de code - la ligne où nous créons la variable de bouton. À la place de:

Nous allons le modifier comme ceci :

Cela convertira la valeur du bouton en une chaîne. Maintenant, nous pouvons allumer notre gadget, et voilà !

Ceci est notre produit entièrement fini! L'interrupteur allume et éteint notre LED, le bouton la fait passer du vert au rouge, le curseur contrôle le niveau de bleu et l'écran affiche la valeur du bouton. Nous avons finis!