progressBarASCII ( completePct ; totalBlocks ; colorBar ; colorBackground ; fontSize ; showPercent )

Renders a colored text-based progress bar using hex colors, font size, and percentage, with optional percent label.

Be the first to rate this function Log in to vote

Jonni™ - Show more from this author

Sample input:

progressBarASCII ( 30 ; 10 ; "#7962a8" ; "#e8deee" ; 12 ; True )

Sample output:

Text based progress bar

Function definition: (Copy & paste into FileMaker's Edit Custom Function window)

// PROGRESS BAR ASCII

// Renders a colored text-based progress bar using hex colors, 
// font size, and percentage, with optional percent label.

// Function Name : progressBarASCII
// Parameters : completePct ; totalBlocks ; colorBar ; colorBackground ; fontSize ; showPercent
// Use example : progressBarASCII ( 30 ; 10 ; "#7962a8" ; "#e8deee" ; 12 ; True )

// Note : See structure and syntax for defaultArray and dataArray below


Let ( [

	// Inputs
	~pct = Min ( Max ( completePct ; 0 ) ; 100 ) ;
	~roundedPct = Ceiling ( ~pct / 10 ) * 10 ;
	~blocksDone = Round ( ( ~roundedPct / 100 ) * totalBlocks ; 0 ) ;
	~blocksRemaining = Max ( 0 ; totalBlocks - ~blocksDone ) ;
	
	~hexDigits = "0123456789abcdef" ;
	
	// Convert BAR color hex → RGB
	~hexBar = Substitute ( Lower ( colorBar ) ; "#" ; "" ) ;
	
	~rBar = Let ( [ 
		~hex = Left ( ~hexBar ; 2 ) ;
		~hi = Position ( ~hexDigits ; Left ( ~hex ; 1 ) ; 1 ; 1 ) - 1 ;
		~lo = Position ( ~hexDigits ; Right ( ~hex ; 1 ) ; 1 ; 1 ) - 1
	] ; 
		~hi * 16 + ~lo	
	) ;
	
	~gBar = Let ( [ 
		~hex = Middle ( ~hexBar ; 3 ; 2 ) ;
		~hi = Position ( ~hexDigits ; Left ( ~hex ; 1 ) ; 1 ; 1 ) - 1 ;
		~lo = Position ( ~hexDigits ; Right ( ~hex ; 1 ) ; 1 ; 1 ) - 1
	] ; 
		~hi * 16 + ~lo		
	) ;
	
	~bBar = Let ( [ 
		~hex = Middle ( ~hexBar ; 5 ; 2 ) ;
		~hi = Position ( ~hexDigits ; Left ( ~hex ; 1 ) ; 1 ; 1 ) - 1 ;
		~lo = Position ( ~hexDigits ; Right ( ~hex ; 1 ) ; 1 ; 1 ) - 1
	] ; 
		~hi * 16 + ~lo
	) ;
	
	~rgbBar = RGB ( ~rBar ; ~gBar ; ~bBar ) ;
	
	// Convert BACKGROUND color hex → RGB
	~hexBg = Substitute ( Lower ( colorBackground ) ; "#" ; "" ) ;
	
	~rBg = Let ( [ 
		~hex = Left ( ~hexBg ; 2 ) ;
		~hi = Position ( ~hexDigits ; Left ( ~hex ; 1 ) ; 1 ; 1 ) - 1 ;
		~lo = Position ( ~hexDigits ; Right ( ~hex ; 1 ) ; 1 ; 1 ) - 1
	] ; 
		~hi * 16 + ~lo
	) ;
	
	~gBg = Let ( [ 
		~hex = Middle ( ~hexBg ; 3 ; 2 ) ;
		~hi = Position ( ~hexDigits ; Left ( ~hex ; 1 ) ; 1 ; 1 ) - 1 ;
		~lo = Position ( ~hexDigits ; Right ( ~hex ; 1 ) ; 1 ; 1 ) - 1
	] ; 
		~hi * 16 + ~lo
	) ;
	
	~bBg = Let ( [ 
		~hex = Middle ( ~hexBg ; 5 ; 2 ) ;
		~hi = Position ( ~hexDigits ; Left ( ~hex ; 1 ) ; 1 ; 1 ) - 1 ;
		~lo = Position ( ~hexDigits ; Right ( ~hex ; 1 ) ; 1 ; 1 ) - 1
	] ; 
		~hi * 16 + ~lo
	) ;
	
	~rgbBg = RGB ( ~rBg ; ~gBg ; ~bBg ) ;
	
	// Render the bar
	~barTemplate = "████████████████████████████████████████████████████████████████████████████████████" ;
	~barDone = TextColor ( Left ( ~barTemplate ; ~blocksDone ) ; ~rgbBar ) ;
	~barLeft = TextColor ( Left ( ~barTemplate ; ~blocksRemaining ) ; ~rgbBg ) ;
	~fullBar = ~barDone & ~barLeft ;
	
	~result = If ( showPercent ; ~fullBar & " " & ~roundedPct & "%" ; ~fullBar ) ;
	~styledResult = TextFontSize ( ~result ; fontSize )
	
	] ;
	
	~styledResult

)

// This custom function generates a visual progress bar composed of block characters (█) based on a 
// given percentage. It accepts hex color codes for the foreground (completed portion) and background 
// (remaining portion), converts them to RGB, and styles the result using TextColor and TextFontSize. 
// The percentage is rounded up to the nearest 10% to determine block count, and an optional flag 
// controls whether to display the numeric percentage after the bar.

// GitHub : https://github.com/roxytheman/fmCustomFunctions/blob/c8d0d33654f105bfb7a4ca6488fa0785be78b8b0/functions/progressBarASCII.fmfn
// BD Link : https://www.briandunning.com/cf/2815
// Written by: jonni@me.com and Carlos Machado
// V 1.0

This custom function generates a visual progress bar composed of block characters (█) based on a given percentage. It accepts hex color codes for the foreground (completed portion) and background (remaining portion), converts them to RGB, and styles the result using TextColor and TextFontSize. The percentage is rounded up to the nearest 10% to determine block count, and an optional flag controls whether to display the numeric percentage after the bar.

Simple and effective. Suits for layout calculations.

Comments

Note: these functions are not guaranteed or supported by BrianDunning.com. Please contact the individual developer with any questions or problems.

progressBarASCII ( completePct ; totalBlocks ; colorBar ; colorBackground ; fontSize ; showPercent )

Comments

Support this website.

Support this website.