GUI Kits Building best practices

trogluddite · 8 Sept 2011

One technique that is often used with bitmap controls is to make a control that is any 'empty shell' - all of the mouse and drawing stuff, but no bitmap loader. Then use a separate loader module to send the bitmap to all of the knobs through a wireless link. That way you can very quickly update all the knobs on a whole GUI with just one file loading operation for very fast 're-skinning'. The loader module could even use a bitmap array, so that you could switch between several pre-loaded skins.

One other little thing to watch out for - when you make a grid of animation frames in knobman etc. - always leave a small empty margin around the knob graphic (even 1 pixel is enough). If the images go right up against the border, SM's anti-aliasing doesn't quite work, and you get an ugly hard edge at the 'joins' in the film strip. It's really easy to do this by accident if you use drop shadows to make your knobs look more 3D.

infuzion · 8 Sept 2011

trogluddite wrote: One other little thing to watch out for - when you make a grid of animation frames in knobman etc. - always leave a small empty margin around the knob graphic (even 1 pixel is enough). If the images go right up against the border, SM's anti-aliasing doesn't quite work, and you get an ugly hard edge at the 'joins' in the film strip.

I used to leave an extra border around vector graphics also due to the anti-aliasing rounding also. Lately I don't really care, but I still see it.

gluon · 9 Sept 2011

trogluddite wrote: One technique that is often used with bitmap controls is to make a control that is any 'empty shell' - all of the mouse and drawing stuff, but no bitmap loader. Then use a separate loader module to send the bitmap to all of the knobs through a wireless link. That way you can very quickly update all the knobs on a whole GUI with just one file loading operation for very fast 're-skinning'. The loader module could even use a bitmap array, so that you could switch between several pre-loaded skins.

One other little thing to watch out for - when you make a grid of animation frames in knobman etc. - always leave a small empty margin around the knob graphic (even 1 pixel is enough). If the images go right up against the border, SM's anti-aliasing doesn't quite work, and you get an ugly hard edge at the 'joins' in the film strip. It's really easy to do this by accident if you use drop shadows to make your knobs look more 3D.

would you have a little template/sample of this ?

(thanks to both of you for your precious answers!)

trogluddite · 9 Sept 2011

Here's an example using a slightly modified version of the stock bitmap knob. I've put in comment boxes so that you can see what has been changed inside the knob module.

Using the transmitter module, you can select one of four skins (just add more options to the '1,2,3,4' selector string to add more - you could even give them descriptive names). When you click load, it loads a new bitmap into the currently selected skin. Note that all of the bitmaps loaded must have the same frame size, as entered into the transmitter properties, but they can each have a different number of frames.

If you wanted to add similar transmitters for other controls (e.g. switches, different size knobs) be sure to re-name the wireless transmitters and receivers for each type of bitmap.