How to integrate HTML into Matlab App Designer?
Show older comments
Hello all!
As a quick preface I am using MatLab 2021a.
I have been in the process of making a GUI for an auditory neuroscience project, and was trying to use an HTML UI component for the App Designer, since I am pretty familiar with HTML. However, I have been struggling to add MatLab functionality to my setup. Currently, I have the HTML mocked up, however don't understand how to integrate callbacks, the properties or the methods. I wasn't able to find much documentation online.
Currently for the callback I have:
function HTMLDataChanged(app, event)
latestvalue = event.Value;
app.HTML.Value = latestvalue;
end
I was not sure how to connect this to any variables within my HTML code; I was trying something along the following for an initial property, I was getting a syntax error, but I haven't been able to find the syntax online.
properties (Access = private)
app.HTML.HearingStatus.Value = 'NH';
end
If anyone could point me in the right direction it would be greatly appreciated.
Thank you so much for your help!
Answers (1)
Kojiro Saito
on 21 Oct 2021
To synchronize the value of the Data property between MATLAB and the third-party content that you are embedding in your app, create a setup function in an HTML file that connects a JavaScript object called htmlComponent to the HTML UI component in MATLAB. Then, set the HTMLSource property value to the path to the file.
So, you need to create setup function in HTML/JavaScript to connect HTML and MATLAB.
I've attached mlapp and two html files. myHtml.html is a sample for passing data from MATLAB to HTML and myHtml2.html is one which passes data from HTML to MATLAB.
myHtml.html (sample for passing data from MATLAB to HTML)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setup(htmlComponent) {
htmlComponent.addEventListener("DataChanged", function(event) {
document.getElementById("dataDisplay").innerHTML = htmlComponent.Data;
});
}
</script>
</head>
<body>
<div id="prompt">
<span><label for="prompt"><strong>Data from MATLAB will display here:</strong></label></span>
<br/><br/>
<div id ="dataDisplay">
Please set data in MATLAB...
</div>
</div>
</body>
</html>
myHtml2.html (sample for passing data from HTML to MATLAB)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="textInput">
<span><label for="textInput"><strong>Data to MATLAB:</strong></label></span>
<br/><br/>
<div >
Input <input id="dataInput" type="text" placeholder="Type something"></input>
</div>
</div>
</body>
<script type="text/javascript">
function setup(htmlComponent) {
const input = document.getElementById('dataInput');
//const html = document.querySelector('html');
input.addEventListener('input', updateValue);
function updateValue(e) {
htmlComponent.Data = e.target.value;
}
}
</script>
</html>
Demo
Please let me know if you have further question.
8 Comments
Achilleas Vortselas
on 27 Jan 2022
How do you pass data to/from multiple elements on the same html file?
The documentation page mentions using dot notation on the Data property and that these are JSON encoded. But how does the event listener work?
https://uk.mathworks.com/help/matlab/creating_guis/create-an-html-file-that-sets-data-or-responds-to-data-changes-from-matlab.html#mw_947c635f-65d5-4810-a5cd-b13878365984
Alex Clonan
on 7 Feb 2022
Kojiro Saito
on 8 Feb 2022
uihtml.Data property allows any MATLAB data types, so in HTML side, htmlComponent.Data can be JSON types and it passes to MATLAB as struct.
Only one setup function is enough in one html file. By changing htmlComponent.Data to JSON object which has 'name' and 'value' property, MATLAB can know which HTML data was changed by checking app.HTML.Data.name property. Sample is as follows,
[HTML file]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setup(htmlComponent) {
const expInput = document.getElementById('exp');
expInput.addEventListener('input', updateValue);
function updateValue(e) {
htmlComponent.Data = {
'name': 'exp',
'value': e.target.value
};
}
const consInput = document.getElementById('consent');
consInput.addEventListener('input', updateValue);
function updateValue(e) {
htmlComponent.Data = {
'name': 'consent',
'value': e.target.value
};
}
}
</script>
</head>
<body>
<div class="main">
<h2>Experiment Information</h2>
<p>Select a paradigm to run for the following experiment. Use the drop down to select existing paradigms from
the selection list.</p>
<label for="exp">Choose a paradigm:</label>
<select id="exp" name="exp">
<option value="DigitsInNoise">DigitsInNoise</option>
<option value="Exp1">Exp1</option>
<option value="Exp2">Exp2</option>
<option value="Exp3">Exp3</option>
</select>
</div>
<div class="footer">
<p>Please select yes or no if you consent to particpating in this research study.</p>
<label for="consent">Do you consent?</label>
<select id="consent" name="consent">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</body>
</html>
[MATLAB mlapp file]
Adding two properties to avoid assignin.
properties (Access = private)
experiment
consentResp
end
Here is HTML Data Changed callback.
% Data changed function: HTML
function HTMLDataChanged(app, event)
data = app.HTML.Data;
if data.name == "consent"
app.consentResp = data.value;
elseif data.name == "exp"
app.experiment = data.value;
end
end
Hope this works.
Alex Clonan
on 9 Feb 2022
Kojiro Saito
on 9 Feb 2022
I think the variables are stored in app.consentResp and app.experiment, respectively.
Alex Clonan
on 9 Feb 2022
Alex Clonan
on 16 Feb 2022
Kojiro Saito
on 17 Feb 2022
Edited: Kojiro Saito
on 17 Feb 2022
Just wrapping the script in function setup is enough.
Full html file (myhtml.html).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="test">
<label><input type="radio" name="test" value=0> A</label>
<label><input type="radio" name="test" value=1> B</label>
<label><input type="radio" name="test" value=2> C</label>
</form>
</body>
<script type="text/javascript">
function setup(htmlComponent) {
const RaceResponseInput = document.getElementById("test");
function updateValue19(e) {
htmlComponent.Data = {
'name': 'RaceResponse',
'value': e.target.value
};
}
RaceResponseInput.addEventListener('input', updateValue19);
}
</script>
</html>
Add raceResponse property in mlapp.
properties (Access = private)
raceResponse % Added
end
Here is uihtml datachanged callback.
function HTMLDataChanged(app, event)
data = app.HTML.Data;
if data.name == "RaceResponse"
app.raceResponse = data.value;
uialert(app.UIFigure, app.raceResponse, 'Selected Value', 'Icon', 'info')
end
end
Demo
Categories
Find more on Data Import and Analysis in Help Center and File Exchange
on 20 Oct 2021
on 17 Feb 2022
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!
