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. When you add an HTML UI
component to your app, to enable the component 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 when one of these
events happens:
The HTML UI component is created in the figure and the content has fully loaded.
The
HTMLSource
property changes to a new value.
The setup
function is called only
if it is defined. 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
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 thehtmlComponent
JavaScript object and triggers aDataChangedFcn
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
, wheredom.textContent = initialData;
.Open the DevTools console and create the
htmlComponent
JavaScript object. Use theJSON.parse
method to convert the JSON string you just generated in MATLAB to a JavaScript object and store it in theData
property of thehtmlComponent
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 thesetup
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.