Card SceneGrid - dckiller51/astrion-custom-dashboard GitHub Wiki

๐ŸŽฌ Scene Grid Card (scene_grid)

A grid of big coloured tiles, each doing one thing: run a scene, start an Activity, open a page. It's the card for the first page of the remote, the one you see when you pick it up.

One tile can combine several actions (e.g. start a Harmony activity and open its page), and have a different action on long press.

๐Ÿ“ธ Preview

โœจ Features & Possibilities

  • What a tile can do (several at once if you want):
    • run a Home Assistant scene or script (entity_id);
    • start a composed Activity (activity), see Activities;
    • start a Harmony activity (activityId) or send a Harmony device command, see Harmony;
    • send an IR command from the remote's blaster or an extender;
    • open a page, or open it as a popup over the current page;
    • close the popup on screen;
    • turn off a room's Activity (stopActivity), like Harmony's Off button.
  • Long press: a second, separate action. Tap opens the Lights page, hold turns every light off.
  • Activity tiles light up: a tile that starts an Activity is outlined while that Activity runs, and the outline goes away when it stops, from anywhere (another tile, a hotkey, the Harmony hub itself).
  • Track as Activity: turn any single-action tile (a Harmony activity, an HA script) into an Activity of a room, so it shows in Active Activities and is replaced by the next Activity of that room.
  • Highlight from any entity: light up a tile from a Home Assistant state, e.g. the Lights tile while light.living_room is on.
  • Icons: PNG icons uploaded on the web page, placed above, below, left or right of the label, or filling the whole tile.
  • Grid or row: a grid with N columns, or one row you scroll sideways.

โš™๏ธ Options Reference

Card

Parameter Type Default Description
type string โ€” scene_grid
columns int 2 Tiles per row.
layout string grid row: a single row that scrolls sideways. columns is then ignored.
show_labels bool true false for icon-only tiles.
iconPosition string top Where the icon sits next to the label: top, bottom, left, right.
icon_fill bool false The icon fills the whole tile.
tile_height int 74 (120 with icon_fill) Tile height in dp.
scenes list โ€” The tiles, see below.

If any tile has an icon, every tile of the card uses the taller icon layout, so they all have the same height.

Each tile (scenes[])

Parameter Type Description
name string Label. Defaults to the entity's name, or the page name.
icon string Path of an uploaded icon, e.g. /sdcard/astrion/icons/netflix.png.
color string Tile colour, #RRGGBB or #AARRGGBB.
entity_id string Scene or script to turn on.
activity string Id of a composed Activity to start. Its own page opens; the tile's page is ignored.
activityId string Harmony activity id.
harmonyDevice / harmonyCommand string A Harmony device command.
hub string Which Harmony hub, if you have several. Default hub when omitted.
irDevice / irCommand string An IR command (see IR devices).
page string Page to open.
pageMode string popup opens page as a floating popup.
closePopup bool Close the popup on screen.
stopActivity string Turn off the Activity of this room, or * for every room.
long_press object A second action on hold. Same fields: service, entity_id, data, page, pageMode, activity, activityId, harmonyDevice / harmonyCommand, irDevice / irCommand, stopActivity, closePopup, hub.

Activity tracking

Parameter Type Description
track bool Treat this tile as an Activity. Needs room. Not needed with activity (always tracked).
room string The room of that Activity.
devices list Optional: catalogue ids of the devices this tile turns on, so a later composed Activity knows they're already on.
nowPlayingEntity string Optional (1.2.8+): the media_player the dock screen shows while it runs.

Highlighting

Parameter Type Description
state_entity string Entity to watch.
state_value string or list State(s) that count as active, e.g. "on" or ["playing", "paused"].
active_color string Tile colour while active.
active_border bool or string true for an outline in the accent colour, or a colour like #FFFFC107.

๐Ÿ“„ JSON Configuration Example

{
  "type": "scene_grid",
  "options": {
    "columns": 2,
    "iconPosition": "left",
    "scenes": [
      { "activity": "watch_apple_tv", "name": "Apple TV", "color": "#FF1F2A44",
        "icon": "/sdcard/astrion/icons/apple-tv.png" },
      { "activityId": "39568252", "hub": "salon_hub", "page": "TV", "name": "Watch TV",
        "track": true, "room": "Living room", "nowPlayingEntity": "media_player.living_room_tv" },
      { "name": "Lights", "page": "Lights", "color": "#FF3A3A2A",
        "state_entity": "light.living_room", "state_value": "on", "active_border": "#FFFFC107",
        "long_press": { "service": "light.turn_off", "entity_id": "all" } },
      { "entity_id": "scene.movie_night", "name": "Movie night" },
      { "name": "Camera", "page": "Doorbell", "pageMode": "popup" },
      { "name": "Off", "stopActivity": "*", "color": "#FF4A1F1F" }
    ]
  }
}

๐Ÿ’ก Need many small buttons rather than a few big tiles? Use a Button grid.

See also: Activities ยท Builder ยท Recipes