Interactive map component (clickable zones) for external integration widgets

Feature requests
,
1

Hello :waving_hand:

I’m developing a widget for the Roborock external integration that displays the vacuum cleaner map (via onWidgetGetImage). The rendering works very well, but I’m hitting a limit of the widget vocabulary: there is no way to make the map interactive.

Today, in a widget, we only have static components (image, value, gauge, status, chart, card-list) + button (limited to 4). The concrete limits:

• the map is a static image: impossible to detect a click on a room;
• no selection component (neither multi-select, nor clickable areas on image);
• no shared selection state between components.

My request: a component allowing to define clickable areas on an image / map (or a dedicated « map » component) with a selection state, relayed to the integration (type onWidgetAction).

Concrete use case (vacuum cleaners): the user selects rooms directly on the map, then « Start » launches the targeted cleaning of these rooms (app_segment_clean). This is exactly the experience of the native Roborock / Dreame apps. It would also be useful for any integration needing a selection on a plan (areas, floors…).

Mockup (generic house) — we keep the existing widget, we only add the selection on the map:

mcp-Claude_Browser-blob-1791199649869-71lc41
mcp-Claude_Browser-blob-1791199649869-71lc41800×1013 55.4 KB

2

Hi @spenceur,

Thanks for the request and the mockup! The need is real, and it aligns with what’s happening on the Dreame side: Robotic Vacuums: A Complete Control Line in the Devices Box.

Instead of generic clickable areas in the widgets, I propose:

  1. Room selection becomes a core vacuum feature, aligned with the Matter Service Area cluster: rooms are declared by device, you select multiple, and « Start » launches the cleaning. This works for Roborock, Dreame, and Matter, in the vacuum panel and in the scenes.
  2. Your widget simply displays this feature: you reference it like a value tile today, and Gladys draws the room pills. The selection is shared across all screens.
  3. The map remains an image: as your integration receives the selection, you can draw the selected rooms on it.

This touches the data model, so we’ll need to start with a clean spec :slight_smile:

3

Wow, this is a VERY interesting topic!!! :grinning_face: