{"id":192,"date":"2008-02-11T06:59:45","date_gmt":"2008-02-11T11:59:45","guid":{"rendered":"https:\/\/blogs.mathworks.com\/desktop\/2008\/02\/11\/interactive-web-pages-in-matlab-part-1\/"},"modified":"2008-02-11T06:59:45","modified_gmt":"2008-02-11T11:59:45","slug":"interactive-web-pages-in-matlab-part-1","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/community\/2008\/02\/11\/interactive-web-pages-in-matlab-part-1\/","title":{"rendered":"Interactive web pages in MATLAB, part 1"},"content":{"rendered":"<style type=\"text\/css\"> .code { font-family:Courier,\"Courier New\",Monaco,monospace;} <\/style>\n<p>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\u2019ll explore the building blocks for creating a HTML GUI in MATLAB. <\/p>\n<p>Last year Kristin posted <a href=\"https:\/\/blogs.mathworks.com\/community\/2007\/07\/09\/printing-hyperlinks-to-the-command-window\"\/>how to use the <span class=\"code\">matlab:<\/span> protocol<\/a> in the Command Window to create hyperlinks that run MATLAB commands.  But did you know that you can use the same protocol in MATLAB&#8217;s web browser?  <\/p>\n<p>Open the web browser inside MATLAB using the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/web.html\"><span class=\"code\">web<\/span><\/a> command. Then in the document location bar, type \u201c<span class=\"code\">matlab:why<\/span>\u201d and press enter. You\u2019ll get a generated message in the command window, similar to the one below:<\/p>\n<div align=\"center\">\n<img decoding=\"async\" border=\"0\" align=\"center\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/desktop\/michael_katz_interactive_web_pages_part_1\/interative_web_pages_part_1_1.jpg\" alt=\"MATLAB Web Browser with matlab:why in location bar\"\/>\n<\/div>\n<div align=\"center\">\n<img decoding=\"async\" border=\"0\" align=\"center\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/desktop\/down_arrow.png\" alt=\"down arrow\"\/>\n<\/div>\n<div align=\"center\">\n<img decoding=\"async\" border=\"0\" align=\"center\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/desktop\/michael_katz_interactive_web_pages_part_1\/interative_web_pages_part_1_2.jpg\" alt=\"WHY command window output\"\/>\n<\/div>\n<p>There are a few things worth noticing about this procedure:<\/p>\n<ol>\n<li>You can use <span class=\"code\">matlab:<\/span> to \u201cnavigate\u201d to a command the way <span class=\"code\">http:<\/span> navigates to a web page or <span class=\"code\">ftp:<\/span> navigates to a file server.<\/li>\n<li>This protocol only works inside MATLAB\u2019s built-in web browser. Using Firefox, IE, or any other browser will generate an unknown protocol error.<\/li>\n<li>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 <span class=\"code\">matlab:why<\/span>, the address in the location bar would change, but the web page would not.<\/li>\n<li>The executed commands do not show up in the Command Window or Command History (though the output shows up in the Command Window). You\u2019ll have the output but no record of the commands that generated it.<\/li>\n<\/ol>\n<p>Let&#8217;s look at how to create MATLAB GUI&#8217;s with HTML.<\/p>\n<p>Just like you can associate MATLAB commands as callbacks for buttons in a GUI created by GUIDE, you can associate MATLAB commands as \u201ccallbacks\u201d to hyperlinks in a web page. <\/p>\n<p>A standard HTML link looks like this:<br \/>\n<code>&lt;a href=\u201dhttp:\/\/www.matlabcentral.com\u201d&gt;Go To MATLAB Central&lt;\/a&gt;<\/code><br \/>\nA MATLAB command link looks like this:<br \/>\n<code>&lt;a href=\u201dmatlab:why\u201d&gt;Why?&lt;\/a&gt;<\/code><br \/>\nClicking on this MATLAB command hyperlink will run the <span class=\"code\">why<\/span> function in the MATLAB workspace. <\/p>\n<p>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 <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/publish.html\"><span class=\"code\">publish<\/span><\/a>the attached <a href=\"https:\/\/blogs.mathworks.com\/images\/desktop\/michael_katz_interactive_web_pages_part_1\/dvplots_hyperlink_demo.m\">dvplots_hyperlink_demo.m<\/a> file. The result is an HTML file with <span class=\"code\">matlab:<\/span> hyperlinks.  This demo allows you to create and interact with a series of vector plots. Here is what the published demo looks like:<\/p>\n<div align=\"center\">\n<a  href=\"https:\/\/blogs.mathworks.com\/images\/desktop\/michael_katz_interactive_web_pages_part_1\/interative_web_pages_part_1_3.jpg\"><br \/>\n<img decoding=\"async\" border=\"0\" align=\"center\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/desktop\/michael_katz_interactive_web_pages_part_1\/interative_web_pages_part_1_3_small.jpg\" alt=\"dvplots_hyperlink_demo.html in web browser\"\/><br \/>\n<\/a>\n<\/div>\n<p>Clicking on the \u201cquiver\u201d link for instance, brings up the following plot:<\/p>\n<div align=\"center\">\n<a  href=\"https:\/\/blogs.mathworks.com\/images\/desktop\/michael_katz_interactive_web_pages_part_1\/interative_web_pages_part_1_4.jpg\"><br \/>\n<img decoding=\"async\" border=\"0\" align=\"center\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/desktop\/michael_katz_interactive_web_pages_part_1\/interative_web_pages_part_1_4_small.jpg\" alt=\"quiver example figure\"\/><br \/>\n<\/a>\n<\/div>\n<p>Next time I\u2019ll explain how to dynamically generate <span class=\"code\">matlab:<\/span> URIs using JavaScript. Until then, let us know if and how you have been using <span class=\"code\">matlab:<\/span> in web pages so far. <\/p>\n","protected":false},"excerpt":{"rendered":"<p> .code { font-family:Courier,&#8221;Courier New&#8221;,Monaco,monospace;}<br \/>\nThis 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&#8230;. <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/community\/2008\/02\/11\/interactive-web-pages-in-matlab-part-1\/\">read more >><\/a><\/p>\n","protected":false},"author":38,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/posts\/192"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":0,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/posts\/192\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/media?parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/categories?post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/community\/wp-json\/wp\/v2\/tags?post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}