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

๐Ÿ”˜ Button Grid Card (button_grid)

A grid of smaller buttons, each firing any action: a Home Assistant service, a Harmony or IR command, a Harmony activity. Good for inputs, apps, playlists, the less used keys of a device.

๐Ÿ“ธ Preview

โœจ Features & Possibilities

  • Any Home Assistant service, with an entity and extra data: launch an app, select a source, run a script.
  • Harmony device commands and activities, straight to the hub (no Home Assistant needed).
  • IR commands from the remote's blaster or an extender.
  • Several actions on one button: they all fire, e.g. an IR input switch and an HA script.
  • Long press: a separate action, e.g. tap = Group, hold = Ungroup.
  • Close the popup after the press: ideal for an Inputs page opened as a popup.
  • Active state: colour or outline a button while an entity has a given state, e.g. the current source.
  • Icons, above, below, left or right of the label.

Scene grid or button grid?

Scene grid Button grid
Size Big tiles, 2 per row Smaller buttons, 3 per row
Starts composed Activities, opens pages โœ… โ€”
Any HA service with data โ€” (scene / script only; on long press, yes) โœ…
Typical use Home page, Activities Inputs, apps, extra keys

โš™๏ธ Options Reference

Card

Parameter Type Default Description
type string โ€” button_grid
columns int 3 Buttons per row.
iconPosition string top top, bottom, left, right.
buttons list โ€” The buttons, see below.

Each button (buttons[])

Parameter Type Description
name string Label.
icon string Path of an uploaded icon.
service string Home Assistant service, e.g. media_player.select_source.
entity_id string Target entity of the service.
data object Extra service data.
harmonyDevice / harmonyCommand string A Harmony device command.
activityId string A Harmony activity to start.
hub string Which Harmony hub, if you have several.
irDevice / irCommand string An IR command (see IR devices).
stopActivity string Turn off the Activity of this room, or *.
closePopup bool Close the popup on screen after the press.
long_press object A second action on hold, same fields as a scene grid tile.
state_entity string Entity to watch for the active state.
state_value string or list State(s) that count as active.
active_color string Button colour while active.
active_border bool or string true for an accent outline, or a colour.

๐Ÿ“„ JSON Configuration Example

An Inputs page meant to open as a popup:

{
  "type": "button_grid",
  "options": {
    "columns": 3,
    "iconPosition": "left",
    "buttons": [
      { "name": "HDMI 1", "irDevice": "samsung_hw_m550", "irCommand": "hdmi1", "closePopup": true },
      { "name": "Netflix", "service": "media_player.play_media",
        "entity_id": "media_player.living_room_tv",
        "data": { "media_content_type": "app", "media_content_id": "com.netflix.ninja" } },
      { "name": "TV", "service": "media_player.select_source",
        "entity_id": "media_player.living_room_tv", "data": { "source": "TV" },
        "state_entity": "input_select.living_room_source", "state_value": "TV", "active_border": true },
      { "name": "Vol +", "harmonyDevice": "62845789", "harmonyCommand": "VolumeUp", "hub": "salon_hub" },
      { "name": "Group", "service": "script.sonos_group",
        "long_press": { "service": "script.sonos_ungroup" } }
    ]
  }
}

โš ๏ธ state_entity compares the entity's state, not its attributes. A media player's source is an attribute, so to light up the current input, watch an input_select (or a template sensor) whose state is the source, as above.

See also: Card Scene grid ยท IR devices ยท Harmony