{"id":193,"date":"2008-02-18T07:52:57","date_gmt":"2008-02-18T12:52:57","guid":{"rendered":"https:\/\/blogs.mathworks.com\/desktop\/2008\/02\/18\/interactive-web-pages-in-matlab-part-2\/"},"modified":"2016-04-03T15:34:32","modified_gmt":"2016-04-03T19:34:32","slug":"interactive-web-pages-in-matlab-part-2","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/community\/2008\/02\/18\/interactive-web-pages-in-matlab-part-2\/","title":{"rendered":"Interactive web pages in MATLAB, part 2"},"content":{"rendered":"

Last time<\/a>, I described how to use static hyperlinks to run MATLAB commands from the web browser (remember: this only works in MATLAB’s web browser). This time I will show you how to use JavaScript to assemble and execute matlab:<\/tt> commands.<\/p>\n

How do we move beyond using explicit hyperlinks for issuing MATLAB commands? The hyperlink-click equivalent operation in JavaScript is setting the document.location<\/tt> property to the desired URL.<\/p>\n

The following example uses the web page\u2019s load event to trigger the execution of the surf<\/tt><\/a> command. When the page is loaded in MATLAB’s web browser, a figure window will be automatically created with the surface plot.<\/p>\n

When you open this example file (right-click to save) <\/a> in the MATLAB web browser, which includes the code below…<\/p>\n

<html>
\n<head><title>Calling MATLAB from JavaScript 1<\/title><head>
\n<body onload=\"document.location='matlab:surf(peaks)'\"><\/body><\/html><\/code><\/p>\n

You’ll see a blank browser window (there’s no real displayable content in the file), and then you’ll see a figure window popup:<\/p>\n

\n\n\n\n

\n\"matlabfromjs1.html<\/a><\/td>\n
\n\"surf(peaks)
\n<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

 <\/p>\n

One thing to notice in this example is that the JavaScript function in the HTML onload<\/tt><\/a> event is specified as a String, and the document URI is a separate string. The single quotes (‘) are the way to specify a string within a double-quoted (“) string, and has nothing to do with MATLAB strings, in this example.<\/p>\n

How do we now make the MATLAB command dynamic so the web page user can influence what happens? For starters, we can read in the value of a control and use that in the URI string.<\/p>\n

The next example (right-click to save)<\/a> uses HTML forms to present controls to a user. When the button is pressed, MATLAB will plot (in a figure window) a sine wave of the given amplitude and frequency and plot appearance.<\/p>\n

\"MATLAB<\/div>\n

Pressing the “Plot the Sine Wave” button yields the following plot:<\/p>\n

\"matlabfromjs2.html<\/div>\n

 <\/p>\n

In the header I’ve created the following script block:
\n
\n<script type=\"text\/javascript\">
\nfunction drawSine() {
\ncommandURI=\"matlab:t=linspace(0,1,100);\";
\ncommandURI+=\"plot(t,\";
\ncommandURI+=document.sine.amplitude.value;
\ncommandURI+=\"*sin(t*2*pi*\";
\ncommandURI+=document.sine.frequency.value + \")\";
\ncommandURI+=\",'\" + document.sine.color.value +
\ndocument.sine.linestyle.value +
\ndocument.sine.markerstyle.value + \"'\";
\ncommandURI+=\");\";
\ndocument.location=commandURI;
\n}
\n<\/script>
\n<\/code><\/p>\n

A few key points about this code include:<\/p>\n

    \n
  1. The code that builds the matlab:<\/tt> URI and executes it as a separate JavaScript function drawSine()<\/tt> in the web page\u2019s header.<\/li>\n
  2. For readability I\u2019ve broken up the command into several lines and used the +=<\/tt> syntax for String concatenation.<\/li>\n
  3. I used the direct naming syntax for accessing the data in the form elements. This syntax requires us to give an explicit name<\/tt> to each of our form and input elements.<\/li>\n
  4. The JavaScript code does not check for valid data in the input boxes, and bad values will produce an error in the Command Window (which may not be obvious to a person working only looking in the web browser).<\/li>\n<\/ol>\n

    Inside the body’s form, there are two text inputs, three choice elements, and a button input. The following code creates the button:<\/p>\n


    \n<input type=\"button\" onclick=\"drawSine()\" value=\"Plot the Sine Wave\">
    \n<\/code><\/p>\n

    This is the starting point for dynamically building the MATLAB command URI strings. I’ve shown you how to use an HTML form to gather input to pass to a MATLAB function. Let us know if you know of other interesting usages of HTML and MATLAB, or run into something tricky.<\/p>\n

    Next time I\u2019ll complete the tutorial by placing the figure back into in the web page, creating a full GUI.<\/p>\n

    Check out the first part of this entry:<\/p>\n