RoundedRectangle (Rounded Rectangle)

The RoundedRectangle is a graphical shape object that allows you to draw squares or rectangles with rounded corners on your screen.
This object possesses all the functions of the standard Rectangle object but uses the CornerRadius property to create more aesthetic and modern-looking panels or status indicators.

Common Use Cases

• Modern Status Indicators: Creating status lights (Red/Green/Gray) with rounded corners, where the FillColor property is bound to a Tag.
• Visual Backgrounds: Drawing a rounded background behind a group of Labels or Buttons to provide a modern “card view.”
• Custom Button Design: Creating custom buttons that look more stylish than the standard Button object by adding a Label and a Click event to a RoundedRectangle.

Properties Panel – Key Properties

The dynamic properties of this object are the same as those of the Rectangle and Ellipse objects.

Value

• Radius
  • The amount of corner rounding can be changed dynamically based on a tag’s value.

Events

• Mouse Up/Down
  • Function: Allows the operator to click on the rectangle shape.
  • Use Case: Triggers the Screen -> Open Screen function to open a pop-up or navigate to a relevant detail screen when the shape is clicked.

• Fill Color
  • The FillColor can be bound to different states of a tag using the + New (New Condition) button.

Advanced Panel – Key Properties

The Advanced panel defines the default (static) appearance of the shape.

• CornerRadius
  • The Most Important Feature. Determines the amount of rounding applied to the corners (radius in pixels).
• FillColor (Default Fill Color)
  • The default fill color of the shape.
• ForeColor (Default Line Color)
  • The default color of the outline.
• LineWidth
  • The pixel thickness of the outline.
• LineStyle
  • Determines the style of the outline (Solid, Dash, etc.).

Common Usage Examples

Example: Dynamic Radius Adjustment

1. Place a Rounded Rectangle object on the screen.
2. Go to the Properties -> Radius property. Bind the Radius value to a tag. This tag will determine the level of corner rounding.
3. Add an input control (e.g., a VScrollBar) to allow the operator to change this value during runtime, and bind its Value property to the same tag.
   • Minimum: 0
   • Maximum: 40
   • Logic: 0 → Completely sharp corners; 40 → Fully rounded appearance.

Result:

• As the operator changes the value via the input control, the tag updates.
• The Radius property of the Rounded Rectangle follows this tag.
• The corners of the shape instantly become rounder or sharper.