KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: Creating an SVG Four State Image to Imitate a Highlight Button
PRODUCT: 4D | VERSION: 19 | PLATFORM: Mac & Win
Published On: October 25, 2021

The new project mode format of a 4D structure has many changes from a binary mode database. One of the differences between the two are they types of buttons available. In Project mode, highlight buttons are not a supported button type. During a conversion the buttons will be converted to invisible standard buttons.

A way to get the behavior of a highlight button is to use a custom type button and apply a four state image that replicates the four states the highlight button had.

A highlight button has the following four states:
- Standard which is fully transparent
- Hovered over which is a partially transparent/opaque blue
- Pressed/Clicked which is fully transparent
- Disabled which is a partially transparent/opaque grey

An image used for a four state button can split the image into four equal portions vertically. An image to replicate the states of a highlight button would be an image with the four equally portioned colors from top to bottom: fully transparant, partially opaque blue, fully transparent, and partially opaque grey.

Thus this type if image can be easily created in 4D with the following code:

C_TEXT($svgRef_t; $objRef_t))
C_PICTURE($pict_p)

// Creates the image and loads it to a variable
// Creates a 400x400 space, fully transparent with no color
$svgRef_t:=SVG_New(400; 400)

// Creates a 50% opaque blue rectangle for the second quarter of the image
$objRef_t:=SVG_New_rect($svgRef_t; 0; 100; 400; 100; 0; 0; "white"; "rgb(0,120,215):50%"; 0)

// Creates a 50% opaque grey rectangle for the last quarter of the image
$objRef_t:=SVG_New_rect($svgRef_t; 0; 300; 400; 100; 0; 0; "white"; "rgb(124,124,124):50%"; 0)

$pict_p:=SVG_Export_to_picture($svgRef_t)
SVG_CLEAR($svgRef_t)

// Saves image in ...\Resouces\Images\ Directory
If (Test path name(Get 4D folder(Current resources folder)+"Images"+Folder separator)#Is a folder)
   CREATE FOLDER(Get 4D folder(Current resources folder)+"Images"+Folder separator; *)
End if

This will create a small SVG image that can be applied to a custom button to imitate the classic behavior of a highlight button. The colors are not exact but are close enough. If needed the colors are declared in the ninth parameter in the SVG_New_rect call which uses the rgb format and a 50% opaque value.

The resulting image can be used to fix a converted database in a similar format to the following TechTip:
Utility method to convert all 3D buttons to Toolbar type buttons in project database