Carte d’en-tête

Une barre le long du bord supérieur de l’écran : un emplacement à gauche et un à droite, et un message qui reste fixe, défile ou tourne à travers les pages.

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

Cette carte est dessinée dans votre navigateur par le même code que les lecteurs, avec des données d’exemple.

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

NomTypePar défautValeurs et limitesDescription
locationobjet, nulnulladditionalProperties : falseOù 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.namestringmaxLength : 40 ; Obligatoire
location.latitudenumberminimum : -90 ; maximum : 90 ; Obligatoire
location.longitudenumberminimum : -180 ; maximum : 180 ; Obligatoire
timeZonechaîne, nulnullmaxLength : 64Zone IANA des éléments horloge, date et compte à rebours ; null utilise la zone de l’écran.
backgroundColorchaîne, nulnullmotif : "^#[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é.
textColorchaîne, nulnullmotif : "^#[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

NomTypePar défautValeurs et limitesDescription
leftobjet, nulnulladditionalProperties : falseL’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.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert" ; ObligatoireCe que la plage affiche.
left.textstring""maxLength : 60Les mots d’un texte, d’une étiquette, d’un statut ou d’une alerte.
left.sizestring"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.colorchaîne, nulnullmotif : "^#[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.fillchaîne, nulnullmotif : "^#[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.iconnul, chaînenullnull, "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.tonestring"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.pulsebooleanfalseUn point de statut qui pulse une fois par seconde.
left.hourCyclestring"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.timeZonechaîne, nulnullmaxLength : 64Zone IANA d’une horloge, date ou compte à rebours ; null prend la zone de la barre, sinon celle de l’écran.
left.dateStylestring"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.atchaîne, nulnullmaxLength : 40Instant ISO 8601 vers lequel un compte à rebours court ; sans décalage, c’est l’heure murale dans la zone de l’élément.
left.labelstring""maxLength : 24L’é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.valuestring""maxLength : 16La valeur d’un nombre, formatée comme vous souhaitez la lire (1 284 ou 98 %).
left.mediastring""maxLength : 200Une 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.pageinteger1minimum : 1 ; maximum : 999La page courante d’un élément de page, à partir de 1.
left.ofinteger1minimum : 1 ; maximum : 999Le nombre de pages d’un élément de page.
left.stylestring"numbers""dots", "numbers"Un élément de page sous forme 3 / 8 ou de points (les points restent à douze pages).
left.activebooleanfalseUn élément d’alerte : faux est une coche discrète, vrai prend la couleur de gravité et ses mots.
left.severitystring"warm""warm", "danger"La couleur d’un élément d’alerte actif : chaude pour la surveillance, danger pour l’alarme.
left.unitstring"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.
rightobjet, nulnulladditionalProperties : falseL’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.kindstring"text", "tag", "clock", "weather", "icon", "date", "status", "logo", "countdown", "number", "page", "alert" ; ObligatoireCe que la plage affiche.
right.textstring""maxLength : 60Les mots d’un texte, d’une étiquette, d’un statut ou d’une alerte.
right.sizestring"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.colorchaîne, nulnullmotif : "^#[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.fillchaîne, nulnullmotif : "^#[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.iconnul, chaînenullnull, "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.tonestring"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.pulsebooleanfalseUn point de statut qui pulse une fois par seconde.
right.hourCyclestring"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.timeZonechaîne, nulnullmaxLength : 64Zone IANA d’une horloge, date ou compte à rebours ; null prend la zone de la barre, sinon celle de l’écran.
right.dateStylestring"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.atchaîne, nulnullmaxLength : 40Instant ISO 8601 vers lequel un compte à rebours court ; sans décalage, c’est l’heure murale dans la zone de l’élément.
right.labelstring""maxLength : 24L’é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.valuestring""maxLength : 16La valeur d’un nombre, formatée comme vous souhaitez la lire (1 284 ou 98 %).
right.mediastring""maxLength : 200Une 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.pageinteger1minimum : 1 ; maximum : 999La page courante d’un élément de page, à partir de 1.
right.ofinteger1minimum : 1 ; maximum : 999Le nombre de pages d’un élément de page.
right.stylestring"numbers""dots", "numbers"Un élément de page sous forme 3 / 8 ou de points (les points restent à douze pages).
right.activebooleanfalseUn élément d’alerte : faux est une coche discrète, vrai prend la couleur de gravité et ses mots.
right.severitystring"warm""warm", "danger"La couleur d’un élément d’alerte actif : chaude pour la surveillance, danger pour l’alarme.
right.unitstring"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.
middleobjet, nulnulladditionalProperties : falseLe 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.textstring""maxLength : 160Les mots d’un message statique ou déroulant.
middle.sizestring"small""small", "medium", "large"28 px avec jusqu’à deux lignes, 38 px ou 52 px sur une ligne, à 1080p.
middle.alignstring"center""start", "center", "end"Où les mots se placent au centre.
middle.colorchaîne, nulnullmotif : "^#[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.modestring"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.pagesarray[]maxItems : 8Les messages du mode pages, dans l’ordre.
middle.pageSecondsinteger8minimum : 3 ; maximum : 60Secondes 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}}'