Interface utilisateur

1. introduction

L'interface utilisateur comporte des composants graphiques (boutons, boîtes de saisie, etc) qui peuvent être ajoutés à un bloc de calcul.

Les composants ont tous un identifiant, qui doit être unique dans la page entière (pas seulement le bloc de calcul). On peut donc utiliser les propriétés d'un composant en dehors de son bloc de définition. En revanche, le fait de déclencher un évènement sur un composant a pour effet d'activer le bloc auquel il appartient comme bloc courant pour les sorties graphiques et textuelles.

2. Mise en forme

Les composants sont mis en forme dans un tableau. Les dimensions de celui-ci doivent être définies avec la fonction suivante :

ui_layout(ncol,nrow)

ncol (integer) : nombre de colonnes
nrox (integer) : nombre de lignes

Les composants sont ajoutés juste après la boîte de saisie du bloc de calcul, avant les sorties textuelles et graphiques.

3. Slider

Un slider est constitué d'un curseur que l'utilisateur peut déplacer sur un axe gradué, afin de choisir une valeur. La fonction suivante permet d'ajouter un slider (jquery-ui) :

ui_slider(id,legend,options)

id (string) : identifiant du composant
legend (string) : légende
options (object) : options transmises au constructeur du slider jquery-ui

Pour les options possibles, voir la doc de jquery-ui. Les plus utilisées sont :

min (number) : valeur minimale.
max (number): valeur maximale.
step (number) : pas de variation de la valeur.
value (number): valeur initiale.
slide (function) : fonction appelée lorsque le curseur est déplacé.
change (function) : fonction appelée lorsque le déplacement du curseur est terminé.

L'exemple suivant montre le tracé d'une courbe dont les paramètres sont variés par deux sliders. Le tracé de la fonction se fait dans la fonction plot, qui est appelée lorsque l'évènement slide se produit (il faut aussi tracer une fois la fonction au début).

La fonction scf est nécessaire pour préciser dans quelle figure le tracé doit se faire (lorsqu'il y a plusieurs figures).

4. Cases à cocher

La case à cocher permet faire un choix binaire (oui/non). Elle est créée par la fonction suivante :

ui_checkbox(id,legend,options)

id (string) : identifiant du composant
legend (string) : légende
options.change (function) : fonction appelée lorsque l'état de la case est modifiée.
checked : la case est cochée si cet propriété est définie.

Dans l'exemple suivant, l'état de la case est affichée à chaque fois qu'elle est cochée. L'attribut checked est non défini lorsque la case n'est pas cochée.

5. Boîte de sélection

Une boîte de sélection permet de sélectionner un ou plusieurs options dans une liste.

ui_select(id,legend,options)

id (string) : identifiant du composant
legend (string) : légende
options.change (function) : fonction appelée lorsque la sélection est modifiée.
options.values (array) : liste des options.

L'option sélectionnée par défaut est la première de la liste.

6. Boîte de saisie de texte

Ce composant permet de saisir du texte sur une ligne.

ui_select(id,legend,options)

id (string) : identifiant du composant
legend (string) : légende
options.change (function) : fonction appelée lorsque le texte est modifié.
options.value (string) : texte initial.