9
$\begingroup$

My goal, is to make the following button,

Button[Style["?", Black, Bold], MessageDialog[Column[{Style["Help", Bold, Black, FontSize
-> 12],"Some Text Here"}], WindowTitle -> "Help", Background -> White]];

look more like a "canonical" help button. If we take a look at most programs, these types of buttons have a distinguished stylization.

An example could be:

enter image description here

How would I achieve this in Mathematica while keeping the same structure of my above code?

$\endgroup$
  • $\begingroup$ Have you tried some graphics or image instead of Style["?", Black, Bold]? $\endgroup$ – Michael E2 Jan 26 '18 at 3:19
  • $\begingroup$ @MichaelE2 I tried Button[Import["i.stack.imgur.com/ugb7b.png"], MessageDialog[ Column[{Style["Help", Bold, Black, FontSize -> 12], "Some Text Here"}], WindowTitle -> "Help", Background -> White]] $\endgroup$ – user372003 Jan 26 '18 at 3:26
  • 1
    $\begingroup$ Mike's answer is pretty much what I had in mind, and pretty much equivalent to what you tried. The buttons of most programs are designed by their development team (or they pay a designer to do it). $\endgroup$ – Michael E2 Jan 26 '18 at 3:29
13
$\begingroup$

Why not just use the graphic in the question, or any other images that you like:

enter image description here

Use ImageSize to control the final size of the button:

enter image description here

An alternative, that I use in some applications, is something like this:

help[$helpmessage_: "", $videolink_: ""] := 
  ActionMenu[
   Graphics[{{RGBColor[0.689647, 0.761166, 0.805478], 
      Disk[{0, 0}, 0.1]}, {GrayLevel[0], Circle[{0, 0}, 0.1], 
      Style[Inset["?", {0.01, 0}], "Label", FontSize -> 11]}},
    ImageSize -> {20, 20}],
   {"Help Notes" :> MessageDialog[
      Grid[{
        {Style[$helpmessage, LineIndent -> 0]}
        },
       Alignment -> {Center, Center},
       ItemSize -> {Automatic, All},
       Spacings -> {0, 0}],
      Background -> White],
    "View Video" :> SystemOpen[$videolink]},
   Appearance -> None,
   BaseStyle -> {},
   FrameMargins -> {{0, 0}, {-2, -2}},
   ImageSize -> {20, 20}];

enter image description here

$\endgroup$
  • 1
    $\begingroup$ Yes I was thinking about using import, but I wanted to know is there was a way to do it only with Mathematica functions. Anyways, is there a way to make the image smaller? Would Image size still work in this case? $\endgroup$ – user372003 Jan 26 '18 at 3:26
  • 1
    $\begingroup$ @user372003 you don't need to import, just cut/copy and paste. See the edit for using ImageSize $\endgroup$ – Mike Honeychurch Jan 26 '18 at 3:32
10
$\begingroup$

A couple of images that come with Mathematica. Caveat: There's no guarantee that they will be present in all (future) versions.

Button[
 Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
    "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
    "CodeCompletion", "MenuItemHelpTiny@144dpi.png"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Mathematica graphics

Button[
 Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
    "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
    "Help@144dpi.png"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Mathematica graphics

Update

These change color slightly when the mouse is over the button:

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "MenuItemHelpTiny@144dpi.png"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "MenuItemHelpHoverTiny@144dpi.png"}]
   ]
  ],
 Beep[],
 Appearance -> "Frameless"]

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "Help@144dpi.png"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "HelpHighlight@144dpi.png"}]
   ]
  ],
 Beep[], 
 Appearance -> "Frameless"]
$\endgroup$
  • $\begingroup$ Oh Wow! I did not know about this! $\endgroup$ – user372003 Jan 26 '18 at 3:44
  • 7
    $\begingroup$ based on 138889 it can be reduced to: Button["", Beep[], Appearance -> {"Default" -> FrontEnd`FileName[{"Ribbons", "Common"}, "Help@144dpi.png"] , "Hover" -> FrontEnd`FileName[{"Ribbons", "Common"}, "HelpHighlight@144dpi.png"] }] $\endgroup$ – Kuba Jan 26 '18 at 5:48
10
$\begingroup$

Here's the general way this type of thing seems to be handled in the built-in things plus code to build the type of buttons you want.

First the button code:

makeDisk[gradSpec_, n_] :=
  Rasterize[
   Module[{img, disk, edge},
    img =
     RadialGradientImage[
      gradSpec,
      n
      ];
    Graphics[
     {
      Inset[img, Center, Center, Scaled[1]],
      White,
      Annulus[{0, 0}, {1, 2}],
      GrayLevel[.8],
      EdgeForm[Gray],
      Annulus[{0, 0}, {1, 1.1}]
      },
     Background -> None,
     PlotRange -> {{-1.2, 1.2}, {-1.2, 1.2}},
     ImageSize -> n
     ]
    ],
   Background -> None
   ];
With[{n = 80},
 imOut =
  makeDisk[
   {{.8*n, 5}, {n, n}} ->
    {Hue[.6, .6, 1], Hue[.6, 1, 1], 
     Hue[.6, .3, 1]}, 
   n
   ];
 imHov =
  makeDisk[
   {{.8*n, 5}, {n, n}} ->
    {Hue[.6, .4, 1], Hue[.6, .8, 1], 
     Hue[.6, .3, 1]}, 
    n
   ];
 imIn =
  makeDisk[
   {{.3*n, .6*n}, {n, 5}} ->

    Reverse@{Hue[.6, .6, 1], Hue[.6, 1, 1], Hue[.6, 1, 1]},
    n
   ];
 {imOut, imHov, imIn}
 ]

asdasdasd

And here's a way to get hover actions and things:

Button[
 Style["asd", White, Bold],
 Appearance ->
  {
   "Default" -> imOut,
   "Hover" -> imHov,
   "Pressed" -> imIn
   }
 ]

enter image description here

$\endgroup$
  • $\begingroup$ looks like the Appearance option only takes bitmap images (not primitives)? $\endgroup$ – Mike Honeychurch Jan 27 '18 at 22:33
  • $\begingroup$ @MikeHoneychurch it only takes images, but crucially it can take nine patch images so it can resize adaptively. $\endgroup$ – b3m2a1 Jan 27 '18 at 23:42
  • $\begingroup$ presumably the wolfram bitmaps are 9 patch? $\endgroup$ – Mike Honeychurch Jan 27 '18 at 23:46
  • $\begingroup$ @MikeHoneychurch exactly. I posted an answer about how to make these which shows the utility of them. $\endgroup$ – b3m2a1 Jan 27 '18 at 23:48
4
$\begingroup$

When I tried using the methods described here based on the Appearance option for Button it seems that only bitmaps were valid, i.e. primitives didn't seem to be valid ...unless I have not coded correctly.

I normally prefer not to use bitmap images in interfaces because the aesthetics breaks down when the magnification changes -- you can always lock that down but not ideal for your users. Appearance differs across platforms as well. So in an ideal world buttons and controls based on primitives are better.

By redefining @b3m2a1 function this can be achieved:

makeDisk2[gradSpec_, n_] :=
  Module[{img, disk, edge},
   img = RadialGradientImage[gradSpec, n];
   Graphics[{
     Inset[img, Center, Center, Scaled[1]],
     White, Annulus[{0, 0}, {1, 2}], GrayLevel[.8], EdgeForm[Gray], 
     Annulus[{0, 0}, {1, 1.1}]},
    Background -> None,
    PlotRange -> {{-1.2, 1.2}, {-1.2, 1.2}},
    ImageSize -> n]];

With[{n = 30},
 imOut1 = 
  makeDisk2[{{.8*n, 5}, {n, n}} -> {Hue[.6, .6, 1], Hue[.6, 1, 1], 
     Hue[.6, .3, 1]}, n];
 imHov1 = 
  makeDisk2[{{.8*n, 5}, {n, n}} -> {Hue[.6, .4, 1], Hue[.6, .8, 1], 
     Hue[.6, .3, 1]}, n];
 imIn1 = makeDisk2[{{.3*n, .6*n}, {n, 5}} -> 
    Reverse@{Hue[.6, .6, 1], Hue[.6, 1, 1], Hue[.6, 1, 1]}, n];
 {imOut1, imHov1, imIn1}
 ]

Button[Dynamic@Overlay[{
    Which[
     CurrentValue["MouseOver"] == True&&CurrentValue["MouseButtons"] == {1}, button = imIn1,
     CurrentValue["MouseOver"] == True, button = imHov1,
     True, button = imOut1],
    Style["?", White, 18, Bold]
    },
   Alignment -> Center],
 Appearance -> None]

here is a pick of primitive (top) and raster buttons (bottom) at 100%

enter image description here

and again at 200%

enter image description here

$\endgroup$

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.