6
$\begingroup$

I just need to center a button in the MWE code below. Currently, all I try doesn't work. I would like to horizontally center the button relative to the sliders over it, for aesthetical reasons only.

Manipulate[
    ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10},
        PlotRange -> {{-1.5, 2.5}, {0, 5}},
        AspectRatio -> 1,
        Frame -> True,
        Axes -> True,
        AxesOrigin -> {0, 1},
        GridLines -> Automatic,
        ImageSize -> 600
    ],
{{x, 1, "x"}, 0, 5, 0.01, ImageSize -> Large},
{{y, 1, "y"}, 0, 5, 0.01, ImageSize -> Large},
{{z, 1, "z"}, 0, 5, 0.01, ImageSize -> Large},
{{u, 0, "u"}, -2, 2, 0.01, ImageSize -> Large},
Delimiter,
Button["Button",{x = 1, y = 1, z = 1, u = 0},Appearance -> "Palette",ImageSize -> {256, 28}
],
ControlPlacement -> Bottom]

It's probably trivial, but can't find it ! :-(

$\endgroup$
4
$\begingroup$

Place the Button in a Row. Using the dimensions that you have given of 600 for the plot and 256 for the Button you would want the spacing to be the difference divided by two. You can adjust the spacing to your liking if it doesn't match your expectations.

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10}, 
  PlotRange -> {{-1.5, 2.5}, {0, 5}}, AspectRatio -> 1, Frame -> True,
   Axes -> True, AxesOrigin -> {0, 1}, GridLines -> Automatic, 
  ImageSize -> 600],

 {{x, 1, "x"}, 0, 5, 0.01, ImageSize -> Large},
 {{y, 1, "y"}, 0, 5, 0.01, ImageSize -> Large},
 {{z, 1, "z"}, 0, 5, 0.01, ImageSize -> Large},
 {{u, 0, "u"}, -2, 2, 0.01, ImageSize -> Large},
 Delimiter,
 Row[{
   Spacer[(600 - 256)/2],
   Button["Button", {x = 1, y = 1, z = 1, u = 0}, 
    Appearance -> "Palette", ImageSize -> {256, 28}]
   }],
 ControlPlacement -> Bottom]

Mathematica graphics

Update - Center all in Manipulate Window

In order to center the controls and the Button in the whole Manipulate window, place all of the controls in a centered column inside the Row. Set the Alignment of the column to center.

When placed inside a Row, Grid or Column one has to explicitly wrap the control with Control (see below).

Also one would have to build their own delimiter.

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10},
  PlotRange -> {{-1.5, 2.5}, {0, 5}},
  AspectRatio -> 1, Frame -> True, Axes -> True, AxesOrigin -> {0, 1},
   GridLines -> Automatic, ImageSize -> 600],
 Row[{
   Spacer[(600 - 256)/2],
   Column[{
     Control[{{x, 1, "x"}, 0, 5, 0.01, ImageSize -> {265, 5}}], 
     Control[{{y, 1, "y"}, 0, 5, 0.01, ImageSize -> {256, 5}}], 
     Control[{{z, 1, "z"}, 0, 5, 0.01, ImageSize -> {256, 5}}], 
     Control[{{u, 0, "u"}, -2, 2, 0.01, ImageSize -> {256, 5}}], 
     Row[{Graphics[{Thick, Line[{{0, 0}, {1, 0}}]}, 
        ImageSize -> {256, 5}, AspectRatio -> 5/256]}],
     Button["Button", {x = 1, y = 1, z = 1, u = 0},
      Appearance -> "Palette", ImageSize -> {256, 28}]
     }, Alignment -> Center]
   }],
 ControlPlacement -> Bottom]

Mathematica graphics

$\endgroup$
6
  • $\begingroup$ Wow ! Both solutions are nice. Thanks guys. I'm selecting this answer as the solution since it is simpler and fits very well my project. $\endgroup$ – Cham Mar 2 '16 at 18:03
  • $\begingroup$ Is there a way to place the button in the middle of the whole manipulate window ? $\endgroup$ – Cham Mar 2 '16 at 18:11
  • $\begingroup$ Depending upon how much work you want to put into it you have complete control over the 1Slider, Button, InputField, etc.. I think of it as being three levels. First, using the default position from Manipulate. Second, place inside a Row, Column` or Grid and wrap the control with Control. Third, put it where ever you like (even inside the plot) and use explicit control types with Dynamic inside the control. The latter is the most powerful but takes the most work. I have updated the answer to show you level two, how to center it in the plot. $\endgroup$ – Jack LaVigne Mar 3 '16 at 23:34
  • $\begingroup$ Your last code doesn't work on my system. It gives a frozen Manipulate window, and no warning/error messages ! I can't move the sliders. $\endgroup$ – Cham Mar 4 '16 at 14:14
  • $\begingroup$ @cham Sorry, I was too quick on the draw. The best I could do without going to level 3 (Dynamic) was to put the controls in a Row with a Spacer and a centered Column. $\endgroup$ – Jack LaVigne Mar 4 '16 at 21:00
7
$\begingroup$

Another way is to use Grid for complex layouts. One drawback is that Delimiter does not work as in the original Manipulate, the advantage is that you can use all styling options available to Grid, plus you don´t have to fiddle with discrete ImageSize values etc.:

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10}, 
  PlotRange -> {{-1.5, 2.5}, {0, 5}}, AspectRatio -> 1, Frame -> True,
   Axes -> True, AxesOrigin -> {0, 1}, GridLines -> Automatic, 
  ImageSize -> 600],
 Grid[{{Control@{{x, 1, "x"}, 0, 5, 0.01, 
      ImageSize -> Large}}, {Control@{{y, 1, "y"}, 0, 5, 0.01, 
      ImageSize -> Large}}, {Control@{{z, 1, "z"}, 0, 5, 0.01, 
      ImageSize -> Large}}, {Control@{{u, 0, "u"}, -2, 2, 0.01, 
      ImageSize -> Large}}, {Button[
     "Button", {x = 1, y = 1, z = 1, u = 0}, 
Appearance -> "Palette"]}}], ControlPlacement -> Bottom]

Mathematica graphics

If you want the whole control block centered, this is easily added by applying an additional Pane:

Manipulate[
 ParametricPlot[{y t^3 - u, x t^2 + z}, {t, -10, 10}, 
  PlotRange -> {{-1.5, 2.5}, {0, 5}}, AspectRatio -> 1, Frame -> True,
   Axes -> True, AxesOrigin -> {0, 1}, GridLines -> Automatic, 
  ImageSize -> {1000, 300}], 
 Pane[Grid[{{Control@{{x, 1, "x"}, 0, 5, 0.01, 
       ImageSize -> Large}}, {Control@{{y, 1, "y"}, 0, 5, 0.01, 
       ImageSize -> Large}}, {Control@{{z, 1, "z"}, 0, 5, 0.01, 
       ImageSize -> Large}}, {Control@{{u, 0, "u"}, -2, 2, 0.01, 
       ImageSize -> Large}}, {Button[
      "Button", {x = 1, y = 1, z = 1, u = 0}, Appearance -> "Palette",
       ImageSize -> Medium]}}], ImageSize -> 1000, 
  Alignment -> {Center, Center}], ControlPlacement -> Bottom]

Mathematica graphics

$\endgroup$
5
  • $\begingroup$ Nice ! However, I prefer the second solution, which is simpler. Thanks a lot ! $\endgroup$ – Cham Mar 2 '16 at 18:04
  • $\begingroup$ Glad you like it! It sure is more work to begin with (although it tends to pay off for more complex layouts). $\endgroup$ – Yves Klett Mar 2 '16 at 18:34
  • $\begingroup$ Is there a way to center the button relative to the Manipulate window width (which is not defined in the code) ? $\endgroup$ – Cham Mar 2 '16 at 18:35
  • $\begingroup$ @Cham comin up, standby... there you are. $\endgroup$ – Yves Klett Mar 2 '16 at 18:37
  • $\begingroup$ Thanks. Your answer is pretty complete. $\endgroup$ – Cham Mar 2 '16 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.