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?

Answer 1

[Antonio Hortal]

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

[Jovelyn Obias]

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]

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]

I've already resolved it. Thank you so much. Does the disp function meant to display the data in command window?

Now I'm trying to get the data through getElementsByClassName to get all data in one go. Is that possible?

[Jovelyn Obias]

I already tried replacing getElementsById with getElementsByClassName('classNameofallInputs'), but matlab pops up the error (Non existent field 'Age')

I also tried doing getElementsById for every input and it worked. However to make the code simple i want to place all the inputs in an array, if possible.

[Antonio Hortal]

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]

Thank you so much! Yes i would. Thanks!

[Jovelyn Obias]

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]

I am sorry, I am not familiar with the Fuzzy Logic Toolbox. Maybe you can open another question to get help

[Jovelyn Obias]

Sorry for adding another question, inside the script tag can i add another function for may html functionalities? Cause when i added function, "htmlsource may be referencing unsupported functionality or may have a javascript error" appears just after entering answer in the first question. I think the setup function is being triggered immediately

[Antonio Hortal]

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 :)