Using the card

🇫🇷 Version française

Using the card

What everybody sees and touches, editor aside.

• Layout · Zoom and pan
• Room view
• Cards
• Side panels
• Layers button for viewers
• Interaction and wall tablet

Layout

From top to bottom: the title and the Edit plan button (administrators), the summary chips, the plan between its left and right panels, and the legend (temperature scale, closed, open, shutter down).

• Desktop: with full_page: true (default) and a card at least 760 px wide, the card fills the height of the screen without scrollbars and the panels fit beside the plan. Put the card alone in a Panel view for the best result.
• Phone: the plan comes first, the panels stack below it, the page scrolls.

Desktop, light theme	Phone, dark theme

Zoom and pan

• Buttons at the bottom right of the plan: Zoom in, Zoom out, Whole home (back to the full plan), and Replay the day when replay is on. With a mouse they appear when the pointer is over the plan.
• Ctrl+wheel or a touchpad pinch on a computer, a two-finger pinch on a phone; drag to pan once zoomed.
• interaction.lock_view: true disables panning and zooming and hides the buttons (taps still work).

Room view

A tap on a room (its floor or its label) zooms on it and shows only what concerns it:

• Header: "Title › Room", a ← Whole home button, and the room's temperature and humidity.
• Automatic buttons (auto_actions, on by default): Turn all off / Turn all on for the room's lights, Open / Close for its shutters, blinds and curtains.
• Your buttons (actions): any service, on an entity or on the whole room. Sensitive services are always confirmed in a dialog; confirm: true confirms the others too (Security).
• Scenes linked to the room's area, as buttons.
• Devices: the badges placed in the room, with a toggle for lights, switches, fans, input booleans and humidifiers.
• Openings: one line per bay, "Open / Closed · shutter 70 %".
• Automations (and scripts) linked to the room's area or entities, with "5 h ago" and an on / off toggle (automations: false hides them).
• Panels: the room's own panels, instead of the home panels.

Close it with ←, a tap outside the room, Whole home, or automatically after interaction.reset_after seconds. A sub-area opens the room that contains it; zoom: false disables the room view of a room.

rooms:
  - name: Living room
    poly: [[0, 0], [500, 0], [500, 420], [0, 420]]
    area: living_room
    actions:
      - name: Movie mode
        icon: mdi:movie-open-outline
        action: scene.turn_on
        target: scene.movie
      - name: All off
        icon: mdi:power
        action: homeassistant.turn_off
        target: room          # the room's area if linked, else the room's entities
        confirm: true         # confirmation dialog
      - name: Warm light
        icon: mdi:lightbulb-on
        action: light.turn_on
        target: light.living_room
        data: {color_temp_kelvin: 2700, brightness_pct: 60}

target: room uses the room's area when it is linked, otherwise the room's entities of the service's domain (all of them for homeassistant.*). Any other target is an entity id. These buttons call exactly the service written in the configuration: keep confirm: true for anything sensitive.

Cards

A card is the dialog opened by a tap on a connected piece of furniture, or on an opening or a badge that has a card (or tap: card). A bottom sheet on a phone.

EV charger card (desktop)	Bay window card (phone)

• Header: icon (lit when active), title (card.title, else the element name), state and value; an on / off switch for light, switch, fan, input_boolean and humidifier entities, unless protected: true (then a Turn back on button appears only when it is off); a More info ⓘ button; ✕.
• Body: the widgets (same types as the panels). Inside a card, list rows show values, not toggles; a tap on a value opens its more-info. cover, lock and thermostat widgets work in a card.
• Size on a desktop: about 420 px for one widget, 760 px for two (two columns), up to 1120 px and three columns for more.
• Esc, ✕ or a tap outside closes it; openings with a card can also be reached with the keyboard (Enter / Space).

badges:
  - entity: switch.fridge_plug
    pos: [80, 60]
    icon: mdi:fridge-outline
    protected: true             # never "off" from the plan
    card:
      title: Fridge
      more_info: /energy        # the ⓘ button opens the Energy dashboard
      widgets:
        - {type: tile, title: Power, entity: sensor.fridge_power, history: 24}
        - {type: entities, entities: [sensor.fridge_temperature, {entity: sensor.fridge_energy, name: Total}]}

card.more_info: an entity (its more-info; default: the element's main entity), a dashboard path (/energy), a URL (https://…, new tab) or false to hide the button. card can also be a plain list of widgets.

Side panels

Columns of widgets left and right of the plan (panels.left, panels.right). A room view shows the room's own panels instead. In the editor, drag widgets within and between panels.

Layers button for viewers

With layers.view_button: true (⚙ Settings › Display), a Visible layers button next to the zoom buttons lets each viewer hide layers (furniture, halos, texts…) for himself; the choice is kept in his browser, never in the configuration.

Interaction and wall tablet

interaction:
  room_tap: room_view   # room_view (default) | more_info | none
  lock_view: false      # true: no pan, no zoom, zoom buttons hidden
  reset_after: 0        # seconds without interaction before going back to the whole plan; 0 = never
tablet: true            # or {summary: false, panels: false, burn_in: true}
animation_level: full   # full | reduced | none

• room_tap: more_info opens the more-info of the room's tap entity (else its temperature); none does nothing.
• reset_after closes the room view and cards, resets the zoom and brings a paused replay back to live (never while editing or while a replay plays). The editor allows up to 3600 s.
• Wall tablet mode (tablet: true): the summary chips and side panels are hidden, the plan fills the card, full page and centred. With title: "" there is no header (the Edit plan button joins the zoom buttons). tablet.summary / tablet.panels bring the chips / panels back; burn_in (on by default) moves the whole card by one pixel every three minutes, within 2 px, to protect the screen.
• Animation level limits the motion.

Recommended for a wall tablet:

title: ""
tablet: true
interaction:
  lock_view: true
  reset_after: 60