Une barre pleine largeur, collée au bord supérieur de l’écran, regroupe les petits éléments dont un écran a besoin. Les emplacements gauche et droite affichent chacun un élément : mots, étiquette, horloge, météo actuelle, icône, date, point de statut, votre logo, compte à rebours, nombre, page en cours ou alerte discrète qui devient chaude ou rouge. Le centre affiche un message qui reste fixe, défile s’il est long ou tourne à travers jusqu’à huit pages. Vous définissez les éléments et le message et les modifiez pendant que la barre joue ; elle garde sa place sur chaque écran.
Carte en direct
Catégorie : Messages. Étiquettes : Halls d’accueil et réception, Bureaux et lieux de travail, Magasins.
Mises en page
Cette carte barre est placée en en-tête : une barre pleine largeur, de 80 de hauteur, collée au bord supérieur. Elle n’utilise aucune disposition ni ancrage.
Mises en page : en-tête. Formes : bande.
Mises en page, thèmes et publication des cartes. Parcourir les cartes.
Données et confidentialité
Flux : screenrig.weather/v1.
Les documents du flux portent une attribution de source. Le Player fournit le flux à la carte.
Attribution météo : données météo par Weatherbit, comme indiqué dans le document du flux.
Propriétés
Pour le thème, l’arrière-plan et l’accent, voir Propriétés communes. Une carte barre n’a pas de propriété layout ou anchor : elle est toujours placée en en-tête.
Définissez les propriétés statiques dans les params de la carte lorsque vous la créez. Son document de données ne contient que des propriétés dynamiques. Les lignes imbriquées décrivent le contenu de leur propriété parente.
Propriétés statiques
| Nom | Type | Par défaut | Valeurs et limites | Description |
|---|---|---|---|---|
location | objet, nul | null | additionalProperties : false | Où l’élément météo lit ses conditions ; sans cela il n’y a pas de données météo et l’élément reste vide. |
location.name | string | maxLength : 40 ; Obligatoire | ||
location.latitude | number | minimum : -90 ; maximum : 90 ; Obligatoire | ||
location.longitude | number | minimum : -180 ; maximum : 180 ; Obligatoire | ||
timeZone | chaîne, nul | null | maxLength : 64 | Zone IANA des éléments horloge, date et compte à rebours ; null utilise la zone de l’écran. |
backgroundColor | chaîne, nul | null | motif : "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Remplace le fond et la plaque de la carte par une couleur plate ordonnée en CSS. #RRGGBBAA fournit l’opacité. background none a la priorité. |
textColor | chaîne, nul | null | motif : "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Remplace les couleurs du texte principal et secondaire. Les couleurs d’accentuation et de statut sémantique conservent leur rôle. |
Propriétés dynamiques
| Nom | Type | Par défaut | Valeurs et limites | Description |
|---|---|---|---|---|
left | objet, nul | null | additionalProperties : false | L’emplacement de gauche, large de 250 px (240 x 70 à l’intérieur), contenu à son début, à 24 px du bord de l’écran. null le laisse vide ; il garde sa place. Ce que kind lit : texte et étiquette text ; horloge hourCycle et timeZone ; météo unit (du flux météo) ; icône icon ; date dateStyle et timeZone ; statut text, tone et pulse ; logo media ; compte à rebours at et label ; nombre label et value ; page page, of et style ; alerte active, severity et text. Le hourCycle d’une horloge, le unit d’un élément météo et l’ordre d’une date suivent la locale du Player sauf si l’élément les définit. |
left.kind | string | "text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert" ; Obligatoire | Ce que la plage affiche. | |
left.text | string | "" | maxLength : 60 | Les mots d’un texte, d’une étiquette, d’un statut ou d’une alerte. |
left.size | string | "small" | "small", "medium", "large" | Taille de police des éléments texte, étiquette, statut et alerte (24, 32 et 44 px à 1080p ; un petit texte prend deux lignes, les autres une), d’une date (32, 44 et 56 px, une ligne) et des chiffres d’un élément horloge, météo, compte à rebours, page et icône. |
left.color | chaîne, nul | null | motif : "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Couleur du texte ou de l’icône #RRGGBB ou #RRGGBBAA ; null utilise la couleur du texte du thème. |
left.fill | chaîne, nul | null | motif : "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Un rectangle arrondi d’étiquette : #RRGGBB ou #RRGGBBAA ; null est la couleur du texte à moitié intensité (un contour dans les thèmes Clairs). |
left.icon | nul, chaîne | 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" | L’icône d’un élément icône. |
left.tone | string | "cool" | motif : "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$" | La couleur d’un point de statut : une clé de palette (succès est ok ou ouvert, chaud alerte ou bientôt, danger alarme ou fermé, froid information) ou #RRGGBB. |
left.pulse | boolean | false | Un point de statut qui pulse une fois par seconde. | |
left.hourCycle | string | "auto" | "auto", "12", "24" | Les heures d’une horloge : auto suit la locale du Player (14 h 05 là où il garde habituellement une horloge de 12 heures, sinon 14 h 05) ; 12 est 14 h 05 et 24 est 14 h 05 dans toutes les locales. |
left.timeZone | chaîne, nul | null | maxLength : 64 | Zone IANA d’une horloge, date ou compte à rebours ; null prend la zone de la barre, sinon celle de l’écran. |
left.dateStyle | string | "short" | "short", "long" | Un élément de date : court est Mer 21 oct et long mercredi 21 octobre ; dans la locale US le mois vient en premier (Wed Oct 21, Wednesday, October 21). Les noms de jours et de mois sont en anglais ; une date longue qui ne tient pas passe à la forme courte. |
left.at | chaîne, nul | null | maxLength : 40 | Instant ISO 8601 vers lequel un compte à rebours court ; sans décalage, c’est l’heure murale dans la zone de l’élément. |
left.label | string | "" | maxLength : 24 | L’étiquette d’un nombre au-dessus de sa valeur ; l’étiquette d’un compte à rebours au-dessus de ses chiffres pendant qu’il compte (omise si elle ne tient pas en entier) et les mots qu’il affiche une fois son moment arrivé. |
left.value | string | "" | maxLength : 16 | La valeur d’un nombre, formatée comme vous souhaitez la lire (1 284 ou 98 %). |
left.media | string | "" | maxLength : 200 | Une image d’un élément de logo : une référence média de projet (media:<id>), ajustée entièrement dans 240 x 70. |
left.page | integer | 1 | minimum : 1 ; maximum : 999 | La page courante d’un élément de page, à partir de 1. |
left.of | integer | 1 | minimum : 1 ; maximum : 999 | Le nombre de pages d’un élément de page. |
left.style | string | "numbers" | "dots", "numbers" | Un élément de page sous forme 3 / 8 ou de points (les points restent à douze pages). |
left.active | boolean | false | Un élément d’alerte : faux est une coche discrète, vrai prend la couleur de gravité et ses mots. | |
left.severity | string | "warm" | "warm", "danger" | La couleur d’un élément d’alerte actif : chaude pour la surveillance, danger pour l’alarme. |
left.unit | string | "auto" | "auto", "c", "f" | L’échelle de température d’un élément météo : auto est Fahrenheit où la région locale du Player l’utilise (US PR GU VI AS MP BS BZ KY PW LR) et Celsius partout ailleurs ; c et f forcent Celsius ou Fahrenheit dans toutes les régions. |
right | objet, nul | null | additionalProperties : false | L’emplacement de droite, large de 250 px (240 x 70 à l’intérieur), contenu à sa fin, à 24 px du bord de l’écran. Les mêmes éléments que l’emplacement de gauche, avec les mêmes règles de locale. |
right.kind | string | "text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert" ; Obligatoire | Ce que la plage affiche. | |
right.text | string | "" | maxLength : 60 | Les mots d’un texte, d’une étiquette, d’un statut ou d’une alerte. |
right.size | string | "small" | "small", "medium", "large" | Taille de police des éléments texte, étiquette, statut et alerte (24, 32 et 44 px à 1080p ; un petit texte prend deux lignes, les autres une), d’une date (32, 44 et 56 px, une ligne) et des chiffres d’un élément horloge, météo, compte à rebours, page et icône. |
right.color | chaîne, nul | null | motif : "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Couleur du texte ou de l’icône #RRGGBB ou #RRGGBBAA ; null utilise la couleur du texte du thème. |
right.fill | chaîne, nul | null | motif : "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Un rectangle arrondi d’étiquette : #RRGGBB ou #RRGGBBAA ; null est la couleur du texte à moitié intensité (un contour dans les thèmes Clairs). |
right.icon | nul, chaîne | 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" | L’icône d’un élément icône. |
right.tone | string | "cool" | motif : "^(success|warm|danger|cool|accent|muted|#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?)$" | La couleur d’un point de statut : une clé de palette (succès est ok ou ouvert, chaud alerte ou bientôt, danger alarme ou fermé, froid information) ou #RRGGBB. |
right.pulse | boolean | false | Un point de statut qui pulse une fois par seconde. | |
right.hourCycle | string | "auto" | "auto", "12", "24" | Les heures d’une horloge : auto suit la locale du Player (14 h 05 là où il garde habituellement une horloge de 12 heures, sinon 14 h 05) ; 12 est 14 h 05 et 24 est 14 h 05 dans toutes les locales. |
right.timeZone | chaîne, nul | null | maxLength : 64 | Zone IANA d’une horloge, date ou compte à rebours ; null prend la zone de la barre, sinon celle de l’écran. |
right.dateStyle | string | "short" | "short", "long" | Un élément de date : court est Mer 21 oct et long mercredi 21 octobre ; dans la locale US le mois vient en premier (Wed Oct 21, Wednesday, October 21). Les noms de jours et de mois sont en anglais ; une date longue qui ne tient pas passe à la forme courte. |
right.at | chaîne, nul | null | maxLength : 40 | Instant ISO 8601 vers lequel un compte à rebours court ; sans décalage, c’est l’heure murale dans la zone de l’élément. |
right.label | string | "" | maxLength : 24 | L’étiquette d’un nombre au-dessus de sa valeur ; l’étiquette d’un compte à rebours au-dessus de ses chiffres pendant qu’il compte (omise si elle ne tient pas en entier) et les mots qu’il affiche une fois son moment arrivé. |
right.value | string | "" | maxLength : 16 | La valeur d’un nombre, formatée comme vous souhaitez la lire (1 284 ou 98 %). |
right.media | string | "" | maxLength : 200 | Une image d’un élément de logo : une référence média de projet (media:<id>), ajustée entièrement dans 240 x 70. |
right.page | integer | 1 | minimum : 1 ; maximum : 999 | La page courante d’un élément de page, à partir de 1. |
right.of | integer | 1 | minimum : 1 ; maximum : 999 | Le nombre de pages d’un élément de page. |
right.style | string | "numbers" | "dots", "numbers" | Un élément de page sous forme 3 / 8 ou de points (les points restent à douze pages). |
right.active | boolean | false | Un élément d’alerte : faux est une coche discrète, vrai prend la couleur de gravité et ses mots. | |
right.severity | string | "warm" | "warm", "danger" | La couleur d’un élément d’alerte actif : chaude pour la surveillance, danger pour l’alarme. |
right.unit | string | "auto" | "auto", "c", "f" | L’échelle de température d’un élément météo : auto est Fahrenheit où la région locale du Player l’utilise (US PR GU VI AS MP BS BZ KY PW LR) et Celsius partout ailleurs ; c et f forcent Celsius ou Fahrenheit dans toutes les régions. |
middle | objet, nul | null | additionalProperties : false | Le message entre les créneaux. Sans texte (ou pages), le milieu reste vide et garde sa place ; il est caché s’il ferait moins de 100 px de large. |
middle.text | string | "" | maxLength : 160 | Les mots d’un message statique ou déroulant. |
middle.size | string | "small" | "small", "medium", "large" | 28 px avec jusqu’à deux lignes, 38 px ou 52 px sur une ligne, à 1080p. |
middle.align | string | "center" | "start", "center", "end" | Où les mots se placent au centre. |
middle.color | chaîne, nul | null | motif : "^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$" | Couleur du texte #RRGGBB ou #RRGGBBAA ; null utilise la couleur du texte du thème. |
middle.mode | string | "static" | "static", "crawl", "pages" | static affiche un message qui ne tient pas en entier, phrase complète après phrase complète ; crawl le fait défiler au milieu tant que le mouvement est actif (il reste immobile s’il tient en entier, et affiche des phrases complètes en image fixe ou avec le mouvement réduit) ; pages affiche les chaînes de pages l’une après l’autre. |
middle.pages | array | [] | maxItems : 8 | Les messages du mode pages, dans l’ordre. |
middle.pageSeconds | integer | 8 | minimum : 3 ; maximum : 60 | Secondes pendant lesquelles chaque page reste affichée ; la page affichée suit l’horloge, donc chaque écran montre la même. |
Exemple de canevas
Enregistrez les propriétés statiques comme params.json et créez la carte. Le résultat contient son identifiant crd_.
{
"theme": "neomustard",
"location": {
"name": "Vancouver",
"latitude": 49.25,
"longitude": -123.0
}
}
screenrig card create --type header --major 1 --file params.json
Ajoutez cet élément aux primitives d’une page de liste de lecture, en remplaçant l’identifiant de l’exemple par celui de votre carte. Publiez la liste de lecture et assignez un écran.
{
"id": "header",
"primitive": "card",
"card": "crd_01EXAMPLECARD000000000",
"layout": "header",
"content_fit": "fill"
}
Écrire des données en direct
Écrivez le document dans la carte après l’avoir créée, puis remplacez-le pour mettre à jour l’écran sans republier. La carte vérifie chaque écriture par rapport à ses propriétés dynamiques et refuse un document qu’elle rejette. Utilisez le même projet que la liste de lecture.
Enregistrez le document sous card-data.json. La CLI lit le document lui-même, sans enveloppe :
{
"left": null,
"right": null,
"middle": null
}
screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json
Ou appelez directement l’API. L’API enveloppe le même document dans un champ document. Un jeton agent nomme déjà son projet, donc aucun en-tête de projet n’est envoyé ; si vous envoyez ScreenRig-Project, il doit correspondre au projet du jeton. Fournissez votre autorisation API via l’environnement ; voir Authentification API.
curl --request PUT "https://api.screenrig.ai/api/cards/crd_01EXAMPLECARD000000000/data" \
--header "Authorization: Bearer $SCREENRIG_TOKEN" \
--header "Content-Type: application/json" \
--data '{"document":{"left":null,"right":null,"middle":null}}'