Status Bar

The Status Bar (GraphStatuBar) layer renders straight linear progress bars representing sensor metrics like CPU/GPU load or RAM usage.

---

1. UI Settings and Descriptions

When editing a Status Bar layer, the following options are available in the editor panel:

• FRONT COLOR (FrontColor): The color of the active progress indicator.
• TRACK COLOR (BackColor): The background track color behind the progress fill.
• GRADIENT COLOR (GradientColor): The color where the fill transition ends (if Use gradient is active).
• FRONT ALPHA: Opacity of the front fill color (values 0 to 255, where 255 is fully opaque).
• BACK ALPHA: Opacity of the background track color.
• Use gradient (useGradient): Enables color transition from Front Color to Gradient Color.
• Transparent background (transparentBG): When enabled, it makes the track color completely invisible, showing only the filled portion.
• CORNER RADIUS (radius): Sets the radius of corner curves. Higher values result in pill-shaped progress bars.
• DIRECTION: Sets the fill direction:
  • Left to Right
  • Right to Left
  • Top to Bottom
  • Bottom to Top
• Revert: Reverses the fill calculation direction.
• Fill back: Ensures the background track fills the entire container dimensions regardless of the active progress.
• Subsection: Divides the bar into segmented blocks rather than drawing it as a solid stripe.
  • BLOCK WIDTH / SPACING (blockWidthSpacing): The pixel width of each block and the gap spacing separating them (e.g., 6, 2).

---

2. Design Recipes

2.1. Cyberpunk Segmented Bar

To construct a sci-fi segmented bar:

• Enable Subsection.
• Set BLOCK WIDTH / SPACING to 8, 2.
• Enable Use gradient with FRONT COLOR set to #FF007F (Neon Pink) and GRADIENT COLOR to #7F00FF (Purple).
• Set CORNER RADIUS to 1 or 2 for a slightly rounded tech feel.
• Set BACK ALPHA to 50 so that the unfilled segments are visible as a dim background track.