<< about GUI clipboard >>
Scilab Help >> GUI > Uicontrol Browser

Uicontrol Browser

Description of the uicontrol browser.

Description

How to use Browser uicontrol.

Architecture

Browser uicontrol is based on JCEF framework.

Browser uicontrol must be placed in a frame or figure with layout border.

Communication

Scilab to Browser

Browser to Scilab

Example of round-trip communication between Scilab and Browser

f = figure("infobar_visible", "off", "toolbar_visible", "off", ...
    "dockable", "off", "menubar", "none", "default_axes", "off", ...
    "axes_size", [200 100], ...
    "layout", "border", ...
    "resize", "off", ...
    "tag", "com");

fr = uicontrol(f, "style", "frame", "backgroundcolor", [1 1 1], "layout", "border");

//create a small html file
html = [...
    "<html>"
    "<head>"
    "    <style>"
    "        html, body {width: 100%; height: 100%; margin: 0; padding: 0; }"
    "        body { display: flex; justify-content: center; align-items: center; }"
    "        .child { flex: 0 0; }"
    "        .operand {width: 30px;}"
    "    </style>"
    "</head>"
    "<body>"
    "    <input type=""range"" id=""slider"" class=""child"" value=""0.5"" min=""0"" max=""1"" step=""0.05"" oninput=""onSliderChange()"">"
    "    <div id=""result"" class=""child"">0%</div>"
    "    <script>"
    "    function onSliderChange() {"
    "        toScilab(parseFloat(document.getElementById(""slider"").value), (data) => {"
    "            document.getElementById(""result"").textContent = data;"
    "        });"
    "    }"
    ""
    "    function fromScilab(data) {"
    "        document.getElementById(""result"").textContent = data;"
    "    }"
    "    </script>"
    "</body>"
    "</html>"];

mputl(html, TMPDIR + "/com.html");

browser = uicontrol(fr, ...
    "style", "browser", ...
    "debug", "on", ... //allow to open devtools in browser component: use (ctrl+shift+i) commands or openDevtools(get("browser"))
    "string", TMPDIR + "/com.html", ...
    "callback", "cbPercent", ...
    "tag", "browser");

function cbPercent(data, cb)
    if data == "loaded" then //inital message from web part to indicate that loading phase is done
        set("browser", "data", "50%"); //call "fromScilab" javascript function
        return;
    end

    cb(sprintf("%d%%", data * 100)); //return data in callback function give in toScilab.
endfunction

See also

History

VersionDescription
2025.1.0 Uicontrol browser added.

Report an issue
<< about GUI clipboard >>