Set up a progress bar divided into multiple segments, each with customizable height and margin, and set the color & image for the progress.
Functions Version 1.0
- InitializeSegmentedProgressBar
- Description: Initializes a segmented progress bar.
- Parameters:
id(int): Unique identifier for the segmented progress bar.arrangement(HorizontalArrangement): Container to which the progress bar will be added.segments(int): Number of segments in the progress bar.progressColor(String): Color of the progress in hexadecimal format (e.g., "#FF0000").
- SetSegmentHeight
- Description: Changes the height of the segments in the progress bar.
- Parameters:
id(int): Unique identifier for the segmented progress bar.segmentHeight(int): Height of the segments in pixels.
- SetSegmentMargin
- Description: Changes the margin between segments in the progress bar.
- Parameters:
id(int): Unique identifier for the segmented progress bar.segmentMargin(int): Margin between segments in pixels.
- SetTotalProgress
- Description: Sets the total progress of the segmented progress bar.
- Parameters:
id(int): Unique identifier for the segmented progress bar.progress(int): Total progress in percentage (0 to 100).
- GetTotalProgress
- Description: Gets the total progress of the segmented progress bar.
- Parameters:
id(int): Unique identifier for the segmented progress bar.
- Return Value: Total progress in percentage (0 to 100) or -1 if the ID is not found.
- ResetTotalProgress
- Description: Resets the total progress to 0 in the segmented progress bar.
- Parameters:
id(int): Unique identifier for the segmented progress bar.
Event
- TotalProgressComplete
- Description: Triggered when the total progress of the segmented progress bar reaches 100%.
- Parameter:
id(int): Unique identifier for the segmented progress bar that has completed the progress.
screenshots
Maybe it can work for audio, but you need an audio sensor.
Example video:
Update, version 1.1
Now, when calling the Initialize Segmented Progress Bar function, you can pass a list of colors in hexadecimal format and the segmented progress bar will be initialized with these colors.
You can also put a gradient, but it only works well if it's a single segment, true to apply the gradient.
I've added functionality to set segment corners as straight or rounded. The shape of the segments is set by the shapeType parameter in the InitializeSegmentedProgressBar function. If shapeType is "rectShape", the corners will be straight; otherwise, they will be rounded.
I have added the SetSegmentColor function to change the color of a list of segments in the progress bar. This function takes the id of the progress bar, a list of the indexes of the segments you want to change, and the new color in hexadecimal format.
screenshots
Update, version 1.2
You can set radius to the bar segments
(Does not apply to the 1-segment bar).
Set an image as progress in the selected index.
You can select the image from gallery or the best option, upload it to the app assets and select it from there.
screenshots
Update Version 1.3
The SetSegmentColor function now accepts a list of colors and applies a gradient if useGradient is set to true.
screenshots
Extension:
Version 1.0
JoeDevProgressBar.aix (10.0 KB)
Version 1.1
JoeDevProgressBar.aix (11.7 KB)
Version 1.2
JoeDevProgressBar.aix (13.8 KB)
Version 1.3
JoeDevProgressBar.aix (14.2 KB)
Thanks.
