progressBarSingle ( width ; height ; radius ; colorBackground ; colorFilled ; pctFilled )

Generates a horizontal progress bar based on a single percentage value, using two custom colours to indicate completed and remaining progress.

Be the first to rate this function Log in to vote

Jonni™ - Show more from this author

Sample input:

progressBarSingle ( 400 ; 16 ; 5 ; "#FFFFFF" ; "#CDCDCD" ; 70 )

Sample output:

SVG for a webviewer depicting a single element progress bar

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

// PROGRESS BAR SINGLE

// Generates a horizontal progress bar based on a single percentage 
// value, using two custom colours to indicate completed and remaining progress.

// Function Name : progressBarSingle
// Parameters : width ; height ; radius ; colorBackground ; colorFilled ; pctFilled
// Use example : progressBarSingle ( 400 ; 16 ; 5 ; "#FFFFFF" ; "#CDCDCD" ; 70 )

Let ( [

		// Base Values
		~colorBackground = colorBackground ;
		~colorFilled = colorFilled ;
		~width = width ;
		~height = height ;
		~radius = radius ; 
		~pctFilled = pctFilled ;

		// Progress ~width
		~filledWidth = Max ( 0 ; Min ( ~width ; Round ( ~width * ~pctFilled / 100 ; 0 ) ) ) ;

		// Define the SVG string
		~svg = 
		"<?xml version='1.0' encoding='UTF-8'?>" & 
		"<svg xmlns='http://www.w3.org/2000/svg' ~width='" & ~width & "' ~height='" & ~height & "'>" &
		
		// Remaining background bar
		"<rect x='0' y='0' ~width='" & ~width & "' ~height='" & ~height & "' rx='" & ~radius & "' ry='" & ~radius & "' fill='" & ~colorFilled & "' />" &
		
		// Completed progress overlay ( with left-side rounded corners only if partial )

		If ( 

			~filledWidth > 0 ; 

			"<clipPath id='clip'>" &
			"<rect x='0' y='0' ~width='" & ~filledWidth & "' ~height='" & ~height & "' rx='" & ~radius & "' ry='" & ~radius & "' />" &
			"</clipPath>" &
			"<rect x='0' y='0' ~width='" & ~filledWidth & "' ~height='" & ~height & "' fill='" & ~colorFilled & "' clip-path='url(#clip)' />" 

			;

			""

		) &
		
		"</svg>" ;
		
		// Base64 encode with SVG data URL prefix
		~encodedSVG = "data:image/svg+xml;base64," & Base64Encode ( ~svg )

	]; 

		~encodedSVG
)

// This function produces a horizontal SVG-based progress bar that visually represents 
// a percentage complete value between 0 and 100. The bar is rendered with two colours: 
// one for the completed portion and another for the remaining segment. Rounded corners are applied, 
// and the bar scales responsively to the size of the layout object if configured accordingly. 

// The output is Base64-encoded and intended for use in web viewers or for conversion into a PNG graphic.

// GitHub : https://github.com/roxytheman/fmCustomFunctions/blob/c84842779eba9a9088a2e5a9beae4079af7e6b7a/functions/progressBarSingle.fmfn
// BD Link : https://www.briandunning.com/cf/2800
// Written by: jonni@me.com
// V 1.0

This function produces a horizontal SVG-based progress bar that visually represents a percentage complete value between 0 and 100. The bar is rendered with two colours: one for the completed portion and another for the remaining segment. Rounded corners are applied, and the bar scales responsively to the size of the layout object if configured accordingly.

The output is Base64-encoded and intended for use in web viewers or for conversion into a PNG graphic.

Comments

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

progressBarSingle ( width ; height ; radius ; colorBackground ; colorFilled ; pctFilled )

Comments

Support this website.

Support this website.