===== ProgressBar =====

com.ergotech.vib.graphics.swing.SwingProgressBar

==== Image Examples ====

| {{:mistudio:graphics:more_layout:status_motion:pasted:20260701-092311.png?40|ProgressBar in the graphics palette}} | {{:mistudio:graphics:more_layout:status_motion:pasted:20260701-092405.png?200|ProgressBar graphic example}} |
| //ProgressBar in the graphics palette.// | //ProgressBar graphic example.// |

==== Overview ====

The ProgressBar graphic is a More Layout status display graphic used to show a numeric value as progress across a scale.

ProgressBar can be oriented horizontally or vertically. It uses a configured **Low Value** and **High Value** to scale the displayed progress.

ProgressBar can also show the current value as a percentage when **Show Percent** is enabled.

==== Common Uses ====

  * Displaying progress
  * Showing completion percentage
  * Displaying a numeric value on a low-to-high scale
  * Showing process status
  * Creating horizontal or vertical progress displays
  * Showing values such as level, completion, loading, or progress state

==== Input Behavior ====

ProgressBar accepts input through **updateDisplayedValue**.

The input can come from a data source, Constant, or another logic component.

Numeric input updates the displayed progress position.

The displayed value is scaled between the configured **Low Value** and **High Value**.

==== Output Behavior ====

ProgressBar includes **PrimaryOutPort** on its logic block.

The port can provide the current ProgressBar value to another logic component when needed.

ProgressBar is primarily used as a display graphic rather than as a user input control.

==== ProgressBar-Specific Behavior ====

ProgressBar displays numeric progress across a configured range.

ProgressBar-specific settings include:

  * **Name** Sets the name of the ProgressBar graphic.
  * **Font** Controls the font used by the ProgressBar.
  * **Text Color** Sets the text color.
  * **High Value** Sets the top value used for scaling.
  * **Low Value** Sets the bottom value used for scaling.
  * **Orientation** Controls whether the ProgressBar is horizontal or vertical.
  * **Show Percent** Controls whether the value is displayed as a percentage.
  * **Background Color** Sets the ProgressBar background color.
  * **Click Action** Defines a click action.
  * **Visible** Controls whether the ProgressBar is shown.

==== Logic Ports ====

In the Logic Editor, ProgressBar includes these default ports:

  * **PrimaryOutPort**
  * **updateDisplayedValue**

The **PrimaryOutPort** provides the current ProgressBar value.

The **updateDisplayedValue** port updates the displayed progress value from a data source, Constant, or another logic component.

==== Scale Behavior ====

ProgressBar uses **Low Value** and **High Value** to scale the displayed progress.

For example, with **Low Value** set to `0.0` and **High Value** set to `100.0`, an input value of `50` displays the progress halfway across the bar.

==== Notes ====

Use ProgressBar when a numeric value should be shown as progress or completion.

Use **Show Percent** when the displayed value should appear as a percentage.

Use **Orientation** to switch between horizontal and vertical display.

For a slider-style control that allows the user to adjust a value, see [[mistudio:design_editor:more_layout:buttons_inputs:slider|Slider]].

For general graphic behavior, see [[mistudio:design_editor:active_graphic|Active Graphic]].

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:more_layout:start|More Layout]]
  * [[mistudio:design_editor:more_layout:status_motion:start|Status, Motion, and Process Graphics]]
  * [[mistudio:design_editor:more_layout:buttons_inputs:slider|Slider]]
  * [[mistudio:design_editor:basic_layout:sliders:start|Sliders and Knobs]]
  * [[mistudio:design_editor:active_graphic|Active Graphic]]