%% 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 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>
% Copyright 2019 The MathWorks, Inc.