Sign in to follow this  
Followers 0
qwert

Seeking LED-like radio button

29 posts in this topic

I've been working with some of the radio button examples and have this question:

Is there a simple way to enhance the display to be more like an LED, instead of the standard dot inside a circle? (see example below)

If not, can someone suggest how best to achieve the same effect using two graphics to represent the On and Off states? Or point me to an existing example of something like this?

Thanks for any help.

post-29172-1206824899_thumb.png

post-29172-1206824906_thumb.png

Share this post


Link to post
Share on other sites



#2 ·  Posted (edited)

You can use the $BS_BITMAP style on radios so it should be enough to just define the style and use GUICtrlSetImage on it :)

Edit: No I was wrong it didn't replace the dot. Think you must let GDI do the job here :)

Edited by monoceres

Broken link? PM me and I'll send you the file!

Share this post


Link to post
Share on other sites

can someone suggest how best to achieve the same effect using two graphics to represent the On and Off states? Or point to an existing example of something like this?

Anyone?

Share this post


Link to post
Share on other sites

#4 ·  Posted (edited)

Just create a GUI Pic control, and use two images to simulate the two radio button states:

GUICreate("Sample GUI", 100, 100)
Global $fakeRadio1 = GUICtrlCreatePic("off.jpg", 10, 10, 10, 10), $fakeRadio1State = False
GUISetState()

While 1
  $msg = GUIGetMsg()
  Switch $msg
  Case $fakeRadio1
    $fakeRadio1State = NOT $fakeRadio1State;invert TRUE and FALSE
    If $fakeRadio1State Then
      GUICtrlSetImage($fakeRadio1, "on.jpg")
   Else
      GUICtrlSetImage($fakeRadio1, "off.jpg")
    EndIf
  EndSwitch
  Sleep(10)
WEnd
Edited by TomZ

Share this post


Link to post
Share on other sites

Just create a GUI Pic control, and use two images to simulate the two radio button states:

GUICreate("Sample GUI", 100, 100)
 Global $fakeRadio1 = GUICtrlCreatePic("off.jpg", 10, 10, 10, 10), $fakeRadio1State = False
 
 While 1
   $msg = GUIGetMsg()
   Switch $msg
   Case $fakeRadio1
     $fakeRadio1State = NOT $fakeRadio1State;invert TRUE and FALSE
     If $fakeRadio1State Then
       GUICtrlSetImage($fakeRadio1, "on.jpg")
    Else
       GUICtrlSetImage($fakeRadio1, "on.jpg")
     EndIf
   EndSwitch
   Sleep(10)
 WEnd

Tom... did you even try/check your script???

8)


NEWHeader1.png

Share this post


Link to post
Share on other sites

#6 ·  Posted (edited)

Tom... did you even try/check your script???

As a matter of fact, I didn't. Well, GUISetState() added.

I don't think it is bad if example scripts have minor errors anyways, it's not a crime to make people figure out the obvious themselves.

Edited by TomZ

Share this post


Link to post
Share on other sites

#7 ·  Posted (edited)

A crime.... obvious.... :)

GUICtrlSetImage($fakeRadio1, "on.jpg")

Else

GUICtrlSetImage($fakeRadio1, "on.jpg")

No help is better than help with errors. Thats why they ask, they don't know.

If you are going to "help" others ... check your stuff!

8)

Edited by Valuater

NEWHeader1.png

Share this post


Link to post
Share on other sites

No help is better than help with errors. Thats why they ask, they don't know.

I better quit posting then :) :)

[center]Common sense plays a role in the basics of understanding AutoIt... If you're lacking in that, do us all a favor, and step away from the computer.[/center]

Share this post


Link to post
Share on other sites

That's why they ask, they don't know.

That's absolutely the case.

TomZ, thanks for providing a starting point. But from here, I need to refine it to be usable. For one thing, the LED needs to be round and be compatible with any background (as opposed to having to maintain a whole library of LEDs for each and every use). The documentation GUIControlCreatePic implies it's possible:

To have a transparent picture it is needed to create the GUI window with WS_EX_LAYERED extended style. The left-top pixel will be used as the transparency color.

But my own attempt didn't produce that result:

#include<GuiConstants.au3>
GUICreate("Sample GUI", 200, 100, $WS_POPUP, BitOr($WS_EX_LAYERED,$WS_EX_MDICHILD))
Global $fakeRadio1 = GUICtrlCreatePic(@ScriptDir & "\off.jpg", 20, 20, 60, 40), $fakeRadio1State = False
GUISetState()

While 1
  $msg = GUIGetMsg()
  Switch $msg
  Case $fakeRadio1
    $fakeRadio1State = NOT $fakeRadio1State;invert TRUE and FALSE
    If $fakeRadio1State Then
      GUICtrlSetImage($fakeRadio1, @ScriptDir & "\on.jpg")
   Else
      GUICtrlSetImage($fakeRadio1, @ScriptDir & "\off.jpg")
    EndIf
  EndSwitch
  Sleep(10)
WEnd

One obvious problem is that it's difficult to produce a "clean" JPG -- MSPaint and other graphics packages want to blend the colors. A PNG would be suitable, but they don't work with GUIControlCreatePic. So, I'm pretty sure I'm not (yet) on the right track to produce LED-like radio buttons and further suggestions will be greatly appreciated.

Thanks for the help so far.

post-29172-1206991657_thumb.png

Share this post


Link to post
Share on other sites

Use GUISetBkColor to make the background of the GUI to be the same as the background of the LED.


Das Häschen benutzt Radar

Share this post


Link to post
Share on other sites

One obvious problem is that it's difficult to produce a "clean" JPG -- MSPaint and other graphics packages want to blend the colors. A PNG would be suitable, but they don't work with GUIControlCreatePic.

Use GIF then.

As for your example, the $WS_EX_LAYERED style will make the window transparent, not just the image. Look at these examples:

#include <GUIConstants.au3>
#include <WindowsConstants.au3>
$gui = GUICreate('', 200, 200)
GUICtrlCreatePic('mii.bmp', 10, 10, 98, 98)
GUISetState()

Do
Until GUIGetMsg() = $GUI_EVENT_CLOSEoÝ÷ Øh¯zËaȦm§ÿíêä±Ê&þ'?jíÞÇXéø¦«­¢+Ø¥¹±Õ±ÐíU%
½¹ÍѹÑ̹ÔÌÐì(¥¹±Õ±Ðí]¥¹½ÝÍ
½¹ÍѹÑ̹ÔÌÐì(ÀÌØíÕ¤ôU%
ÉÑ ÌäìÌäì°ÈÀÀ°ÈÀÀ°´Ä°´Ä°´Ä°ÀÌØí]M}a}1eI¤)U%
Ñɱ
ÉÑA¥ Ìäíµ¥¤¹µÀÌäì°ÄÀ°ÄÀ°äà°äà¤)U%MÑMÑÑ ¤()¼)U¹Ñ¥°U%Ñ5Í ¤ôÀÌØíU%}Y9Q}
1=M

Gives this:

Posted Image

Share this post


Link to post
Share on other sites

Forgot to mention, when using that style, it uses the top-left pixel as the transparent colour for your image.

I would have edited my last post to mention this but everytime I hit edit, my post got all garbled, so new post it is.

Share this post


Link to post
Share on other sites

when using that style, it uses the top-left pixel as the transparent colour for your image.

I tried your script with a bitmap version of my LED -- and got a strange result. Only the left pixel column and the bottom pixel row of the BMP are transparent. (Look closely at the captured result below.) I built the BMP with MSPaint -- and double-checked with a color tool to make sure it's background is all white.

Any idea what could be wrong?

post-29172-1207009397_thumb.png

Share this post


Link to post
Share on other sites

#14 ·  Posted (edited)

I had this sort of problem a few months ago - to get the script working right, I just used a .jpg file in place of my .gif, and gave the image a background color one that matched the background of the GUI, which I also specified. This was my quick fix.

Edited by Squirrely1

Das Häschen benutzt Radar

Share this post


Link to post
Share on other sites

I just used a .jpg file in place of my .gif, and gave the image a background color one that matched the background of the GUI, which I also specified.

From me:

"LED needs to be round and be compatible with any background (as opposed to having to maintain a whole library of LEDs for each and every use)"

I did see your earlier post and will certainly use it if a general-purpose solution can't be worked out.

Thanks for the suggestion.

Share this post


Link to post
Share on other sites

Any other ideas on how to achieve the transparent background needed for a general-purpose solution?

Anyone?

Share this post


Link to post
Share on other sites

#17 ·  Posted (edited)

This is really an issue of creating your graphics properly. If you create them with a transparent background and save them as bitmaps then everything will work the way you want it to. I took the liberty of doing so using the pic you posted in the first post. Using my attached bmp's and this code should give you the desired results.

#include <GUIConstants.au3>
#include <WindowsConstants.au3>
Global $gui, $rb_CustomRadio1[2], $rb_CustomRadio2[2], $nMsg, $iTimer, $iTimerDif, $i = 1
Global $aBGColors[5] = ["0xffffff","0xff0000","0x00ff00","0x0000ff","0x000000"]
$gui = GUICreate('Custom Radio Test', 200, 200)
GUISetBkColor($aBGColors[0])
$rb_CustomRadio1[0] = GUICtrlCreatePic(@ScriptDir & '\off.bmp', 10, 10, 17, 17)
$rb_CustomRadio1[1] = False
$rb_CustomRadio2[0] = GUICtrlCreatePic(@ScriptDir & '\on.bmp', 10, 27, 51, 51)
$rb_CustomRadio2[1] = True
GUISetState()
$iTimer = TimerInit()

While 1
    $nMsg = GUIGetMsg()
    Switch $nMsg
        Case $rb_CustomRadio1[0]
            $rb_CustomRadio1[1] = Not $rb_CustomRadio1[1]
            If $rb_CustomRadio1[1] Then
                GUICtrlSetImage($rb_CustomRadio1[0], @ScriptDir & "\on.bmp")
            Else
                GUICtrlSetImage($rb_CustomRadio1[0], @ScriptDir & "\off.bmp")
            EndIf
        Case $rb_CustomRadio2[0]
            $rb_CustomRadio2[1] = Not $rb_CustomRadio2[1]
            If $rb_CustomRadio2[1] Then
                GUICtrlSetImage($rb_CustomRadio2[0], @ScriptDir & "\on.bmp")
            Else
                GUICtrlSetImage($rb_CustomRadio2[0], @ScriptDir & "\off.bmp")
            EndIf
        Case $GUI_EVENT_CLOSE
            Exit
    EndSwitch
    
    $iTimerDif = TimerDiff($iTimer)
    If $iTimerDif >= 1000 Then
        GUISetBkColor($aBGColors[$i])
        If $i = 4 Then 
            $i = 0 
        Else 
            $i += 1
        EndIf
        $iTimer = TimerInit()
    EndIf
WEnd

on.bmpoff.bmp

edit: Cleaned up edges around circles of bmp's and added background changing to the code so you can see the images with different color backgrounds.

Edited by zorphnog

Share this post


Link to post
Share on other sites

#18 ·  Posted (edited)

If you create them with a transparent background and save them as bitmaps then everything will work the way you want it to.

Thanks very much for that analysis and for your clear example.

I was really struggling to get to the bottom of this. I was under the impression that the upper left pixel of the graphic determined the transparent color. Evidently, it's not that simple because I edited your On.bmp using MSPaint and quickly got back to where I was (stuck with a square box around the LED). I'll definitely investigate a better graphics editor.

Thanks for your help.

Edited by qwert

Share this post


Link to post
Share on other sites

#19 ·  Posted (edited)

I just want to point out something that you can look at. Since a Radio is a button then you should take a look at Gary Frosts Buttons UDF examples. You can set the image to be used. Also if you check Chat you will find a topic I started that includes a link to a LEDs icon library. Either use that library or extract the icons you want and use them.

Edit: And another trick is to make the Radio control 13x13 and then add a label (which will be transparent) beside it. For an example of that see

Search Encarta zip file

Edited by GEOSoft

George

Question about decompiling code? Read the decompiling FAQ and don't bother posting the question in the forums.

Be sure to read and follow the forum rules. -AKA the AutoIt Reading and Comprehension Skills test.***

The PCRE (Regular Expression) ToolKit for AutoIT - (Updated Oct 20, 2011 ver:3.0.1.13) - Please update your current version before filing any bug reports. The installer now includes both 32 and 64 bit versions. No change in version number.

Visit my Blog .. currently not active but it will soon be resplendent with news and views. Also please remove any links you may have to my website. it is soon to be closed and replaced with something else.

"Old age and treachery will always overcome youth and skill!"

Share this post


Link to post
Share on other sites

I was under the impression that the upper left pixel of the graphic determined the transparent color. Evidently, it's not that simple because I edited your On.bmp using MSPaint and quickly got back to where I was (stuck with a square box around the LED).

In my example the transparency is not determined by the top left pixel. Its actually saved in the bitmap. If you want the transparency to be determined by the top left pixel then you need to add the $WS_EX_LAYERED attribute to your GUI creation as Saunders mentioned. Otherwise you need a decent editor because you're not going to be able to edit these properly with MSPaint. I use GIMP and would suggest it since its free and has tons of features. You need to be able to save the Alpha layer (or transparency layer) which you can do through GIMP or any other decent editor.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0