HTML Properties

Control HTML UI component appearance and behavior

expand all in page

HTML UI components allow you to display raw HTML text or embed HTML, JavaScript®, or CSS into your app and to interface with third-party JavaScript libraries. The HTML properties control the appearance and behavior of an HTML UI component. Use dot notation to refer to a specific object and property.

fig = uifigure;
h = uihtml(fig); 
h.Position = [100 100 150 100];
h.HTMLSource = '<p style="font-family:sans-serif">This is <mark>marked</mark> text.</p>';

HTML

expand all

HTML markup or file, specified as a character vector or string scalar that contains either HTML markup or the path to an HTML file. All HTML markup and files must be well formed. If the specified character vector or string scalar ends with .html, then it is assumed to be the path to an HTML file.

When embedding HTML markup, you do not need to specify <html> or <body> tags. If the markup you specify is supported in the Chromium browser used by MATLAB® figures created with the uifigure function, then it will render. If you need more structure to your code, then consider using an HTML file instead.

If you set the HTMLSource property to the path to an HTML file, the HTML file must be located in a place that your local file system can access. If you are using supporting files, such as JavaScript, CSS, libraries, or images, then put the files in a location that your local file system can access, reference them in an HTML file, and set the HTMLSource property to the path to the HTML file. Supporting files cannot be in a relative directory adjacent to or above the HTML file.

Example: h = uihtml('HTMLSource','CustomCharts.html') specifies an HTML file.

Example: h = uihtml('HTMLSource','<p>This is <span style="color:red">red</span> text.</p>') specifies markup.

MATLAB data, specified as any MATLAB data type. Use this argument when the value of HTMLSource is the path to an HTML file defining a JavaScript object. Then, this data can be synchronized between the MATLAB HTML UI component and the JavaScript object.

To synchronize the value of the Data property between MATLAB and the third-party content that you are embedding in your app, create a setup function in an HTML file that connects a JavaScript object called htmlComponent to the HTML UI component in MATLAB. Then, set the HTMLSource property value to the path to the file.

Changes in the value of the Data property trigger callback events in only one direction. Specifically,

  • When the Data property is set in MATLAB, the Data property of the htmlComponent JavaScript object also updates and triggers JavaScript event listeners of the 'DataChanged' event.

  • When htmlComponent.Data is set in JavaScript, the Data property of the HTML UI component in MATLAB also updates and triggers the DataChangedFcn callback.

If you have data like nested cell arrays, arrays of structures, or MATLAB table array data, you might need more information about how data is converted between MATLAB and JavaScript. When the Data property of an HTML UI component is set in MATLAB, the data is converted using the jsonencode function, synchronized with JavaScript, parsed using JSON.parse(), and finally set to the Data property of the htmlComponent JavaScript object. Conversions happen in the opposite direction as well by way of JSON.stringify() and the jsondecode function. The Data property is the only property that synchronizes with JavaScript.

Refer to the jsonencode function for more information about the data types it supports. If the jsonencode function does not support your data type, then use a data type conversion function, like num2str, to convert your data to a supported type. Then, set it as the value of the Data property.

For more information about how to write an HTML file that enables data synchronization and the properties of the htmlComponent JavaScript object, see Create HTML File That Can Trigger or Respond to Data Changes.

Interactivity

expand all

Visibility of HTML UI component, specified as 'on' or 'off'. The Visible property determines whether the HTML UI component is displayed on the screen. If the Visible property is set to 'off', the entire HTML UI component is hidden, but you can still set and access its properties.

To make your app open faster, set the Visible property to 'off' for all components that do not need to appear at startup.

Tooltip, specified as a character vector, cell array of character vectors, string array, or 1-D categorical array. Use this property to display a message when the user hovers the pointer over the component at run time. The tooltip displays even when the component is disabled. To display multiple lines of text, specify a cell array of character vectors or a string array. Each element in the array becomes a separate line of text. If you specify this property as a categorical array, MATLAB uses the values in the array, not the full set of categories.

Position

expand all

Location and size of HTML UI component relative to the parent container, specified as a four-element vector of the form [left bottom width height]. This table describes each element in the vector.

ElementDescription
leftDistance from the inner left edge of the parent container to the outer left edge of the HTML UI component
bottomDistance from the inner bottom edge of the parent container to the outer bottom edge of the HTML UI component
widthDistance between the right and left outer edges of the HTML UI component
heightDistance between the top and bottom outer edges of the HTML UI component

The Position values are relative to the drawable area of the parent container. The drawable area is the area inside the borders of the container and does not include the area occupied by decorations such as a menu bar or title.

All measurements are in pixel units.

Inner location and size of HTML UI component, specified as a four-element vector of the form [left bottom width height]. All measurements are in pixel units. This property value is identical to the Position property.

This property is read-only.

Outer location and size of HTML UI component, returned as a four-element vector of the form [left bottom width height]. All measurements are in pixel units. This property value is identical to the Position property.

Layout options, specified as a GridLayoutOptions object. This property specifies options for components that are children of grid layout containers. If the component is not a child of a grid layout container (for example, it is a child of a figure or panel), then this property is empty and has no effect. However, if the component is a child of a grid layout container, you can place the component in the desired row and column of the grid by setting the Row and Column properties on the GridLayoutOptions object.

For example, this code places an HTML UI component in the third row and second column of its parent grid.

g = uigridlayout([4 3]);
h = uihtml(g);
h.HTMLSource = '<body style="background-color:powderblue;"><p>Hello World!</p></body>';
h.Layout.Row = 3;
h.Layout.Column = 2;

To make the HTML UI component span contiguous rows or columns, specify the Row or Column property as a two-element vector. For example, this HTML UI component spans columns 2 through 3.

h.Layout.Column = [2 3];

Callbacks

expand all

Callback when data changes, specified as one of these values:

  • Function handle.

  • Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

When the value of the Data property changes in the htmlComponent JavaScript object, the Data property of the MATLAB HTML UI component is updated, and this callback executes.

This callback function can access specific information about changes in data in the JavaScript object. MATLAB passes the information in a DataChangedData object as the second argument to your callback function. In App Designer, the argument is called event. You can query the DataChangedData object properties using dot notation. For example, event.PreviousData returns the previous value of Data before it was last updated or changed. The DataChangedData object is not available to callback functions specified as character vectors.

This table lists the properties of the DataChangedData object.

PropertyDescription
DataMost recent data resulting from the last DataChanged event
PreviousDataData before the last DataChanged event
Source

MATLAB HTML UI component that executes the callback

EventName'DataChanged'

For more information about writing callbacks, see Write Callbacks in App Designer.

Object creation function, specified as one of these values:

  • Function handle.

  • Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Write Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB creates the object. MATLAB initializes all property values before executing the CreateFcn callback. If you do not specify the CreateFcn property, then MATLAB executes a default creation function.

Setting the CreateFcn property on an existing component has no effect.

If you specify this property as a function handle or cell array, you can access the object that is being created using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Object deletion function, specified as one of these values:

  • Function handle.

  • Cell array in which the first element is a function handle. Subsequent elements in the cell array are the arguments to pass to the callback function.

  • Character vector containing a valid MATLAB expression (not recommended). MATLAB evaluates this expression in the base workspace.

For more information about specifying a callback as a function handle, cell array, or character vector, see Write Callbacks in App Designer.

This property specifies a callback function to execute when MATLAB deletes the object. MATLAB executes the DeleteFcn callback before destroying the properties of the object. If you do not specify the DeleteFcn property, then MATLAB executes a default deletion function.

If you specify this property as a function handle or cell array, you can access the object that is being deleted using the first argument of the callback function. Otherwise, use the gcbo function to access the object.

Callback Execution Control

expand all

Callback interruption, specified as 'on' or 'off'. The Interruptible property determines if a running callback can be interrupted.

There are two callback states to consider:

  • The running callback is the currently executing callback.

  • The interrupting callback is a callback that tries to interrupt the running callback.

Whenever MATLAB invokes a callback, that callback attempts to interrupt the running callback (if one exists). The Interruptible property of the object owning the running callback determines if interruption is allowed. The Interruptible property has two possible values:

  • 'on' — Allows other callbacks to interrupt the object's callbacks. The interruption occurs at the next point where MATLAB processes the queue, such as when there is a drawnow, figure, uifigure, getframe, waitfor, or pause command.

    • If the running callback contains one of those commands, then MATLAB stops the execution of the callback at that point and executes the interrupting callback. MATLAB resumes executing the running callback when the interrupting callback completes.

    • If the running callback does not contain one of those commands, then MATLAB finishes executing the callback without interruption.

  • 'off' — Blocks all interruption attempts. The BusyAction property of the object owning the interrupting callback determines if the interrupting callback is discarded or put into a queue.

Note

Callback interruption and execution behave differently in these situations:

  • If the interrupting callback is a DeleteFcn, CloseRequestFcn or SizeChangedFcn callback, then the interruption occurs regardless of the Interruptible property value.

  • If the running callback is currently executing the waitfor function, then the interruption occurs regardless of the Interruptible property value.

  • Timer objects execute according to schedule regardless of the Interruptible property value.

When an interruption occurs, MATLAB does not save the state of properties or the display. For example, the object returned by the gca or gcf command might change when another callback executes.

Callback queuing, specified as 'queue' or 'cancel'. The BusyAction property determines how MATLAB handles the execution of interrupting callbacks. There are two callback states to consider:

  • The running callback is the currently executing callback.

  • The interrupting callback is a callback that tries to interrupt the running callback.

Whenever MATLAB invokes a callback, that callback attempts to interrupt a running callback. The Interruptible property of the object owning the running callback determines if interruption is permitted. If interruption is not permitted, then the BusyAction property of the object owning the interrupting callback determines if it is discarded or put in the queue. These are possible values of the BusyAction property:

  • 'queue' — Puts the interrupting callback in a queue to be processed after the running callback finishes execution.

  • 'cancel' — Does not execute the interrupting callback.

This property is read-only.

Deletion status, returned as 'off' or 'on'. MATLAB sets the BeingDeleted property to 'on' when the DeleteFcn callback begins execution. The BeingDeleted property remains set to 'on' until the component object no longer exists.

Check the value of the BeingDeleted property to verify that the object is not about to be deleted before querying or modifying it.

Parent/Child

expand all

Parent container, specified as a Figure object created using the uifigure function, or one of its child containers: Tab, Panel, ButtonGroup, or GridLayout. If no container is specified, MATLAB calls the uifigure function to create a new Figure object that serves as the parent container.

Visibility of the object handle, specified as 'on', 'callback', or 'off'.

This property controls the visibility of the object in its parent's list of children. When an object is not visible in its parent's list of children, it is not returned by functions that obtain objects by searching the object hierarchy or querying properties. These functions include get, findobj, clf, and close. Objects are valid even if they are not visible. If you can access an object, you can set and get its properties, and pass it to any function that operates on objects.

HandleVisibility ValueDescription
'on'The object is always visible.
'callback'The object is visible from within callbacks or functions invoked by callbacks, but not from within functions invoked from the command line. This option blocks access to the object at the command-line, but allows callback functions to access it.
'off'The object is invisible at all times. This option is useful for preventing unintended changes to the UI by another function. Set the HandleVisibility to 'off' to temporarily hide the object during the execution of that function.

Identifiers

expand all

This property is read-only.

Type of graphics object, returned as 'uihtml'.

Object identifier, specified as a character vector or string scalar. You can specify a unique Tag value to serve as an identifier for an object. When you need access to the object elsewhere in your code, you can use the findobj function to search for the object based on the Tag value.

User data, specified as any MATLAB array. For example, you can specify a scalar, vector, matrix, cell array, character array, table, or structure. Use this property to store arbitrary data on an object.

If you are working in App Designer, create public or private properties in the app to share data instead of using the UserData property. For more information, see Share Data Within App Designer Apps.

See Also

Functions

Topics

Introduced in R2019b

MATLAB Documentation
Support
MATLABで始めるディープラーニング

MATLABで始めるディープラーニング

ebookをダウンロードする