Inside the MATLAB Desktop
February 25th, 2008
Interactive web pages in MATLAB, part 3
As promised in my last post, this week we will complete our GUI by placing a dynamically-generated MATLAB figure back into the web page.
To show this, we will build upon the last example from last week. In that example, the page generates a sine wave with its settings derived from the HTML form. Instead of displaying the plot in a separate figure window, we’ll create it and print it to a file, where it will then be loaded back into the web page.
This demo (right-click to save) will only work in MATLAB web browser on Windows (sorry, Ken).
Clicking on the “Plot the Sine Wave” button causes the following to happen:
- The sine and plot are set-up using the form’s options, as before.
- The plot is exported to a PNG-file on disk, using the print command.
- The latest version of the image on disk is shown in the page, by refreshing an HTML element.
In order for these actions to work smoothly, the code makes use of a few tricks:
- In the JavaScript function that creates the plot, we added some figure manipulations to the issued MATLAB command. The following code:
commandURI+=”f=figure;set(f,’Visible’,'off’,'units’,'pixels’,” +
“‘Position’,[0 0 270 210],’PaperPositionMode’,'auto’);”;
- Creates a new figure and saves its handle.
- Sets the figure’s properties so that figure is invisible (and therefore not shown to the user).
- This code is followed with the print command to export the figure to disk. The specified options set the file-type to PNG and the print resolution to be that of the screen.
commandURI+=”print(’sinewave.png’,'-dpng’,sprintf(’-f%d’,f),’-r0′);”;
- In the page, I’ve placed an HTML iframe to display the image. The iframe element allows me to refresh its content without having to reload the entire page, providing a smooth transition when the button is pressed.
<iframe name=”image” id=”image” frameborder=0 marginwidth=0 marginheight=0 scrolling=no width=270 height=210 src=”">
The important properties of this iframe are: the id, which lets us get to it later, and the empty src, which gives us a blank page on startup.
- The final piece to this code is the last line of JavaScript in the drawSine() function. The purpose of the code below is to give MATLAB enough time to process the plot command and make sure the file is saved to disk before it is reloaded. Here we set a timer for 0.5 seconds, and at the timeout replace the image-file source in the iframe.
setTimeout(”document.getElementById(’image’).src=’sinewave.png’;”,500);
That’s pretty much it. I hope you’ve enjoyed this 3-part series, and good luck creating HTML GUIs in MATLAB. Let us know what kinds of interesting and crazy web pages you can think of.
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.
7:45 am |
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.
Leave a Reply
|
|
I can deal with the fact that this doesn’t work on the Mac (for now!) as I think the potential for this unique approach is more significant than platform ubiquity. I think this example will help people in seeing a new and different way to use MATLAB.
I should mention, that we are ALWAYS working on upgrading our web display capabilities - a moving target as you might imagine (so we’re not complacent when something doesn’t work on a particular platform).
It’ll be really interesting to see what kind of mash-ups people come up with.
-Ken
Mike,
Thanks for this great series on this little known capability. It has been a real eye-opener for me and I’m already noodling some ideas on how to use this.
Matt
Matt,
Excellent. Good luck!
Thanks a lot for explaining the interactive web pages. That was very useful Michael and i never knew this power of matlab.
I am trying to develop an application using matlab’s guide. Knowing this I can save a lot of time and effort. This actually omitted the use of creating a gui and handling various things in it.
I would like to know how to add hyperlinks to the web page once we have navigated to matlab. In the last part you have explained how to place a figure back into the web page. I would like to know how to place some text back into the web page as a hyperlink.
Roul,
Can you give me an example? What kind of hyperlink?
can i have your mail id. this site is having some spamming issues and hence i’m not able to post.
Suppose i have some web address stored in a variable in matlab. Say g=’www.google.com’ now i want that there should be a hyperlink created on the web page with the name suppose GOOGLE and when i click this the browser should go to www.google.com.
The same thing which is done by <a href=”www.google.com”}GOOGLE</a} in html.In the above html tag i’ve used } instead of greater than symbol because it will be made an acutal link if i do it oherwise.
Now my problem is how to create a link on web page when the address of the link is stored in a variable in matlab. That is using the above variable g i want to make a hyperlink.
Rahul,
The easiest thing to change the text of the page and reload it:
Since I don’t know how you are storing the desired address, let’s say our address is stored in the variable a.
a = 'www.mathworks.com'; html = sprintf('<html><body><a href="%s" rel="nofollow">%s</a></body></html>',a,a); web(['text://' html])This presumes you know the full text of your page, and where you want to insert the URL.
A slightly more complicated version allows you to specify the text in one spot (the header), and use javascript to make use of that expression. In the following snippet I’m just replacing a token $URL$ with the text still in the variable ‘a’
html = ['<html><head><script type="text/javascript">theURL = $URL$;</script></head>'... '<body><script type="text/javascript">document.write("<a href=''"+theURL+"'' rel="nofollow">"+theURL+"</a>");</script></body>']; html = strrep(html,'$URL$',['"' a '"']); web(['text://' html])Because we don’t have access to the internals of the web browser, any change from the MATLAB workspace will need a refresh to reflect those values back in the html text. To have your page be a more “traditional” dynamic page with HttpRequest or similar mechanism, you’ll have to deploy your MATLAB code to an actual web server.
If you’re creative enough you can probably have that sever local, and maybe even the same MATLAB session, but that is beyond my expertise. To get started in that direction, check out our tech note on the subject:
http://www.mathworks.com/support/tech-notes/1600/1608.html
Ali,
I can’t give you specific advice on your application, but you should check out our infamous Tech Note 1608. It describes how to deploy MATLAB applications to the web.
Hi Mike:
I have Matlab 2006a. So could I use Matlab webserver for this issue
Actually, I do not have background on this topic but I am keep reading some documents from the net.