8. Card Design — Linear Gauge
In this step, the Linear Gauge widget's outer card appearance is configured.
Wizard route: /cartography/add/carddesign
1. General Settings
| Field |
Description |
Unit |
| Chart Name |
Title shown at the top of the card (e.g., "Tank-1 Fill Level") |
text |
| Chart Refresh Interval |
Data refetch period |
seconds |
Refresh Interval Recommendation for Linear Gauge
| Data Source |
Recommended Refresh |
| MQTT (live) |
0 |
| SQL — sensor |
5 - 15 sec |
| SQL — KPI |
60 - 300 sec |
| REST API |
60 - 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 |
3. Info Card
## Tank Fill Thresholds
- 🔴 0-30%: Critical (refill alert)
- 🟢 30-80%: Normal
- 🟡 80-100%: High (overflow alert)
| 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.
8. Next Step
→ 09 — Display Information