Import Data from html-built UI to Matlab

16 views (last 30 days)
Hello. I've created user interface (a form) using HTML and CSS and embedded it onto matlab using uihtml component. I've successfully loaded my UI through matlab however, I cannot fetch the data entered from the UI. I need those data and input them in my anfis model which is generated through NeuroFuzzy Designer here in matlab. After the data processed through the model, i then need to display the result onto my UI. Main goal of my project is to predict risk level of patients in getting pneumonia. Question is, how can I fetch data from my UI and pass it to matlab, and vice versa?

Accepted Answer

Antonio Hortal
Antonio Hortal on 15 Nov 2021
Hi Jovelyn, I can recommend you to go through this article that explains how the "Data" property in the uihtml component lets you connect your Matlab code with your HTML one: "Create HTML File that can trigger and respond to data changes". The documentation for the uihtml object also has some nice examples on how to set up the connection between Matlab and HTML
For your form you could try something like this:
  1. In your html file, create a setup function (like in the article) that appends a submit listener to your form element. When registering a submit event, you will need to change the "Data" property of the htmlcomponent to whatever you want your Matlab code to see.
function setup(htmlComponent) {
document.getElementById('yourFormId').addEventListener('submit', function (event){
htmlComponent.Data = {'Name': document.getElementById('yourFormInput').value};
})
}
2. In Matlab, add a 'DataChangedFcn' callback to your uihtml element. The second argument to the callback (the event) contains the "Data" that was sent from the HTML file
yourUIHTML.DataChangedFcn = @(src, event) dataChangedCallback(src, event);
function dataChangedCallback(src, evt)
yourHTMLData = evt.Data;
disp(yourHTMLData.Name)
end
  10 Comments
Antonio Hortal
Antonio Hortal on 19 Nov 2021
You can creare as many functions as you want in your <script> tags inside the HTML file.
The warning message that you get in the command window is thrown when your javascript code throws an error. On this article there is a section called 'Debug your HTML code', give it a try :)

Sign in to comment.

More Answers (0)

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!