Perspective - LED Display
Component Palette Icon:
Description​
The LED Display is a stylized numeric and/or alphanumeric label. You can choose between a 7 segment and 14 segment visualization style, and also between nine common number format patterns.
The LED Display component has two pre-configured variants for the 7 Segment and 14 Segment styles.
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 Scripts and Events​
Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:
- Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.
- Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.
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 |