{"id":318,"date":"2009-06-22T13:54:16","date_gmt":"2009-06-22T13:54:16","guid":{"rendered":"https:\/\/blogs.mathworks.com\/desktop\/2009\/06\/22\/interactive-web-pages-in-matlab-part-4\/"},"modified":"2009-06-23T11:53:06","modified_gmt":"2009-06-23T11:53:06","slug":"interactive-web-pages-in-matlab-part-4","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/community\/2009\/06\/22\/interactive-web-pages-in-matlab-part-4\/","title":{"rendered":"Interactive web pages in MATLAB, part 4"},"content":{"rendered":"

A few weeks ago Ashwin<\/a> commented on my Interactive web pages in MATLAB<\/a> series from last year asking about computing data in MATLAB and putting back into a web page. I didn’t take the time back then how to explain it because it’s not the most straightforward and requires a bit of javascript. <\/p>\n

So without further ado, I’m going to demonstrate one way to take data round-trip from a web page through MATLAB (all running in the same MATLAB session). The main piece of this method is that I am going to have a start function which dynamically creates a web page which loads the desired workspace data. This dynamic page then loads a static page, which is the GUI the user interacts with. This page calls a callback function which evaluates the data from the page and starts the cycle over again. Here is the data flow.<\/p>\n

\"function<\/div>\n

The main function<\/strong>
\nThe purpose of the main function is to be the entry point to the web GUI. It takes data passed in and puts it into a dynamically created web page, that loads our static page. This process could be simplified by creating the whole html part dynamically, but that looses the benefit of using a better html-editing tool to create a nice looking web page (this is not an example of that).<\/p>\n

The tricky part is that we are storing our value to be used in the main GUI in a meta<\/tt> tag<\/a>. This allows us to look it up from a javascript method in the main page. The main page is loaded in a frame so that it still has access to the meta tag created here. Otherwise we would have to write that meta tag directly to the main page. <\/p>\n

function<\/span> matlabfromjs4(value)\r\n%matlabfromjs4 load a web gui to print out the result of the magic command<\/span>\r\n\r\nif<\/span> nargin == 0\r\n    %if no arguments (i.e. the first time) then do not load any data<\/span>\r\n    meta = ''<\/span>;\r\nelse<\/span>\r\n    %otherwise put it in a meta tag<\/span>\r\n    meta = value;\r\nend<\/span>\r\nmeta = sprintf('<meta id=\"valueToPutInPage\" content=\"%s\">'<\/span>, meta);\r\n\r\n%dynamically generate the html and write it out a temporary file<\/span>\r\nfile = tempname;\r\nfid = fopen(file,'w+'<\/span>);\r\nfprintf(fid,['<html>\\n\\t<head>\\n'<\/span>...<\/span>\r\n    '\\t\\t<title>Calling MATLAB from JavaScript 4<\/title>\\n'<\/span>...<\/span>\r\n    '\\t%s\\n'<\/span>...<\/span>\r\n    '\\t<\/head>\\n'<\/span>...<\/span>\r\n    '\\t\\t<frameset>\\n'<\/span>...<\/span>\r\n    '\\t\\t\\t<frame name = \"main\" src=\"%s\">\\n'<\/span>...<\/span>\r\n    '\\t\\t<\/frameset>\\n'<\/span>...<\/span>\r\n    '<\/html>'<\/span>],meta,['file:\/\/\/'<\/span> which('matlabfromjs4.html'<\/span>)]);\r\n%matlabjs4.html is the main web gui<\/span>\r\nfclose(fid);\r\n%load the page<\/span>\r\nweb(['file:\/\/\/'<\/span> file], '-noaddressbox'<\/span>);<\/pre>\n
The GUI page<\/strong>
\nWhen loaded in the web browser, this page sets the meta content and loads the matlabfromjs4.html<\/tt> into the browser. This page onload<\/tt> queries the value of that tag and writes it into a special div<\/tt>. This page also has a form element that when a value is typed in the box, it will ask MATLAB to do a computation based on that value (in this case magic<\/tt>) and what will refresh the page. <\/p>\n
\r\n<html><\/span>\r\n    <head><\/span>\r\n        <script<\/span> lang=<\/span>\"text\/javascript\"<\/span>><\/span>\r\n            function calculatemagic() {\r\n                var magicValue = document.getElementById(\"magic\").value;\r\n                document.location=\"matlab:js4helper(\"+ magicValue +\");\";\r\n            }\r\n            function loadvalues() {\r\n                var pval = parent.document.getElementById(\"valueToPutInPage\");\r\n                return pval.content;\r\n            }\r\n        <\/script><\/span>\r\n    <\/head><\/span>\r\n    <body><\/span>\r\n        Enter a value for: \r\n        <tt><b><\/span>magic<\/b><\/tt> <input<\/span> id=<\/span>\"magic\"<\/span> onblur=<\/span>\"calculatemagic()\"<\/span>><\/span>\r\n        <div<\/span> id=<\/span>\"answer\"<\/span> style=<\/span>\"background:lightgray;font-family:Courier;\"<\/span>><\/span>\r\n            <script<\/span> lang=<\/span>\"text\/javascript\"<\/span>><\/span>document.write(loadvalues());<\/script><\/div><\/span>\r\n    <\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
The calculateMagic<\/tt> javascript function uses the previously described matlab:<\/tt> operator to call our helper function js4helper<\/tt>.
\njs4helper<\/strong>
\nThe helper function calculates the output of the magic<\/tt> function and formats the output is a displayable in html string, and calls our main function again with the string, regenerating the frame page, starting the whole process over.<\/p>\n
function<\/span> js4helper(value)\r\n%js4helper takes the value from the webpage, find the answer and formats it<\/span>\r\n\r\nif<\/span> ~exist('value'<\/span>,'var'<\/span>)\r\n    %need to check that no valid input was given in case input box was blank.<\/span>\r\n    magicVal = ''<\/span>;\r\nelse<\/span>\r\n    val = magic(value);\r\n    [r,c] = size(val);\r\n    format = [repmat('%i '<\/span>,1,r) '<br>'<\/span>];\r\n    magicVal = sprintf(format, val);\r\nend<\/span>\r\nmatlabfromjs4(magicVal);<\/pre>\n
That’s the basics of creating dynamic html GUIs in MATLAB. For extra credit I’m leaving you with two assignments:
\n1. Use base64 encoding to add an image to the web page without having to create an image file.
\n2. Use ActiveX on Windows to hook a web page running in IE up to a MATLAB session.<\/p>\n
A few weeks ago Ashwin commented on my Interactive web pages in MATLAB series from last year asking about computing data in MATLAB and putting back into a web page. I didn’t take the time back… read more >><\/a><\/p>\n","protected":false},"author":38,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[40,245],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/posts\/318"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":0,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
UPDATE:<\/strong> (6\/23\/09) Download the files here: matlabfromjs4.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"