sendEventToHTMLSource

Send HTML UI component event from MATLAB to JavaScript

Since R2023a

collapse all in page

    Syntax

    sendEventToHTMLSource(h,eventName)
    sendEventToHTMLSource(h,eventName,eventData)

    Description

    sendEventToHTMLSource(h,eventName) sends an event with the specified to the HTML source associated with the HTML UI component h. Use this function to notify your HTML source code of a change or interaction associated with the HTML UI component. You can listen for this event and react to it in your JavaScript® code.

    example

    sendEventToHTMLSource(h,eventName,eventData) sends the event with associated event data. You can access this event data in your JavaScript code.

    example

    Examples

    collapse all

    Create an HTML UI component that updates in response to an event.

    First, create an empty HTML UI component in a UI figure.

    fig = uifigure;
h = uihtml(fig);

    Then, create an HTML file named eventCounter.html. In the file:

    • Write a setup function inside of a <script> tag to connect your JavaScript object, named htmlComponent, to the HTML UI component you created in MATLAB®.

    • Add an event listener within the setup function that listens for events from MATLAB named "UpdateCount". When the htmlComponent object receives an "UpdateCount" event, update the HTML content to increment a counter.

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">      
    function setup(htmlComponent) {           
        htmlComponent.addEventListener("UpdateCount", function(event) {
            let counter = document.getElementById("counter");
            let val = Number(counter.innerHTML);
            counter.innerHTML = val + 1;
        });
    }
</script>
</head>

<body>
    <div>Number of events sent:</div>
    <div id="counter">0</div> 
</body>	
</html>

    In MATLAB, set the HTML source of the component to the eventCounter.html file.

    h.HTMLSource = "eventCounter.html";

    UI figure window with text "Number of events sent: 0"

    Send an event named "UpdateCount" to the HTML source. The component updates the event counter.

    sendEventToHTMLSource(h,"UpdateCount")

    UI figure window with text "Number of events sent: 1"

    Create an HTML UI component that uses event data to update in response to an event.

    First, create an empty HTML UI component in a UI figure.

    fig = uifigure;
h = uihtml(fig);

    Then, create an HTML file named displayEventData.html. In the file:

    • Write a setup function inside of a <script> tag to connect your JavaScript object, named htmlComponent, to the HTML UI component you created in MATLAB.

    • Add an event listener within the setup function that listens for events from MATLAB named "DisplayData". When the htmlComponent object receives a "DisplayData" event, update the HTML content to display the event data.

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">      
    function setup(htmlComponent) {           
        htmlComponent.addEventListener("DisplayData", function(event) {
            let dataDisplay = document.getElementById("data");
            dataDisplay.innerHTML = event.Data;
        });
    }
</script>
</head>

<body>
    <div>Event data:</div>
    <div id="data"></div> 
</body>	
</html>

    In MATLAB, set the HTML source of the component to the displayEventData.html file.

    h.HTMLSource = "displayEventData.html";

    Send an event named "DisplayData" to the HTML source and pass in a vector as event data. The component updates to display the data.

    sendEventToHTMLSource(h,"DisplayData",[1 2])

    UI figure window with text "Event data: 1,2"

    Input Arguments

    collapse all

    HTML UI component, specified as an HTML object created using the uihtml function.

    Event name, specified as a string scalar or character vector. Listen for this event name in your JavaScript code.

    Event data, specified as any MATLAB data type. Use this argument to send data associated with the event to the HTML source file. You can access this event data in your JavaScript code in the Data property of the event object.

    When you send event data from MATLAB to JavaScript, that data is converted from a MATLAB data type to a JavaScript data type. If you send data like nested cell arrays, arrays of structures, or MATLAB table array data, you might need information about this conversion occurs in order to process the data in your JavaScript code. For more information, see Create HTML Content in Apps.

    Version History

    Introduced in R2023a

    See Also

    Functions

    Properties

    Topics