Mike on the MATLAB Desktop

February 18th, 2008

Interactive web pages in MATLAB, part 2

Last time, 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: commands.

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

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

When you open this example file (right-click to save) in the MATLAB web browser, which includes the code below…

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

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:

matlabfromjs1.html in the MATLAB web browser

One thing to notice in this example is that the JavaScript function in the HTML onload 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.

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.

The next example (right-click to save) 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.

Pressing the “Plot the Sine Wave” button yields the following plot:

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

A few key points about this code include:

The code that builds the matlab: URI and executes it as a separate JavaScript function drawSine() in the web page’s header.
For readability I’ve broken up the command into several lines and used the += syntax for String concatenation.
I used the direct naming syntax for accessing the data in the form elements. This syntax requires us to give an explicit name to each of our form and input elements.
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).

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

<input type="button" onclick="drawSine()" value="Plot the Sine Wave">

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.

Next time I’ll complete the tutorial by placing the figure back into in the web page, creating a full GUI.

Check out the first part of this entry:

Interactive web pages in MATLAB, part 1

For general information on programming HTML forms, see:

http://www.w3schools.com/html/html_forms.asp

For general information on programming in JavaScript, see:

http://www.w3schools.com/js/default.asp

By Michael Katz

Mike is a developer on the MATLAB Mobile team. When not describing himself in the third person, biking, homebrewing, or rooting for the home team, he's busy trying to make the world a better place for programming.

07:52 UTC | Posted in Publish | Permalink | 3 Comments »

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

3 Responses to “Interactive web pages in MATLAB, part 2”

Ashwin replied on May 29th, 2009 at 17:47 UTC :

Hi Mike,

This tutorial is very helpful. How ever..How about I need to return Matlab Values back to Javascript..for instance I need to have somethign like this

on the browser
Input 1st Number:
Input 2nd Number:

Result:

Now When the user enters numbers 1 and 2…..javascript will call matlab and Matlab will compute the result(for eg Add) and return the result back to the Result box.

I knw how to pass values from JS to Matlab..But how to do it vice versa.

My primary aim for this is as follows.

I am sending X and Y coordinates from JS to Matlab. I have an Algorithm ready in Matlab which will take these values and give a result and this result needs to passed back to JavaScript..
Peter replied on February 10th, 2011 at 22:09 UTC :

This is a great tutorial. Do you know how I could get something like this working with compiled matlab. Ideally I would layout a Matlab gui in HTML with javascript to validate the input fields. Then I would process whatever has been entered in the HTML template and return the values to matlab.
Mike replied on February 11th, 2011 at 13:16 UTC :

This won’t work in a compiled MATLAB program, because matlab: is handled internally in MATLAB’s web browser. Check out Tech Note 1608 for supported options.