Differences

This shows you the differences between two versions of the page.

--- mistudio:design_editor:more_layout:status_motion:progressbar [2026/09/18 13:37] – removed - external edit (Unknown date) 127.0.0.1
+++ mistudio:design_editor:more_layout:status_motion:progressbar [2026/09/18 15:40] (current) – tputman
@@ Line 1: / Line 1: @@
+===== 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]]