ProgressBar

Progress bar node for communicating the program is actively working on something, and needs time to process. The progress bar draws a styleable ProgressBarFill node inside, spanning a fraction of its content, usually starting from left. Text is drawn over the node to display current progress.

The progress bar will use text height for its own height, but it needs extra horizontal space to be functional. To make sure it displays, ensure its horizontal alignment is always set to "fill" — this is the default, if the layout is not changed.

Styling

The progressBar component is split into two nodes, ProgressBar and ProgressBarFill. When styling, the former defines the background, greyed out part of the node, and the latter defines the foreground, the fill that appears as progress is accumulated. Usually, the background for ProgressBar will have low saturation or be grayed out, and ProgressBarFill will be colorful.

Text currently uses the ProgressBar color, but it's possible it will blend the colors of both sides in the future.

Theme(
    rule!ProgressBar(
        backgroundColor = color("#eee"),
        textColor = color("#000"),
    ),
    rule!ProgressBarFill(
        backgroundColor = color("#17b117"),
    )
)

Text format

ProgressBar does not currently offer the possibility to change text format, but it can be accomplished by subclassing and overriding the buildText method, like so:

class MyProgressBar : ProgressBar {

    override string buildText() const {

        return format!"%s/%s"(value, maxValue);

    }

}

Importantly, should buildText return an empty string, the progress bar will disappear, since its size depends on the text itself. If text is not desired, one can set textColor to a transparent value like color("#0000"). Alternatively resizeImpl can also be overrided to change the sizing behavior.

@safe

class ProgressBar : Node {

int value;

int maxValue;

Text text;

ProgressBarFill fill;

this(int value, int maxValue);

this(int maxValue);

void resizeImpl(Vector2 space);

void drawImpl(Rectangle paddingBox, Rectangle contentBox);

string buildText();

}

Constructors

this this(int value, int maxValue)
this(int maxValue): Set the value and maxValue of the progressBar.

Members

Functions

buildText string buildText(): Get text that displays on top of the progress bar.
drawImpl void drawImpl(Rectangle paddingBox, Rectangle contentBox): Undocumented in source. Be warned that the author may not have intended to support it.
resizeImpl void resizeImpl(Vector2 space): Undocumented in source. Be warned that the author may not have intended to support it.

Variables

fill ProgressBarFill fill;: Node used as the filling for this progress bar.
maxValue int maxValue;: value, along with maxValue indicate the current progress, defined as the fraction of value over maxValue. If 0, the progress bar is empty. If equal to maxValue, the progress bar is full.
text Text text;: Text used by the node.
value int value;: value, along with maxValue indicate the current progress, defined as the fraction of value over maxValue. If 0, the progress bar is empty. If equal to maxValue, the progress bar is full.

Inherited Members

From Node

NodeAlign (from fluid.structs) enum NodeAlign via public import fluid.structs : NodeAlign, Layout;: Undocumented in source.
Layout (from fluid.structs) struct Layout via public import fluid.structs : NodeAlign, Layout;: Node parameter for setting the node layout.
Align (from fluid.structs) enum NodeAlign via public import fluid.structs : Align = NodeAlign;: Undocumented in source.
Extra class Extra: Undocumented in source.
tree LayoutTree* tree;: Tree data for the node. Note: requires at least one draw before this will work.
layout Layout layout;: Layout for this node.
tags TagList tags;: Tags assigned for this node.
breadcrumbs Breadcrumbs breadcrumbs;: Breadcrumbs assigned and applicable to this node. Loaded every resize and every draw.
toRemove bool toRemove;: If true, this node will be removed from the tree on the next draw.
ignoreMouse bool ignoreMouse;: If true, mouse focus will be disabled for this node, so mouse signals will "go through" to its parents, as if the node wasn't there. The node will still detect hover like normal.
isThemeExplicit bool isThemeExplicit;: True if the theme has been assigned explicitly by a direct assignment. If false, the node will instead inherit themes from the parent.
minSize auto minSize;: Minimum size of the node.
isHidden bool isHidden [@property getter]: Check if the node is hidden.
isHidden bool isHidden [@property setter]: Set the visibility
theme inout(Theme) theme(): Get the current theme.
theme Theme theme(Theme value): Set the theme.
inheritTheme void inheritTheme(Theme value): Nodes automatically inherit theme from their parent, and the root node implictly inherits the default theme. An explicitly-set theme will override any inherited themes recursively, stopping at nodes that also have themes set explicitly.
resetTheme void resetTheme(): Clear the currently assigned theme
style inout(Style) style(): Current style, used for sizing. Does not include any changes made by when clauses or callbacks.
opEquals bool opEquals(Object other): Undocumented in source. Be warned that the author may not have intended to support it.
opEquals bool opEquals(Node otherNode): Undocumented in source. Be warned that the author may not have intended to support it.
show This show(): Show the node.
hide This hide(): Hide the node.
disable This disable(): Disable this node.
enable This enable(): Enable this node.
backend inout(FluidBackend) backend(): Undocumented in source. Be warned that the author may not have intended to support it.
backend FluidBackend backend(FluidBackend backend): Undocumented in source. Be warned that the author may not have intended to support it.
io alias io = backend: Undocumented in source.
toggleShow void toggleShow(): Toggle the node's visibility.
remove void remove(): Remove this node from the tree before the next draw.
getMinSize Vector2 getMinSize(): Get the minimum size of this node.
isHovered bool isHovered [@property getter]: Check if this node is hovered.
isDisabled inout(bool) isDisabled(): Check if this node is disabled.
isDisabledInherited bool isDisabledInherited(): Checks if the node is disabled, either by self, or by any of its ancestors. Updated when drawn.
queueAction void queueAction(TreeAction action): Queue an action to perform within this node's branch.
resizePending bool resizePending(): True if this node is pending a resize.
updateSize void updateSize(): Recalculate the window size before next draw.
draw void draw(): Draw this node as a root node.
focusPreviousOrNext void focusPreviousOrNext(FluidInputAction actionType): Switch to the previous or next focused item
focusInDirection void focusInDirection(FluidInputAction action): Switch focus towards a specified direction.
draw void draw(Rectangle space): Draw this node at the specified location from within of another (parent) node.
resize void resize(LayoutTree* tree, Theme theme, Vector2 space): Recalculate the minimum node size and update the minSize property.
resizeImpl void resizeImpl(Vector2 space): Ditto
drawImpl void drawImpl(Rectangle paddingBox, Rectangle contentBox): Draw this node.
hoveredImpl bool hoveredImpl(Rectangle rect, Vector2 mousePosition): Check if the node is hovered.
ImplHoveredRect alias ImplHoveredRect = implHoveredRect: Undocumented in source.
implHoveredRect deprecated mixintemplate implHoveredRect(): Undocumented in source.
focusBoxImpl Rectangle focusBoxImpl(Rectangle inner): The focus box defines the *focused* part of the node. This is relevant in nodes which may have a selectable subset, such as a dropdown box, which may be more important at present moment (selected). Scrolling actions like scrollIntoView will use the focus box to make sure the selected area is presented to the user.
pickStyle Style pickStyle(): Get the current style.
reloadStyles void reloadStyles(): Reload style from the current theme.
toString string toString(): Undocumented in source. Be warned that the author may not have intended to support it.

Examples

const steps = 24;

// Create a progress bar.
auto bar = progressBar(steps);

// Keep the user updated on the progress.
foreach (i; 0 .. steps) {

    bar.value = i;
    bar.updateSize();

}