ゲージカード

1から6つの数値を大きく表示し、帯の名前を言葉で示し、ダイヤル、バー、タンク、またはバッテリー形状で示します。

1〜6の読み取り値が大きな数字で表示され、バンド名が文字でダイヤル、バー、タンク、バッテリー形状の横に表示され、遠くからもはっきり見えます。画面全体に表示、中央に配置、角に正方形または1行で配置、端にバンドとして表示できます。1〜6の読み取り値をスケール、名前付きバンド、オプションのターゲットで設定し、放射状、半円、スピードメーター、線形、バレット、タンク、バッテリー形状を選択し、バンドの表示有無、数字またはバンドの先行表示、常時表示または警告・危険・欠測時のみ表示を選べます。

ライブカード

このカードはブラウザでプレーヤーと同じコードで描画され、サンプルデータを使用します。

カテゴリ: オペレーション。タグ: チャートとゲージ、数値と指標、オフィスと職場、工場と倉庫。

レイアウト

このコアカードはすべてのレイアウトに適合します:全画面、中央、ワイド、コーナー、チップ、ストリップ、または任意の自由な長方形。

レイアウト:フル、センター、ワイド、コーナー、チップ、ストリップ。フォーム:ランドスケープ、ポートレート、スクエア、ストリップ。

カードレイアウト、テーマ、公開。カードを閲覧。

データとプライバシー

このカードは設定されたプロパティとライブカードデータを使用します。

プロパティ

テーマ、背景、アクセント、位置については共通プロパティを参照してください。

カードの作成時に、静的プロパティをカードのparamsに設定します。データドキュメントは動的プロパティのみを保持します。ネストされた行は親プロパティの内容を説明します。

静的プロパティ

名前タイプデフォルト値と制限説明
titlestring""maxLength:40ゲージの上の見出し。
stylestring"radial""radial", "semicircle", "speedometer", "linear", "bullet", "tank", "battery"radial:270度のダイヤル。semicircle:半円のダイヤル。speedometer:色付き帯の上に針。linear:バー。bullet:バーの後ろに帯とターゲットノッチ。tank:枠内の平らな縦バー。battery:端子付きの枠内の平らなバー。
showBandsbooleantrue各読み取り値の定性的な帯(ダイヤル内のリング)を描画。
intervalSecondsinteger6最小値:3;最大値:60コーナーとチップが次の読み取りまで表示される時間。
herostring"value""value", "band"単一の読み取り値の先頭に来るもの:値(数値、その下にバンド名)またはバンド(言葉、その下に数値)。
presencestring"always""always", "attention"常に:カードは常に表示。注意:警告または危険範囲内の読み取り値がある間、または値がまだない場合のみ。コーナーとチップはそれらの読み取り値を順に表示。
backgroundColor文字列、nullnullパターン:"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"カードの背景とプレートをフラットなCSS順序の色で上書きします。#RRGGBBAAは不透明度を指定します。background noneが優先されます。
textColor文字列、nullnullパターン:"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"メインとセカンダリのテキスト色を上書きします。アクセントと意味的な状態色はそのまま維持されます。

動的プロパティ

名前タイプデフォルト値と制限説明
metricsarray[{"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:61〜6の読み取り値。各値にはスケール(最小、最大)、定性的バンド(to:バンドの上限、tone:成功、警告、危険、アクセント、クール、ウォーム、ミュート、label:名前)とオプションのターゲットがあります。
metrics[].labelstringmaxLength:40;必須
metrics[].value数値、null値がない場合、ゲージはバンドをゴースト表示し、待機中と表示します。
metrics[].unitstring""maxLength:8
metrics[].prefixstring""maxLength:4
metrics[].minnumber0
metrics[].maxnumber100
metrics[].decimalsinteger0最小値:0;最大値:3
metrics[].target数値、nullnull
metrics[].bandsarray[]maxItems:6
metrics[].bands[].tonumber必須
metrics[].bands[].tonestring"accent""success", "warning", "danger", "accent", "cool", "warm", "muted"
metrics[].bands[].labelstring""maxLength:16
metrics[].chargingbooleanfalseバッテリーは充電の稲妻を表示します。
metrics[].iconnull、文字列nullnull, "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数値、nullnullchangedAtで変わる前の読み取り値。針や塗りはそこから現在の値まで動く。
metrics[].changedAt文字列、nullnull読み取り値が変わったISO 8601時刻。その数秒以内にゲージがpreviousから新しい値までスイープします。
updatedAt文字列、nullnull読み取りのISO 8601時刻。

キャンバス例

静的プロパティを params.json として保存し、カードを作成します。結果にはその crd_ ID が含まれます。

{
  "theme": "neomustard"
}
screenrig card create --type gauge --major 1 --file params.json

このアイテムをプレイリストページのprimitivesに追加し、サンプルの ID をその ID に置き換えます。プレイリストを公開してスクリーンに割り当ててください。

{
  "id": "gauge",
  "primitive": "card",
  "card": "crd_01EXAMPLECARD000000000",
  "layout": "full",
  "content_fit": "fill"
}

ライブデータを書き込む

カードを作成した後にドキュメントを書き込み、画面を再公開せずに更新するには置き換えます。カードは書き込みのたびに動的プロパティと照合し、受け付けないドキュメントは拒否します。プレイリストと同じプロジェクトを使用してください。

ドキュメントを card-data.json として保存します。CLIはラッパーなしでドキュメント自体を読み取ります。

{
  "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

またはAPIを直接呼び出します。APIは同じドキュメントをdocumentフィールドにラップします。エージェントトークンはすでにプロジェクト名を含むため、プロジェクトヘッダーは送信しません。ScreenRig-Projectを送信する場合はトークンのプロジェクトと一致する必要があります。API認証は環境変数で提供してください。詳細は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":{"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}}'