Skip to main content
\( \newcommand{\lt}{<} \newcommand{\gt}{>} \newcommand{\amp}{&} \)

Section B.2 Dynamic Figures with Controls

It is possible to create dynamic figures that do show some parameter sliders and sometimes also the 2D trace plot. These dynamic figures use a different base URL:

https://www.monroecc.edu/faculty/paulseeburger/CalcPlot3D/dynamicFigureWCP/

If there are sliders in these dynamic figures with controls, they can be given new labels and used to vary the associated parameters in the plot. See an example in Figure B.2.1 below. Note that you can click on the 2D trace plane and see a corresponding trace point on the 3D surface. You can also move the sliders or enter values from 1 to 3 in each textbox to see the number of peaks/valleys change.

Figure B.2.1 A dynamic figure with controls

To create a dynamic figure with controls there are a few more steps to take:

  1. Create the plot you desire to display in the dynamic figure using CalcPlot3D. In order to have controls, it will need to make use of parameter sliders or include a contour plot. As time goes on, more options may become available. (Let me know what you'd like to use, and I'll try to implement it.)
  2. Then save the view to the URL using the option on the File menu. (See Subsection 4.1.5.) You'll get a URL something like this:

    https://www.monroecc.edu/faculty/paulseeburger/calcnsf/CalcPlot3D/?type=jaxlabel;position=middle;math=%255Cpsi_%257Bn_x%252Cn_y%257D(x%252Cy);textonly=false&type=z;z=sin(api*x)sin(bpi*y);visible=true;umin=0;umax=1;vmin=0;vmax=1;grid=50;format=normal;alpha=200;constcol=rgb(255,0,0);view=0;contourcolor=rgb(255,0,0);contourplot=true;showcontourplot=true;firstvalue=-1;stepsize=0.2;numlevels=11;xnum=75;ynum=75;show2d=false;hidesurface=false;hidelabels=false;showprojections=false;surfacecontours=true;projectioncolor=rgba(51,153,0,1);showxygrid=false;showxygridonbox=false&type=slider;slider=a;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_x&type=slider;slider=b;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_y&type=text;text=0;visible=true;point=(0,0,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=15pt;bold=true;italic=false;fontmath=true;align=Center-left&type=text;text=L;visible=true;point=(1,-0.025,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&type=text;text=L;visible=true;point=(-0.05,1,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&type=text;text=x;visible=true;point=(0.5,-0.07,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&type=text;text=y;visible=true;point=(-0.08,0.5,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&type=window;hsrmode=3;anaglyph=-1;center=-7.447051206708178,-2.790794355991455,3.71998429905919,1;focus=0.5,0.5,0.5,1;up=0.39804763218685024,0.14521777837291014,0.9057979241281567,1;transparent=true;alpha=140;twoviews=false;unlinkviews=false;axisextension=0;xaxislabel=%20;yaxislabel=%20;zaxislabel=%20;edgeson=false;faceson=true;showbox=false;showaxes=false;showticks=false;perspective=true;centerxpercent=0.5;centerypercent=0.4;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=false;gridplanes=true;gridcolor=rgb(128,128,128);xmin=0;xmax=1;ymin=0;ymax=1;zmin=0;zmax=1;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=3.543529;xscalefactor=1;yscalefactor=1;zscalefactor=0.5;hidexysliders=true;hidetracevalue=true;
    
  3. Now you have a few options that you may wish to alter in the query string by hand.

    • You can add a name attribute and/or a noanimate attribute to any sliders. For example, “noanimate=true;name=n_x”. Note that each object, including the sliders, starts with “type=” in the query string.

      The name attribute changes the label of the slider to the supplied name, using MathJAX to format the supplied name. This means you can use LaTeX in the name.

      The noanimate attribute allows you to hide the Animate button on the slider control, if you wish.

    • You can add one or more of the following attributes to the window element at the very end of the query string: “hidexysliders=true; hidetracevalue=true;”

      Here the hidexysliders tag allows you to hide the \(x\)- and \(y\)-sliders that appear below the 2D trace plane by default.

      The hidetracevalue tag allows you to hide the trace value normally displayed on the 3D plot when moving a trace point around on the 2D trace plane (and 3D surface).

  4. Copy the part of the URL after the question mark to paste into the appropriate HTML code shown below.
  5. Now typically we need to place the dynamic figure in an iframe, although this is hidden from the user in PreTeXt. Copy and paste the code below, depending on your situation.
LibreTexts and many other HTML web pages

In order to get a dynamic figure that hides all the menus and controls of the CalcPlot3D app, we need to use a slightly different URL.

The URL for a dynamic figure with no controls is:

https://www.monroecc.edu/faculty/paulseeburger/CalcPlot3D/dynamicFigure/

Note that the data for the figure is encoded in a query string by CalcPlot3D. This means that we will need a question mark (?) just after the URL above and then we'll paste the data copied from the CalcPlot3D-generated URL. If we were to enter this new URL and query string in the browser directly, we would get the dynamic figure by itself on the page.

To get the figure(s) on a page, especially if you might wish to place more than one of these dynamic figures on the same page, it is useful to embed each dynamic figure in an iframe (so they won't interfere with each other). I choose to make the width of this iframe 90% or less so there is still space on each side to scroll up and down past the figure. For dynamic figures with controls, you may wish to adjust the height so that the width will always be larger than the height. Some adjustment may be required to accomodate the control sliders and 2D trace plane (when present).

Below you can see a listing of the code for Figure B.2.1 when it is displayed in LibreTexts or a generic webpage. Note that you can see the modified code elements I mentioned above. The sliders each have the name and noanimate attributes, and the hidexysliders and hidetracevalue attributes are in the last line of the query string.

<p style="text-align:center">
<iframe frameborder="0" height="480px" src="https://www.monroecc.edu/faculty/paulseeburger/CalcPlot3D/dynamicFigureWCP/?
type=jaxlabel;position=middle;math=%255Cpsi_%257Bn_x%252Cn_y%257D(x%252Cy);textonly=false&amp;
type=z;z=sin(api*x)sin(bpi*y);visible=true;umin=0;umax=1;vmin=0;vmax=1;grid=50;format=normal;alpha=200;
constcol=rgb(255,0,0);view=0;contourcolor=rgb(255,0,0);contourplot=true;showcontourplot=true;firstvalue=-1;
stepsize=0.2;numlevels=11;xnum=75;ynum=75;show2d=false;hidesurface=false;hidelabels=false;showprojections=false;
surfacecontours=true;projectioncolor=rgba(51,153,0,1);showxygrid=false;showxygridonbox=false&amp;
type=slider;slider=a;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_x&amp;
type=slider;slider=b;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_y&amp;
type=text;text=0;visible=true;point=(0,0,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=15pt;bold=true;italic=false;
fontmath=true;align=Center-left&amp;
type=text;text=L;visible=true;point=(1,-0.025,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;
fontmath=true;align=Center&amp;
type=text;text=L;visible=true;point=(-0.05,1,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;
fontmath=true;align=Center&amp;
type=text;text=x;visible=true;point=(0.5,-0.07,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;
fontmath=true;align=Center&amp;
type=text;text=y;visible=true;point=(-0.08,0.5,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;
fontmath=true;align=Center&amp;
type=window;hsrmode=3;anaglyph=-1;center=-7.447051206708178,-2.790794355991455,3.71998429905919,1;
focus=0.5,0.5,0.5,1;up=0.39804763218685024,0.14521777837291014,0.9057979241281567,1;transparent=true;alpha=140;twoviews=false;
unlinkviews=false;axisextension=0;xaxislabel=%20;yaxislabel=%20;zaxislabel=%20;edgeson=false;faceson=true;showbox=false;
showaxes=false;showticks=false;perspective=true;centerxpercent=0.5;centerypercent=0.4;rotationsteps=30;autospin=true;
xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=false;gridplanes=true;gridcolor=rgb(128,128,128);
xmin=0;xmax=1;ymin=0;ymax=1;zmin=0;zmax=1;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=3.543529;
xscalefactor=1;yscalefactor=1;zscalefactor=0.5;
hidexysliders=true;hidetracevalue=true;" 
width="90%"></iframe></p>
PreTeXt

When inserting a dynamic figure created with CalcPlot3D into a PreTeXt document, we need to use the following PreTeXt construction.

<figure>
   <caption>dynamic figure</caption>
   <interactive calcplot3d="Querystring from CalcPlot3D" 
                variant="controls" 
                width="90%"
                aspect="3:2">
      <static>
         <image source="location of a static image of the dynamic figure for PDF output" width="100%" />
      </static>
   </interactive>
</figure>

Note that we changed the variant attribute from “minimal” to “controls”. We also added an aspect attribute. This forces the viewport to the given aspect ratio, making it wider than it is tall and accommodating the control panel on the left.

For the example shown in Figure B.2.1 above, this construction looks like:

    <figure xml:id="figure-dynamicfigure2">
<caption>A dynamic figure with controls</caption>
<interactive calcplot3d="type=jaxlabel;position=middle;math=%255Cpsi_%257Bn_x%252Cn_y%257D(x%252Cy);textonly=false&amp;type=z;z=sin(api*x)sin(bpi*y);visible=true;umin=0;umax=1;vmin=0;vmax=1;grid=50;format=normal;alpha=200;constcol=rgb(255,0,0);view=0;contourcolor=rgb(255,0,0);contourplot=true;showcontourplot=true;firstvalue=-1;stepsize=0.2;numlevels=11;xnum=75;ynum=75;show2d=false;hidesurface=false;hidelabels=false;showprojections=false;surfacecontours=true;projectioncolor=rgba(51,153,0,1);showxygrid=false;showxygridonbox=false&amp;type=slider;slider=a;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_x&amp;type=slider;slider=b;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_y&amp;type=text;text=0;visible=true;point=(0,0,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=15pt;bold=true;italic=false;fontmath=true;align=Center-left&amp;type=text;text=L;visible=true;point=(1,-0.025,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=L;visible=true;point=(-0.05,1,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=x;visible=true;point=(0.5,-0.07,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=y;visible=true;point=(-0.08,0.5,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=window;hsrmode=3;anaglyph=-1;center=-7.447051206708178,-2.790794355991455,3.71998429905919,1;focus=0.5,0.5,0.5,1;up=0.39804763218685024,0.14521777837291014,0.9057979241281567,1;transparent=true;alpha=140;twoviews=false;unlinkviews=false;axisextension=0;xaxislabel=%20;yaxislabel=%20;zaxislabel=%20;edgeson=false;faceson=true;showbox=false;showaxes=false;showticks=false;perspective=true;centerxpercent=0.5;centerypercent=0.4;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=false;gridplanes=true;gridcolor=rgb(128,128,128);xmin=0;xmax=1;ymin=0;ymax=1;zmin=0;zmax=1;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=3.0;xscalefactor=1;yscalefactor=1;zscalefactor=0.5;hidexysliders=true;hidetracevalue=true;"
             variant="controls" 
             width="100%" 
             aspect="3:2">
	<static>
		<image source="images/staticprobabilitydensity.png" width="100%"/>
	</static>
</interactive>
    </figure>