powered by

HOW TO DEVELOP A GRAPHICAL USER INTERFACE(GUI) IN SCILAB.
In this tutorial we show how to create a GUI in Scilab for an ODE problem.
The adopted problem is the LHY model already used in other tutorials.
Level

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

www.openeering.com

Step 1: The purpose of this tutorial
In this tutorial we show, step by step, how to create a Graphical User
Interface (GUI)in Scilab.

Examples of Scilab GUIs are reported on the right. These images aretaken from the GUI menu of the Scilab Demonstrations.

Step 2: Model description
In this tutorial we refer to the LHY model. A description of the LHY modeland its solution using ode command can be found in the basic tutorial ofmodeling differential equations in Scilab.

LHY Tutorial Gui

www.openeering.com

page 2/18

Step 3: Roadmap
In this tutorial we describe how to construct a GUI for the LHY. We
implement the system in the following way:Provide a description of GUI programming in Scilab;

Implement the GUI for the LHY model;

Test the program and visualize the results.

Descriptions
GUI programming in Scilab
GUI for the LHY model
Running and testing

Steps
4-5
6-17
18-19

Step 4: Scilab GUI programming
A GUI is a human-computer interface that uses graphical objects likewindows, menus and icons to interact with users through the use ofmouse and keyboard (often in a limited way).

The syntax of the GUI function is

h = uicontrol(PropertyName,PropertyValue,...)The main advantage of using GUIs is the ability to make computer
operations more intuitive, and thus easier to learn and use especially for
new users. For example, it is much easier to move files by dragging icons
with the mouse than by having to remember the command that performs
the same task.

The function that creates a graphical user interface object in Scilab is"uicontrol".

LHY Tutorial Gui

h = uicontrol(parent,PropertyName,PropertyValue,...)
h = uicontrol(uich)

For a detailed description see "help uicontrol".

www.openeering.com

page 3/18

Step 5: Design of the GUI interface
The first step is to design the skeleton of the GUI interface for the LHY
model.

Designing a “correct” GUI is not a trivial task. Many rules exist and can befound in textbooks and web sites dedicated to this subject.

On the right we report our scheme for the LHY graphical user interface
where:
"Model parameters" contains the list of all LHY model
parameters that the user can change;"Time Setting" contains the list of all time simulation variables;"Initial conditions" contains the list of all initial conditions
for the ODE problem;

"graphical plot " contains the plot of the simulation’s results;"Compute button" updates the solution in the "graphicalplot ";

The menu "file" contains the entry "close" that is used to close
the program;

The menu "About" contains the entry "About" that is used todisplay some info about program and author.

LHY Tutorial Gui

www.openeering.com

page 4/18

Step 6: Storing default parameters
The first step is to store all the default LHY model parameters into mlist
Scilab objects. The parameters are subdivided into two groups:the "param" group for the LHY model parameters;the "sim" group for the simulation time parameters and initialconditions.

// Default simulation parametersparam = [];param.tau = 5e4; // Number of innovators per year (initiation)
param.s = 0.61; // Annual rate at which light users attract nonusers (initiation)
param.q = 3.443; // Constant which measures the deterrent effectof heavy users (initiation)
param.smax = 0.1; // Lower bound for s effective (initiation)
param.a = 0.163; // Annual rate at which light users quit
param.b = 0.024; // Annual rate at which light users escalate to
heavy useparam.g = 0.062; // Annual rate at which heavy users quit
param.delta = 0.291; // Forgetting rate// Simulation data// Time variables
sim = [];
sim.Tbegin = 1970; // Initial timesim.Tend = 2020; // Final timesim.Tstep = 1/12; // Time step// Initial conditions
sim.L0 = 1.4e6; // Light users at the initial timesim.H0 = 0.13e6; // Heavy users at the initial timesim.Y0 = 0.11e6; // Decaying heavy user at the initial time

The name of the developed function is "LHY_Gui".

LHY Tutorial Gui

www.openeering.com

page 5/18

Step 7: Create an initial window
In the next step we create, with the "scf" Scilab function, an initial window
where graphical object can be added.
The function "gettext" is used for internationalization (a.k.a. i18n, i.e. ittranslates the text into the current local language if available).

// Global window parameters
global margin_x margin_y;
global frame_w frame_h plot_w plot_h;// Window Parameters initialization
frame_w = 300; frame_h = 550;// Frame width and heightplot_w = 600; plot_h = frame_h;// Plot width and heighmargin_x = 15; margin_y = 15;// Horizontal and vertical margin
for elements
defaultfont = "arial"; // Default Font
axes_w = 3*margin_x + frame_w + plot_w;// axes widthaxes_h = 2*margin_y + frame_h;// axes height (100 =>toolbar height)
demo_lhy = scf(100001);// Create window with id=100001 and makeit the current one// Background and text
demo_lhy.background= -2;
demo_lhy.figure_position = [100 100];
demo_lhy.figure_name= gettext("LHY solution");// Change dimensions of the figure
demo_lhy.axes_size = [axes_w axes_h];

Type “help scf” for more details on the scf command.

LHY Tutorial Gui

www.openeering.com

page 6/18

Step 8: Set menu and toolbar
After creating the window, we create the menu. The used function are:


"addmenu"/"delmenu": for adding or removing a menu from themenu bar;"uimenu": for creating a menu or a submenu in a figure.

Associate to each menu entry there is a callback, a reference to a
executable function that is activated when the user select theentry.
// Remove Scilab graphics menus & toolbar
delmenu(demo_lhy.figure_id,gettext("&File"));delmenu(demo_lhy.figure_id,gettext("&Tools"));delmenu(demo_lhy.figure_id,gettext("&Edit"));delmenu(demo_lhy.figure_id,gettext("&?"));
toolbar(demo_lhy.figure_id,"off");// New menu
h1 = uimenu("parent",demo_lhy, "label",gettext("File"));h2 = uimenu("parent",demo_lhy, "label",gettext("About"));// Populate menu: fileuimenu("parent",h1, "label",gettext("Close"), "callback","demo_lhy=get_figure_handle(100001);delete(demo_lhy);","tag","close_menu");// Populate menu: about
uimenu("parent",h2, "label",gettext("About"),"callback","LHY_About();");// Sleep to guarantee a better display (avoiding to see asequential display)
sleep(500);

An import field for the graphical function is the “parent” field i.e. thehandle where the graphical object should be attached, in our case“demo_lhy”. Changing this value allows to move a control from a figure toanother.
See “uimenu” help file for more details.

LHY Tutorial Gui

www.openeering.com

page 7/18

Step 9: About dialog
The “About” dialog is a modal dialog created using the "messagebox"
function. Two types of windows are available:"modal dialog": in a modal window users are required to interact
with it before it returns to the parent application.

"modeless dialog": in modeless or non-modal window therequest information is not essential to continue with the program.
A non-modal window can be left open while work continues
elsewhere.

function LHY_About()
msg = msprintf(gettext("LHY is developed by the Openeering
Team.\nAuthor: M. Venturin"));messagebox(msg, gettext("About"), "info", "modal");endfunction

Step 10: Creating a frame
A frame is graphical object used to group other objects.
// Frames creation [LHY parameters]
my_frame = uicontrol("parent",demo_lhy, "relief","groove", ...
"style","frame", "units","pixels", ...
"position",[ margin_x margin_y frame_w frame_h], ...
"horizontalalignment","center", "background",[1 1 1], ...
"tag","frame_control");// Frame title
my_frame_title = uicontrol("parent",demo_lhy, "style","text", ...
"string","LHY parameters", "units","pixels", ...
"position",[30+margin_x margin_y+frame_h-10 frame_w-60 20],...
"fontname",defaultfont, "fontunits","points", ...
"fontsize",16, "horizontalalignment","center", ...
"background",[1 1 1], "tag","title_frame_control");

LHY Tutorial Gui

www.openeering.com

page 8/18

Step 11: Populate the frame
Each parameters is composed of the following elements:a string that denote the parameter (style “text”);

an edit box (style “edit”) that is used as an input/output mask (theinput is recovering by searching all graphical objects having thattag, and hence the tag must be unique among the elements)// Adding model parameters
guih1 = frame_w;
guih1o = 240;// ordered list of labels
labels1 = ["Tau", "s", "q", "smax", "a", "b", "g", "delta"];// ordered list of default values
values1 = [5e4, 0.61, 3.443, 0.1, 0.163, 0.024, 0.062, 0.291];// positioning
l1 = 40; l2 = 100; l3 = 110;
for k=1:size(labels1,2)
uicontrol("parent",demo_lhy, "style","text",...
"string",labels1(k), "position",[l1,guih1k*20+guih1o,l2,20], ...
"horizontalalignment","left", "fontsize",14, ...
"background",[1 1 1]);
guientry1(k) = uicontrol("parent",demo_lhy, "style","edit",...
"string",string(values1(k)), "position",[l3,guih1k*20+guih1o,180,20], ...
"horizontalalignment","left", "fontsize",14, ...
"background",[.9 .9 .9], "tag",labels1(k));
end

LHY Tutorial Gui

www.openeering.com

page 9/18

Step 12: Continue with the frame
As previously done, we continue to add graphical components for
simulations parameters and initial conditions.
// Adding simulation paramtersguih2 = 240;
guih2o = 80;labels2 = ["Tbegin", "Tend", "Tstep"];
values2 = ["1970", "2020", "1/12"];l1 = 40; l2 = 100; l3 = 110;
for k=1:size(labels2,2)uicontrol("parent",demo_lhy, "style","text", ...
"string",labels2(k), "position",[l1,guih2k*20+guih2o,l2,20], ...
"horizontalalignment","left", "fontsize",14, ...
"background",[1 1 1]);
guientry2(k) = uicontrol("parent",demo_lhy, "style","edit",...
"string",values2(k), "position",[l3,guih2k*20+guih2o,180,20], ...
"horizontalalignment","left", "fontsize",14, ...
"background",[.9 .9 .9], "tag",labels2(k));
end// Adding initial conditions
guih3 = 150;
guih3o = 80;labels3 = ["L0", "H0", "Y0"];
values3 = [1.4e6, 0.13e6, 0.11e6];
l1 = 40; l2 = 100; l3 = 110;
for k=1:size(labels3,2)uicontrol("parent",demo_lhy, "style","text", ...
"string",labels3(k), "position",[l1,guih3k*20+guih3o,l2,20], ...
"horizontalalignment","left", "fontsize",14, ...
"background",[1 1 1]);
guientry3(k) = uicontrol("parent",demo_lhy, "style","edit",...
"string",string(values3(k)), "position",[l3,guih3k*20+guih3o,180,20], ...
"horizontalalignment","left", "fontsize",14,...
"background",[.9 .9 .9], "tag",labels3(k));
end

LHY Tutorial Gui

www.openeering.com

page 10/18

Step 13: Add a button
Next, using the same command “uicontrol”, we add the “compute button”(style “pushbutton”):// Adding button
huibutton = uicontrol(demo_lhy, "style","pushbutton", ...
"Position",[110 100 100 20], "String","Compute", ...
"BackgroundColor",[.9 .9 .9], "fontsize",14, ...
"Callback","syscompute");The button is associated to the callback "syscompute". This callback will
be explained and created at step 17.

Step 14: Solving function
The solving function is based on the code already developed in the tutorialof the LHY model solved using "ode" function. See this tutorial for moredetails.

function sol=solvingProblem(param, sim)// Compute the solution
sol = struct();// Assign ODE solver datay0 = [sim.L0;sim.H0;sim.Y0];
t0 = sim.Tbegin;t = sim.Tbegin:sim.Tstep:(sim.Tend+100*%eps);
f = LHY_System;// Solving the system
sol.LHY = ode(y0, t0, t, f);sol.t = t;
endfunction

LHY Tutorial Gui

www.openeering.com

page 11/18

Step 15: Display function
The display functions is derived from the "LHY_Plot" function of thetutorial on LHY solved using "ode" function. See this tutorial for moredetails.

function displayProblem(solh)// Fetching solution
LHY = sol.LHY;
t = sol.t;
L = LHY(1,:); H = LHY(2,:); Y = LHY(3,:);// Evaluate initiation
I = LHY_Initiation(L,H,Y, param);// maximum values for nice plot
[Lmax, Lindmax] = max(L); tL = t(Lindmax);[Hmax, Hindmax] = max(H); tH = t(Hindmax);[Ymax, Yindmax] = max(Y); tY = t(Yindmax);[Imax, Iindmax] = max(I); tI = t(Iindmax);// Text of the maximum point
Ltext = msprintf(' ( %4.1f , %7.0f)',tL,Lmax);
Htext = msprintf(' ( %4.1f , %7.0f)',tH,Hmax);
Ytext = msprintf(' ( %4.1f , %7.0f)',tY,Ymax);
Itext = msprintf(' ( %4.1f , %7.0f)',tI,Imax);// Plotting of model datadelete(gca());
plot(t,[LHY;I]);legend(['Light Users';'Heavy users';'Memory';'Initiation']);// Vertical line
set(gca(),"auto_clear","off");
xpolys([tL,tH,tY,tI;tL,tH,tY,tI],[0,0,0,0;Lmax,Hmax,Ymax,Imax]);// Text of maximum point
xstring(tL,Lmax,Ltext); xstring(tH,Hmax,Htext);
xstring(tY,Ymax,Ytext); xstring(tI,Imax,Itext);
xlabel('Year');set(gca(),"auto_clear","on");my_plot_axes = gca();
my_plot_axes.title.font_size = 5;
my_plot_axes.axes_bounds = [1/3,0,2/3,1];
my_plot_axes.title.text = "LHY solution";
endfunction

LHY Tutorial Gui

www.openeering.com

page 12/18

Step 16: Default initial plot
The last step for "LHY_Gui" is to compute the solution with the default
data and to re-draw the window.

// Compute solution
sol = solvingProblem(param, sim);// Redraw window
drawlater();
newaxes();
displayProblem(sol);drawnow();

LHY Tutorial Gui

www.openeering.com

page 13/18

Step 17: Linking the computational function to the button
The "syscompute" function is associated to the “Compute button” (seestep 13) and performs the following steps:

it retrieves data from the object framework: this process is doneby the function "findobj" that searches from all graphical objects
those having the prefixed target tag;

it evaluates the available data in the field converting these datafrom string into real using the function "evstr";

it performs the simulation with the "solvingProblem" function;

it redraws the window.

function syscompute// retrive data
param = [];tau = findobj("tag", "Tau"); param.tau = evstr(tau.string);
s = findobj("tag", "s"); param.s = evstr(s.string);
q = findobj("tag", "q"); param.q = evstr(q.string);
smax = findobj("tag", "smax"); param.smax =evstr(smax.string);
a = findobj("tag", "a"); param.a = evstr(a.string);
b = findobj("tag", "b"); param.b = evstr(b.string);
g = findobj("tag", "g"); param.g = evstr(g.string);delta = findobj("tag", "delta"); param.delta =
evstr(delta.string);
sim = [];
Tbegin = findobj("tag", "Tbegin");sim.Tbegin =evstr(Tbegin.string);
Tend = findobj("tag", "Tend"); sim.Tend = evstr(Tend.string);
Tstep = findobj("tag", "Tstep"); sim.Tstep =evstr(Tstep.string);
L0 = findobj("tag", "L0"); sim.L0 = evstr(L0.string);
H0 = findobj("tag", "H0"); sim.H0 = evstr(H0.string);
Y0 = findobj("tag", "Y0"); sim.Y0 = evstr(Y0.string);// Compute solution
sol = solvingProblem(param, sim);// Redraw window
drawlater();my_plot_axes = gca();
my_plot_axes.title.text = "LHY solution";
newaxes();
displayProblem(sol);drawnow();
endfunction

LHY Tutorial Gui

www.openeering.com

page 14/18

Step 18: Running and testing #1
Change the Scilab working directory to the current project working
directory and run the command exec('LHY_MainGui.sce',-1).
This command runs the main program and plots a chart similar to the one
shown on the right.

Step 19: Running and testing #2
Since we have used the function "evstr" it is possible to insert
expression in the input masks and see, in an easy way, the effects ofparameters changing in the solution.
For example, on the right we have reported the simulation where theparameters b 0.024 3.2 and δ 0.291 exp 3.2 .

LHY Tutorial Gui

www.openeering.com

page 15/18

Step 20: Exercise #1
Try to modify the program adding the following feature: Every time the“compute button” is pressed the program check if the LHY parameters arechanged with respect to the default values and if a parameter is changed
then the associated input mask is colored using the orange color as
depicted in the figure.

Step 20: Exercise #1 (Hints)
Some hints:

copy the mlist data "param" and "sim" into a global data structureand save the name of their fields;

add a "updatedFields" function into the "syscompute"function;

write the "updatedFields" function.

LHY Tutorial Gui// global default data
global gparam gsim pf sf;
gparam = param;
gsim = sim;// param and sim fields
pf = fieldnames(gparam);
sf = fieldnames(gsim);// param fields// sim fields// Update fields
updateFields(param, sim);

www.openeering.com

page 16/18

function updateFields(param, sim)
global gparam gsim pf sf// Loop over gparam/param elements
for i=1:size(pf,1)// Get current field
cf = pf(i);// check if they are different
checkequal = 0;if(abs(gparam(cf)-param(cf))<= 1e-12) thencheckequal = 1;
end// Find object
obj = findobj("tag", cf);
if(isempty(obj)) then// object not found, skip, some problems?
continue;end// Colorize
if(~checkequal) then// Object is modified: use new color
obj.BackgroundColor = [0.98 0.83 0.71];
else// Object is not modified: use default color
obj.BackgroundColor = [.9 .9 .9];
end
end// The same code for the field gsim/sim
endfunction

Step 21: Concluding remarks and References
1. Scilab Web Page: Available: www.scilab.org.
In this tutorial we have shown how a GUI can be developed for the LHY
model.

2. Openeering: www.openeering.com.

On the right-hand column you may find a list of references for further
studies.

LHY Tutorial Gui

www.openeering.com

page 17/18

Step 22: Software content
To report a bug or suggest some improvement please contact Openeering
team at the web site www.openeering.com.

Thank you for your attention,------------------GUI MODEL IN SCILAB----------------------------------Directory: model---------------LHY_Color_Gui.sci
LHY_Gui.sci
LHY_Initiation.sci
LHY_System.sci: GUI for the LHY model (ex. 1): GUI for the LHY model: Initiation function: LHY system-------------Main directory-------------LHY_MainGui.sce
LHY_MainGuiColor.sce
license.txt: Main console GUI program: Solution of the exercise: The license file

Manolo Venturin

LHY Tutorial Gui

www.openeering.com

page 18/18