h = uihtml()
h = uihtml(parent)
h = uihtml(..., propertyName, propertyValue)
| Parameter | Description |
|---|---|
| parent | parent object. |
| propertyName, propertyValue | name-value pairs. |
| Parameter | Description |
|---|---|
| h | UI object. |
h = uihtml() creates a component that displays an HTML page inside a UI figure and exchanges data with it.
uihtml requires the WebView desktop. Anywhere else it raises Nelson:uihtml:webviewDesktopRequired, because no page can be displayed there. Start the WebView desktop to use it.
HTMLSource accepts two forms: HTML markup, or the name of an HTML file (relative or absolute). It is stored exactly as given. A URL is not accepted.
The page must define a global setup function taking one argument. It runs once the content has loaded, and again whenever HTMLSource changes to a different value. Setting the same value again changes nothing.
The object passed to setup carries the property Data, the methods addEventListener and removeEventListener, and the method sendEventToNelson(name, data). Note that pages written for other environments name that last method differently and must be edited.
Notification is asymmetric. Writing Data from Nelson raises the DataChanged event in the page and does not run DataChangedFcn. Writing it from the page runs DataChangedFcn, whose event carries Data and PreviousData, and is not sent back down. Writing a value equal to the current one notifies nobody.
Data travels as JSON in both directions, so a value comes back as jsonencode followed by jsondecode leaves it: integers arrive as double, row vectors come back as columns, datetime and categorical arrive as text, and complex values cannot be sent at all.
Use sendEventToHTMLSource to send a named event to the page; the page receives it through addEventListener. A page event reaches Nelson through HTMLEventReceivedFcn, whose event carries HTMLEventName and HTMLEventData. Page events are delivered in the order the page sent them.
The page keeps its state while it is hidden, while its tab is not selected, and across a change of parent inside the desktop. Moving a figure between its own window and the docked desktop is not one of those: the page moves to another document and is rebuilt, and setup runs again.
Write a page that can rebuild itself. Data keeps its value across such a rebuild, so read it in setup and render from it there, rather than waiting for DataChanged - a notification a fresh page has already missed. A page that only renders on DataChanged comes back empty, and re-running the handshake does not save it: writing the value already published notifies nobody.
f = uifigure();
page = ['<html><body><p id="out">waiting</p><script>', ...
'function setup(h) {', ...
' h.addEventListener("DataChanged", function () {', ...
' document.getElementById("out").textContent = JSON.stringify(h.Data);', ...
' });', ...
' h.sendEventToNelson("ready", {});', ...
'}</script></body></html>'];
h = uihtml(f, 'Position', [10 10 400 200], 'HTMLSource', page);
h.HTMLEventReceivedFcn = @(src, evt) disp(evt.HTMLEventName);
h.Data = struct('temperature', 21.5);
| Version | Description |
|---|---|
| 2.0.0 | initial version |