How to integrate HTML into Matlab App Designer?

Question

Alex Clonan 2021 年 10 月 20 日

0
リンク

この質問への直接リンク

https://jp.mathworks.com/matlabcentral/answers/1567978-how-to-integrate-html-into-matlab-app-designer

編集済み: Kojiro Saito 2022 年 2 月 17 日

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!

0 件のコメント
-2 件の古いコメントを表示-2 件の古いコメントを非表示

サインインしてコメントする。

サインインしてこの質問に回答する。

Answer 1

Kojiro Saito 2021 年 10 月 21 日

1
リンク

この回答への直接リンク

https://jp.mathworks.com/matlabcentral/answers/1567978-how-to-integrate-html-into-matlab-app-designer#answer_813108

MATLAB Online で開く

SampleApp.zip

In uihtml document, it says,

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 件のコメント
6 件の古いコメントを表示6 件の古いコメントを非表示

Alex Clonan 2022 年 2 月 16 日

@Kojiro Saito I was able to get the MatLab connection working- however, I was not sure about the process of getting specific elements for radio buttons and access the outcome from there. This is the process I was using, but I am not getting an outcome so I wasn't sure and just wanted to check in to see if I was doing it properly.

</form>

const RaceResponseInput = document.getElementById("test");

function updateValue19(e) {

htmlComponent.Data = {

'name': 'RaceResponse',

'value': e.target.value

};

}

RaceResponseInput.addEventListener('input', updateValue19);

Kojiro Saito 2022 年 2 月 17 日

編集済み: Kojiro Saito 2022 年 2 月 17 日

MATLAB Online で開く

@Alex Clonan

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