Jump to content
DevMode

Metro-Style Button With Image

Recommended Posts

Posted (edited)

Hi

This is my first post in the forum :sweating:

I want to share with you what you recently modified on MetroGUI-UDF

You added an icon or an image that appears with the button

Such as what appears in the picture

232.PNG.9c958a0b3224295ad89227b38e26be35.PNG

I added the function 

  • _Metro_ButtonImageRect
  • _Metro_CreateButtonImage
; #FUNCTION# ====================================================================================================================
; Name ..........: _Metro_ButtonImageRect
; Description ...: Make a data map of the position and size of the image within the button.
; Syntax ........: _Metro_ButtonImageRect($Image[, $X = Default[, $Y = Default[, $W = Default[, $H = Default]]]])
; Parameters ....: $Image                - image path.
;                  $Left               - [optional] Left pos.
;                  $Top                - [optional] Top pos.
;                  $Width              - [optional] Width.
;                  $Height             - [optional] Height.
; Return values .: Map in following format:
;                : ["Image"] = image path.
;                : ["Left"] = Left pos.
;                : ["Top"] = Top pos.
;                : ["Width"] = Width.
;                : ["Height"] = Height.
; Author ........: DevMode
; ===============================================================================================================================
Func _Metro_ButtonImageRect($Image, $X = Default, $Y = Default, $W = Default, $H = Default)
    Local $ImageMap[]
    $ImageMap["Image"] = $Image
    $ImageMap["Left"] = $X
    $ImageMap["Top"] = $Y
    $ImageMap["Width"] = $W
    $ImageMap["Height"] = $H
    Return $ImageMap
EndFunc
; ===============================================================================================================================
; Name ..........: _Metro_CreateButtonImage
; Description ...: Creates metro style buttons with Image. Hovering creates a frame around the buttons.
; Syntax ........: _Metro_CreateButton($Text, $ImageMap, $Left, $Top, $Width, $Height[, $BGColor = $ButtonBKColor[,
;                  $FontColor = $ButtonTextColor[, $Font = "Arial"[, $Fontsize = 12.5[, $FontStyle = 1 $FrameColor = "0xFFFFFF"]]]]])
; Parameters ....: $Text               - Text of the button.
;                  $ImageMap           - Image in format Map
;                  $Left               - Left pos.
;                  $Top                - Top pos.
;                  $Width              - Width.
;                  $Height             - Height.
;                  $BGColor         - [optional] Button background color. Default is $ButtonBKColor.
;                  $FontColor       - [optional] Font colore. Default is $ButtonTextColor.
;                  $Font            - [optional] Font. Default is "Arial".
;                  $Fontsize        - [optional] Fontsize. Default is 12.5.
;                  $FontStyle       - [optional] Fontstyle. Default is 1.
;                  $FrameColor      - [optional] Button frame color. Default is "0xFFFFFF".
; Return values .: Handle to the button.
; EditBy         : DevMode
; ===============================================================================================================================
Func _Metro_CreateButtonImage($Text,$ImageMap,$Left, $Top, $Width, $Height, $BG_Color = $ButtonBKColor, $Font_Color = $ButtonTextColor, $Font = "Arial", $Fontsize = 10, $FontStyle = 1, $FrameColor = "0xFFFFFF")
    Local $Button_Array[16]

    Local $btnDPI = _HighDPICheck()
    ;HighDPI Support
    If $HIGHDPI_SUPPORT Then
        $Left = Round($Left * $gDPI)
        $Top = Round($Top * $gDPI)
        $Width = Round($Width * $gDPI)
        $Height = Round($Height * $gDPI)
    Else
        $Fontsize = ($Fontsize / $Font_DPI_Ratio)
    EndIf

    $Button_Array[1] = False ; Set hover OFF
    $Button_Array[3] = "2" ; Type
    $Button_Array[9] = $Text
    $Button_Array[15] = GetCurrentGUI()

    ;Calculate Framesize
    Local $FrameSize = Round(4 * $btnDPI)
    If Not (Mod($FrameSize, 2) = 0) Then $FrameSize = $FrameSize - 1

    ;Set Colors
    $BG_Color = "0xFF" & Hex($BG_Color, 6)
    $Font_Color = "0xFF" & Hex($Font_Color, 6)
    $FrameColor = "0xFF" & Hex($FrameColor, 6)
    Local $Brush_BTN_FontColor = _GDIPlus_BrushCreateSolid($Font_Color)
    Local $Brush_BTN_FontColorDis = _GDIPlus_BrushCreateSolid(StringReplace(_AlterBrightness($Font_Color, -30), "0x", "0xFF"))
    Local $Pen_BTN_FrameHoverColor = _GDIPlus_PenCreate($FrameColor, $FrameSize)

    ;Create Button graphics
    Local $Button_Graphic1 = _iGraphicCreate($Width, $Height, $BG_Color, 0, 5) ;Default
    Local $Button_Graphic2 = _iGraphicCreate($Width, $Height, $BG_Color, 0, 5) ;Hover
    Local $Button_Graphic3 = _iGraphicCreate($Width, $Height, $BG_Color, 0, 5) ;Disabled
    If IsMap($ImageMap) And FileExists($ImageMap.Image) Then
        $hImage = _GDIPlus_ImageLoadFromFile($ImageMap.Image)
        If $ImageMap.Left = Default Then $ImageMap.Left = ($Height-$Height/1.5)/2
        If $ImageMap.Top  = Default Then $ImageMap.Top = ($Height-$Height/1.5)/2
        If $ImageMap.Width  = Default Then $ImageMap.Width = $Height/1.5
        If $ImageMap.Height  = Default Then $ImageMap.Height = $Height/1.5
        _GDIPlus_GraphicsDrawImageRect($Button_Graphic1[0], $hImage,$ImageMap.Left,$ImageMap.Top,$ImageMap.Width,$ImageMap.Height)
        _GDIPlus_GraphicsDrawImageRect($Button_Graphic2[0], $hImage,$ImageMap.Left,$ImageMap.Top,$ImageMap.Width,$ImageMap.Height)
        _GDIPlus_ImageDispose($hImage)
    EndIf
    ;Create font, Set font options
    Local $hFormat = _GDIPlus_StringFormatCreate(), $hFamily = _GDIPlus_FontFamilyCreate($Font), $hFont = _GDIPlus_FontCreate($hFamily, $Fontsize, $FontStyle)
    Local $tLayout = _GDIPlus_RectFCreate(($Height/1.5)/2, 0, $Width, $Height)
    _GDIPlus_StringFormatSetAlign($hFormat, 1)
    _GDIPlus_StringFormatSetLineAlign($hFormat, 1)

    ;Draw button text
    _GDIPlus_GraphicsDrawStringEx($Button_Graphic1[0], $Text, $hFont, $tLayout, $hFormat, $Brush_BTN_FontColor)
    _GDIPlus_GraphicsDrawStringEx($Button_Graphic2[0], $Text, $hFont, $tLayout, $hFormat, $Brush_BTN_FontColor)
    _GDIPlus_GraphicsDrawStringEx($Button_Graphic3[0], $Text, $hFont, $tLayout, $hFormat, $Brush_BTN_FontColorDis)

    ;Add frame
    _GDIPlus_GraphicsDrawRect($Button_Graphic2[0], 0, 0, $Width, $Height, $Pen_BTN_FrameHoverColor)

    ;Release created objects
    _GDIPlus_FontDispose($hFont)
    _GDIPlus_FontFamilyDispose($hFamily)
    _GDIPlus_StringFormatDispose($hFormat)
    _GDIPlus_BrushDispose($Brush_BTN_FontColor)
    _GDIPlus_BrushDispose($Brush_BTN_FontColorDis)
    _GDIPlus_PenDispose($Pen_BTN_FrameHoverColor)

    ;Set graphic and return Bitmap handle
    $Button_Array[0] = GUICtrlCreatePic("", $Left, $Top, $Width, $Height)
    $Button_Array[5] = _iGraphicCreateBitmapHandle($Button_Array[0], $Button_Graphic1)
    $Button_Array[6] = _iGraphicCreateBitmapHandle($Button_Array[0], $Button_Graphic2, False)
    $Button_Array[7] = _iGraphicCreateBitmapHandle($Button_Array[0], $Button_Graphic3, False)

    ;For GUI Resizing
    GUICtrlSetResizing($Button_Array[0], 768)
    _cHvr_Register($Button_Array[0], _iHoverOff, _iHoverOn, "", "", _iAddHover($Button_Array))

    Return $Button_Array[0]
EndFunc   ;==>_Metro_CreateButton

https://github.com/R3Pro/metro-style

Edited by DevMode

Share this post


Link to post
Share on other sites
43 minutes ago, techwizard said:

I Try to implement the code but its keep give me an error IsMap() undefined function 

Function IsMap() requires AutoIt version 3.3.15.0 or 3.3.15.1 beta ^_^

Share this post


Link to post
Share on other sites
Posted (edited)

I've install the beta version and its ok without any error but the image not showing when compile the script!

this is the code line

_Metro_CreateButtonImage("","Untitled.gif", 340, 245, 115, 60)

Edited by techwizard

Share this post


Link to post
Share on other sites
2 hours ago, moimon said:

Function IsMap() requires AutoIt version 3.3.15.0 or 3.3.15.1 beta ^_^

I've install the beta version and its ok without any error but the image not showing when compile the script!

this is the code line

_Metro_CreateButtonImage("","Untitled.gif", 340, 245, 115, 60)

Share this post


Link to post
Share on other sites
On 5/10/2019 at 7:37 AM, DevMode said:

Hi

This is my first post in the forum :sweating:

I want to share with you what you recently modified on MetroGUI-UDF

You added an icon or an image that appears with the button

Such as what appears in the picture

232.PNG.9c958a0b3224295ad89227b38e26be35.PNG

I added the function 

  • _Metro_ButtonImageRect
  • _Metro_CreateButtonImage
; #FUNCTION# ====================================================================================================================
; Name ..........: _Metro_ButtonImageRect
; Description ...: Make a data map of the position and size of the image within the button.
; Syntax ........: _Metro_ButtonImageRect($Image[, $X = Default[, $Y = Default[, $W = Default[, $H = Default]]]])
; Parameters ....: $Image                - image path.
;                  $Left               - [optional] Left pos.
;                  $Top                - [optional] Top pos.
;                  $Width              - [optional] Width.
;                  $Height             - [optional] Height.
; Return values .: Map in following format:
;                : ["Image"] = image path.
;                : ["Left"] = Left pos.
;                : ["Top"] = Top pos.
;                : ["Width"] = Width.
;                : ["Height"] = Height.
; Author ........: DevMode
; ===============================================================================================================================
Func _Metro_ButtonImageRect($Image, $X = Default, $Y = Default, $W = Default, $H = Default)
    Local $ImageMap[]
    $ImageMap["Image"] = $Image
    $ImageMap["Left"] = $X
    $ImageMap["Top"] = $Y
    $ImageMap["Width"] = $W
    $ImageMap["Height"] = $H
    Return $ImageMap
EndFunc
; ===============================================================================================================================
; Name ..........: _Metro_CreateButtonImage
; Description ...: Creates metro style buttons with Image. Hovering creates a frame around the buttons.
; Syntax ........: _Metro_CreateButton($Text, $ImageMap, $Left, $Top, $Width, $Height[, $BGColor = $ButtonBKColor[,
;                  $FontColor = $ButtonTextColor[, $Font = "Arial"[, $Fontsize = 12.5[, $FontStyle = 1 $FrameColor = "0xFFFFFF"]]]]])
; Parameters ....: $Text               - Text of the button.
;                  $ImageMap           - Image in format Map
;                  $Left               - Left pos.
;                  $Top                - Top pos.
;                  $Width              - Width.
;                  $Height             - Height.
;                  $BGColor         - [optional] Button background color. Default is $ButtonBKColor.
;                  $FontColor       - [optional] Font colore. Default is $ButtonTextColor.
;                  $Font            - [optional] Font. Default is "Arial".
;                  $Fontsize        - [optional] Fontsize. Default is 12.5.
;                  $FontStyle       - [optional] Fontstyle. Default is 1.
;                  $FrameColor      - [optional] Button frame color. Default is "0xFFFFFF".
; Return values .: Handle to the button.
; EditBy         : DevMode
; ===============================================================================================================================
Func _Metro_CreateButtonImage($Text,$ImageMap,$Left, $Top, $Width, $Height, $BG_Color = $ButtonBKColor, $Font_Color = $ButtonTextColor, $Font = "Arial", $Fontsize = 10, $FontStyle = 1, $FrameColor = "0xFFFFFF")
    Local $Button_Array[16]

    Local $btnDPI = _HighDPICheck()
    ;HighDPI Support
    If $HIGHDPI_SUPPORT Then
        $Left = Round($Left * $gDPI)
        $Top = Round($Top * $gDPI)
        $Width = Round($Width * $gDPI)
        $Height = Round($Height * $gDPI)
    Else
        $Fontsize = ($Fontsize / $Font_DPI_Ratio)
    EndIf

    $Button_Array[1] = False ; Set hover OFF
    $Button_Array[3] = "2" ; Type
    $Button_Array[9] = $Text
    $Button_Array[15] = GetCurrentGUI()

    ;Calculate Framesize
    Local $FrameSize = Round(4 * $btnDPI)
    If Not (Mod($FrameSize, 2) = 0) Then $FrameSize = $FrameSize - 1

    ;Set Colors
    $BG_Color = "0xFF" & Hex($BG_Color, 6)
    $Font_Color = "0xFF" & Hex($Font_Color, 6)
    $FrameColor = "0xFF" & Hex($FrameColor, 6)
    Local $Brush_BTN_FontColor = _GDIPlus_BrushCreateSolid($Font_Color)
    Local $Brush_BTN_FontColorDis = _GDIPlus_BrushCreateSolid(StringReplace(_AlterBrightness($Font_Color, -30), "0x", "0xFF"))
    Local $Pen_BTN_FrameHoverColor = _GDIPlus_PenCreate($FrameColor, $FrameSize)

    ;Create Button graphics
    Local $Button_Graphic1 = _iGraphicCreate($Width, $Height, $BG_Color, 0, 5) ;Default
    Local $Button_Graphic2 = _iGraphicCreate($Width, $Height, $BG_Color, 0, 5) ;Hover
    Local $Button_Graphic3 = _iGraphicCreate($Width, $Height, $BG_Color, 0, 5) ;Disabled
    If IsMap($ImageMap) And FileExists($ImageMap.Image) Then
        $hImage = _GDIPlus_ImageLoadFromFile($ImageMap.Image)
        If $ImageMap.Left = Default Then $ImageMap.Left = ($Height-$Height/1.5)/2
        If $ImageMap.Top  = Default Then $ImageMap.Top = ($Height-$Height/1.5)/2
        If $ImageMap.Width  = Default Then $ImageMap.Width = $Height/1.5
        If $ImageMap.Height  = Default Then $ImageMap.Height = $Height/1.5
        _GDIPlus_GraphicsDrawImageRect($Button_Graphic1[0], $hImage,$ImageMap.Left,$ImageMap.Top,$ImageMap.Width,$ImageMap.Height)
        _GDIPlus_GraphicsDrawImageRect($Button_Graphic2[0], $hImage,$ImageMap.Left,$ImageMap.Top,$ImageMap.Width,$ImageMap.Height)
        _GDIPlus_ImageDispose($hImage)
    EndIf
    ;Create font, Set font options
    Local $hFormat = _GDIPlus_StringFormatCreate(), $hFamily = _GDIPlus_FontFamilyCreate($Font), $hFont = _GDIPlus_FontCreate($hFamily, $Fontsize, $FontStyle)
    Local $tLayout = _GDIPlus_RectFCreate(($Height/1.5)/2, 0, $Width, $Height)
    _GDIPlus_StringFormatSetAlign($hFormat, 1)
    _GDIPlus_StringFormatSetLineAlign($hFormat, 1)

    ;Draw button text
    _GDIPlus_GraphicsDrawStringEx($Button_Graphic1[0], $Text, $hFont, $tLayout, $hFormat, $Brush_BTN_FontColor)
    _GDIPlus_GraphicsDrawStringEx($Button_Graphic2[0], $Text, $hFont, $tLayout, $hFormat, $Brush_BTN_FontColor)
    _GDIPlus_GraphicsDrawStringEx($Button_Graphic3[0], $Text, $hFont, $tLayout, $hFormat, $Brush_BTN_FontColorDis)

    ;Add frame
    _GDIPlus_GraphicsDrawRect($Button_Graphic2[0], 0, 0, $Width, $Height, $Pen_BTN_FrameHoverColor)

    ;Release created objects
    _GDIPlus_FontDispose($hFont)
    _GDIPlus_FontFamilyDispose($hFamily)
    _GDIPlus_StringFormatDispose($hFormat)
    _GDIPlus_BrushDispose($Brush_BTN_FontColor)
    _GDIPlus_BrushDispose($Brush_BTN_FontColorDis)
    _GDIPlus_PenDispose($Pen_BTN_FrameHoverColor)

    ;Set graphic and return Bitmap handle
    $Button_Array[0] = GUICtrlCreatePic("", $Left, $Top, $Width, $Height)
    $Button_Array[5] = _iGraphicCreateBitmapHandle($Button_Array[0], $Button_Graphic1)
    $Button_Array[6] = _iGraphicCreateBitmapHandle($Button_Array[0], $Button_Graphic2, False)
    $Button_Array[7] = _iGraphicCreateBitmapHandle($Button_Array[0], $Button_Graphic3, False)

    ;For GUI Resizing
    GUICtrlSetResizing($Button_Array[0], 768)
    _cHvr_Register($Button_Array[0], _iHoverOff, _iHoverOn, "", "", _iAddHover($Button_Array))

    Return $Button_Array[0]
EndFunc   ;==>_Metro_CreateButton

https://github.com/R3Pro/metro-style

Hi, 

I Try the code but nothing show how to implemnt the code

i've insert the code to MetroUDF but the button still only text

 

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

×
×
  • Create New...