Accueil > Non classé > javascript Interface utilisateur
Non classé

javascript 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 :

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) :

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).

f = function(x) {return a*Math.sin(x-b)}
fig1 = fig(600,300)
plotframe({xmin:0,xmax:10,ymin:-1,ymax:1},{fill: »black »,font: »10pt sans-serif »})
plot = function(event) {
scf(fig1)
clear()
a = $(« #valeurA »).slider(« value »)
b = $(« #valeurB »).slider(« value »)
fplot2d({f:f,np:200},{stroke: »red »})
}
ui_layout(1,2)
ui_slider(« valeurB », »Valeur de b »,{min:0,max:10,step:0.1,value:5,slide:plot,change:plot})
ui_slider(« valeurA », »Valeur de a »,{min:0,max:1,step:0.01,value:1,slide:plot,change:plot})
plot(null)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Résoudre : *
1 + 26 =