Undocumented Matlab
  • SERVICES
    • Consulting
    • Development
    • Training
    • Gallery
    • Testimonials
  • PRODUCTS
    • IQML: IQFeed-Matlab connector
    • IB-Matlab: InteractiveBrokers-Matlab connector
    • EODML: EODHistoricalData-Matlab connector
    • Webinars
  • BOOKS
    • Secrets of MATLAB-Java Programming
    • Accelerating MATLAB Performance
    • MATLAB Succinctly
  • ARTICLES
  • ABOUT
    • Policies
  • CONTACT
  • SERVICES
    • Consulting
    • Development
    • Training
    • Gallery
    • Testimonials
  • PRODUCTS
    • IQML: IQFeed-Matlab connector
    • IB-Matlab: InteractiveBrokers-Matlab connector
    • EODML: EODHistoricalData-Matlab connector
    • Webinars
  • BOOKS
    • Secrets of MATLAB-Java Programming
    • Accelerating MATLAB Performance
    • MATLAB Succinctly
  • ARTICLES
  • ABOUT
    • Policies
  • CONTACT

Customizing uifigures part 3

November 27, 2017 5 Comments

As I have repeatedly posted in recent years, Matlab is advancing towards web-based GUI. The basic underlying technology is more-or-less stable: an HTML/Javascript webpage that is created-on-the-fly and rendered in a stripped-down browser window (based on Chromium-based jxBrowser in recent years). However, the exact mechanism by which the controls (“widgets”) are actually converted into visible components (currently based on the Dojo toolkit and its Dijit UI library) and interact with Matlab (i.e., the internal Matlab class structures that interact with the browser and Dojo) is still undergoing changes and is not quite as stable.
Customization hacks reported on this blog last year (part 1, part 2) may fail in some cases due to the changing nature of the undocumented internals. Some examples are the way by which we can extract the uifigure’s URL (which changed in R2017a), the ability to display and debug uifigures in a standard webbrowser with associated dev tools (which seems to have stopped working in R2017b), and the way by which we can extract the Dijit reference of displayed uicontrols.
Greatly assisting in this respect is Iliya Romm, who was the guest blogger for part 2 of this series last year. Iliya co-authored the open-source (GitHub) mlapptools toolbox, which enables accessing and customizing uifigure components using standard CSS, without users having to bother about the ugly hacks discussed in the previous parts of the series. This toolbox is really just a single Matlab class (mlapptools), contained within a single m-file (mlapptools.m). In addition to this class, the toolbox includes a README.md mark-down usage documentation, and two demo functions, DOMdemoGUI.m and TableDemo.m.
Here is the effect of using TableDemo, that shows how we can customize individual uitable cells (each uitable cell is a separate Dijit widget that can be customized individually):

CSS customizations of uifigure components
CSS customizations of uifigure components


The mlapptools class contains several static methods that can be used individually:

  • textAlign(uielement, alignment) – Modify text horizontal alignment ('left', 'center', 'right', 'justify' or 'initial')
  • fontWeight(uielement, weight) – Modify font weight ('normal', 'bold', 'bolder', 'lighter' or 'initial'), depending on availability in the font-face used
  • fontColor(uielement, color) – Modify font color (e.g. 'red', '#ff0000', 'rgb(255,0,0)' or other variants)
  • setStyle(uielement, styleAttr, styleValue) – Modify a specified CSS style attribute
  • aboutDojo() – Return version information about the Dojo toolkit
  • getHTML(hFig) – Return the full HTML code of a uifigure
  • getWebWindow(hFig) – Return a webwindow handle from a uifigure handle
  • getWebElements (hControl) – Return a webwindow handle and a widget ID for the specified uicontrol handle
  • getWidgetList(hFig, verboseFlag) – Return a cell-array of structs containing information about all widgets in the uifigure
  • getWidgetInfo(hWebwindow, widgetId, verboseFlag) – Return information about a specific dijit widget
  • setTimeout(hFig, seconds) – Override the default timeout (=5 secs) for dojo commands, for a specific uifigure

A few simple usage examples:

mlapptools.fontColor(hButton,'red')  % set red text color
mlapptools.fontWeight(hButton,'bold')  % set bold text font
mlapptools.setStyle(hButton,'border','2px solid blue')  % add a 2-pixel solid blue border
mlapptools.setStyle(hButton,'background-image','url(https://www.mathworks.com/etc/designs/mathworks/img/pic-header-mathworks-logo.svg)')  % add background image

mlapptools.fontColor(hButton,'red') % set red text color mlapptools.fontWeight(hButton,'bold') % set bold text font mlapptools.setStyle(hButton,'border','2px solid blue') % add a 2-pixel solid blue border mlapptools.setStyle(hButton,'background-image','url(https://www.mathworks.com/etc/designs/mathworks/img/pic-header-mathworks-logo.svg)') % add background image

Once you download mlapptools and add its location to the Matlab path, you can use it in any web-based GUI that you create, either programmatically or with Add-Designer.
The mlapptools is quite well written and documented, so if you are interested in the inner workings I urge you to take a look at this class’s private methods. For example, to understand how a Matlab uicontrol handle is converted into a Dojo widget-id, which is then used with the built-in dojo.style() Javascript function to modify the CSS attributes of the HTML <div> or <span> that are the control’s visual representation on the webpage. An explanation of the underlying mechanism can be found in part 2 of this series of articles on uifigure customizations. Note that the mlapptools code is newer than the article and contains some new concepts that were not covered in that article, for example searching through Dijit’s registry of displayed widgets.
Note: web-based GUI is often referred to as “App-Designed” (AD) GUI, because using the Matlab App Designer is the typical way to create and customize such GUIs. However, just as great-looking GUIs could be created programmatically rather than with GUIDE, so too can web-based GUIS be created programmatically, using regular built-in Matlab commands such as uifigure, uibutton and uitable (an example of such programmatic GUI creation can be found in Iliya’s TableDemo.m, discussed above). For this reason, I believe that the new GUIs should be referred to as “uifigures” or “web GUIs”, and not as “AD GUIs”.
If you have any feature requests or bugs related to mlapptools, please report them on its GitHub issues page. For anything else, please add a comment below.

Related posts:

  1. Customizing uifigures part 2 – Matlab's new web-based uifigures can be customized using custom CSS and Javascript code. ...
  2. Customizing uifigures part 1 – Matlab's new web-based uifigures can be customized in a variety of undocumented ways. ...
  3. Customizing web-GUI uipanel – We can customize Matlab's new web-based GUI panels in many interesting ways. Here's how... ...
  4. Matlab callbacks for uifigure JavaScript events – Matlab callback code can be attached to JavaScript events in web-based uifigures. ...
  5. Customizing uiundo – This article describes how Matlab's undocumented uiundo undo/redo manager can be customized...
  6. Customizing combobox popups – Matlab combobox (dropdown) popups can be customized in a variety of ways. ...
AppDesigner Iliya Romm uifigure Undocumented feature
Print Print
« Previous
Next »
5 Responses
  1. David December 1, 2017 at 10:25 Reply

    Very useful resource. Once again the user community is way ahead of MathWorks developers. It’s about time they sorted out the ability to customise the appearance of individual cells in a table.

  2. Andrew January 19, 2018 at 16:21 Reply

    Thanks for the great head-start on breaking down the new UIFigure/WebWindow class and the interface with CEF. I am wondering if you have had any success with returning values from the CEF rendering to Matlab using JS calls. I can see that WebWindow.Channel has a JavaScriptReturnValue property – I am curious if we can return data from the CEF window to Matlab using this property and the underlying Channel.execute(‘executeJS’, options) method. Would be good as an interim solution for handling UIFigure interaction methods by allowing you to set callbacks to a component in CEF using JS (e.g. mouse events etc)and then returning results from the JS function to Matlab via JavaScriptReturnValue. So far all I can get JS to set for JavaScriptReturnValue is a result of a throw in the JS. But I cannot get JS console.error or console.log to return to this property. Perhaps the underlying function in cefclientmlconverter.dll only handles the JS throw return. Interested to hear your thoughts. Keep up the good work.

  3. Royi July 27, 2018 at 19:18 Reply

    Hi,

    Is there a way to import and use other JS UI libraries in MATLAB App Designer?

    • Yair Altman July 27, 2018 at 19:24 Reply

      @Royi – yes, but this is definitely not easy. Hopefully custom JS integration will be better in future Matlab versions. Perhaps I’ll post something similar to this sometime.

  4. Hoss February 27, 2019 at 21:30 Reply

    Hi,
    Much thanks for this very interesting and useful topic. I read the TableDemo and I was wondering if there was a way to control over one specific cell. For instance, let’s say we have a 3*3 uitable and we want the element located at the 2nd row and 3rd column to have a red background. Is there any way to have access to the widegetId of this specific cell (hopefully without using getWidgetList function)?
    Thank you
    H

Leave a Reply
HTML tags such as <b> or <i> are accepted.
Wrap code fragments inside <pre lang="matlab"> tags, like this:
<pre lang="matlab">
a = magic(3);
disp(sum(a))
</pre>
I reserve the right to edit/delete comments (read the site policies).
Not all comments will be answered. You can always email me (altmany at gmail) for private consulting.

Click here to cancel reply.

Useful links
  •  Email Yair Altman
  •  Subscribe to new posts (feed)
  •  Subscribe to new posts (reader)
  •  Subscribe to comments (feed)
 
Accelerating MATLAB Performance book
Recent Posts

Speeding-up builtin Matlab functions – part 3

Improving graphics interactivity

Interesting Matlab puzzle – analysis

Interesting Matlab puzzle

Undocumented plot marker types

Matlab toolstrip – part 9 (popup figures)

Matlab toolstrip – part 8 (galleries)

Matlab toolstrip – part 7 (selection controls)

Matlab toolstrip – part 6 (complex controls)

Matlab toolstrip – part 5 (icons)

Matlab toolstrip – part 4 (control customization)

Reverting axes controls in figure toolbar

Matlab toolstrip – part 3 (basic customization)

Matlab toolstrip – part 2 (ToolGroup App)

Matlab toolstrip – part 1

Categories
  • Desktop (45)
  • Figure window (59)
  • Guest bloggers (65)
  • GUI (165)
  • Handle graphics (84)
  • Hidden property (42)
  • Icons (15)
  • Java (174)
  • Listeners (22)
  • Memory (16)
  • Mex (13)
  • Presumed future risk (394)
    • High risk of breaking in future versions (100)
    • Low risk of breaking in future versions (160)
    • Medium risk of breaking in future versions (136)
  • Public presentation (6)
  • Semi-documented feature (10)
  • Semi-documented function (35)
  • Stock Matlab function (140)
  • Toolbox (10)
  • UI controls (52)
  • Uncategorized (13)
  • Undocumented feature (217)
  • Undocumented function (37)
Tags
ActiveX (6) AppDesigner (9) Callbacks (31) Compiler (10) Desktop (38) Donn Shull (10) Editor (8) Figure (19) FindJObj (27) GUI (141) GUIDE (8) Handle graphics (78) HG2 (34) Hidden property (51) HTML (26) Icons (9) Internal component (39) Java (178) JavaFrame (20) JIDE (19) JMI (8) Listener (17) Malcolm Lidierth (8) MCOS (11) Memory (13) Menubar (9) Mex (14) Optical illusion (11) Performance (78) Profiler (9) Pure Matlab (187) schema (7) schema.class (8) schema.prop (18) Semi-documented feature (6) Semi-documented function (33) Toolbar (14) Toolstrip (13) uicontrol (37) uifigure (8) UIInspect (12) uitools (20) Undocumented feature (187) Undocumented function (37) Undocumented property (20)
Recent Comments
  • Sunham (3 days 10 hours ago): This is an old article, but the issue persists even in 2023. 2023a: z = mat2cell(1:1e6,1,repmat(1,1,1e 6)); f = @() cellfun(‘isempty’, z); g = @() cellfun(@isempty,z);...
  • Yair Altman (13 days 0 hours ago): Robot only runs when you tell it to run a command such as keyPress. If you don’t tell it to run a command, it uses no CPU, so there’s no need to remove the Robot...
  • Eric (13 days 11 hours ago): Hey @Kevin, can you share your code about create group of figures in the AppContainer? The container of multiples uifigures could be an amazing improvement over AppDesigner and its...
  • Elsa Smith (14 days 2 hours ago): I recently used java.awt.Robot to perform GUI testing on MATLAB and found it to be an extremely easy and useful way to control mouse movements.
  • Elsa Smith (14 days 3 hours ago): I’m suspecting that the slow performance of my GUI may be due to the use of java.awt.Robot. Is there a way to cancel/stop/remove the robot after it has been created, or is...
  • Michelle Kline (14 days 20 hours ago): *edit* tip about fopen(), not about fwrite(). ‘Wb’ vs. ‘wb’
  • Michelle Kline (14 days 20 hours ago): Thank you, Yair! With this previously-unknown-to-me tip about fwrite() performance, you have saved me literally hours of processing time. Michelle Kline Department of...
  • Alessandro Beda (27 days 8 hours ago): I found what I think is a bug related to this (tested in R2022 and R2023a). If I add a “ButtonDownFcn” to the plots (see example below), then the modified...
  • Nicholas (28 days 22 hours ago): Yair, Changing the desktop help options did not solve the issue. Though, it’s unclear how I could change these options in the Runtime, if that’s what you meant? I should...
  • Yair Altman (32 days 17 hours ago): @Francisco – this is one of those cases where you should ask MathWorks support. After all, you’re trying to use a supported Matlab functionality when you encountered...
  • Francisco Campos (33 days 5 hours ago): Hello, thanks for all your work that has been immensely useful for those working in the Matlab environment. I have been trying to replace matlabcontrol with the official...
  • Yair Altman (37 days 6 hours ago): Kei – this is possible, I believe that I saw this ability somewhere, a few years ago. I don’t remember exactly where, it will require a bit of research, but...
  • Kei (37 days 8 hours ago): Hello Yair Thank you for this great article. I would like to freeze first two columns in uitable. Do you know if such option is available? Since looks like this option is not available...
  • Andrés Aguilar (40 days 20 hours ago): Hello, has anyone tried to change the language of the DateComboBox? For example English -> French ————&# 8212;—- January -> Janvier April...
  • Yair Altman (49 days 18 hours ago): I posted my treeTable utility 10 years ago for anyone to use freely, on an as-is basis, without any warranty, updates or support. If you need any customization or assistance...
Contact us
Captcha image for Custom Contact Forms plugin. You must type the numbers shown in the image
Undocumented Matlab © 2009 - Yair Altman
This website and Octahedron Ltd. are not affiliated with The MathWorks Inc.; MATLAB® is a registered trademark of The MathWorks Inc.
Scroll to top