Card PictureElements

🗺️ Picture Elements Card (picture_elements)

A floor plan of your home with buttons placed on it: tap a lamp on the plan to switch it. It can also show your robot vacuum where it is, and the people detected by an mmWave radar (e.g. LD2450).

In the builder (since 1.2.9): pick the plan among your icons, add buttons, and — when the builder is opened from the remote — click the plan to place the selected button. The vacuum and radar blocks are under Advanced, as JSON.

📸 Preview

✨ Features & Possibilities

• Your own image as the background, a PNG of your floor plan. The card takes the image's proportions.
• Buttons placed in % of the width and height: they stay in place whatever the size.
  • With an entity_id: tap toggles it. The button lights up amber (or your on_color) while the entity is on.
  • With a service: tap calls it, once per entity of targets (e.g. all the lights of a room off).
• Robot vacuum: drawn at its dock, or in the room it's cleaning. It wobbles while it moves. Tap it to open the full Vacuum panel in a popup.
• Radar: numbered dots showing where each person detected by an mmWave sensor stands, live.

⚙️ Options Reference

Parameter	Type	Default	Description
type	string	—	picture_elements
image	string	/sdcard/astrion/floorplan.png	Path of the floor plan image on the remote.
aspect	number	1.3	Width / height ratio, used only until the image is loaded.
elements	list	—	The buttons, see below.
vacuum	object	—	Robot vacuum on the plan, see below.
radar	object	—	Radar targets, see below.

Uploading the plan: upload it like an icon on the web page, then use its path, e.g. /sdcard/astrion/icons/floorplan.png. A large image is fine: it's scaled down to the screen.

Each button (elements[])

Parameter	Type	Default	Description
left	number	50	Horizontal position, in % of the width.
top	number	50	Vertical position, in % of the height.
entity_id	string	—	Entity to toggle. Lit while it's on.
service	string	—	Service to call instead, e.g. light.turn_off.
targets	list	—	Entities the service is called on.
icon	string	bulb	power for a power icon, or a PNG path (1.2.9+). Otherwise a bulb.
on_color	string	amber	Background while on, #RRGGBB or #AARRGGBB (1.2.9+).

Vacuum (vacuum)

The Vacuum card's options (they fill the popup), plus where to draw the robot:

Parameter	Type	Description
entity_id	string	The vacuum entity. Required.
dock_position	[left, top]	Where the dock is on the plan, in %.
room_entity	string	An entity whose state is the room being cleaned (many integrations have a current room sensor).
room_positions	object	Each room name (as that entity reports it) → [left, top] in %.

The robot is drawn at the dock when docked or charging, in its current room otherwise, else at the dock.

Radar (radar)

Reads the target coordinates from sensors named <prefix>_<n>_x and <prefix>_<n>_y (n = 1, 2, 3…).

Parameter	Type	Default	Description
prefix	string	—	Sensor name prefix, e.g. sensor.ld2450_target. Required.
targets	int	3	Number of targets.
origin_left / origin_top	number	50 / 10	Where the sensor is on the plan, in %.
scale_x / scale_y	number	8	% of the plan per sensor unit.
scale_x_right	number	scale_x	A different scale for the right side (rooms that aren't symmetrical).
top_offset_left	number	0	Extra vertical offset on the left side.
rotation	number	0	Rotate the sensor's axes, in degrees.
flip_x / flip_y	bool	false	Mirror an axis.
blend	string	overlay	How dots blend with the plan: overlay, multiply, screen, softlight, hardlight, difference, none.

📄 JSON Configuration Example

{
  "type": "picture_elements",
  "options": {
    "image": "/sdcard/astrion/icons/floorplan.png",
    "elements": [
      { "entity_id": "light.living_room", "left": 30, "top": 40 },
      { "entity_id": "light.kitchen", "left": 72, "top": 35 },
      { "service": "light.turn_off", "targets": ["light.living_room", "light.kitchen"],
        "icon": "power", "left": 92, "top": 8 }
    ],
    "vacuum": {
      "entity_id": "vacuum.roborock_s7",
      "map_image": "image.roborock_s7_ground_floor",
      "dock_position": [12, 85],
      "room_entity": "sensor.roborock_s7_current_room",
      "room_positions": { "Kitchen": [72, 40], "Living room": [30, 45] },
      "rooms": [ { "name": "Kitchen", "id": 16 }, { "name": "Living room", "id": 17 } ]
    },
    "radar": { "prefix": "sensor.ld2450_target", "targets": 3, "origin_left": 50, "origin_top": 5 }
  }
}

💡 Without the builder: to find left / top, divide the pixel position in your plan by the image's width or height, times 100.

See also: Card Vacuum · Card Light