[Contents] [TitleIndex] [WordIndex

Creating Graphical User Interfaces

Those examples of Graphical User Interfaces are gathered by Foad S. Farimani (Twitter, LinkedIn)

https://github.com/Foadsf/ScilabGUItuts

Example 1: listbox

Ex001_pic001.png

   1 // create a figure
   2 f = figure('position', [200, 200, 610, 460]);
   3 
   4 // create a listbox
   5 h = uicontrol(f, 'style', 'listbox', 'position', [30 10 100 200]);
   6 
   7 // fill the list
   8 set(h, 'string', "item 1|item 2|item 3");

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

Ex003_pic02.gif

   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

Ex004_pic01.png

   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

Ex005_pic01.gif

   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

Ex006_pic01.gif

   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

Ex007_pic01.gif

   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

Ex008_pic001.gif

   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

Ex009.png

   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

Ex010.png

   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

Ex011.png

   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

data1.png

data2.png

Example 13: Left parameters panel with right plot

lhy.png

Tutorial: https://www.scilab.org/tutorials/how-develop-graphical-user-interface

Example 14: Left parameters panel with right image

netgui.png

Inspiration: https://www.developpez.net/forums/d1692605/environnements-developpement/autres-edi/scilab/inserer-image-gui/

Example 15: Calculator

calculator.png

More infos: https://sites.google.com/site/scilabguidesigner/example-2-calculator


2022-09-08 09:27