Perspective - LED Display
Component Palette Icon:
Description​
The LED Display is a stylized numeric and/or alphanumeric label. It has two visual styles: 7-segment and 14-segment and supports nine common number format patterns. Use the value property to enter numeric and/or alphanumeric characters.
The LED Display component has two pre-configured variants:
- 14 Segment - Appearance is that of an LED with 14 light segments.
- 7 Segment - Appearance is that of an LED with 7 light segments.
Properties​
Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.
| Name | Description | Property Type |
|---|---|---|
| value | Value to be displayed. | value: numeric |
| segmentFormat | Style of each character/digit and the number of segments that compose the character. There are two different visual styles: 7 segment and 14 segment. Default is 14 segment. | value: string |
| numberFormat | Format of display for numeric characters, including commas, decimal places, percent, etc. There are nine options available from a dropdown list. Default is #,##0.00. | value: string |
| backgroundColor | Background color of the LED display. Default is #161616. See Color Selector. | color |
| diodeOnColor | Color of LED segments when switched on. Default is #1EC963. See Color Selector. | color |
| diodeOffColor | Color of LED segments when switched off. Generally different from display background color to preserve analog look. See Color Selector. | color |
| locale | Localization code that determines rules for commas, decimals, etc. Default is en-US. | value: string |
| style | Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |
Component Events​
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.
Example​
Example 1​
| Property | Value |
|---|---|
| props.value | 12.34 |
| props.segmentFormat | 7 segment |
| props.backgroundColor | #D5D5D5 |
| props.diodeOnColor | #0062FF |
| props.OffColor | #0062FF1A |
Example 2​
| Property | Value | Style Category |
|---|---|---|
| props.value | 52,345.9 | N/A |
| props.numberFormat | #,##0.00 | N/A |
| props.backgroundColor | #000000 | N/A |
| props.diodeOnColor | #00FF00 | N/A |
| prop.diodeOffColor | #000000 | N/A |
| props.style.borderStyle | groove | border |
| props.style.padding | 2px | margin and padding |