Sign in to follow this  
Followers 0
kiffab

Clickable image (with a value)

12 posts in this topic

Hi Folks

I currently have a dropdown list on my GUI where the user can select a value. This is a polling interval. It could be 15, 30, 45, 60.

To make this look smart I plan (hope) to use images.

My idea is as follows:

4 separate images. Each image would have one of the values highlighted. This would default to 15 so the original image would be my panel of 4 values but with 15 highlighted. If you click "30", the image will change to the one with 30 highlighted. And once I hit the "on" switch on my app it'll read the value and set the interval.

I hope that makes sense.

What is the best way to do this? I'm fine with the read/set just not sure how to work it with images. Would you have to identify the coordinates surrounding your highlighted number? Easily done?

Thanks

Share this post


Link to post
Share on other sites



Im going to attempt this using invisible labels but open to suggestions.

Thanks.

Share this post


Link to post
Share on other sites

kiffab,

Why do you need to read the image? You have set the value with the combo, so just read that. ;)

M23


Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind._______My UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites

Hi M23

I don't want to use the combo. Kinda ruins the rest of my GUI. I have that working, however, so the functionality is there - I just want the picture enhancement.

I have a nice photoshopped image (GIF) that looks like this -

[ (15) | 30 | 45 | 60 ] >>> default

If you click on 30, it would then update to a second image :

[ 15 | (30) | 45 | 60 ]

So, I want to do 2 things here.

1) When you click that number it changes the image to appropriate one.

2) When image is set to the (15) one, also set the interval = "30000".

I know how to do 2 but struggling with. I've tried the invisible labels but the image just kinda flickers and does not update.

Cheers

K

Share this post


Link to post
Share on other sites

#5 ·  Posted (edited)

FYI -

I am creating a label (transparent) which is the size of the "15" block in my image. Same for 30, 45, 60.

Then using

Case $msg = $translabel1
GUICtrlSetData($image, _setImage($image, $15_pic)
Case $msg = $translabel2
GUICtrlSetData($image, _setImage($image, $30_pic)

.. and so on ...

The _setImage is in an icons file I downloaded from this forum to allow me to use transparent GIF files.

Hope that helps!

ps - this is probably the most inefficient / crazy way of doing this so if there's a better method please do tell :)

Edited by kiffab

Share this post


Link to post
Share on other sites

kiffab,

I understand. Perhaps something like this might be useful: ;)

#include <GUIConstantsEx.au3>

Global $aLabel[4], $aHighlight[4]

$hGUI = GUICreate("Test", 500, 500)

For $i = 0 To 3
    $aLabel[$i] = GUICtrlCreateLabel($i + 1, 10 + (40 * $i), 10, 40, 40)
    GUICtrlSetFont(-1, 16, Default, Default, "Courier New")
Next

_SetHighlight(2)

GUISetState()

While 1

    $iMsg = GUIGetMsg()
    Switch $iMsg
        Case $GUI_EVENT_CLOSE
            Exit
        Case $aLabel[0] To $aLabel[3]
            _SetHighlight($iMsg - $aLabel[0] + 1)
    EndSwitch

WEnd

Func _SetHighlight($iIndex)

    For $i = 0 To 3
        GUICtrlDelete($aHighlight[$i])
    Next

    $iX = (40 * $iIndex) - 30 - 2

    $aHighlight[0] = GUICtrlCreateLabel("", $iX, 10, 20, 2)
    $aHighlight[1] = GUICtrlCreateLabel("", $iX, 30, 20, 2)
    $aHighlight[2] = GUICtrlCreateLabel("", $iX, 10, 2, 20)
    $aHighlight[3] = GUICtrlCreateLabel("", $iX + 18, 10, 2, 20)

    For $i = 0 To 3
        GUICtrlSetBkColor($aHighlight[$i], 0xFF0000)
    Next

EndFunc

Please ask if anything is unclear. :)

M23


Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind._______My UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites

Hi

Thanks for that. Looks like it'll work for what I'm trying to do.

Do I need to use variables or can I just use exact coordinates? The values are confusing me ;-)

Cheers

K.

Share this post


Link to post
Share on other sites

kiffab,

You can of course use exact coordinates - I just used the algorithm for speed of coding. :)

M23


Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind._______My UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites

#9 ·  Posted (edited)

post-63897-0-69248000-1342346065_thumb.gpost-63897-0-73708200-1342346070_thumb.g

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(sample images attached)

Hi M23. Must admit, I am a bit lost here.

I am not sure whether that example will work for images or whether I am just not getting it. Probably the latter ;-)

I'm putting my default image in the top right corner:

$btn_interval = GUICtrlCreatePic('', 800, 20, 225, 33)_SetImage($btn_interval, @ScriptDir & "buttons15_poll.gif")

I'm then trying to create labels for each part of the image I want to be clickable, making them transparent so they are hidden (but clickable - not sure if possible!):

$time_15 = GUICtrlCreatelabel("", 810, 27, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)
$time_30 = GUICtrlCreatelabel("", 867, 27, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)
$time_45 = GUICtrlCreatelabel("", 917, 27, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)
$time_60 = GUICtrlCreatelabel("", 967, 27, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)

I then want it so you have case statements or something where case = $time_15 .... change the image to one with 15 highlighted. case = $time_60, change the image to one with 60 highlighted etc.

Help :)

Thanks

K.

Edited by kiffab

Share this post


Link to post
Share on other sites

#10 ·  Posted (edited)

kiffab,

A Pic control has the default $SS_NOTIFY style, as do your labels which overlap it. So AutoIt gets confused when you click and does not know which control you wish to action - so it actions neither. ;)

All you need to do is to create the Pic control without the default $SS_NOTIFY style:

$btn_interval = GUICtrlCreatePic('', 800, 20, 225, 33)_SetImage($btn_interval, @ScriptDir & "buttons15_poll.gif", $SS_BITMAP)

Now only the labels will be actioned and your script should work as you wish. :)

M23

Edit:

This works fine for me: :)

#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>

$hGUI = GUICreate("Test", 500, 500)

$btn_interval = GUICtrlCreatePic('', 10, 10, 225, 33, $SS_BITMAP)
GUICtrlSetImage($btn_interval, @ScriptDir & "buttons15_poll.gif")

$time_15 = GUICtrlCreatelabel("", 20, 17, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)
$time_30 = GUICtrlCreatelabel("", 80, 17, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)
$time_45 = GUICtrlCreatelabel("", 130, 17, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)
$time_60 = GUICtrlCreatelabel("", 180, 17, 48, 19)
GuiCtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT)

GUISetState()

While 1
    Switch GUIGetMsg()
        Case $GUI_EVENT_CLOSE
            Exit
        Case $time_15
            GUICtrlSetImage($btn_interval, @ScriptDir & "15_poll.gif")
        Case $time_60
            GUICtrlSetImage($btn_interval, @ScriptDir & "60_poll.gif")
    EndSwitch
WEnd

I will leave it to you to finish the Switch structure. ;)

Edited by Melba23
Added code

Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind._______My UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites

Perfect. :idiot:

$SS_BITMAP ....... so close but yet so far muttley

Thanks once again :guitar:

Share this post


Link to post
Share on other sites

kiffab,

My pleasure as always. :)

M23


Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind._______My UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

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