{"id":3323,"date":"2011-04-28T18:34:44","date_gmt":"2011-04-28T17:34:44","guid":{"rendered":"http:\/\/www.walkingrandomly.com\/?p=3323"},"modified":"2011-06-06T11:10:48","modified_gmt":"2011-06-06T10:10:48","slug":"mathematica-tutorial-interactive-mathematics-in-the-web-browser","status":"publish","type":"post","link":"https:\/\/walkingrandomly.com\/?p=3323","title":{"rendered":"Mathematica Tutorial: Interactive Mathematics in the Web Browser"},"content":{"rendered":"<p>Last month I <a href=\"https:\/\/www.walkingrandomly.com\/?p=3267\">published an article<\/a> that included an interactive mathematical demonstration powered by<a href=\"http:\/\/www.wolfram.com\/cdf-player\/\"> Wolfram&#8217;s new CDF (Computable Document Format) player<\/a>.\u00a0 These demonstrations work on many modern web-browsers including Internet Explorer 8 and Firefox 3.6.\u00a0 So, how do you go about adding them to your own websites?<\/p>\n<p><strong>What you need<\/strong><\/p>\n<ul>\n<li>Mathematica 8.0.1 or above to create demonstrations. \u00a0Viewers of your demonstration only need the <a href=\"http:\/\/www.wolfram.com\/cdf-player\/\">free CDF player<\/a> for their platform.<\/li>\n<li>A modern browser such as Internet Explorer 8, Firefox 3.6 or Safari 5.<\/li>\n<li>Basic knowledge of HTML, uploading files to a webserver etc.  If you maintain a blog or similar then you almost certainly know enough<\/li>\n<\/ul>\n<p>Our aim is the following, very simple, interactive demonstration.<\/p>\n<p><script src=\"http:\/\/www.wolfram.com\/cdf-player\/plugin\/v1.0\/cdfplugin.js\" type=\"text\/javascript\"><\/script><script type=\"text\/javascript\">\/\/ <![CDATA[\n   var cdf = new cdf_plugin(); cdf.addCDFObject(\"Series_applet\", \"https:\/\/www.walkingrandomly.com\/images\/mathematica8\/series.cdf\", 403,159);\n\/\/ ]]><\/script><\/p>\n<p><img decoding=\"async\" id=\"Series_applet\" src=\"https:\/\/www.walkingrandomly.com\/images\/mathematica8\/series.png\" alt=\"Series demo\" \/><\/p>\n<p>If all you see is a static image then you do not have the CDF player or Mathematica 8 correctly installed.  Alternatively, you are using an unsupported platform such as Linux, iOS or Android.<\/p>\n<p><strong>Step 1 &#8211; Create the .cdf file<\/strong><\/p>\n<p>Fire up Mathematica, type in and <strong>evaluate<\/strong> the following code.\u00a0 You should get an applet similar to the one above.<\/p>\n<pre>Manipulate[\r\n Series[Sin[x], {x, 0, n}]\r\n , {n, 1, 10, 1, Appearance -&gt; \"Labeled\"}\r\n ]<\/pre>\n<p>Save it as a .cdf file called<strong> series.cdf<\/strong> by clicking on <strong>File<\/strong>-&gt;<strong>Save as\u00a0 &#8212;<\/strong> Give it the File Name<strong> series.cdf<\/strong> and change the <strong>Save as Type<\/strong> to<strong> Computable Document (*.cdf)<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.walkingrandomly.com\/images\/mathematica8\/save_cdf.png\" alt=\"Save as CDF\" \/><br \/>\n<strong> <\/strong><\/p>\n<p><strong>Step 2 &#8211; Get a static screenshot<\/strong><\/p>\n<p>Not everyone is going to have either Mathematica 8 or the free CDF player installed when they visit your website so we need to give them something to look at.\u00a0 So, lets give them a static image of the Manipulate applet.\u00a0 As a bonus, this will act as a place holder for the interactive version for those who do have the requisite software.<\/p>\n<p>Open series.cdf in Mathematica and left click on the bracket surrounding the manipulate (see below).  Click on <strong>Cell<\/strong>-&gt;<strong>Convert To<\/strong>-&gt;<strong>Bitmap<\/strong>.  Then click on <strong>File<\/strong>-&gt;<strong>Save Selection As <\/strong>.  Make sure you change .pdf to something more sensible such as .png<\/p>\n<p>Don&#8217;t save your .cdf file at this point or it won&#8217;t be interactive.  Re-evaluate the code again to get back your interactive Manipulate.<\/p>\n<p>Here&#8217;s one I made earlier &#8211; <a href=\"https:\/\/www.walkingrandomly.com\/images\/mathematica8\/series.png\">series.png<\/a><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.walkingrandomly.com\/images\/mathematica8\/Manipulate_select.png\" alt=\"Select Manipulate\" \/><\/p>\n<p><strong>Step 4 &#8211; Hide the source code<\/strong><\/p>\n<p>In this particular instance, I don&#8217;t want the user to see the source code.\u00a0 So, lets sort that out.<\/p>\n<ul>\n<li>Open series.cdf in Mathematica if you haven&#8217;t already and make sure that the Manipulate is evaluated.<\/li>\n<li>Left click on the inner cell bracket surrounding the Manipulate source code only and click on <strong>Cell<\/strong>-&gt;<strong>Cell Properties<\/strong> and un-tick <strong>Open<\/strong><\/li>\n<\/ul>\n<p><strong>Step 5 &#8211; Hide the cell brackets<br \/>\n<\/strong><\/p>\n<p>Those blue brackets at the far right of the Mathematica notebook are called the Cell brackets and I don&#8217;t want to see them on my web site as they make the applet look messy.<\/p>\n<ul>\n<li>Open series.cdf in Mathematica if you haven&#8217;t already<\/li>\n<li>Open the option inspector:<strong> Edit<\/strong>-&gt;<strong>Preferences<\/strong>-&gt;<strong>Advanced<\/strong>-&gt;<strong>Open Option Inspector<\/strong><\/li>\n<li>Ensure <strong>Show option values<\/strong> is set to <strong>&#8220;series.cdf&#8221; <\/strong>and that they are sorted <strong>by category<\/strong>.<strong> <\/strong>Click on <strong>Apply<\/strong>.<\/li>\n<li>Click on <strong>Cell Options<\/strong>-&gt; <strong>Display options<\/strong> and in the right hand pane set <strong>ShowCellBracket <\/strong>to False<\/li>\n<li>Click <strong>Apply<\/strong><\/li>\n<\/ul>\n<p>Before you save series.cdf ensure that the applet is interactive and not a static bitmap. \u00a0If it isn&#8217;t interactive then click on <strong>Evaluation<\/strong>-&gt;<strong>Evaluate notebook <\/strong>to re-evaluate the (now hidden) source code.\u00a0\u00a0Also ensure that there is nothing but the applet anywhere else in the notebook.<\/p>\n<p><strong>Step 6 &#8211; Get interactive on your website<\/strong><\/p>\n<p>Upload <a href=\"https:\/\/www.walkingrandomly.com\/images\/mathematica8\/series.png\">series.png<\/a> and <a href=\"https:\/\/www.walkingrandomly.com\/images\/mathematica8\/series.cdf\">series.cdf<\/a> to your server.\u00a0 The next thing we need to do is get the static image into our webpage.  Here&#8217;s what the HTML might look like<\/p>\n<pre>&lt;img id=\"Series_applet\" src=\"series.png\" alt=\"Series demo\" \/&gt;<\/pre>\n<p>Obviously, you&#8217;ll need to put the full path to series.png on your server in this piece of code.  The only thing that is different to the way you might usually use the img tag is that it includes an<strong> id<\/strong>; in this case it is <strong>Series_applet<\/strong>.  We&#8217;ll make use of this later.<\/p>\n<p>The magic happens thanks to a small javascript applet called the CDF javascript plugin.  Version one is at <a href=\"http:\/\/www.wolfram.com\/cdf-player\/plugin\/v1.0\/cdfplugin.js\">http:\/\/www.wolfram.com\/cdf-player\/plugin\/v1.0\/cdfplugin.js<\/a> and that&#8217;s the one I&#8217;ll be using here.  Here&#8217;s the code which needs to be placed <strong>before<\/strong> the img tag in your HTML file.<\/p>\n<pre>&lt;script src=\"http:\/\/www.wolfram.com\/cdf-player\/plugin\/v1.0\/cdfplugin.js\"\r\ntype=\"text\/javascript\"&gt;&lt;\/script&gt;&lt;script type=\"text\/javascript\"&gt;\/\/ &lt;![CDATA[\r\nvar cdf = new cdf_plugin();\r\ncdf.addCDFObject(\"Series_applet\", \"series.cdf\", 403,109);\r\n\/\/ ]]&gt;&lt;\/script&gt;<\/pre>\n<p>The only line you&#8217;ll need to change if you use this for anything else is<\/p>\n<pre>cdf.addCDFObject(\"Series_applet\", \"series.cdf\", 403,109);<\/pre>\n<p>where <strong>Series_applet <\/strong> is the id of the image we wish to replace and series.cdf is the cdf file we want to replace it with.  The numbers 403,109 are the <strong>dimensions of the applet<\/strong>.\u00a0 These will not be the same as the .png file as the dimensions of the .cdf file are slightly larger.\u00a0 I used trial and error to determine what they should be as I haven&#8217;t come up with a better way yet (suggestions welcomed).<\/p>\n<p>So that&#8217;s it for now.  Hope this mini-tutorial was useful.  Let me know if you upload any demonstrations to your own website or if you have any comments, questions or problems.<\/p>\n<p><strong>Update (6th June 2011)<\/strong><\/p>\n<p>Thanks to &#8216;Paul&#8217; in the comments section, I have discovered that this mechanism won&#8217;t work for .cdf files that Wolfram deem are unsafe.\u00a0 According to Paul the definition of unsafe is as follows:<\/p>\n<p>Dynamic content is considered unsafe if it:<\/p>\n<ul>\n<li>uses File operations<\/li>\n<li>uses interprocess communication via MathLink Mathematica Functions<\/li>\n<li>uses JLink or NETLink<\/li>\n<li>uses Low-Level Notebook Programming<\/li>\n<li>uses data as code by Converting between Expressions and Strings<\/li>\n<li>uses Namespace Management<\/li>\n<li>uses Options Management<\/li>\n<li>uses External Programs<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Last month I published an article that included an interactive mathematical demonstration powered by Wolfram&#8217;s new CDF (Computable Document Format) player.\u00a0 These demonstrations work on many modern web-browsers including Internet Explorer 8 and Firefox 3.6.\u00a0 So, how do you go about adding them to your own websites? What you need Mathematica 8.0.1 or above to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6,4,8,7],"tags":[],"class_list":["post-3323","post","type-post","status-publish","format-standard","hentry","category-general-math","category-math-software","category-mathematica","category-programming"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3swhs-RB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=\/wp\/v2\/posts\/3323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3323"}],"version-history":[{"count":65,"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=\/wp\/v2\/posts\/3323\/revisions"}],"predecessor-version":[{"id":3492,"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=\/wp\/v2\/posts\/3323\/revisions\/3492"}],"wp:attachment":[{"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/walkingrandomly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}