# How avoid white space and tags in CDF on web page

A CDF manipulate made in Mathematica 8 works fine and looks fine in a web page except for unsightly notebook tags and white space around the outside of and below the panel. What can be done?

http://faculty.unlv.edu/gbp/mma/VisualComplexAnalysis/complexInversion.html

Mathematica 9 is available, but not yet downloaded. Will it provide better web deployment?

Code added on June 29, 2014

Clear["Global*"]

Style[Pane[Framed[Manipulate[

(* GRAPHICS AND PLOTS COMBINED USING SHOW; LAST ITEM IN TRUMPS PREVIOUS *)
Show[{
circleK,
circleAPlot[offset oCircA],
circleBPlot[offset oCircA],invLineGraphics[offset oCircA],invAVGrPts[offset oCircA],
invLVGrPts[offset oCircA],
qPt,lineR,
labels[offset oCircA],
caption
},Axes->False,PlotRange->{xBnds,yBnds},Background->LightGray],
{{offset,2,Style["origin A multiplier",White,Bold]}, {3,2.5,2,1.5, 1, .5, 0,-.5}},
Initialization :> (

(* CONSTANTS *)

radCircA = 1/4; (* Radius of A *)

oCircA = (1+I)/(4 Sqrt[2]); (* Center of A *)

radR = 1; (* Radius of K *)

q = 0; (* Center of K *)

invAngles = Range[Pi/4, 3Pi/4, Pi/8];

(* PLOTTING BOUNDARIES *)

bnds = 4;

xBnds = {-bnds,bnds};

yBnds = {-bnds,bnds};

(* FUNCTIONS *)

(* THE POINT OF THE PLOT IS TO DEMONSTRATE THE BEHAVIOR OF THIS FUNCTION, Subscript[I, k](z), R = 1 *)

zInv[z_,q_,R_]:=(q Conjugate[z] + (R^2 - Abs[q]^2)/(Conjugate[z]-Conjugate[q]));

(* CONVERT COMPLEX TO VECTOR w REAL ELEMENTS *)

v[z_]:={Re[z],Im[z]};

(* CIRCLE WITH ORIGIN AT q AND RADIUS OF radR *)

circleK := Graphics[Circle[v[q],radR]];

(* CALCULATE COMPLEX POINTS OF CIRCLE A AND USE TABLE TO CREATE LIST OF POINTS *)

circleATable[centerA_] := Table[radCircA Exp[I \[Theta]]+centerA, {\[Theta], 0, 2Pi, .01}];

(* INVERT COMPLEX POINTS OF CIRCLE A BY MAPPING zInv[] TO LIST OF COMPLEX POINTS; RETURNS A LIST *)

circleBTable[centerA_] := zInv[#,q,radR]&/@circleATable[centerA];

(* MAP LISTS OF COMPLEX POINTS TO LISTS OF VECTORS *)

circleAVectors[centerA_] := v[#]&/@circleATable[centerA];

circleBVectors[centerA_] := v[#]&/@circleBTable[centerA];

(* CREATE LINE PLOTS FROM LISTS OF VECTORS *)

circleAPlot[centerA_] := ListLinePlot[circleAVectors[centerA],AspectRatio->1,PlotStyle->{Blue}];

circleBPlot[centerA_] := ListLinePlot[circleBVectors[centerA],AspectRatio->1,PlotStyle->{Blue}];

(* INVERSION POINTS IN A, SHOWN WITH RED DOTS AND ARROWS *)

invACPts[centerA_] := (radCircA Exp[I (#-Pi/4)]+centerA)&/@invAngles;

invLCPts[centerA_] := zInv[#,q,radR]&/@invACPts[centerA];

invAVGrPts[centerA_] :=Graphics[{Red,Point[v[#]]}&/@invACPts[centerA]];

invLVGrPts[centerA_]:= Graphics[{Red,Point[v[#]]}&/@invLCPts[centerA]];

invLineObjs[centerA_] := {Gray, Dashed,Arrowheads[.02],Arrow[{v[0],v[#]}]}&/@invLCPts[centerA];

invLineGraphics[centerA_] := Graphics[invLineObjs[centerA]];

(* OTHER *)

qPt = Graphics[Point[v[q]]];

lineR = Graphics[{Dashed,Gray,Line[{v[q],v[radR Exp[I (Pi/2+Pi/4)]]}]}];

(* LABELS *)

labelK=Text[Style["K", Bold, 12], v[-.5-.5I]];

labelA[centerA_] := {Blue,Text[Style["A", Bold, 8], v[centerA]]};

labelB[centerA_] :={Blue,Text[Style[If[Abs[centerA] == Abs[oCircA], "B = L","B"], Bold, 8], v[zInv[centerA +radCircA Exp[I  Pi/4],q,radR]+.2+.2I]]};

labelq = Text[Style["q", Bold, 12], v[0]-{.1,.1}];

labelR = Text[Style["R", Bold, 10], v[(1/2)Exp[I(Pi/2+Pi/4)]]-{.1,.1}];

(* CONVERT TEXT PRIMITIVES TO GRAPHICS OBJECTS *)

labels[centerA_] := Graphics[{labelK, labelA[centerA], labelB[centerA],labelq,labelR}];

caption = Graphics[{Text[Style["Complex inversion of circle A in unit circle K\nto circle B or to line L if center q of K in A\nSubscript[I, k](z) =(q Overscript[z, _] + ((R^2)-|q|^2) )/(Overscript[z, _]-Overscript[q, _]), R=1", Bold,12], v[-2.2I]]}])
],Background->Black],{395,430},Alignment->Left],Background->LightGray]

-
I can't reproduce this. I do not know how you exported this. Here is screen shot on my browser for a your notebook that I exported as CDF and loaded in HTML !Mathematica graphics as you can see the brackets are not there. Did you save the CDF as standalone? I am using V 9.01 on windows, firefox. May be this behaves differently in V8. If you have V9 maybe you can try exporting it from V9 instead. –  Nasser Jun 27 at 18:37
@Nasser, In MMA 8, I don't see an Export menu choice. I just saved it as CDF. In your link, I do not see the brackets, but I do see the unwanted white space outside the Manipulate box plus a yellow panel off to the right just to the left of where the tags would be. A panel that should perhaps show at the top is hidden with just the lower edge showing. It is the same in Chrome and Firefox, except that Firefox puts a black background around the whole cell (including Manipulate panel, white space, and yellow space). I will try MMA 9 when I finish the download tonight. –  Gary Palmer Jun 27 at 19:36
the unwanted space can be easily taken care off with correct width and height values in your HTML command to load the CDF. Screen shot !Mathematica graphics I just used <embed src="Untitled.cdf" width="400" height="400"/> and the yellow color is because your set the page color to yellow. I just removed that. In V9, there is an export CDF in the menu, selecting export standalone CDF, you should get the same result as I have. –  Nasser Jun 27 at 19:45
@Nasser, The adjustment to 400x400 helps, but a white margin remains around the outside even after further shrinking. Hopefully, v. 9 will solve this. –  Gary Palmer Jun 27 at 21:41
@bobthechemist, It works for me. It was edited once, but not one hour ago. –  Gary Palmer Jun 28 at 1:46

# Edit

In response to OP providing code used in demonstration

Here are the steps I have followed to generate the HTML file with embedded CDF

• Where you have {395,430},Alignment->Left] change your code to have {500, 500}, Alignment -> {Center, Top}. The alignment could stay the same but the dimensions need to be increased.
• Execute the notebook in a fresh session of Mathematica
• Left-click on the bracket for the Out[2] cell
• Choose File -> Export CDF -> Web Embeddable from the pulldown menu
• From the CDF Wizard's 2nd page, make sure Current selection is selected and choose a filename for the CDF.
• From the next page I opted to put the HTML file in the same directory as the CDF
• On the last page, note the dimensions of the CDF. As written, they are 504 and 502.
• Update the cdf.embed line in the HTML code I've previously written below with these values.

With these steps you should get a clean looking output in Firefox but a white border in Chrome. The two browsers are interpreting the size differently. I seem to recall a workaround for the Chrome problem but I need to dig for it.

I can get close to the desired output using the following steps. For designing the CDF, I wrap the Manipulate in a Pane with the appropriate size and color for the webpage:

Style[Pane[
Manipulate[Plot[Sin[a x], {x, 0, 4 Pi}], {a, 1, 10}], {439, 320},
Alignment -> Center], Background -> LightGray]


I then need to adjust the size parameters sent to cdf.embed in the HTML code:

<html>
<body bgcolor="LightGray">
<script type="text/javascript" src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js"></script>
<script type="text/javascript">
var cdf = new cdfplugin();
cdf.setDefaultContent('<a href="http://www.wolfram.com/cdf-player/"><img  src="Untitled.png"></a>');
cdf.embed('Untitled.cdf', 290, 208);
</script>
</body>
</html>


Here is a snapshot of the result:

No amount of adjustments to the cdf.embed arguments could get rid of the small white line at the top of the Pane. Also note that Mathematica LightGray is not HTML LightGray so being explicit with RGB colors may be necessary for those of us who are picky. Additionally, you can expand the size of the Pane` so that the Wolfram watermark in the lower right-hand corner does not overlap the functionality of your program.

-
I’ve been going round-and-round here, trying different things with margins and hiding brackets in the three modes of the Option Inspector for Cell Display with different settings in Cell Properties. I have managed to make my image disappear altogether. I made a notebook out of your script and that also appears as a white panel with a logo in the lower right. Since I can’t really test your solution until I get out of this mess, I’m just going to take you at your word and accept it. Is there a manual somewhere of what parameters are typically set for a CDF deployed to the web? –  Gary Palmer Jun 29 at 22:08
@GaryPalmer if there is a manual, I have not seen it. I wonder if you have altered your stylesheet sufficiently that the notebook you are currently using is beyond repair. I did not need to adjust the stylesheet or manipulate anything in the option inspector to get the results shown above. It's possible that you will need to hide the Input cell because you have an earlier version of Mathematica. Please tell me if this resembles your results with my example above. –  bobthechemist Jun 30 at 0:03
I don't see any resemblance. I am getting a blank, white frame. You are probably right, and I will try to move the code to another notebook and hope I haven't mucked up some default global style sheet. I'm using V9 now. I didn't know it wasn't necessary to hide the script! –  Gary Palmer Jun 30 at 1:42
I made a web embeddable cdf without hiding the cell brackets and the image has returned, not in the exact form I want, but something to work with. –  Gary Palmer Jun 30 at 1:50
@GaryPalmer you only need to hide the Input Cell if you are attempting to use Save As -> CDF. In v9, select the output cell that has your activity, then File -> CDF Export -> Web Embeddable. –  bobthechemist Jun 30 at 2:24