Tech Tip: Creating a status bar in a List Box
PRODUCT: 4D | VERSION: 14.3 | PLATFORM: Mac & Win
Published On: March 13, 2015
One way to bring pop to the data in a List Box is by incorporating a status bar. Like the progress bar object in a form, the status bar can display a meter like indicator with a percentage. The following methods are needed to implement in a List Box:
// ---------------------------------------------------------------------- // Name: UTIL_DecToHex // Description: Takes in the integer and converts the value into hex. // Parameters: // $1 (LONGINT) - Number to convert to HEX // Output: // $0 (TEXT) - Hex representation // ---------------------------------------------------------------------- C_TEXT($0) C_LONGINT($1) If (Count parameters=1) $0:=Substring(String($1;"&$");2) End if |
LISTBOX_STATUS_BAR method to create the status bar on a List Box:
// ---------------------------------------------------------------------- // Name: LISTBOX_STATUS_BAR // Description: Draws a status bar with a percentage in SVG. // Will get the List Box column and width dimensions to draw the // status bar with a random gradient color effect and percentage. // Parameters: // $1 (TEXT) - List Box object name height // $2 (TEXT) - List Box column name for column width // $3 (LONGINT) - Percent count to display the progress status 1-100% // Output: // $0 (PICTURE) - Picture with progress and percentage // ---------------------------------------------------------------------- C_TEXT($1) // List Box Object C_TEXT($2) // List Box Column Object C_TEXT($Color1;$Color2) // Colors for gradient C_LONGINT($3) // Count to display C_PICTURE($0;$generated_picure) // Output of the status bar C_LONGINT($height;$length;$posx1;$posx2;$posy1;$posy2) C_REAL($value) // Percentage status $height:=LISTBOX Get rows height(*;$1;Listbox pixels) $length:=LISTBOX Get column width(*;$2;$minWidth;$maxWidth)+1 vID_SVG:=SVG_New($length;$height) $posx1:=0 $posx2:=(($3*$length)/100) $posy1:=0 $posy2:=0 $value:=round($3;0) // Showing the percentage // Random color for gradient $Color1:="#"+UTIL_DecToHex((Random%239)+16)+UTIL_DecToHex ((Random%239)+16)+UTIL_DecToHex ((Random%239)+16) $Color2:="#"+UTIL_DecToHex ((Random%239)+16)+UTIL_DecToHex ((Random%239)+16)+UTIL_DecToHex ((Random%239)+16) SVG_Define_linear_gradient(vID_SVG;"gradient";$Color1;$Color2) // Set the gradient // Draw the status bar $idLine:=SVG_New_line(vID_SVG;$posx1;$posy1;$posx2;$posy2;"gradient";$height*1.9) // Show percentage $idText:=SVG_NEW_text(vID_SVG;String($value)+"%";$length/2.1;$height/3;"";-1;-1;-1;"Black") SVG EXPORT TO PICTURE(vID_SVG;$generated_picure;Copy XML data source) $0:=$generated_picure |
Here is an example of 4 variables that will be incorporated in the List Box:
C_LONGINT($percentage1;$percentage2;$percentage3;$percentage4) ARRAY PICTURE(Column1;4) $percentage1:=15 $percentage2:=78 $percentage3:=44 $percentage4:=2 Column1{1}:=LISTBOX_STATUS_BAR ("List Box";"Column1";$percentage1) Column1{2}:=LISTBOX_STATUS_BAR ("List Box";"Column1";$percentage2) Column1{3}:=LISTBOX_STATUS_BAR ("List Box";"Column1";$percentage3) Column1{4}:=LISTBOX_STATUS_BAR ("List Box";"Column1";$percentage4) |
List Box with percentages:
List Box with an adjusted row height:
LISTBOX SET ROWS HEIGHT(*;"List Box";30) |
List Box with an increased column width:
List Box with an even more adjust row height:
LISTBOX SET ROWS HEIGHT(*;"List Box";60) |
See Also: