Scilab 2025.1.0 preview: "Browser" UIControl

Announcements
1

Dear Scilab users,

We would like to give you a preview of the new “Browser” UIControl that will be added in the 2025.1.0 release.

Based on JCEF (Java Chromium Embedded Framework), bringing the full power of Chromium (the open-source part of Chrome Web Browser), this new component will give you the ability to create GUIs using HTML/JS, fully leveraging web capabilities by rendering hosted web pages or local pages without the need of a web server.

Like other UIControls, the “Browser” UIControl, must be added to a figure or a frame (to occupy only a part of the figure). It is based on the same properties with some evolutions

  • New data property: used to send data to web page,
  • New debug property: can only be set at creation time and allows you to enable Chromium’s debugging tools (a.k.a. DevTools),
  • string is the path of the page to display. It can be an URI (https://, file://) or a local path (relative or absolute),
  • callback property remains a string but behaves a bit differently compared to other UIControls. It can only refer to a Scilab function with a specific prototype function callback(msg, callback_function)where:
    • msg represents the data received from the browser,
    • callback_function is a function that allows you to send a response back to the browser.

Shortened Example

function callback_function(msg, cb)
    disp("Received from browser: ");
    disp(msg);
    response = "Hello from Scilab";
    cb(response);
end

uicontrol(fr, ...
    "style", "browser", ...
    "tag", "controls", ...
    "string", "page.html", ...
    "callback", "callback_function", ...
    "debug", "on");

Demonstrations

We have reworked the Uicontrol + plot3d demonstration by replacing the “Control Panel” section by a “Browser” UIControl.

image
image902×484 125 KB

In addition, we completely rewrote the mini dice game, available in demonstrations, to showcase the “Browser” component.

Finally, we added a new pathfinding demonstration. This demonstration allows you to define a grid by assigning a weight to each cell, and then request Scilab to compute the least costly path.

image
image802×634 61.6 KB

A bit of code

When you click on the “Find Best Path” button, the web code sends the grid and weight information to Scilab which then calculates the best path and sends it back for the page for display.

in JS

    toScilab({type: "compute", data: st}, (res) => {
        drawPath(res);
    })

The toScilab function, provided by Scilab, allows you to send data that will be received by the callback function and waits for a response. In this case, a structure is sent (containing a type field and a data field) and an anonymous function waits for the result to display the path.

Scilab side

function cbAStar(msg, cb)
    select msg.type
    case "compute"
        data = msg.data;
        res = astar(data.map, data.costs, sub2ind(data.grid, data.finish), sub2ind(data.grid, data.start));
        cb(ind2sub(data.grid, res));
    end
endfunction

In the callback function, we process the message to calculate the best path and return it using the callback cb function.

We hope this new component will inspire you to imagine new ways of working with Scilab and to develop more user-friendly apps using technologies from the web world. Please share your ideas :slightly_smiling_face:

Scilab Team

4 Likes