Import Data from html-built UI to Matlab
显示 更早的评论
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?
采纳的回答
Antonio Hortal
2021-11-15
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:
- 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 个评论
Jovelyn Obias
2021-11-15
Thank you sir for your response. In html, the setup function must be called upon clicking the button right?
<button onclick = "setup()" type = "submit">SUBMIT</button>
Also, i am getting an error like this 
<script type = "text/javascript">
function setup (htmlComponent){
document.getElementbyId('form_ID').addEventListener('submit',function(event){
htmlComponent.Data = {'Age': document.getElementbyId('age')};
});
}
</script>
that is the js i've written
% Callbacks that handle component events
methods (Access = private)
% Data changed function: questions
function questionsDataChanged(app, event)
data = event.Data;
disp(data.Age);
end
end
and this in matlab
Antonio Hortal
2021-11-15
The button doesn't need to call the setup() function. The setup() function is called internally by Matlab when the html code finishes rendering, and is meant for you to define inside the listeners for the actions that you want to see in Matlab (in this case, you are listening to the 'submit' event on the form)
If your DOM looks like this
<form id="form_ID">
<label>Test field: <input id='age' type="text"></label>
<button type="submit">SUBMIT</button>
</form>
then your code should work. But you need to get the 'value' property of the input:
htmlComponent.Data = {Age: document.getElementbyId('age').value};
(The Age property does not need to go with "")
Jovelyn Obias
2021-11-15
Jovelyn Obias
2021-11-15
Antonio Hortal
2021-11-15
编辑：Antonio Hortal
2021-11-15
Since you are probably not an avid javascript/html programmer (neither I am haha, Matlab is the thing I know best), I would recommend you to use the getElementsById just as you did. It might not be the prettiest piece of code, but if it works, it works :)
Still, if you feel like learning new things of javascript and the DOM, you can read about querySelector() and see if maybe you can improve your code. Or about getElementsByClassName (but read the docs!, you are probably using it incorrectly)
Good luck with your code!
Oh, and if my first answer helped you, you can accept it :)
Jovelyn Obias
2021-11-16
Jovelyn Obias
2021-11-16
Can I add another question? Now that I passed the data to matlab, i stored the 19 inputs to the riskInput and 5 inputs to the typeInput and processed them through evalfis. But im getting this error
So I enclosed riskInput and typeInput inside the double(), this is my code now
% Data changed function: Assessment
function AssessmentDataChanged(app, event)
data = event.Data;
rfis = readfis('riskFis');
tfis = readfis('typeFis');
riskInput = [data.Age data.Temp data.Lung data.Heart data.Diabetes data.HIV data.Cough data.Chemo data.Smoke data.Alcohol data.Chemical data.Swallow data.Sweating data.Breathe data.Chest data.Appetite data.Fatigue data.Nausea data.Confusion];
riskOutput = evalfis(rfis, double(riskInput));
typeInput = [data.Age data.Temp data.Cough data.Hospital data.Ventilator];
typeOutput = evalfis(tfis, double(typeInput));
disp(riskOutput)
disp(typeOutput)
end
but im having an "Input data must have as many columns as input variables and as many rows as independent sets of input values" error now. I counted my inputs already and the numbers are correct.
Antonio Hortal
2021-11-16
I am sorry, I am not familiar with the Fuzzy Logic Toolbox. Maybe you can open another question to get help
Jovelyn Obias
2021-11-18
Antonio Hortal
2021-11-19
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 :)
更多回答（0 个）
类别
在 帮助中心 和 File Exchange 中查找有关 Fuzzy Logic in Simulink 的更多信息
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!
Translated by 
