Machsupport Forum

Mach Discussion => Mach Screens => Screen designer tips and tutorials => Topic started by: HimyKabibble on March 04, 2009, 12:40:04 PM

Title: Very Cool LED/Button Combo
Post by: HimyKabibble on March 04, 2009, 12:40:04 PM
Perhaps this has been done, but I haven't seen it....  You can make a very cool combo button LED by doing the following

1) I'm most of you know this part, but....  Create a graphic file containing two side-by-side images of the same size.  When this graphic is assigned to an LED, the left-hand image will be displayed when the LED is off, and the right-hand image will be displayed when the LED is on.  If the LED is configured to blink, the display will toggle between the two images.

2) Create an LED using the above graphic, and overlay that with a graphic button, with the image file assigned to a transparent .png file with no color data - i.e. - a blank, but transparent, image.  You now have a button that can have two completely different graphics depending on whether the corresponding variable is on or off.

The attached simple screen demonstrates this.  The left-most button changes color when the corresponding variable is set.  The middle button blinks in a different color when the corresponding variable is set.  The right-most is a photo I took of one of the dashboard toggle switches on my '64 Jaguar E-Type.

Regards,
Ray L.
Title: Re: Very Cool LED/Button Combo
Post by: HimyKabibble on March 04, 2009, 01:16:14 PM
Ooopsie!  I didn't include the bitmaps, etc.  The attached should do it.

Regards,
Ray L.
Title: Re: Very Cool LED/Button Combo
Post by: ger21 on March 04, 2009, 01:35:25 PM
I used a ton of those on this screen. Well over 100 png's. There are no standard LED's in the set, everything is two state .png's
I added a "glow" effect so they look like they light up when on.
http://www.machsupport.com/forum/index.php/topic,10009.msg66106.html#msg66106

Title: Re: Very Cool LED/Button Combo
Post by: Greolt on March 04, 2009, 05:53:34 PM
Sorry to burst your bubble Ray, but screen designers have been doing this forever.  ;D ;D

Even the standard Mach screen has half a dozen two state buttons.

Greg
Title: Re: Very Cool LED/Button Combo
Post by: HimyKabibble on March 04, 2009, 07:35:18 PM
Sorry to burst your bubble Ray, but screen designers have been doing this forever.  ;D ;D

Even the standard Mach screen has half a dozen two state buttons.

Greg

Greg,

"Even the standard Mach screen has half a dozen two state buttons." - Where?  I don't see any....  I see lots of separate LEDs, and a few buttons with the LEDs surrounding the buttons, but none like I described.  I didn't think it was a new idea, but one that new folk may not have seen, or had explained.  I worked with Scream4 for several days before realizing I could do this.

Regards,
Ray L.
Title: Re: Very Cool LED/Button Combo
Post by: Greolt on March 04, 2009, 07:50:47 PM
Yeah it is a great feature and works really well.

For instance I have a very bright Estop/Reset button that flashes red and yellow.  Very hard to miss.   :)

In fact I have this sort of thing all over my screen sets.  Get a bit carried away now and then.  ;D

If you look in the bitmaps folder for the standard MachMill graphics you will see the two state graphics I mentioned.

If you want it to simply change, then select "red/green"  and if you want flashing, then select "red/green flashing"

Benny has a video explaining how to make two state graphics using Real Draw Pro.  It can be found in the video tutorials section.

Greg
Title: Re: Very Cool LED/Button Combo
Post by: Greolt on March 04, 2009, 08:15:36 PM
One other thing that it is worth mentioning in this thread of Ray's for the information
of readers who might be wanting to try this two state LED idea.

When placing two state LED and placing an Image Button over the top you must assign a transparent PNG image to the Image Button.

Otherwise the two state change or flashing will not work. 

That little quirck has had many a first time screen designer scratching his head.  Me included.  ;D

This to my knowledge has not been documented.

Greg
Title: Re: Very Cool LED/Button Combo
Post by: HimyKabibble on March 04, 2009, 08:20:54 PM
One other thing that it is worth mentioning in this thread of Ray's for the information
of readers who might be wanting to try this two state LED idea.

When placing two state LED and placing an Image Button over the top you must assign a transparent PNG image to the Image Button.

Otherwise the two state change or flashing will not work. 

That little quirck has had many a first time screen designer scratching his head.  Me included.  ;D

This to my knowledge has not been documented.

Greg

Greg,

And that's the part that had me stumped for a bit.  Actually, for a blinking LED, you can leave the button with no graphic assigned.  The very first blink may not be correct, but it's gone so fast you'll never notice, and after the first it'll work fine.  But if it's not blinking, you can be left with the display incorrect unless you click the button very quickly.  That's where the transparent PNG comes in.

Regards,
Ray L.
Title: Re: Very Cool LED/Button Combo
Post by: Ron Ginger on November 05, 2009, 09:04:27 PM
When you are editing one of these two level button/leds how do you select the LED if you want to edit it? All I have found is to select the button, drag it out of place, then I can select the LEd. But then its messy to get the button re-aligned.
Title: Re: Very Cool LED/Button Combo
Post by: ger21 on November 05, 2009, 09:12:54 PM
I write down the coordinates before moving it, so it's easy to get it back where it was. But that's the way I do it too. :(
Title: Re: Very Cool LED/Button Combo
Post by: Greolt on November 05, 2009, 10:06:29 PM
Yes it is one of those little annoyances. 

And it seems there is no rhyme or reason as to which is on top, the button or the LED.

Sometimes I shove the transparent button off to the side and then later I have to search for where I left it.  :)

Greg
Title: Re: Very Cool LED/Button Combo
Post by: Chaoticone on November 05, 2009, 10:22:48 PM
I try to start with a grid for all my buttons and leds to fit in. 20 x 20 for examble. Then you can make the buttons a multipul of the grid size for different size buttons. The reset may be 20 x 60 for example.  You can also make the buttons and leds a little smaller than the grid to give the look of borders. This makes it much easier to edit the screen later too.

Brett