Ein bis sechs Messwerte werden als große Zahlen mit dem Bandnamen in Worten neben einem Zifferblatt, Balken, Tank- oder Batterieförmigen Element angezeigt, aus der Ferne gut sichtbar. Es füllt den Bildschirm, sitzt in der Mitte, wird als Quadrat oder eine Zeile in einer Ecke platziert und läuft als Band entlang einer Kante. Sie legen ein bis sechs Messwerte mit einer Skala, benannten Bändern und einem optionalen Ziel fest, wählen eine radiale, Halbkreis-, Tachometer-, lineare, Bullet-, Tank- oder Batterieform, entscheiden, ob die Bänder angezeigt werden, wählen, ob die Zahl oder das Band eine einzelne Messung anführt, und wählen, ob immer angezeigt oder nur bei Warnung, Gefahr oder fehlenden Messwerten.
Live-Karte
Kategorie: Betrieb. Schlagwörter: Diagramme und Messgeräte, Zahlen und Kennzahlen, Büros und Arbeitsplätze, Fabriken und Lager.
Layouts
Diese Kernkarte passt in jedes Layout: Vollbild, Mitte, breit, Ecke, Chip, Streifen oder jedes freie Rechteck.
Layouts: voll, Mitte, breit, Ecke, Chip, Streifen. Formulare: Querformat, Hochformat, Quadrat, Streifen.
Kartenlayouts, Designs und Veröffentlichung. Karten durchsuchen.
Daten und Datenschutz
Diese Karte verwendet ihre konfigurierten Eigenschaften und Live-Kartendaten.
Eigenschaften
Für Thema, Hintergrund, Akzent und Position siehe Gemeinsame Eigenschaften.
Legen Sie statische Eigenschaften in den params der Karte fest, wenn Sie sie erstellen. Ihr Datendokument enthält nur dynamische Eigenschaften. Verschachtelte Zeilen beschreiben den Inhalt ihrer übergeordneten Eigenschaft.
Statische Eigenschaften
| Name | Typ | Standard | Werte und Grenzwerte | Beschreibung |
|---|---|---|---|---|
title | string | "" | maxLength: 40 | Eine Überschrift über den Anzeigen. |
style | string | "radial" | "radial", "semicircle", "speedometer", "linear", "bullet", "tank", "battery" | Radial: ein 270-Grad-Zifferblatt. Halbkreis: ein halbes Zifferblatt. Tachometer: eine Nadel über farbigen Bändern. Linear: eine Leiste. Bullet: Bänder hinter einer Leiste mit Zielkerbe. Tank: eine flache vertikale Leiste in einem Rahmen. Batterie: eine flache Leiste in einem Rahmen mit einem Anschluss. |
showBands | boolean | true | Zeichnen Sie die qualitativen Bänder jeder Messung (ein Ring innerhalb eines Zifferblatts). | |
intervalSeconds | integer | 6 | Minimum: 3; Maximum: 60 | Wie lange die Ecke und der Chip jede Anzeige vor der nächsten zeigen. |
hero | string | "value" | "value", "band" | Was eine einzelne Messung anführt: der Wert (die Zahl, darunter der Name der Band) oder die Band (ihr Wort, darunter die Zahl). |
presence | string | "always" | "always", "attention" | immer: Die Karte wird immer angezeigt. Achtung: nur während eine Messung im Warn- oder Gefahrenbereich ist oder noch keinen Wert hat; dann rotieren Ecke und Chip durch diese Messungen. |
backgroundColor | String, Null | null | Muster: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Überschreibt den Kartenhintergrund und die Platte mit einer flachen, CSS-geordneten Farbe. #RRGGBBAA gibt die Deckkraft an. Hintergrund none hat Vorrang. |
textColor | String, Null | null | Muster: "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Überschreibt die Haupt- und Sekundärtextfarben. Akzent- und semantische Statusfarben behalten ihre Funktion. |
Dynamische Eigenschaften
| Name | Typ | Standard | Werte und Grenzwerte | Beschreibung |
|---|---|---|---|---|
metrics | array | [{"label":"Living room","value":21.5,"unit":"°C","min":10,"max":30,"decimals":1,"target":22,"bands":[{"to":18,"tone":"cool","label":"Cool"},{"to":24,"tone":"success","label":"Comfortable"},{"to":30,"tone":"warning","label":"Warm"}],"icon":"thermometer"},{"label":"Humidity","value":58,"unit":"%","min":0,"max":100,"bands":[{"to":30,"tone":"warning","label":"Dry"},{"to":60,"tone":"success","label":"Comfortable"},{"to":100,"tone":"cool","label":"Humid"}],"icon":"humidity"},{"label":"Air quality","value":780,"unit":"ppm","min":400,"max":2000,"bands":[{"to":800,"tone":"success","label":"Fresh"},{"to":1200,"tone":"warning","label":"Stuffy"},{"to":2000,"tone":"danger","label":"Poor"}],"icon":"air-vent"}] | minItems: 0; maxItems: 6 | Ein bis sechs Messwerte. Jeder hat eine Skala (min, max), qualitative Bänder (bis: obere Grenze des Bands; Ton: Erfolg, Warnung, Gefahr, Akzent, kühl, warm oder gedämpft; Beschriftung: Name) und ein optionales Ziel. |
metrics[].label | string | maxLength: 40; Pflichtfeld | ||
metrics[].value | Zahl, Null | Ohne Wert wird die Anzeige als Geist mit ihren Bereichen gezeichnet und zeigt an, dass sie wartet. | ||
metrics[].unit | string | "" | maxLength: 8 | |
metrics[].prefix | string | "" | maxLength: 4 | |
metrics[].min | number | 0 | ||
metrics[].max | number | 100 | ||
metrics[].decimals | integer | 0 | Minimum: 0; Maximum: 3 | |
metrics[].target | Zahl, Null | null | ||
metrics[].bands | array | [] | maxItems: 6 | |
metrics[].bands[].to | number | Erforderlich | ||
metrics[].bands[].tone | string | "accent" | "success", "warning", "danger", "accent", "cool", "warm", "muted" | |
metrics[].bands[].label | string | "" | maxLength: 16 | |
metrics[].charging | boolean | false | Eine Batterie zeigt einen Ladungsblitz an. | |
metrics[].icon | Null, Zeichenkette | null | null, "activity-01", "air-vent", "airplane-01", "alert-01", "alert-02", "american-football", "analytics-up", "apple", "arrow-down-01", "arrow-down-right-01", "arrow-up-01", "arrow-up-right-01", "award-01", "baseball", "basketball-01", "battery-full", "bell-ring", "bicycle", "birthday-cake", "bitcoin", "bus-01", "calendar-03", "calendar-04", "calendar-add-01", "calendar-check", "call-02", "camera-01", "cancel-circle", "car-01", "champion", "chart-decrease", "chart-increase", "checkmark-circle-02", "clock-01", "clock-02", "cloud", "cloud-angled-rain", "cloud-angled-zap", "cloud-big-rain", "cloud-drizzle", "cloud-fog", "cloud-hailstone", "cloud-snow", "coffee-01", "coffee-02", "contact-01", "container-truck-01", "cricket-bat", "crown", "delivery-truck-01", "dices", "discord", "discount-tag-01", "dollar-02", "door-closed-locked", "door-open", "drink", "droplet", "ethereum", "euro", "exchange-01", "facebook-01", "factory", "fast-wind", "favourite", "ferry-boat", "fire", "fire-02", "first-aid-kit", "flag-01", "flag-02", "flash", "flower-01", "football", "gauge", "gift", "git-branch", "globe-02", "google", "hand-prayer", "heart", "help-circle", "home-01", "hourglass", "humidity", "ice-hockey", "information-circle", "instagram", "lamp-01", "lantern", "leaf-01", "leaf-02", "lightbulb", "link-01", "linkedin-01", "litecoin", "location-01", "location-04", "mail-01", "medal-first-place", "medical-mask", "meeting-room", "megaphone-01", "message-01", "money-exchange-02", "moon-02", "moon-cloud", "moon-star", "music-note-01", "navigation-03", "new-releases", "new-twitter", "news", "news-01", "noodles", "package-delivered", "parking-area-square", "party", "party-popper", "pause-circle", "percent-circle", "pinterest", "pizza-01", "play-circle", "play-store", "podium", "pound", "pumpkin", "qr-code", "qr-code-01", "queue-01", "quote-down", "quote-up", "ranking", "restaurant-01", "rocket-01", "rss", "running-shoes", "sale-tag-01", "security-check", "shop-sign", "shopping-bag-01", "siren", "smart-phone-01", "snapchat", "snowflake", "sparkles", "spotify", "star", "star-half", "star-off", "stop-circle", "store-01", "sun-03", "sun-cloud-02", "sunrise", "sunset", "swimming", "tag-01", "target-02", "temperature", "tennis-ball", "thermometer", "thermometer-cold", "thermometer-warm", "threads", "ticket-01", "tiktok", "time-quarter-pass", "timer-01", "tornado-02", "train-01", "tram", "trophy", "tropical-storm", "tsunami", "user-02", "user-group", "user-love-01", "vegetarian-food", "volleyball", "volume-high", "vote", "walking", "warehouse", "waves", "whatsapp", "wheat-off", "wifi-01", "wifi-full-signal", "wifi-lock", "wrench-01", "yen", "youtube" | |
metrics[].previous | Zahl, Null | null | Die Messung vor der Änderung bei changedAt; die Nadel oder Füllung schwingt von dort zum aktuellen Wert. | |
metrics[].changedAt | String, Null | null | ISO-8601-Zeitpunkt, zu dem sich die Messung änderte. Innerhalb weniger Sekunden schwenkt die Anzeige von previous zum neuen Wert. | |
updatedAt | String, Null | null | ISO-8601-Zeit der Messwerte. |
Canvas-Beispiel
Speichern Sie die statischen Eigenschaften als params.json und erstellen Sie die Karte. Das Ergebnis enthält ihre crd_ ID.
{
"theme": "neomustard"
}
screenrig card create --type gauge --major 1 --file params.json
Fügen Sie diesen Eintrag den primitives einer Playlist-Seite hinzu, mit dieser ID anstelle der Beispiel-ID. Veröffentlichen Sie die Playlist und weisen Sie einen Bildschirm zu.
{
"id": "gauge",
"primitive": "card",
"card": "crd_01EXAMPLECARD000000000",
"layout": "full",
"content_fit": "fill"
}
Live-Daten schreiben
Schreiben Sie das Dokument nach dem Erstellen in die Karte und ersetzen Sie es dann, um den Bildschirm ohne erneute Veröffentlichung zu aktualisieren. Die Karte prüft jeden Schreibvorgang gegen ihre dynamischen Eigenschaften und lehnt ein Dokument ab, das sie nicht akzeptiert. Verwenden Sie dasselbe Projekt wie die Playlist.
Speichern Sie das Dokument als card-data.json. Die CLI liest das Dokument selbst, ohne Wrapper:
{
"metrics": [
{
"label": "Living room",
"value": 21.5,
"unit": "°C",
"min": 10,
"max": 30,
"decimals": 1,
"target": 22,
"bands": [
{
"to": 18,
"tone": "cool",
"label": "Cool"
},
{
"to": 24,
"tone": "success",
"label": "Comfortable"
},
{
"to": 30,
"tone": "warning",
"label": "Warm"
}
],
"icon": "thermometer"
},
{
"label": "Humidity",
"value": 58,
"unit": "%",
"min": 0,
"max": 100,
"bands": [
{
"to": 30,
"tone": "warning",
"label": "Dry"
},
{
"to": 60,
"tone": "success",
"label": "Comfortable"
},
{
"to": 100,
"tone": "cool",
"label": "Humid"
}
],
"icon": "humidity"
},
{
"label": "Air quality",
"value": 780,
"unit": "ppm",
"min": 400,
"max": 2000,
"bands": [
{
"to": 800,
"tone": "success",
"label": "Fresh"
},
{
"to": 1200,
"tone": "warning",
"label": "Stuffy"
},
{
"to": 2000,
"tone": "danger",
"label": "Poor"
}
],
"icon": "air-vent"
}
],
"updatedAt": null
}
screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json
Oder rufen Sie die API direkt auf. Die API verpackt dasselbe Dokument in ein document-Feld. Ein Agent-Token benennt bereits sein Projekt, daher wird kein Projekt-Header gesendet; wenn Sie ScreenRig-Project senden, muss es zum Token-Projekt passen. Stellen Sie Ihre API-Autorisierung über die Umgebung bereit; siehe API-Authentifizierung.
curl --request PUT "https://api.screenrig.ai/api/cards/crd_01EXAMPLECARD000000000/data" \
--header "Authorization: Bearer $SCREENRIG_TOKEN" \
--header "Content-Type: application/json" \
--data '{"document":{"metrics":[{"label":"Living room","value":21.5,"unit":"°C","min":10,"max":30,"decimals":1,"target":22,"bands":[{"to":18,"tone":"cool","label":"Cool"},{"to":24,"tone":"success","label":"Comfortable"},{"to":30,"tone":"warning","label":"Warm"}],"icon":"thermometer"},{"label":"Humidity","value":58,"unit":"%","min":0,"max":100,"bands":[{"to":30,"tone":"warning","label":"Dry"},{"to":60,"tone":"success","label":"Comfortable"},{"to":100,"tone":"cool","label":"Humid"}],"icon":"humidity"},{"label":"Air quality","value":780,"unit":"ppm","min":400,"max":2000,"bands":[{"to":800,"tone":"success","label":"Fresh"},{"to":1200,"tone":"warning","label":"Stuffy"},{"to":2000,"tone":"danger","label":"Poor"}],"icon":"air-vent"}],"updatedAt":null}}'