1. introduction
The user interface includes graphical components (buttons, input boxes, etc.) which can be added to a calculation block.
The components all have an identifier, which must be unique across the entire page (not just the calculation block). You can therefore use the properties of a component outside of its definition block. On the other hand, the fact of triggering an event on a component has the effect of activating the block to which it belongs as the current block for the graphics and text outputs.
Formatting
The components are formatted in a table. The dimensions of this must be defined with the following function:
The components are added just after the input box of the calculation block, before the textual and graphic outputs.
3. Slider
A slider consists of a cursor that the user can move on a graduated axis, in order to choose a value. The following function allows you to add a slider (jquery-ui):
For the possible options, see the jquery-ui doc. The most used are:
- min (number): minimum value.
- max (number): maximum value.
- step (number): no variation of the value.
- value (number): initial value.
- slide (function): function called when the cursor is moved.
- change (function): function called when the cursor movement is finished.
The following example shows the plot of a curve whose parameters are varied by two sliders. The plot of the function is done in the plot function, which is called when the slide event occurs (you must also plot the function once at the start).
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)