iOS Inspired Ring - Documentation (O11)

Stable version 1.0.0 (Compatible with OutSystems 11)

Uploaded

on 4 Apr (12 hours ago)

0.0

(0 ratings)

Documentation

1.0.0

The iOS Inspired Ring is a lightweight, zero-dependency data visualization tool. Unlike standard SVG or CSS-based charts, it utilizes the HTML5 Canvas API to ensure high performance and complex rendering capabilities, such as dynamic shadows and overlapping arcs.

Key Highlights:

Motion Engine: Custom "Quartic Ease-Out" animation for a natural, premium feel.
Dynamic Overlap: Smart shadow rendering when rings exceed 90% completion, creating a sense of 3D depth.
High-DPI Scaling: Automatically adjusts to the user's screen resolution (Retina/4K) to prevent blurriness.
Zero External Libs: No Chart.js or D3 needed. Pure JavaScript for maximum speed.
Overlay Ready: Built-in centering logic for labels, icons, or secondary metrics.

Input parameters

Parameter	Data Type	Default	Description
WidgetId	Text	(Required)	The unique identifier of the `RingWrapper`. Must pass `RingWrapper.Id`.
Size	Integer	150	The total diameter of the component in pixels (Width/Height).
RingThickness	Integer	12	The thickness of each ring stroke.
IsAnimated	Boolean	True	Toggle for the entry animation on load.
Ring1_Value	Decimal	0.0	Progress for the outer ring (range: `0.0` to `1.0`).
Ring1_Color	Text	"#FF004D"	Hexadecimal color string for the outer ring.
Ring2_Value	Decimal	0.0	Progress for the middle ring.
Ring2_Color	Text	"#A2FF00"	Hexadecimal color string for the middle ring.
Ring3_Value	Decimal	0.0	Progress for the inner ring.
Ring3_Color	Text	"#00E5FF"	Hexadecimal color string for the inner ring.

Usage Best Practices

Colors: Use HEX codes (e.g., #FF0000). Using plain text names (like "Red") may lead to inconsistent rendering in specific browsers.
Responsiveness: Wrap the block in a container with a percentage-based width if you need it to scale down, or use different Size values per device type (Desktop vs Mobile).
Contrast: The component looks best on dark backgrounds, using vibrant neon colors as defaults.