Jump to content

Input control with label and rounded corners


ioa747
 Share

Recommended Posts

Input control for the GUI with label and rounded corners

It all started in this post
I tried to make a rectangle with rounded corners, using $GUI_GR_BEZIER.
I managed to do it but the result did not satisfy me because $GUI_GR_BEZIER produced (is producing) a rough result. A flickering, which I could not overcome.

So I changed the approach with two rectangles and a circle for each corner
The script demonstrates the use of functions to create input fields with and without labels, and rounded corners,
where the font size changes dynamically depending on the height of Input control.

Valid value for Corner    [0=Rectangle]   to   [($Height/2)=Round],   Default=($Height/4)
 

241210-224110-208_AutoIt3_XR1CS.png


Example1: _CreateInputWL()

#include <GUIConstants.au3>

_Example()

;----------------------------------------------------------------------------------------
Func _Example()
    Local $hGUI = GUICreate("Shipping Details", 390, 320)
    GUISetStyle(-1, $WS_EX_COMPOSITED)
    GUISetBkColor(0x0D1117)

    Local $ShippingDetails = GUICtrlCreateLabel("Shipping Address", 10, 5, 380, 30)
    GUICtrlSetFont(-1, 18, 800, 0, "MS Sans Serif")
    GUICtrlSetColor(-1, 0xFFD800)

    Local $Exit = GUICtrlCreateButton("EXIT", 20, 270, 95, 40)
    GUICtrlSetFont(-1, 10, 800, 0, "MS Sans Serif")
    GUICtrlSetColor(-1, 0x0D1117)
    GUICtrlSetBkColor(-1, 0xFFD800)

    Local $Corner = -1 ; *** <- Valid value from [0=Rectangle] to [($Height/2)=Round],  Default=($Height/4) *** <-

    Local $FirstName = _CreateInputWL("First Name:", "John", 10, 50, 180, 40, 0x00FFFF, $Corner)
    Local $LastName = _CreateInputWL("Last Name:", "Doe", 200, 50, 180, 40, 0x00FFFF, $Corner)

    Local $Address = _CreateInputWL("Address:", "123 Main St", 10, 100, 230, 40, 0x00FFFF, $Corner)
    Local $Apt = _CreateInputWL("Apt:", "4B", 250, 100, 130, 40, 0x00FFFF, $Corner)

    Local $City = _CreateInputWL("City:", "Springfield", 10, 150, 140, 40, 0x00FFFF, $Corner)
    Local $State = _CreateInputWL("State:", "IL", 160, 150, 80, 40, 0x00FFFF, $Corner)
    Local $ZipCode = _CreateInputWL("Zip Code:", "627 01", 250, 150, 130, 40, 0x00FFFF, $Corner)

    Local $Email = _CreateInputWL("Email:", "jdoe627@gmail.com", 10, 200, 230, 40, 0x00FFFF, $Corner)
    Local $Phone = _CreateInputWL("Phone:", "0123456789", 250, 200, 130, 40, 0x00FFFF, $Corner)
    GUISetState(@SW_SHOW)

    Sleep(4000)

    GUICtrlSetData($Email[0], "Johndoe@gmail.com")
    GUICtrlSetData($Phone[1], "Mobile:")
    GUICtrlSetData($Phone[0], "654210789")

    ;**********************************
    While True
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE, $Exit
                ExitLoop
        EndSwitch
    WEnd
    ;**********************************

EndFunc   ;==>_Example

;----------------------------------------------------------------------------------------
Func _CreateInputWL($Label, $Text, $Left, $Top, $Width, $Height, $Color, $Corner = -1)
    ; $Corner Valid value [0=Rectangle] to [($Height/2)=Round],  Default=($Height/4)

    ; Validate parameters
    If $Corner < 0 Or $Corner = Default Then $Corner = $Height / 4
    If $Corner > $Height / 2 Then $Corner = $Height / 2
    If $Width <= 0 Or $Height <= 0 Then
        Return SetError(1, 0, 0)
    EndIf
    ; graphic
    GUICtrlCreateGraphic($Left, $Top, $Width, $Height)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $Color, $Color)
    ; body
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, $Corner, 0, $Width - ($Corner * 2), $Height) ; outer part
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, 0, $Corner, $Width, $Height - ($Corner * 2)) ; inner  part
    ; corners
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, 0, 0, $Corner * 2, $Corner * 2) ; Top-left
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, $Width - $Corner * 2, 0, $Corner * 2, $Corner * 2) ; Top-right
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, 0, $Height - $Corner * 2, $Corner * 2, $Corner * 2) ; Bottom-left
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, $Width - $Corner * 2, $Height - $Corner * 2, $Corner * 2, $Corner * 2) ; Bottom-right
    GUICtrlSetState(-1, $GUI_DISABLE)

    Local $idLabel = GUICtrlCreateLabel($Label, $Left + $Corner, $Top, $Width - ($Corner * 2), $Height * 0.4)
    GUICtrlSetBkColor($idLabel, $Color)
    GUICtrlSetFont($idLabel, $Height * 0.25)
    Local $idInput1 = GUICtrlCreateInput($Text, $Left + $Corner, $Top + ($Height * 0.35), $Width - ($Corner * 2), $Height * 0.60, -1 ,$WS_EX_COMPOSITED)
    GUICtrlSetFont($idInput1, $Height * 0.35)
    GUICtrlSetBkColor($idInput1, $Color)

    Local $aRet[] = [$idInput1, $idLabel]

    Return $aRet ; Return both ID
EndFunc   ;==>_CreateInputWL
;----------------------------------------------------------------------------------------

 

Example2: _CreateInputWL(),   _CreateInput()
 

#include <GUIConstants.au3>

Global $hGUI = GUICreate("GUI")
GUISetStyle ( -1, $WS_EX_COMPOSITED )
GUISetBkColor(0x0D1117)

Global $id_1 = _CreateInput("INPUT1", 20, 20, 150, 30, "0xFFD800", 15)
Global $id_2 = _CreateInput("INPUT2", 20, 60, 150, 30, "0xB6FF00")

Global $id_3 = _CreateInput("INPUT3", 20, 100, 150, 35, "0x00FFFF", 10)
Global $id_4 = _CreateInput("INPUT4", 20, 145, 150, 35, "0x0094FF")

Global $id_5 = _CreateInput("INPUT5", 20, 190, 150, 40, "0xFF0000", 10)
Global $id_6 = _CreateInput("INPUT6", 20, 240, 150, 40, "0xFF80EE")

Global $id_7 = _CreateInputWL("Label:", "INPUT7", 220, 20, 150, 30, "0xFFD800", 10)
Global $id_8 = _CreateInputWL("Label:", "INPUT8", 220, 60, 150, 30, "0xB6FF00")

Global $id_9 = _CreateInputWL("Label:", "INPUT9", 220, 100, 150, 35, "0x00FFFF", 10)
Global $id_10 = _CreateInputWL("Label:", "INPUT10", 220, 145, 150, 35, "0x0094FF")

Global $id_11 = _CreateInputWL("Label:", "INPUT11", 220, 190, 150, 40, "0xFF0000", 10)
Global $id_12 = _CreateInputWL("Label:", "INPUT12", 220, 240, 150, 40, "0xFF80EE")

Global $id_13 = _CreateInputWL("LabelXXL:", "INPUTXXL", 20, 300, 350, 60, "0xB6B6B6", 30)

GUISetState()


While True
    Switch GUIGetMsg()
        Case $GUI_EVENT_CLOSE
            ExitLoop
    EndSwitch
WEnd

;----------------------------------------------------------------------------------------
Func _CreateInput($Text, $Left, $Top, $Width, $Height, $Color, $Corner = 10)
    ; $Corner Valid value [0=Rectangle] to [($Height/2)=Round],  Default=($Height/4)
    ; Validate parameters
    If $Corner < 0 Or $Corner = Default Then $Corner = $Height / 4
    If $Corner > $Height / 2 Then $Corner = $Height / 2
    If $Width <= 0 Or $Height <= 0 Then
        Return SetError(1, 0, 0)
    EndIf
    ; graphic
    GUICtrlCreateGraphic($Left, $Top, $Width, $Height)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $Color, $Color)
    ; body
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, $Corner, 0, $Width - ($Corner * 2), $Height) ; outer part
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, 0, $Corner, $Width, $Height - ($Corner * 2)) ; inner  part
    ; corners
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, 0, 0, $Corner * 2, $Corner * 2) ; Top-left
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, $Width - $Corner * 2, 0, $Corner * 2, $Corner * 2) ; Top-right
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, 0, $Height - $Corner * 2, $Corner * 2, $Corner * 2) ; Bottom-left
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, $Width - $Corner * 2, $Height - $Corner * 2, $Corner * 2, $Corner * 2) ; Bottom-right
    GUICtrlSetState(-1, $GUI_DISABLE)

    $idInput1 = GUICtrlCreateInput($Text, $Left + $Corner, $Top + ($Height * 0.2), $Width - ($Corner * 2), $Height * 0.6, -1, $WS_EX_COMPOSITED)
    GUICtrlSetFont($idInput1, $Height * 0.4, 400)
    GUICtrlSetBkColor($idInput1, $Color)

    Return $idInput1
EndFunc   ;==>_CreateInput
;----------------------------------------------------------------------------------------
Func _CreateInputWL($Label, $Text, $Left, $Top, $Width, $Height, $Color, $Corner = -1)
    ; $Corner Valid value [0=Rectangle] to [($Height/2)=Round],  Default=($Height/4)
    ; Validate parameters
    If $Corner < 0 Or $Corner = Default Then $Corner = $Height / 4
    If $Corner > $Height / 2 Then $Corner = $Height / 2
    If $Width <= 0 Or $Height <= 0 Then
        Return SetError(1, 0, 0)
    EndIf
    ; graphic
    GUICtrlCreateGraphic($Left, $Top, $Width, $Height)
    GUICtrlSetGraphic(-1, $GUI_GR_COLOR, $Color, $Color)
    ; body
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, $Corner, 0, $Width - ($Corner * 2), $Height) ; outer partt
    GUICtrlSetGraphic(-1, $GUI_GR_RECT, 0, $Corner, $Width, $Height - ($Corner * 2)) ; inner  part
    ; corners
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, 0, 0, $Corner * 2, $Corner * 2) ; Top-left
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, $Width - $Corner * 2, 0, $Corner * 2, $Corner * 2) ; Top-right
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, 0, $Height - $Corner * 2, $Corner * 2, $Corner * 2) ; Bottom-left
    GUICtrlSetGraphic(-1, $GUI_GR_ELLIPSE, $Width - $Corner * 2, $Height - $Corner * 2, $Corner * 2, $Corner * 2) ; Bottom-right
    GUICtrlSetState(-1, $GUI_DISABLE)

    Local $idLabel = GUICtrlCreateLabel($Label, $Left + $Corner, $Top, $Width - ($Corner * 2), $Height * 0.4)
    GUICtrlSetBkColor($idLabel, $Color)
    GUICtrlSetFont($idLabel, $Height * 0.25)

    Local $idInput1 = GUICtrlCreateInput($Text, $Left + $Corner, $Top + ($Height * 0.35), $Width - ($Corner * 2), $Height * 0.60, -1, $WS_EX_COMPOSITED)
    GUICtrlSetFont($idInput1, $Height * 0.35)
    GUICtrlSetBkColor($idInput1, $Color)

    Local $aRet[]=[$idInput1, $idLabel]
    Return $aRet ; Return both ID
EndFunc   ;==>_CreateInputWL
;----------------------------------------------------------------------------------------

 

Please, every comment is appreciated!
leave your comments and experiences here!
Thank you very much  :)

 

Edited by ioa747

I know that I know nothing

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

×
×
  • Create New...