Archives pour l'étiquette menu

Crée tes propres menus sans limite !

Aujourd’hui nous allons apprendre quelque chose qui vous sera extrêmement utile dans vos programmes Lua.
Vous connaissez surement ces fameux menus sur la plupart des applications de votre TI-nspire, que l’on ouvre avec la touche menu, et ou l’on peut soit choisir l’option avec le touchpad, soit sélectionner une lettre ou un chiffre pour exécuter la commande.
Vous devriez penser que reproduire cela sur vos applications Lua est très peu envisageable, vue qu’il faudrait beaucoup de code pour reproduire ces menus de manière exacte.
Pourtant, c’est bien plus simple que vous ne le pensez.

En effet, depuis l’os 3.0, le Lua intègre une fonction très intéressante, la fonction toolpalette.register.
Mais comment elle fonctionne ?
Ce que nous allons faire maintenant, c’est créer une table (si vous ne connaissez pas ce genre de variable en Lua, allez vous renseigner).
Une table qui va contenir toutes les informations nécessaires à notre menu. Voici donc un exemple qui vous fera comprendre plus vite que des mots :

votreTable = {
    {"Couleur",  --Menu parent
        {"Rouge"},  -- Sous options
        {"Vert"},
        {"Bleue"}
    }
}

Notez que vous pouvez très bien construire votre table de la manière suivante :

 votreTable = {{"Couleur",{"Rouge"},{"Vert"},{"Bleue"}}}

Mais la manière montrée au dessus est bien plus claire et lisible, grâce à l’indentation.

Si vous l’avez bien compris, ce menu va nous servir d’abord à choisir l’option Couleur, puis choisir notre couleur entre Rouge, Vert et Bleue.
Super, vous avez crée votre table, qu’est ce qui vous reste à faire ?
Nous allons simplement utiliser le toolpalette.register cité plus haut :

toolpalette.register(votreTable)

Et voila, vous pouvez essayer et voire votre magnifique menu ! …Mais que ce passe-t-il, Erreur ?
Oui, comme l’indique votre erreur, vous devez associer une fonction à votre table. Sinon votre menu ne servirait qu’à décorer.
Notre superbe menu sert à changer la couleur du fond, nous allons donc devoir faire quelques réglages avant de pouvoir admirer le travail.

D’abord, nous allons créer la fonction qui changera notre couleur. Nous allons l’appeler changerCouleur(menuparent,option).
Les deux arguments de cet fonction sont prédéfinis par toolpalette, le premier renvoie le menu parent (ici, l’option « Couleur ») tandis que l’autre renvoie l’option qu’on a sélectionné (Rouge, Vert ou Bleue)
Nous allons également créer une table couleurdufond qui contiendra l’information de quelle est la couleur du fond (par défaut, le blanc : {255,255,255}).
Il nous suffit juste de rajouter un misérable test « If » pour changer la variable couleurdufond en fonction de notre choix d’option.
Voila ce que ca donne :

couleurdufond = {255,255,255}
 
function changerCouleur(menuparent,option)
    if option=="Rouge" then
        couleurdufond = {255,0,0}
    elseif option=="Vert" then
        couleurdufond = {0,255,0}
    elseif option=="Bleue" then
        couleurdufond = {0,0,255}
    end
    platform.window:invalidate()
end

Notez le platform.window:invalidate() à la fin de la fonction changerCouleur, qui sert à appeler on.paint(gc) pour repeindre l’écran avec la nouvelle couleur.
Voila, c’est presque terminé. Plus qu’à coder notre fonction on.paint(gc) :

w = platform.window:width()
h = platform.window:height()
 
function on.paint(gc)
    gc:setColorRGB(unpack(couleurdufond))
    gc:fillRect(0,0,w,h)
end

Le unpack comme son nom l’indique, sert simplement à « casser » la table pour revoyer les valeures qu’elle contient une par une.

Et voila le tant attenu résultat :

Et le beau code source qui va avec :

w = platform.window:width()
h = platform.window:height()
 
couleurdufond = {255,255,255}
 
function changerCouleur(menuparent,option)
    if option=="Rouge" then
        couleurdufond = {255,0,0}
    elseif option=="Vert" then
        couleurdufond = {0,255,0}
    elseif option=="Bleue" then
        couleurdufond = {0,0,255}
    end
    platform.window:invalidate()
end
 
votreTable = {
    {"Couleur",
        {"Rouge",changerCouleur},
        {"Vert",changerCouleur},
        {"Bleue",changerCouleur}
    }
}
 
toolpalette.register(votreTable)
 
function on.paint(gc)
    gc:setColorRGB(unpack(couleurdufond))
    gc:fillRect(0,0,w,h)
end

Nous allons maintenant apprendre à activer/désactiver une option, grâce à la fonction toolpalette.enable(menuparent,option,booléen)
Comme pour notre fonction changerCouleur, l’argument menuparent renvoie « Couleur » alors que l’option renvoie Rouge, Vert ou Bleue.
Si on veut activer l’option, on indique true en dernier argument, sinon, on indique false.
Pour l’exemple, nous allons désactiver l’option Vert :

toolpalette.enable("Couleur","Vert",false)

Voila ce que ça donne :

Pour finir, une bonne petite astuce : la création de raccourcis, très utiles pour éviter d’avoir à chaque fois de réouvrir le menu.
Il vous suffira juste d’indiquer quel est le raccourci dans le menu, et de créer votre fonction on.charIn(touche) :

Ici, notre raccourci seront les touches « r », « v » ou « b » :

function on.charIn(touche)
    if touche=="r" then
        couleurdufond = {255,0,0}
    elseif touche=="v" then
        couleurdufond = {0,255,0}
    elseif touche=="b" then
        couleurdufond = {0,0,255}
    end
    platform.window:invalidate()
end

Et voila, c’est finit, vous maîtrisez les menus maintenant. C’est à vous de libérer votre créativité et coder des programmes epoustouflants en Lua, amusez vous bien 😉

Téléchargement du fichier : Classeur1