Message Boards Message Boards

17 Replies
1 Total Likes
View groups...
Share this post:

How to increase the size of a CDF on screen

Posted 11 years ago
When I open a CDF document in a browser, for example. on the WA Pro or any interactive demonstration projects, I often need to increase the size of CDF to be able to actually see what is happening. Probably I'm doing something wrong, but in WA-Pro the height is often severely limited and on the other CDF is usually the width is limited. 
How to get bigger CDF and maybe even a full screen view ?
POSTED BY: Math Lind
17 Replies

Looks like there are two distinct questions here:

1) How to make web-embedded CDF content zoom (change magnification) with the rest of the surrounding web page

This is a feature now supported with the release of Mathematica 10, and coming soon with the new CDF Player. You can see this in action (using the Mathematica 10 plugin) at this Tumblr page:

Use your standard web browser view menu zoom settings to see the top example change size with the rest of the page, whereas the older example below it will remain a static size. A CDF must be saved with version 10 to to enable this behavior, and we're in the process of making these updates to all CDFs in our product sites.

2) How to match a CDF based on Manipulate to the size specified your HTML

Interactive diagrams created with Mathematica's Manipulate function are scalable (to the degree allowed by white space within the Manipulate box) and will adjust their size to the dimensions set by the embed code. For fixed dimensions, configure your content with ImageSize or ContentSize set to an explicit value or size specification. ImageSize->Medium will preserve Mathematica's default dimensions.

You'll find this and other details at the "Formatting Your Content for Embedding" section of the CDF website's deployment page:

</br>Hope this information helps, and I will make a point to check in later to see if there are more questions/concerns.

POSTED BY: Andre Kuzniarek
Posted 10 years ago

It's been a whole month since Math Lind posted this question. I sure hope that someone has an answer for this. I would also like larger sizes and I would like a reliable way to match the size of manipulate box to the size specified in the browser. For an example of the problem, see any of the demos at

POSTED BY: Gary Palmer
Posted 10 years ago

This is a good question and I am surprised no-one has come up with an answer so far. I would also like to increase the size of the output cell on my Manipulate exercises.

POSTED BY: Hamish Small
Posted 10 years ago

@Andre, It doesn't seem to work for me. As you say, there is more than one problem. I tried the example page on tumblr and I noticed that it did resize, but it is not clear what the result would be if the page had a color background instead of a white background. In any event, mine will not resize.

The notebook is attached. I notice that it is not stated above nor in the Wolfram page exactly where the ImageSize --> Medium should be placed. It is not accepted as an option to Manipulate. I have tried it as an option to GraphicsRow. Is there a general rule?

The second problem is that the code produce by the CDF generator does not produce an image on my page, so I used the shorter <embed /> script. The source for the web page is of course available with a right click. It is quite short.

The CDF was generated in MMA 10, just installed a few hours ago. I used the Export-->Web Embeddable route by selecting the output cell to make the CDF. I'm using Firefox for a browser on OS X 10.9.3. I left the non-working CDF script in the source code for the page, but I inactivated it.

Perhaps you can see the problem.


POSTED BY: Gary Palmer

@Gary, here's my CDF example in its original background:

I will take a look at your particular example a bit later today to see if I can be of further assistance, thanks.

POSTED BY: Andre Kuzniarek
Posted 10 years ago

@Andre, thanks. That's how I would like mine to behave.

POSTED BY: Gary Palmer
Posted 10 years ago

Works fine with background color applied to the notebook and exported to CDF with version 10, as shown here:

I also included a version with the web embed size set smaller than exported size, so you can see the scaling effect from not setting explicit ImageSize for the content (plots). It's the same behavior in a notebook -- if you change the notebook window size you will see the Manipulate shrink rather than be cropped. I'm not a big fan of this behavior on the web, since most developers want the size they see in the exported result and may not find this automatic shrinkage useful.

Anyway, hope this helps!

POSTED BY: Updating Name
Posted 10 years ago

@Andre, It does help. I used Format to change the background color of the cell to light gray and Exported the notebook as an embeddable CDF. In the html file I used the sizes provided by the Export dialog for the bounding box. I now get a gray panel that includes the CDF cell, extends the full width of the html bounding box, and resizes properly. But I see a white panel below the gray panel. Changing the height and/or width of the html bounding box changes the size of the image, but leaves the white panel. I see the same result in Firefox and Chrome.

POSTED BY: Gary Palmer

@Gary, without access to your source notebook, I can only guess that the export process is calculating the embed size based on some additional content that is not displayed. You can surely eliminate the white panel by reducing the object size (note the position of the CDF icon in the lower right corner is based on the object size settings).

I do however recommend you copy and paste the embed code provided by the export wizard, rather than just using the "embed" tag.

POSTED BY: Andre Kuzniarek
Posted 10 years ago

@Andre, the notebook is attached. The only change from the previous attachment was to the background of the cell. The size is specified according to previous instructions as ImageSize --> Medium. I put it in the GraphicsRow options because Manipulate rejected it as an option. That is, it prints in red within Manipulate, but it seems to work the same way. The white panel remains. The only other object options that might affect size are the Graphics Plotrange options, but those are necessary to the plot.

I would like to copy and paste the embed code provided by the export wizard, but it doesn't function on the UNLV server. When I use it, I get no image at all, as you can see here:

Do I need to ask them to install something to make this work?

P.S. By mistake, attachment is a .cdf rather than a notebook. See messages above or below for the notebook attachment. The code in a message below is also functional now (July 31, 11:22 PM).

POSTED BY: Gary Palmer

@Gary, was hoping to look at the notebook you used to generate the CDF. But I can try stripping this CDF back to its normal notebook state and export it myself to see how it sizes. I'm using Mac btw, and will try Windows as well in case there's something going on there.

As for displaying the CDF in web pages using our JS embed code, your example (from your server) works for me viewing in Safari on Mac and IE on Windows, but not in FireFox or Chrome on either platform. It's possible there is some sort of security aspect to this that needs user interaction, or you need MIME types to be set up (see the CDF again for details on that).

POSTED BY: Andre Kuzniarek

@Gary, without seeing your original source notebook, I can only guess that the reason your embed object size does not match your CDF might be from exporting while the original notebook was set at a magnified size. Otherwise, I have confirmed no problem getting precise output as desired on Mac and Windows equally. This particular magnification issue should probably be considered a bug, obviously it has the potential to be confusing. I'll get it reported (if it hasn't been already), thanks.

POSTED BY: Andre Kuzniarek
Posted 10 years ago

@Andre, I don't understand why you are not seeing the source notebook. It was attached to two of the previous messages. But here it is.

P. S. This code has been edited so it can now be cut and pasted into a notebook, where it should produce a plot.





{Graphics[{zLine[lnVs[lnPts[mTheta]]],ray[maxr],labelZ},Axes->True,Background->White,PlotRange->{{-2pltRatio ,2pltRatio},{-3pltRatio,3pltRatio}}],

Graphics[{logCrv2[(#-Pi I)&/@logPts[mTheta-Pi ]],logRayCrv[maxr],labelW1,labelW2,piUp,piDwn},Axes->True,Background->White,PlotRange->{{-2pltRatio -5,2pltRatio},{-3pltRatio,3pltRatio}}],

Graphics[{logCrv1[logPts[mTheta]],logRayCrv[maxr],labelW1,labelW2,piUp,piDwn},Axes->True,Background->White,PlotRange->{{-2pltRatio -5,2pltRatio},{-3pltRatio,3pltRatio}}]]},


FrameLabel->Style["The Logarithm Function",16,Bold],

Initialization :> (

logf[z_]:=Log[Abs[z]]+I Arg[z];


z[theta_,r_]:=r Exp[I theta];

r = 2;

pltRatio = 1.5;

zPts[theta_,r_]:=Table[r Exp[I x],{x,0,theta,.05}];

lnPts[theta_]:= zPts[theta,r];

lnVs[pts_] := v[#]&/@pts;

zLine[vectors_] :={Red,Line[vectors]};

rayPts[maxr_]:=  Table[z[Pi/4,r],{r,maxr,.001,-.05}];

ray[r_] := {Blue, Line[v[#]&/@rayPts[r]]};


logCrv1[pts_] := {Red,Line[v[#]&/@pts]};


logRayPts[maxr_] := logf[#]&/@rayPts[maxr];

logRayCrv[maxr_] :=  {Blue,Line[v[#]&/@logRayPts[maxr]]};

labelZ = Inset[Style["z",Bold,12],{-2,-3}];

labelW1 =  Inset[Style["w=Log(z)",Bold,12],{-5,-3}];

labelW2 =  Inset[Style["Log(z) = ln|z| + i Arg(z)",Bold,8],{-5,-4}];

piUp = Inset[Style["Pi",Bold,12],{.5,Pi}];

piDwn =Inset[Style["-Pi",Bold,12],{.5,-Pi}];

POSTED BY: Gary Palmer

Gary, not sure if this is what Andre means, but the notebook you attached has no code (Andre: "...original source notebook..."). You added code in the post but it is corrupted somehow - if you evaluate it, it will break. This happens when code is not formatted properly. This tutorial will tell you how to format code so it can be copy-pasted from Community to a notebook. I see moderators already tried to format your code - but it is too late - some typos creeped in. You can edit your last post, paste code again and format it correctly. Alternatively you could just attach a notebook with the code.

I hope this helps. Sam.

POSTED BY: Sam Carrettie
Posted 10 years ago

@Sam and @Andre, I'm sorry the code didn't work. I see now that I mistakenly attached a .cdf file rather than a notebook, but I did previously attach a notebook in my second message on this thread. I just now opened it from this page and it produced a plot. Nevertheless, a copy is attached with this message. Thank you for the link to the tutorial. When I clicked on the link with the intention of editing the code in the message above, it appeared to respond, but then it returned me to this page, so I was unable to read it.

POSTED BY: Gary Palmer

@Gary, thanks for the source notebook. I evaluated it and used the export wizard to embed the result, and it all works just fine, exactly like my previous examples show. I can only restate that the particular problem you are seeing with mismatched object size settings is likely do having exported from a notebook that was magnified.

The NB you attach here does not have such a setting, but the results you show on your site are exactly what you would see in the magnified source notebook scenario, i.e., the object size values in your embed code ('Log.function.emball150.cdf', 646, 508) are precisely the numbers you get when magnifying the notebook to 150%. I have a hard time believing your issue is anything other than this, and you should simply run the export wizard with the notebook at 100% and recopy/repaste the embed code for your page.

At this point, since I can't reproduce a problem with your content, I think you might have to pursue this directly with tech support to see if there is some other anomaly at play here (which I can't currently think of). Sorry I can't be more help on this particular point.

POSTED BY: Andre Kuzniarek
Posted 10 years ago

@Andre, I have been unable to reply for some 5 hours now because the reply button is not functioning. I'm not having trouble with any other sites, so I assume that the server is very busy or down for some reason. I pushed the Publish button and got an editing screen.

You were quite right that I had the notebook magnification set at 150 and that was the problem. I changed it to 100 and the cdf files are all working well now except for an occasional thin white line at the bottom, but I can live with that. Many thanks for sticking with this to the solution. I will just put this together now so that the next person with this question can find it quickly:

My CDF manipulate programs were not displaying properly on the web. White panels were showing between the CDF frame and the web page background.

One should set the size somewhere in the script by including ImageSize --> N (a number) for a fixed size image or ImageSize --> Medium for an image that will resize as the web page is resized. Other possibilities are illustrated in the documentation for ImageSize. Places where one might set the image size include the options of Graphics[], Plot[], or Manipulate[]. I found that setting the size in Manipulate worked, but ImageSize printed Red, suggesting that it doesn't belong in the Manipulate options.

If one wants a colored background for the CDF that matches the background of the web page, that background has to be set in Format --> Background Color. Select the output cell first.

Before exporting, magnification for the web page should be set at 100 percent using Window --> Magnification. If this is not set, the actual size will not match that specified by the CDF Export wizard. I commonly use 150 or even 200 percent for editing, so I have to watch this.

In the source code for the web page where the CDF will be displayed, the bounding box should reflect the height and width given by the Export --> Web Embeddable wizard.

POSTED BY: Gary Palmer
Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Reply Preview
or Discard

Group Abstract Group Abstract