Calculator Button

Does anyone have a snippet of code that draws (in specified colors) a picture that looks like a nice 3D calculator button (on a canvas)

I can’t get the right combinations of dark/light shadows etc to make it look “good”

something like

p=Make_me_a_Button(48,32,&c0000ff)

that would return a 48x32 picture object of a button using BLUE tones

Oh and using only code… no images :slight_smile:

Is this platform specific? If Mac only, NSGradient makes some very nice looking shading.

One thing you could try is drawing a series of black/white rounded rectangles or ovals with incremental alpha.

You can do what I do … cheat :slight_smile: I get a picture of what I want i.e. screen capture a button, then blow it up so I can see the pixels in Photoshop and grab the colours from the picture and use them in my Graphics.

using NSGradient would work… have a usable example?

problem with that is I want to be able to specify any base color (blue button, green, red etc)

I’m sure it’s different and more elegant (prettier) on Mac but on Windows the overlays are just using the alphas
255, 227 and 200 for outline, mousedown and mouseover.

I have a CGGradient function, but it only does linear and I’m not sure that would fit your needs… I finished up a test of a CIFilter example for CIShadedMaterial that could make for nice buttons… I also included the ApplyGradient function in the project.

CIShadedMaterial.zip

I don’t have a gradient example (have been looking into this for a few weeks actually) but I have an example of how to draw shadows on a graphics object using declares. Maybe it can help achieve what you are looking for?

https://www.dropbox.com/s/qhdf09iqw7qf5jj/drawing%20with%20shadow%20.xojo_binary_project?dl=0

wonder what happened to the post I made here a few hours ago?

anyway… what I did was basically this

  1. create a linear gradient filled rectangle
  2. over that draw a filled circle of WHITE with Alpha of 4 , radius = height of button, CenterY at negative 1/2 height