Jump to content

Clickable image (with a value)

kiffab

By kiffab,
in AutoIt GUI Help and Support

 Share

Recommended Posts

kiffab Wayfarer

kiffab

Posted
Posted

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

Link to comment
Share on other sites
  • Moderators
Melba23 Universalist

Melba23

Posted
  • Moderators
Posted

kiffab,

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

M23

Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see 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

 

Link to comment
Share on other sites
kiffab Wayfarer

kiffab

Posted
  • Author
Posted

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

Link to comment
Share on other sites
kiffab Wayfarer

kiffab

Posted
  • Author
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
Link to comment
Share on other sites
  • Moderators
Melba23 Universalist

Melba23

Posted
  • Moderators
Posted

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

Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see 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

 

Link to comment
Share on other sites
  • Moderators
Melba23 Universalist

Melba23

Posted
  • Moderators
Posted

kiffab,

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

M23

Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see 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

 

Link to comment
Share on other sites
kiffab Wayfarer

kiffab

Posted
  • Author
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
Link to comment
Share on other sites
  • Moderators
Melba23 Universalist

Melba23

Posted
  • Moderators
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

Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see 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

 

Link to comment
Share on other sites
  • Moderators
Melba23 Universalist

Melba23

Posted
  • Moderators
Posted

kiffab,

My pleasure as always. :)

M23

Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see 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

 

Link to comment
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...