Create HTML File That Can Trigger or Respond to Data Changes

You can include third-party visualizations or widgets in your app by creating an HTML UI component in it that displays HTML, JavaScript^®, or CSS content from an HTML file. To embed content of this type into your app and enable it to set data or respond to data changes between MATLAB^® and JavaScript, include a setup function in your HTML file. Within the setup function you can connect the HTML content to the HTML UI component in MATLAB.

Include Setup Function in Your HTML File

To connect the MATLAB HTML UI component in your app to the content in your HTML file, create a setup function that defines and initializes a local htmlComponent JavaScript object. The HTML UI component in MATLAB and the htmlComponent JavaScript object have Data properties that synchronize with each other. The setup function is required if you want to set data from either MATLAB or JavaScript and respond to changes in data that occur on the opposite side.

The setup function is called once when the HTML UI component is created in the figure and the content has fully loaded or if the HTMLSource property changes to a new value. The setup function is called only if it is defined and the htmlComponent JavaScript object is accessible only from within the setup function.

The htmlComponent JavaScript object also has addEventListener and removeEventListener properties. Use these properties to listen for "DataChanged" events from MATLAB. The event data from "DataChanged" events provides the source htmlComponent JavaScript object with the old and new data. For more information about the addEventListener and removeEventListener methods, see EventTarget.addEventListener() and EventTarget.removeEventListener() on Mozilla^® MDN web docs.

Sample HTML File

Open Live Script

This example shows an HTML file with the required setup function for enabling MATLAB and JavaScript to respond to data changes from one another.

Within the setup function, once the htmlComponent JavaScript object has been initialized, you define the behavior of the component. For example:

Get the initial value of the Data property from the HTML UI component in MATLAB.
Initialize your HTML or JavaScript by updating DOM elements or JavaScript widgets.
Listen for "DataChanged" events in MATLAB and code a JavaScript response. For example, you can update your HTML or JavaScript with the new data that triggered the event.
Create a function that sets the Data property of the htmlComponent JavaScript object and triggers a DataChangedFcn callback in MATLAB.

After the setup function, you can use your third-party JavaScript libraries as the library documentation recommends.

Here is a sample HTML file, sampleHTMLFile.html.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
		
        function setup(htmlComponent) {
            console.log("Setup called:", htmlComponent);

            // Get the initial 'Data' value from MATLAB

	    var initialData = htmlComponent.Data;
            console.log("Initial MATLAB Data", initialData);
			
	    // Initialize your HTML or JavaScript here
	    // Update things like DOM elements or JavaScript widgets
          
            var dom = document.getElementById("Content");
            dom.textContent = initialData;
			
	    // Code response to data changes in MATLAB
          
            htmlComponent.addEventListener("DataChanged", function (event) {
                var changedData = htmlComponent.Data;
                console.log("New Data from MATLAB", changedData);
				
            // Update your HTML or JavaScript with the new data
                var dom = document.getElementById("Content");
                dom.textContent = changedData;

        });

			
            // Update 'Data' in MATLAB and trigger
	    // the 'DataChangedFcn' callback function
            
        function updateData(newData) {
            htmlComponent.Data = newData;
            console.log("Changing Data in HTML", newData)
        }
        }
    </script>
</head>

<body>
    <div style="font-family:sans-serif;">
        <span style="font-weight:bold;"> The data from MATLAB will display here:</span><br />
        <div id ="Content"></div>
    </div>

	
    <!Reference supporting files here>
   
    <script src=""></script>
    <link rel="stylesheet" type="text/css" href="">
    <link rel="icon" type="image/png" href="">

</body>

</html>

Debug an HTML File

If you create an HTML component that is not working as expected, or if you want to know what your data looks like after conversion is complete between MATLAB and JavaScript, open the HTML file in your system browser. Using your browser Developer Tools (DevTools), you can set breakpoints to test portions of your setup function. When you debug your HTML file through the system browser, you must simulate the connection between MATLAB and JavaScript that the setup function provides.

Simulate Sending Data from MATLAB to JavaScript

This example shows how to simulate the way MATLAB sends data to JavaScript so that you can debug the HTML file.

Open this example in MATLAB. From the Current Folder browser, right-click the file called sampleHTMLFile.html and select Open Outside MATLAB. The HTML file opens in your system browser.

In MATLAB, run this code to convert a MATLAB cell array of character vectors to a JSON string. Copy the returned string value to your clipboard.
```
value = {'one';'two';'three'};
jsontxt = jsonencode(value)
```
```
jsontxt = 
'["one","two","three"]'
```
In the DevTools of your system browser, open the file to view the code. Create a breakpoint at line 16, where dom.textContent = initialData;.
Open the DevTools console and create the htmlComponent JavaScript object. Use the JSON.parse method to convert the JSON string you just generated in MATLAB to a JavaScript object and store it in the Data property of the htmlComponent object.
```
var htmlComponent = {
    Data: JSON.parse('["one","two","three"]'), // JSON formatted text from MATLAB data
    addEventListener: function() {console.log("addEventListener called with: ", arguments)}
};
```
While still in the DevTools console, call the setup function. When you resume execution of the setup function, the data appears in the HTML page within DevTools.
```
setup(htmlComponent)
```

You can also simulate the "DataChanged" listener callback by JSON encoding and parsing data from MATLAB into your JavaScript code.

Simulate Sending Data from JavaScript to MATLAB

If you want to debug how data is sent from JavaScript to MATLAB, use the JSON.stringify method to convert a JavaScript object into a JSON-formatted string. Then, in MATLAB, use the jsondecode function to convert that string to MATLAB data.