Tech Tip: Multi-state button images, a 4D utility to create your own

PRODUCT: 4D | VERSION: v16 / v15 / v14 | PLATFORM: Mac & Win

Published On: November 22, 2016

Ever wanted to convert an image into a multi-state image for use in a 4D Picture Button but did not have the third-party application or skill to do it by hand? Well the utility below, UTIL_Make_MultiState_Button, will take that original image, resize it, and create a two, three or four state image suitable for use with a Picture Button.

The utility would be used with this sample code...

C_TEXT($Path_T)
C_PICTURE($Pict_G)
C_LONGINT($Width_L;$Height_L)
C_REAL($Ratio_R)
C_OBJECT($Data_O)

$Path_T:="Macintosh HD: ... :myImage.png"
READ PICTURE FILE($Path_T;$Pict_G)

PICTURE PROPERTIES($Pict_G;$Width_L;$Height_L)
If ($Width_L>$Height_L)
$Ratio_R:=32/$Width_L
Else
$Ratio_R:=32/$Height_L
End if

OB SET($Data_O;"TgtW";$Width_L*$Ratio_R)
OB SET($Data_O;"TgtH";$Height_L*$Ratio_R)
OB SET($Data_O;"States";4)

$Pict_G:=UTIL_Make_MultiState_Button ($Pict_G;$Data_O)

WRITE PICTURE FILE("Macintosh HD: ... :myMultiStateImg.png";$Pict_G)

Utility method UTIL_Make_MultiState_Button

If (True)
    If (False)
    Begin SQL
    /*
       Name: UTIL_Make_MultiState_Button

       Purpose: takes the picture in $1 and generates a new picture with the original image
       and the 3 other icon states 1)normal / 2)clicked / 3)hover / 4)disabled.
       This type of image is know as a "Sprite."

       See also: Tech Note: Creating CSS Image Sprites files in 4D //kb.4d.com/assetid=77321>

       $0 - Picture - Multi-state image
       $1 - Picture - Original picture
       $2 - Object - Contains Target Width, Height and number os states
       */
       End SQL
    End if
    //===================== Declare Variables ==================================
    //method_parameters_declarations
    C_PICTURE($0;$Sprite_G)
    C_PICTURE($Enabled_G;$1)
    C_OBJECT($Obj_O;$2)
    //--------------------------------------------------------------------------
    //local_variable_declarations
    C_LONGINT($Params_L;$Width_L;$Height_L;$States_L;$TgtWd_L;$TgtHt_L)
    C_PICTURE($Clicked_G;$Hover_G;$Disabled_G)
    C_TEXT($SVG_T;$Group_T;$Image_T)
    C_REAL($X_R;$Y_R)
End if

//====================== Initialize and Setup ================================

$Params_L:=Count parameters
If ($Params_L>1)
    // Original image
    //
    $Enabled_G:=$1
    $Obj_O:=$2

    PICTURE PROPERTIES($Enabled_G;$Width_L;$Height_L)

    $TgtWd_L:=OB Get($Obj_O;"TgtW")
    $TgtHt_L:=OB Get($Obj_O;"TgtH")
    $States_L:=OB Get($Obj_O;"States")

    //======================== Method Actions ==================================

    // Scale the original image
    //
    $X_R:=$TgtWd_L/$Width_L
    $Y_R:=$TgtHt_L/$Height_L
    TRANSFORM PICTURE($Enabled_G;Scale:K61:2;$X_R;$Y_R)

    // Create an SVG object and group for manipulation
    //
    $SVG_T:=SVG_New
    $Group_T:=SVG_New_group ($SVG_T)

    // Add $Enabled_G to a group so it can be SVG manipulated
    //
    $Image_T:=SVG_New_embedded_image ($Group_T;$Enabled_G)

    // Clicked: add more brightness
    //
    SVG_SET_BRIGHTNESS ($Group_T;1.2)
    $Clicked_G:=SVG_Export_to_picture ($SVG_T)

    // Hover: add even more bright to SVG image
    //
    SVG_SET_BRIGHTNESS ($Group_T;1.35)
    $Hover_G:=SVG_Export_to_picture ($SVG_T)

    // Disabled: reduce brightness and set grayscale
    //
    SVG_SET_BRIGHTNESS ($Group_T;0.7)
    $Disabled_G:=SVG_Export_to_picture ($SVG_T)
    TRANSFORM PICTURE($Disabled_G;Fade to grey scale:K61:6)

    SVG_CLEAR ($SVG_T)

    // Use Picture Operator "/" to stack the images vertically
    //
    Case of
    : ($States_L=2)
       $Sprite_G:=$Enabled_G/$Disabled_G

    : ($States_L=3)
       $Sprite_G:=$Enabled_G/$Clicked_G/$Disabled_G

    : ($States_L=4)
       $Sprite_G:=$Enabled_G/$Clicked_G/$Hover_G/$Disabled_G

    Else
       ASSERT(False;"Unknown case test!")

    End case
End if

//======================== Clean up and Exit =================================

$0:=$Sprite_G