Ken & 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:

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.

MATLAB Web Browser with sine-wave demo

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

matlabfromjs2.html figure window output

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:

  1. The code that builds the matlab: URI and executes it as a separate JavaScript function drawSine() in the web page’s header.
  2. For readability I’ve broken up the command into several lines and used the += syntax for String concatenation.
  3. 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.
  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).

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:

For general information on programming HTML forms, see:

For general information on programming in JavaScript, see:

Author picture

By Michael Katz

Mike is a developer on the MATLAB Desktop 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 |

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.

One Response to “Interactive web pages in MATLAB, part 2”

  1. 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..

Leave a Reply

Wrap code fragments inside <pre> tags, like this:

<pre class="code">
a = magic(3);
sum(a)
</pre>

If you have a "<" character in your code, either follow it with a space or replace it with "&lt;" (including the semicolon).

About

Ken & Mike work on the MATLAB Desktop team.

Subscribe


Recent Comments

  • DP: Hi i have a problem with ezplot3, i want to plot more than i curve in the same graph but hold on command...
  • Ken: Hi Arsalan, Unfortunately there is no way to get the new Editor API in older versions of MATLAB. -Ken
  • Arsalan: Hi, I am very excited about the MATLAB API for editor because right now i am working on a project and i need...
  • Johannes: Since I started using matlab-emacs some days ago I never experienced Emacslink. But I experienced some...
  • Francisco J. Beron-Vera: Hi all, I have recently learned about ViEmu (http://www.vimemu.c om) which, for Vi/Vim...
  • OysterEngineer: When I first learned of the Publish feature in MatLab, I thought it might be useful to help to...
  • Ken: Hi Herve, I’m not quite sure what you mean by “stand-alone&# 8221; mode? -Ken
  • Herve: I wonder when the publish fonction will be supported in standalone mode.
  • Mike: Ravi, What you described should work as far I understand it. Please follow up with technical support. With a...
  • Mike: @Daniel, Thanks for that note.

Blog Admin

These postings are the author's and don't necessarily represent the opinions of The MathWorks.