Debug HTML Content in Apps - MATLAB & Simulink (original) (raw)
Main Content
You can include HTML content, including JavaScript®, CSS, and third-party visualizations or widgets, in your app by using an HTML UI component. If you create an app with an HTML UI component that is not working as expected, or if you want to know what your data looks like when converting between MATLAB® and JavaScript, you can use your system browser to debug the code in the HTML source file. Using the Developer Tools (DevTools) of your browser, 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.
Create Sample HTML Source File
Create a sample HTML source file. Save this code to a file namedsampleHTMLFile.html.
The sample file creates three elements:
- An edit field to display and edit component data
- An edit field to display and edit event data
- A button to send an event from JavaScript to MATLAB
The setup function in the sample file defines four callback functions:
dataFromMATLABToHTML— Update the Component data edit field with the current data. This function executes whenever theDataproperty of the MATLABHTMLobject changes.eventFromMATLABToHTML— Update the Event data edit field with the data from the most recent event. This function executes whenever MATLAB sends an event named"MyMATLABEvent"to the HTML source.dataFromHTMLToMATLAB— Update theDataproperty of the JavaScripthtmlComponentobject with the text in the Component data edit field. This function executes whenever a user enters a new value in the edit field. The function triggers theDataChangedFcncallback of the MATLABHTMLobject.eventFromHTMLToMATLAB— Send an event named"MyHTMLSourceEvent"with data from the text in theEvent data edit field. This function executes whenever a user clicks the Send event to MATLAB button. The function triggers theHTMLEventReceivedFcncallback of the MATLABHTMLobject.