8. Card Design — Dynamic Text
In this step, the Dynamic Text widget's outer card appearance is configured. Because Dynamic Text displays live data, the Refresh Interval is critical.
Wizard route: /cartography/add/carddesign
Prerequisite
Steps 1, 2, 3, 4, and 7 of the Dynamic Text flow must be completed.
1. General Settings
| Field | Description | Unit |
|---|---|---|
| Chart Name | Title shown at the top of the card (e.g., "Today's Production") | text |
| Chart Refresh Interval | Data refetch period | seconds |
Refresh Interval Recommendation for Dynamic Text
| Scenario | Recommended Refresh |
|---|---|
| MQTT (live OEE/temperature) | 0 (instant stream) |
| Instantaneous sensor value (SQL) | 5 - 15 sec |
| Daily production count | 60 - 300 sec |
| Monthly revenue | 3600 sec |
| Shift target progress | 120 - 300 sec |
2. Card Display
| Field | Description | Type |
|---|---|---|
| Card Background Color | Background color | color |
| Card Title Position | Left / Center / Right | enum |
| Card Title Color | Title text color | color |
| Card Title Font Size | Title font size | px |
Prominent Background for KPI Cards
For important KPIs, choose a prominent card background (e.g., dark blue). Operators notice Dynamic Text cards first on the dashboard.
3. Info Card
## Daily Production
- Target: 1,500 units
- Today's target completion percentage is calculated automatically
> Data source: ERP production module
| Field | Description |
|---|---|
| Show Info Card | Whether the info card is visible |
| Info Card Content | Markdown editor |
| Expand Editor | Full-screen editor |
4. Spacing
| Field | Description | Unit |
|---|---|---|
| Padding | Card inner spacing | px |
5. Border
| Field | Description | Unit |
|---|---|---|
| Border Color | Card border color | color |
| Border Radius | Corner rounding radius | px |
| Border Width | Border thickness | px |
6. Shadow (if available)
| Field | Description |
|---|---|
| Shadow Blur | Shadow softness |
| Shadow Offset X / Y | Shadow direction offset |
| Shadow Opacity | Shadow transparency |
7. Confirmation
When you click the Next button at the top right, flow.hasCardDesign = true is marked.