Creating Graphical User Interfaces
Contents
-
Creating Graphical User Interfaces
- Example 1: listbox
- Example 2: overloading
- Example 3: Formatting
- Example 4: Table
- Example 5: Simple Listbox
- Example 6: Slider
- Example 7: Push Button
- Example 8: Counter
- Example 9: Gridbag Layout 1
- Example 10: Gridbag Layout 2
- Example 11: Gridbag Layout 3
- Example 12: Large square buttons with images
- Example 13: Left parameters panel with right plot
- Example 14: Left parameters panel with right image
- Example 15: Calculator
Those examples of Graphical User Interfaces are gathered by Foad S. Farimani (Twitter, LinkedIn)
https://github.com/Foadsf/ScilabGUItuts
Example 1: listbox
Example 2: overloading
1 // create a mlist
2 mymlist = mlist(['objid', 'A', 'B'], [], []);
3
4 // overload set / get for objid
5 function result = %objid_uicontrol(varargin)
6 // res = uicontrol(mymlist,'A');
7 obj_tmp = varargin(1);
8 field_tmp = varargin(2);
9 mprintf('uicontrol on an object of type %s, field = %s\n', typeof(obj_tmp), field_tmp);
10 result = %t;
11 endfunction
12
13 res = uicontrol(mymlist, 'property');
Example 3: Formatting
1 f = figure();
2
3 // LaTeX
4 h1 = uicontrol(f, "style", "pushbutton", "string", "$x^2$");
5
6 // MathML
7 h2=uicontrol(f, "style", "pushbutton", "string", "<msup><mi>x</mi><mn>2</mn></msup>");
8 h2.Position = h1.Position + [50, 0, 0, 0];
9
10 // Text
11 h1 = uicontrol(f, "Style", "text", 'position', [100 100 300 100], "string", "$\Gamma(s)=\int_0^\infty t^{s-1}\mathrm{e}^{-t}\,\mathrm{d}t$");
12 // If it is too little
13 h1.fontsize = 20
14
15
16 // HTML
17 h3 = uicontrol(f, "Style", "text", 'position', [100 300 300 100], "string", "<html><h1>This is a Heading</h1> <p>This is a paragraph. first line<br>second line </p></html>");
Example 4: Table
1 // Include an editable table into a figure:
2
3 // Building a table of data:
4 params = ["City" "Country" "Population [Mh]" "Temp.[°C]"];
5 towns = ["Mexico" "Paris" "Tokyo" "Singapour"]';
6 country = ["Mexico" "France" "Japan" "Singapour"]';
7 pop = string([22.41 11.77 33.41 4.24]');
8 temp = string([26 19 22 17]');
9 table = [params; [ towns country pop temp ]];
10
11 f = gcf();
12 clf
13 // as = f.axes_size; // [width height]
14 as = get(f, "axes_size");
15 ut = uicontrol(f, "style", "table",..
16 "string", table,..
17 "position", [5 (as(2) - 100) 300 87],.. // => @top left corner of figure
18 "tooltipstring", "Data from majors towns");
Example 5: Simple Listbox
1 function updateListBox(h)
2 disp(get(h, "value"))
3 endfunction
4
5 width = 200;
6 height = 120;
7
8 f = figure();
9 //f.Position = [0 0 width height];
10 set(f, "position", [0 0 width height]);
11 h = uicontrol(f, "style", "listbox", "callback", "updateListBox");
12 //h.Position = [0 0 width height];
13 set(h, "position", [0 0 width height]);
14 //h.String = ["apple" "orange" "banana" "berry" "grape"];
15 set(h, "string", ["apple" "orange" "banana" "berry" "grape"]);
16 //h.Callback = "updateListBox";
17 //set(h, "callback", "updateListBox");
Example 6: Slider
1 function updateSlider(h)
2 disp(get(h, "value"));
3 endfunction
4
5
6 f = figure("position", [0 0 200 50]);
7
8 h = uicontrol(f, "style", "slider", "Max", 255, "Min", 1, "value", 128, "position", [0 0 200 50], "callback", "updateSlider");
9 //h.Min = 1;
10 //h.Max = 255;
11 //h.Value = 128;
12 //h.Position = [0 0 200 50];
13 //h.Callback = "updateSlider";
Example 7: Push Button
1 function PushButton()
2 disp("Push!")
3 endfunction
4
5 //f = scf();
6 //set(f, "position", [0 0 200 20]);
7 f = figure("position", [0 0 200 20]);
8 // f.Position = [0 0 200 20];
9
10 h = uicontrol(f, "style", "pushbutton", "position", [0 0 200 20], "string", "update", "BackgroundColor", [0.9 0.9 0.9], "callback", "PushButton");
11 // h.Position = [0 0 200 20];
12 // h.String = "Update";
13 // h.BackgroundColor = [0.9 0.9 0.9];
14 // h.Callback = "pushmybutton";
Example 8: Counter
1 function counter_start()
2 // Callback called after a click on start pushbutton
3 set("Start", "callback_type", -1);
4 global Stop
5 Stop = %f;
6 global Reset;
7 while ~Stop
8 i = evstr(get("count", "string"));
9 if Reset then
10 set("count", "string", "0");
11 Reset = %f;
12 else
13 set("count", "string", string(i+1));
14 end
15 end
16 endfunction
17
18 function counter_stop()
19 // Callback called after a click on stop pushbutton
20 global Stop;
21 Stop = %t;
22 set("Start", "callback_type", 2);
23 endfunction
24
25 function counter_reinit()
26 // Callback called after a click on reset pushbutton
27 global Reset;
28 Reset = %t;
29 set("count", "string", "0");
30 endfunction
31
32
33
34 counter_main_fig = figure( ...
35 "dockable", "off", ...
36 "infobar_visible", "off", ...
37 "toolbar_visible", "off", ...
38 "toolbar", "none", ...
39 "menubar_visible", "off", ...
40 "menubar", "none", ...//"layout", "none", ...//"visible", "off", ...
41 "resize", "off", ...
42 "figure_position", [0 0], ...
43 "axes_size", [400, 150], ...
44 "figure_name", "Counter", ...
45 "layout", "gridbag", ...
46 "tag", "counter_main_figure");
47
48 // Counter frame
49 counter_frame = uicontrol(counter_main_fig, ...
50 "layout", "gridbag", ...
51 "style", "frame", ...
52 "constraints", createConstraints("gridbag", [1, 1, 1, 1], [1, 0.5], "both"));
53
54 uicontrol(counter_frame, ...
55 "style", "text", ...
56 "string", "Counter : ", ...
57 "constraints", createConstraints("gridbag", [1, 1, 1, 1], [0.5, 1], "horizontal", "center"), ...
58 "margins", [5 5 5 5], ...
59 "horizontalAlignment", "center");
60
61 uicontrol(counter_frame, ...
62 "style", "text", ...
63 "string", "0", ...
64 "constraints", createConstraints("gridbag", [2, 1, 1, 1], [1, 1], "horizontal", "center"), ...
65 "tag", "count", ...
66 "margins", [5 5 5 5]);
67
68 // Buttons frame
69 buttons_frame = uicontrol(counter_main_fig, ...
70 "layout", "gridbag", ...
71 "style", "frame", ...
72 "constraints", createConstraints("gridbag", [1, 2, 1, 1], [1, 1], "both"));
73
74 // The associated callback needs to be interruptible (when clicking on stop or reset for example)
75 uicontrol("parent", buttons_frame, ...
76 "Style" , "pushbutton", ...
77 "String" , "Start", ...
78 "tag", "Start", ...
79 "callback" , "counter_start()", ...
80 "margins", [5 5 5 5], ...
81 "constraints", createConstraints("gridbag", [1, 1, 1, 1], [1, 1], "horizontal", "center"));
82
83 // The associated callback needs to have priority in order to interrupt the current callback (in other words to stop the counter)
84 uicontrol("parent", buttons_frame, ...
85 "Style" , "pushbutton", ...
86 "String" , "Stop", ...
87 "callback" , "counter_stop()", ...
88 "callback_type", 10, ...
89 "constraints", createConstraints("gridbag", [2, 1, 1, 1], [1, 1], "horizontal", "center"), ...
90 "margins", [5 5 5 5]);
91
92 // The same for the callback which reset the counter: it must have the priority over the callback which has started the counter
93 uicontrol("parent", buttons_frame, ...
94 "Style" , "pushbutton", ...
95 "String" , "Reset", ...
96 "callback" , "counter_reinit()", ...
97 "callback_type", 10, ...
98 "constraints", createConstraints("gridbag", [3, 1, 1, 1], [1, 1], "horizontal", "center"), ...
99 "margins", [5 5 5 5]);
100
101 counter_main_fig.visible = "on";
Example 9: Gridbag Layout 1
1 //Creates the figure with a gridbag layout
2 f = figure( ...
3 "dockable" , "off",...
4 "infobar_visible" , "off",...
5 "toolbar" , "none",...
6 "menubar_visible" , "off",...
7 "menubar" , "none",...
8 "default_axes" , "off",...
9 "layout" , "gridbag",...
10 "visible" , "on");
11
12 redf_grid = [1, 1, 2, 1]; //Red frame is placed at 1x1 and is a 2x1 rectangle
13 greenf_grid = [3, 1, 1, 2]; //Green frame is at 3x1 and is a 1x2 rectangle
14 bluef_grid = [1, 2, 1, 1]; //Blue frame is at 2x1 and is a 1x1 rectangle
15 yelf_grid = [1, 3, 2, 2]; //Yellow frame is at 1x3 and is a 2x2 rectangle
16 magf_grid = [3, 4, 1, 1]; //Magenta frame is at 3x4 and is a 1x1 rectangle
17 cyanf_grid = [2, 2, 1, 1]; //Cyan is at 2x2 and is a 1x1 rectangle
18 whitf_grid = [3, 3, 1, 1]; //White is at 3x3 and is a 1x1 rectangle
19
20 c = createConstraints("gridbag",[1, 1, 1, 1], [1, 1], "both", "center", [0, 0], [50, 50]);
21
22 c.grid = redf_grid;
23 u_grid1 = uicontrol(f , ...
24 "style" , "frame" , ...
25 "backgroundcolor" , [1 0 0] , ...
26 "constraints" , c);
27
28 sleep(500);
29 c.grid = greenf_grid;
30 c.weight = [0.1,1]; //Last column will fill horizontal space 10 times less than other columns
31 u_grid2 = uicontrol(f , ...
32 "style" , "frame" , ...
33 "backgroundcolor" , [0 1 0] , ...
34 "constraints" , c);
35
36 sleep(500);
37 c.grid = bluef_grid;
38 c.weight = [1,1];
39 c.fill = "none" //This will force the blue square to be at the preferred size
40 u_grid3 = uicontrol(f , ...
41 "style" , "frame" , ...
42 "backgroundcolor" , [0 0 1] , ...
43 "constraints" , c);
44
45 sleep(500);
46 c.grid = cyanf_grid;
47 c.fill = "vertical" // this will fill the empty space with cyan vertically
48 c.anchor = "right" //this will position the cyan stripe on the right
49 c.padding = [100,0] //this will extend the cyan stripe horizontally up to 100 pixel if space is available
50 u_grid1 = uicontrol(f , ...
51 "style" , "frame" , ...
52 "backgroundcolor" , [0 1 1] , ...
53 "constraints" , c);
54
55 sleep(500);
56 c.grid = yelf_grid;
57 c.fill = "both";
58 c.anchor ="center";
59 c.padding = [0,0];
60 u_grid4 = uicontrol(f , ...
61 "style" , "frame" , ...
62 "backgroundcolor" , [1 1 0] , ...
63 "constraints" , c);
64
65 sleep(500);
66 c.grid = whitf_grid;
67 c.weight = [0.1,1]
68 u_grid1 = uicontrol(f , ...
69 "style" , "frame" , ...
70 "backgroundcolor" , [1 1 1] , ...
71 "constraints" , c);
72
73 sleep(500);
74 c.grid = magf_grid;
75 c.weight = [0.1,1]
76 u_grid5 = uicontrol(f , ...
77 "style" , "frame" , ...
78 "backgroundcolor" , [1 0 1] , ...
79 "constraints" , c);
Example 10: Gridbag Layout 2
1 //Creating a figure with the border layout with 50 pixel padding in width and 10 in height
2 f = figure( ...
3 "dockable" , "off",...
4 "infobar_visible" , "off",...
5 "toolbar" , "none",...
6 "menubar_visible" , "off",...
7 "menubar" , "none",...
8 "default_axes" , "off",...
9 "layout" , "border",...
10 "layout_options", createLayoutOptions("border", [50,10]),...
11 "visible" , "on");
12
13 c = createConstraints("border", "top", [50,10]);
14 //First frame is on top with 10 pixel in height
15 u_grid1 = uicontrol(f,...
16 "style", "frame",...
17 "backgroundcolor", [1 0 0], ...
18 "constraints", c);
19
20 sleep(500);
21 c.position = "left";
22 u_grid2 = uicontrol(f,...
23 "style", "frame",...
24 "backgroundcolor", [0 1 0], ...
25 "constraints", c);
26
27 sleep(500);
28 c.position = "center";
29 u_grid3 = uicontrol(f,...
30 "style", "frame",...
31 "backgroundcolor", [0 0 1], ...
32 "constraints", c);
33
34 sleep(500);
35 c.preferredsize = [10, 100];
36 c.position = "right";
37 u_grid4 = uicontrol(f,...
38 "style", "frame",...
39 "backgroundcolor", [1 1 0], ...
40 "constraints", c);
41
42 sleep(500);
43 c.position = "bottom";
44 u_grid5 = uicontrol(f,...
45 "style", "frame",...
46 "backgroundcolor", [1 0 1], ...
47 "constraints", c);
Example 11: Gridbag Layout 3
1 //Create a figure with a grid layout
2 f = figure( ...
3 "dockable" , "off",...
4 "infobar_visible" , "off",...
5 "toolbar" , "none",...
6 "menubar_visible" , "off",...
7 "menubar" , "none",...
8 "default_axes" , "off",...
9 "layout" , "grid",...
10 "visible" , "on");
11
12 //Set the grid to be 2 by 3 elements
13 lay_opt = createLayoutOptions("grid", [2,3]);
14 set(f,"layout_options",lay_opt);
15
16 //Insert uicontrols on the grid
17 //Each uicontrol is inserted from left to right
18 //and top to bottom
19
20 c = createConstraints("grid"); //Create the constraint for nested uicontrols
21
22 u_grid1 = uicontrol(f,...
23 "style", "frame",...
24 "backgroundcolor", [1 0 0],...
25 "constraints", c);
26
27 sleep(500);
28 u_grid2 = uicontrol(f,...
29 "style", "frame",...
30 "backgroundcolor", [0 1 0],...
31 "constraints", c);
32
33 sleep(500);
34 u_grid3 = uicontrol(f,...
35 "style", "frame",...
36 "backgroundcolor", [0 0 1],...
37 "constraints", c);
38
39 sleep(500);
40 u_grid4 = uicontrol(f,...
41 "style", "frame",...
42 "backgroundcolor", [1 1 0],...
43 "constraints", c);
44
45 sleep(500);
46 u_grid5 = uicontrol(f,...
47 "style", "frame",...
48 "backgroundcolor", [1 0 1],...
49 "constraints", c);
50
51 sleep(500);
52 u_grid6 = uicontrol(f,...
53 "style", "frame",...
54 "backgroundcolor", [0 1 1],...
55 "constraints", c);
Example 12: Large square buttons with images
Example 13: Left parameters panel with right plot
Tutorial: https://www.scilab.org/tutorials/how-develop-graphical-user-interface
Example 14: Left parameters panel with right image
Inspiration: https://www.developpez.net/forums/d1692605/environnements-developpement/autres-edi/scilab/inserer-image-gui/
Example 15: Calculator
More infos: https://sites.google.com/site/scilabguidesigner/example-2-calculator