%% Code MATLAB Response to Data Change in JavaScript
% Create an htmlComponent JavaScript® object that generates a random number when a button is clicked, and display the number in MATLAB®.
% First, create an empty HTML UI component and position it within a figure.

fig = uifigure;
fig.Position = [500 500 490 180];

h = uihtml(fig);
h.Position = [20 20 450 130];

%
% Then, create an HTML file called generateJSRandomNumber.html. In the file,
% Use a style tag to define internal CSS styles for a button element.
% Write a setup function inside of a <script> tag to connect your JavaScript object, called htmlComponent, to the HTML UI component you created in MATLAB.
% Add an event listener within the setup function. The event listener listens for "click" events on the button and creates a listener callback function. When a click event occurs, the listener callback function sets the Data property of the htmlComponent JavaScript object to a randomly generated integer between 1 and 100.
% <!DOCTYPE html>
% <html>
% <head>
% <style>
% button {
%   width: 100%;
%   font-family: sans-serif;
%   background-color: #4CAF50;
%   color: white;
%   font-size: 1rem;
%   text-shadow: 1px 1px 1px #000;
%   padding: 5px 20px;
%   margin: 8px 0;
%   border: none;
%   border-radius: 10px;
%   line-height: 2.5;
%   cursor: pointer;
%   background-image: linear-gradient(to top left,
%                                       rgba(0, 0, 0, .2),
%                                       rgba(0, 0, 0, .2) 30%,
%                                       rgba(0, 0, 0, 0));
%   box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
%              inset -2px -2px 3px rgba(0, 0, 0, .6);
% }
%
% button:hover {
%   background-color: #45a049;
% }
%
% button:focus {
% outline: 0;
% }
%
% button:active {
%     box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
%                 inset 2px 2px 3px rgba(0, 0, 0, .6);
% }
% </style>
%
%    <script type="text/javascript">
%
%       function setup(htmlComponent) {
%
%          document.getElementById("generateRandomNumber").addEventListener("click", function(event) {
%             htmlComponent.Data = Math.floor(Math.random() * 100) + 1;
%          });
%       }
%    </script>
% </head>
%
%    <body>
%      <button id="generateRandomNumber">Generate Random Number</button><br/>
%    </body>
%
% </html>
%
% Now, in MATLAB, set the value of the HTMLSource property to the path to the HTML file. Create a DataChangedFcn callback function that displays the random number your JavaScript code generates. Click the Generate Random Number button to see the value of the Data property display in the MATLAB Command Window.

h.HTMLSource = fullfile(pwd,'generateJSRandomNumber.html');
h.DataChangedFcn = @(src,event)disp(h.Data);

%
% Copyright 2019 The MathWorks, Inc.