Skip to content

Le Graphe

Le graphe est la base de la logique visuelle dans Luna Park. C'est ici que vous construirez la logique de votre application. Il se compose de nœuds, de liens et d'ancrages qui interagissent pour créer des flux logiques.

  • Nœuds : Un nœud représente une action, une condition ou une opération.
  • Ancrages : Chaque nœud possède des ancrages d'entrée et de sortie. Les ancrages d'entrée servent à recevoir des données, tandis que les ancrages de sortie envoient des données.
  • Fils : Les fils connectent les ancrages entre eux, formant un flux logique.
IcôneActionDescription
Clic gauche sur le grapheSélectionner le graphe (nécessaire pour zoomer)
Maintenir le clic droit et déplacerDéplacer le graphe le long des axes X et Y
Faire défiler sur le grapheZoomer avant et arrière
Maintenir le clic gauche et déplacerDessiner une boîte de sélection

Nœuds

Les nœuds sont les blocs de construction logique de base qui peuvent être placés sur le graphe. Il existe deux types principaux de nœuds :

  • Nœuds de Fonction : Ces nœuds ont un fond bleu. Ils possèdent des ancrages d'exécution d'entrée et/ou de sortie. Ils s'exécutent lorsque leur ancrage d'exécution d'entrée est déclenché.
  • Nœuds d'Opération : Ces nœuds ont un fond gris foncé. Ils ne possèdent pas d'ancrages d'exécution d'entrée et/ou de sortie. Ils s'exécutent lorsque leur ancrage de résultat est appelé par un nœud de fonction.

Capture d'écran de l'éditeur Luna Park

IcôneActionDescription
Clic gauche sur un nœudSélectionner le nœud
Maintenir le clic gauche et déplacerDéplacer le nœud
Ctrl
+
Clic Ctrl sur un nœudAjouter/retirer de la sélection
Delete
/
Backspace
Supprimer avec le nœud sélectionnéSupprimer le nœud

Ancrages

Les ancrages sont les interfaces des nœuds. Les ancrages d'entrée sont affichés à gauche, et les ancrages de sortie à droite. Il existe deux types d'ancrages :

  • Ancrages d'Exécution () Ces ancrages sont affichés avec une forme carrée arrondie à droite. Ils sont destinés à être connectés au flux d'exécution. Un nœud de fonction sera exécuté lorsque le flux d'exécution menant à ses ancrages d'exécution est déclenché. Ensuite, après son exécution, le nœud déclenchera son ancrage d'exécution de sortie.

  • Ancrages de Valeur ( / ) Ces ancrages sont affichés avec une forme circulaire lorsqu'ils contiennent une seule valeur, ou une forme carrée lorsqu'ils contiennent une liste (appelée tableau) de valeurs. Lors de l'utilisation des ancrages d'entrée, vous pouvez spécifier certains types, comme du texte ou un nombre, dans l'entrée à côté de l'ancrage. La couleur de l'ancrage dépend du type de valeur qu'il contient.

TypeExempleTypeExemple

Fils

Les fils sont les lignes qui connectent les ancrages entre eux dans un graphe logique. Leur apparence change en fonction de leur rôle :

  • Flux d'Exécution : Ils sont blancs et en gras pour représenter un flux d'exécution logique.
  • Flux de Valeur : Ils prennent la couleur du type de valeur qu'ils transportent (par exemple, vert pour un nombre, jaune pour du texte).

Notez que ce n'est pas un graphe logique bien conçu, il sert uniquement à présenter les fils, l'empilement des fils et les ancrages de réacheminement. Un graphe logique bien conçu devrait avoir un fil d'exécution aussi droit que possible, le rendant plus facile à lire.

IcôneActionDescription
Clic gauche sur un ancrage et déplacerCréer un fil partant de cet ancrage
Double clic sur un filCréer un nœud de réacheminement
Ctrl
+
Clic Ctrl sur un filSupprimer le fil survolé
Delete
/
Backspace
Supprimer avec le fil sélectionnéSupprimer le fil

Connexion des Ancrages

Les fils permettent de connecter des ancrages de types compatibles : Généralement, vous connecterez des ancrages d'entrée et de sortie du même type.

Cependant, vous pouvez également connecter un ancrage de sortie à un ancrage d'entrée moins défini. Par exemple, il est possible de connecter un ancrage de sortie d'un tableau de nombres à un ancrage d'entrée d'un tableau de type inconnu.

Exemple de Logique dans le Graphe

Dans cet exemple, nous avons une logique simple construite avec des nœuds et des fils dans le graphe.

Capture d'écran de l'éditeur Luna Park

Étape par Étape

  1. Déclencheur : "On Click (widget)"
    • Ce nœud représente un événement qui démarre l'exécution lorsqu'un utilisateur clique sur un élément de votre interface (par exemple, un bouton).
    • Le fil blanc (flux d'exécution) commence à partir de ce nœud et déclenche les actions suivantes.
  2. Lecture Set score
    • Ce nœud de fonction met à jour une valeur appelée score.
    • Il est exécuté par le flux d'exécution provenant de "On Click".
    • La connexion verte de score (flux de données) envoie une nouvelle valeur de score provenant d'un autre nœud, nous remontons donc la chaîne pour récupérer la valeur.
  3. Addition (+)
    • Ce nœud d'opération additionne deux valeurs :
      • A (lié à un autre nœud).
      • 1 (une valeur fixe ajoutée directement).
    • La connexion verte de A (flux de données) nécessite de remonter un peu plus loin dans la chaîne pour récupérer sa valeur.
  4. Get score
    • Ce nœud d'opération récupère la valeur actuelle de score.
    • Il peut ensuite être utilisé pour ajouter 1 dans le nœud d'opération d'addition.
  5. Exécution de Set score
    • Une fois que les nœuds d'opération sont exécutés pour récupérer la nouvelle valeur de score, la valeur de score est mise à jour avec le résultat de l'addition.
    • Le fil blanc (flux d'exécution) commence à partir de ce nœud et déclenche les actions suivantes.
  6. Lecture Log
    • Ce nœud de fonction affiche ou enregistre une valeur pour le débogage.
    • Il est exécuté après "Set score" via le flux blanc.
    • La connexion verte envoie la valeur actuelle de score pour l'afficher.
  7. Get score
    • Ce nœud d'opération récupère la nouvelle valeur de score.
    • Il peut ensuite être utilisé pour l'afficher dans le nœud Log.
  8. Exécution de Log
    • Une fois que le nœud d'opération est exécuté pour récupérer la nouvelle valeur de score, la nouvelle valeur peut être enregistrée.
    • Il n'y a pas de fil blanc (flux d'exécution) partant de ce nœud, car il n'y a pas d'autres actions à exécuter après cela.

Résumé Visuel du Flux :

  1. "On Click" → "Set score" → "Log".
    • Les fils blancs représentent l'ordre dans lequel les actions sont exécutées.
  2. Les fils colorés transportent les données :
    • score est récupéré avec "Get score".
    • Il est modifié (+1) puis mis à jour avec "Set score".
    • Enfin, il est envoyé au "Log" pour être affiché.

Inspection du Graphe

L'inspection permet de vérifier les valeurs et les types contenus par les ancrages via deux modes :

IcôneDescription
Ctrl
+
Alt
Afficher l'inspection des types
Ctrl
+
(ou
Ctrl
+
Q
)
Afficher l'inspection des valeurs

Inspection des Types : Pour visualiser les types de données. Ctrl + Alt

Capture d'écran de l'éditeur Luna Park

Inspection des Valeurs : Pour afficher les valeurs réelles des ancrages. Ctrl + Espace ou Ctrl + Q

Capture d'écran de l'éditeur Luna Park

Lors de l'utilisation de l'inspection des valeurs, les valeurs sont :

  • Calculées en temps réel pour les nœuds d'opération.
  • Prises à partir de la dernière exécution pour les nœuds de fonction.

Note

Si certaines valeurs apparaissent comme non définies, il peut être nécessaire d'exécuter votre logique une fois pour initialiser toutes les valeurs.