This is the first post in a 3 part series on creating web pages in the MATLAB web browser that can interact with the MATLAB workspace. We’ll explore the building blocks for creating a HTML GUI in MATLAB.

Last year Kristin posted how to use the matlab: protocol in the Command Window to create hyperlinks that run MATLAB commands. But did you know that you can use the same protocol in MATLAB’s web browser?

Open the web browser inside MATLAB using the web command. Then in the document location bar, type “matlab:why” and press enter. You’ll get a generated message in the command window, similar to the one below:

There are a few things worth noticing about this procedure:

1. You can use matlab: to “navigate” to a command the way http: navigates to a web page or ftp: navigates to a file server.
2. This protocol only works inside MATLAB’s built-in web browser. Using Firefox, IE, or any other browser will generate an unknown protocol error.
3. The browser does not navigate away from the current page. For instance, if you had a page open already in the browser and then typed matlab:why, the address in the location bar would change, but the web page would not.
4. The executed commands do not show up in the Command Window or Command History (though the output shows up in the Command Window). You’ll have the output but no record of the commands that generated it.

Let’s look at how to create MATLAB GUI’s with HTML.

Just like you can associate MATLAB commands as callbacks for buttons in a GUI created by GUIDE, you can associate MATLAB commands as “callbacks” to hyperlinks in a web page.

A standard HTML link looks like this:
<a href=”http://www.matlabcentral.com”>Go To MATLAB Central</a>
A MATLAB command link looks like this:
<a href=”matlab:why”>Why?</a>
Clicking on this MATLAB command hyperlink will run the why function in the MATLAB workspace.

One good usage of MATLAB command links is providing a static list of commands, like a launchpad/portal page or a Choose Your Own Adventure of MATLAB code. For an example download and publishthe attached dvplots_hyperlink_demo.m file. The result is an HTML file with matlab: hyperlinks. This demo allows you to create and interact with a series of vector plots. Here is what the published demo looks like:

Clicking on the “quiver” link for instance, brings up the following plot:

Next time I’ll explain how to dynamically generate matlab: URIs using JavaScript. Until then, let us know if and how you have been using matlab: in web pages so far.