Custom video transport buttons

I need to have a set of video transport buttons for a desktop application. I already have them designed in photoshop in three states: disabled (grey), active but not pressed, and pressed. However, I’m wondering if this is the best way to do it (I’m remembering how it was done back in the early 90s when I worked for a company that made a video editing system - the poor designer had to make a million little chicklet-sized buttons, one for each of three states).

The application is built for a fixed screen size on a single platform, so I’m not especially concerned about scaling issues, but I’m wondering if anyone else has set something like this up and if there are any pitfalls I should be aware of. I was planning to use canvases for the buttons. Are there image types I should be using/avoid?

I was also thinking that a way to eke a bit more responsiveness out of this is to use one button that’s transparent on some kind of background image or solid color. For disabled, I would change the opacity of the image. For other states I would change the color to indicate state. This is how applications like DaVinci Resolve seem to do it (white for active but unpressed, orange for pressed).

Still tossing around ideas on this, so if you have examples I’d love to see them.

An SVG is ideal for this, but Xojo still has no native support for svg, so the second best option are PNGs with alpha channel.

For the states:
image

For performace, you can create a Picture Property for each state, draw it (or load it from a PNG file) at the start (or resizing or caption change) and in your paint event only draw one of those pictures.

1 Like