Embedding CDF files into WordPress
Posted: July 21st, 2011 | Author: Sol | Filed under: CDF | 10 Comments »Today Wolfram Research introduced the larger vision of Computable Document Format (CDF) to make documents interactive. To facilitate the embedding of CDF files into blogs, Wolfram has also developed and released a CDF plugin for WordPress that generates the Javascript and embed code you’ll need to include with the Manipulate objects that you want to embed.
For those of you using a different blogging platform, or if you want to embed CDF files into a web page instead of a blog, Wolfram has updated and expanded their instructions for doing the process manually. Note that the instructions answer the question Mike Croucher raised in his CDF embedding tutorial of how to determine the height and width of the object you’re embedding.
Below is an example of a Manipulate object that was created with Mathematica. I created a new freeCDF file and copied the cell containing the object from its original notebook and pasted it into the new file. I selected the cell containing the object and changed its style to PluginEmbeddedContent. I also set Deployed to true for the entire notebook via Mathematica’s Option Inspector. And, I used this formatting information to size the object:
To determine the overall dimensions of the Manipulate object for specifying the embedding parameters, convert your Manipulate to a bitmap—select the cell bracket and choose the Cell > Convert To > Bitmap menu item. Then click the resulting image within the cell to select it, open the Option Inspector, and search for ImageSizeRaw. That will give you the width and height of the Manipulate.
I did notice that, while these sizing instructions worked perfectly on my Macbook, I needed to add 8 pixels to both height and width to make the embedded CDF not be clipped in Windows browsers.
Here’s a screencast of the process from start to finish. Yes, that’s me in the screencast.
Here’s the information the WordPress plugin needs to embed my example CDF. (You need to remove the space after the left square bracket to allow the plugin to process the code. Here I’m just illustrating it.) altimage is the static image to display if the CDF Player is not available.
[ WolframCDF source="http://playingwithmathematica.com/cdfs/wavy.cdf" CDFwidth="468" CDFheight="568" altimage="http://playingwithmathematica.com/cdfs/wavy.png"]
Here’s the result, a fully interactive CDF object with a static image displayed instead for users who don’t have the free CDF Player installed:
As a Wolfram employee and blogger I have a stake in it being easy to embed CDFs into blogs. I’m personally very interested in knowing how the process works for you. If you have problems I’ll do what I can to help resolve them.
I was wondering what the best options for manipulate are. If I manually type a string in the “phase” variable box in your example, there is an error and I have to refresh the page to get it to work again. This is what happens with me when I follow your instructions! However, it is not the case if I try one of the demonstration projects, for example: http://demonstrations.wolfram.com/ConicSectionsMoveFoci/
I looks good, it’s a shame that it doesn’t work on my computer. I just can’t believe that a Word Press plugin was a higher priority than getting a browser plugin for linux.
When combined with the on-going sound problems, the font issues (Qt libraries) in v6, the java/documentation center cpu usage problems in v7, and then more font problems in v8, it’s starting to get a little annoying. Do they not include linux user’s in their beta testing programs?
(The above was meant to be wrapped in a rant tag – but it got stripped from the comment)
@Sameer Good catch. I should have made the object resilient to non-numeric input. I’ve added this and updated the less robust version:
If[Not[NumberQ[phase]],phase=1];
I could, of course, also check the upper and lower bounds of the input once I’ve confirmed it’s numeric.
@Sol.
It still doesn’t work in my browser. I even created a CDF file and tried it and it has the same problem even if I add this If condition.
It works in CDF player but not in the browser!
@Sameer I wonder if there might be some version incompatibility somewhere. Let me see what I can find out.
@Sol,
I created the following html file that describes the issue:
http://www.ualberta.ca/~adeeb/Mathematica/MathematicaIssues.html
I tried contacting support but I haven’t received any feedback.
Not sure who can help with this but it seems that there are many options to create the embedded object. Please note that I used a very general “embed” HTML tag
@Sameer I’ve not forgotten you and I’m still working the issue and trying to get clarification on your question. I should note that in your HTML page describing the issue the CDF that causes you problems works fine for me. If the user enters non-numeric input then their input is ignored.
Hi, wondering if you might show an example of embedding an entire CDF ?
I’m considering posting some math lessons but it’s a serious proposition,not ever having done this before. I teacher for an online school and have lots of content (as Mathematica notebooks), but it’s all posted on the school’s server. I suspect posting the entire file is easier than breaking it up into parts…
Tom
[...] publishing textbooks and making complex information easy to understand to recreational games and everyday blogging, CDF truly makes it possible to communicate ideas in a more participatory way—as adopters of the [...]