Create HTML Content in Apps - MATLAB & Simulink (original) (raw)

You can add HTML content, including JavaScript®, CSS, and third-party visualizations or widgets, to your app by using an HTML UI component. Use the uihtml function to create an HTML UI component.

When you add an HTML UI component to your app, write code to communicate between MATLAB® and JavaScript. You can set component data, respond to changes in data, and react to user interaction by sending events.

Communicate Between MATLAB and JavaScript

To connect the MATLAB HTML UI component in your app to your HTML content, implement a setup function in your HTML file. Thesetup function defines and initializes a local JavaScripthtmlComponent object, which synchronizes with the MATLABHTML object. The JavaScripthtmlComponent object is accessible only from within the setup function.

The setup function executes whenever one of these events happens:

With this connection, you can share information between your MATLAB and JavaScript code using multiple approaches:

This table gives an overview of the ways that the MATLABHTML object and the JavaScripthtmlComponent object can communicate.

Task MATLAB JavaScript
Access component object. MATLAB represents the UI component as anHTML object.You can access the HTML object from MATLAB by storing the output of theuihtml function as a variable.fig = uifigure; c = uihtml(fig); JavaScript represents the UI component as thehtmlComponent object.You can access thehtmlComponent object only from within the setup function of the HTML source file associated with the MATLABHTML object.
Access component data. The MATLABHTML object has aData property. This property is synchronized with the Data property of the JavaScripthtmlComponent object. Use this property to transfer data to or access data from your HTML source code.Access the property in your MATLAB code.fig = uifigure; c = uihtml(fig); c.Data = 10; The JavaScripthtmlComponent object has aData property. This property is synchronized with the Data property of the MATLABHTML object. Use this property to transfer data to or access data from MATLAB.Access the property in the setup function of the HTML source file.
Respond to a change in component data. The MATLABHTML object has aDataChangedFcn callback property.Create aDataChangedFcn callback for theHTML UI component to execute a function when the Data property of the htmlComponent JavaScript object changes.fig = uifigure; c = uihtml(fig); c.DataChangedFcn = @(src,event) disp(event.Data); The JavaScripthtmlComponent object has anaddEventListener method.Add aDataChanged listener to thehtmlComponent object to execute a function when the Data property of the MATLABHTML object changes.htmlComponent.addEventListener("DataChanged", updateData); function updateData(event) { let changedData = htmlComponent.Data; // Update HTML or JavaScript with the new data }For more information about theaddEventListener method, seeEventTarget.addEventListener() on Mozilla® MDN web docs.
Send and react to an event from MATLAB in JavaScript. To send an event from MATLAB to JavaScript, use thesendEventToHTMLSource function.For example, you can send an event to react to a user interacting with a MATLAB UI component in your JavaScript code.fig = uifigure; c = uihtml(fig); eventData = [1 2 3]; sendEventToHTMLSource(c,"myMATLABEvent",eventData); To react to an event from MATLAB in your JavaScript code, add a listener that listens for the MATLAB event to the JavaScripthtmlComponent object.Access event data sent from MATLAB using theevent.Data property.htmlComponent.addEventListener("myMATLABEvent", processEvent); function processEvent(event) { let eventData = event.Data; // Update HTML or JavaScript to react to the event }
Send and react to an event from JavaScript in MATLAB. To react to an event from JavaScript in your MATLAB code, create anHTMLEventReceivedFcn callback for your HTML UI component.fig = uifigure; c = uihtml(fig); c.HTMLEventReceivedFcn = @(src,event) disp(event); To send an event from JavaScript to MATLAB, use thesendEventToMATLAB function.For example, you can send an event to react to a user clicking an HTML button element in your MATLAB code.eventData = [1,2,3]; htmlComponent.sendEventToMATLAB("myHTMLEvent",eventData);

For an example of an HTML source file that is configured to connect to a MATLABHTML UI component, see Sample HTML Source File.

Convert Data Between MATLAB and JavaScript

You can pass two types of data between the MATLAB HTML component and the JavaScripthtmlComponent object:

Because MATLAB and JavaScript support slightly different sets of data types, the component converts the data when it is shared.

When the component converts data from MATLAB to JavaScript:

  1. The component encodes the MATLAB data as JSON-formatted text using the jsonencode function.
  2. The component parses the JSON-formatted text to JavaScript data using JSON.parse().

When the component converts data from JavaScript to MATLAB:

  1. The component encodes the JavaScript data as JSON-formatted text usingJSON.stringify().
  2. The component parses the JSON-formatted text to MATLAB data using the jsondecode function.

You can use these functions to simulate how your data is sent between MATLAB and JavaScript to help you write and debug your code. For more information, see Debug HTML Content in Apps.

Sample HTML Source File

This example provides a sample HTML source file. Save this code to a file named sampleHTMLFile.html. You can use this sample file as a starting point for your own HTML UI components, or to explore how a component sends data between MATLAB and JavaScript.

The sample file creates three elements:

The setup function in the sample file defines four callback functions: