Promote `top` and `left` style keys to config keys in picture elements card configuration #25049

shocklateboy92 · 2025-04-14T08:24:46Z

Proposed change

Since a picture is worth a thousand words:

The most common way of positioning elements in a picture-elements card is by using the top and left style keys as %. It's a pain to line everything up by deleting and re-typing the numbers repeatedly.

This improves the situation considerably since browsers allow incrementing/decrementing <input type=number> elements using arrow keys, giving pretty much real-time feedback. (I used to open the devtools, adjust the element there and copy paste the number 😁 )

I could use some feedback regarding the user-facing strings. I picked "Left" and "Top" because they were already available as localized keys. Should we indicate that these become a percentage? Or maybe just say something along the lines of Horizontal/Vertical position?

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Here's a simple complete frontend dashboard yaml for the screenshot

views:
  - title: Home
    sections:
      - type: grid
        cards:
          - type: heading
            heading: New section
          - type: picture-elements
            elements:
              - type: state-icon
                entity: sensor.sun_next_dawn
                top: 66
                left: 75
                style:
                  left: 1%
                  top: 1%
            image: https://demo.home-assistant.io/stub_config/floorplan.png

Additional information

Link to documentation pull request: TODO after UX feedback

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

… mobile

MindFreeze · 2025-04-15T13:01:32Z

src/translations/en.json

+            "left": "[%key:ui::panel::page-demo::config::arsaboo::names::left%]",
+            "top": "[%key:ui::panel::lovelace::editor::edit_view_header::settings::badges_position_options::top%]",


The UX team will have a look at the labels but we shouldn't use completely unrelated ones like these even though they have to desired words

Okay, I'll create new ones called "Horizontal Position" and "Vertical Position".

MindFreeze · 2025-04-15T13:01:45Z

src/panels/lovelace/editor/config-elements/elements/hui-state-icon-element-editor.ts

+  {
+    name: "left",
+    selector: {
+      number: { min: 0, max: 100, unit_of_measurement: "%", step: 0.1 },


The % unit of measurement is displayed in the number box. Don't know why it is missing in your screenshot.

I realized and pushed that in a separate commit after taking the screenshot 😁

MindFreeze · 2025-04-15T13:03:35Z

src/panels/lovelace/elements/types.ts

+  left?: number;
+  top?: number;


We should handle this entirely in the editor instead of adding redundant config options. The editor should translate between the style option and the top/left inputs

Sure. Are you suggesting I put some extra elements in hui-state-icon-element-editor.ts line 121 outside of the <ha-form>?

Or is there some way of overriding the behavior for specific elements in a form?

home-assistant · 2025-04-15T13:03:54Z

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

shocklateboy92

Thanks for your feedback! Just one question I asked in a comment thread.

shocklateboy92 · 2025-04-16T02:32:20Z

src/panels/lovelace/editor/config-elements/elements/hui-state-icon-element-editor.ts

+  {
+    name: "left",
+    selector: {
+      number: { min: 0, max: 100, unit_of_measurement: "%", step: 0.1 },


I realized and pushed that in a separate commit after taking the screenshot 😁

shocklateboy92 · 2025-04-16T02:39:13Z

src/panels/lovelace/elements/types.ts

+  left?: number;
+  top?: number;


Sure. Are you suggesting I put some extra elements in hui-state-icon-element-editor.ts line 121 outside of the <ha-form>?

Or is there some way of overriding the behavior for specific elements in a form?

shocklateboy92 · 2025-04-16T02:40:01Z

src/translations/en.json

+            "left": "[%key:ui::panel::page-demo::config::arsaboo::names::left%]",
+            "top": "[%key:ui::panel::lovelace::editor::edit_view_header::settings::badges_position_options::top%]",


Okay, I'll create new ones called "Horizontal Position" and "Vertical Position".

MindFreeze · 2025-04-16T05:51:26Z

Discussed this with the UX team. Here is the summary:

Sliders don't make sense here. Simple input boxes would be enough
Some people use relative position or px values and these cases need to be handled. Not sure it's possible with the proposed UI
Ultimately we want this to work with drag & drop on the preview itself. So:
- Elements are created with position: absolute by default
- Card and elements enter a special editing mode while in the editor preview
- The user can just move them around to change the top & left values, if the element has position: absolute
- The top & left values are updated in the style property directly

Bottom line, this should have drag & drop but this would not be easy to implement. Input boxes can be acceptable but without sliders and they should handle all cases gracefully (Ex. no inputs if there is no position: absolute).
I know this is asking a lot so feel free to close this PR if you don't want to get into it. It is on our wish list so we'll get to it eventually.

shocklateboy92 added 2 commits April 14, 2025 08:03

Promote top and left style elements to config

8586f48

Fix bug when top or left is set to 0

ffe7308

home-assistant bot added the cla-signed label Apr 14, 2025

shocklateboy92 added 3 commits April 15, 2025 04:23

Increase precision

b6ac6e1

Remove type definition causing loop

a04da5c

Move postion selectors below style, so they show closer to the map on…

8cbf352

… mobile

MindFreeze added the Needs UX Pull requests requiring a review from the Home Assistant design team label Apr 15, 2025

MindFreeze requested changes Apr 15, 2025

View reviewed changes

home-assistant bot marked this pull request as draft April 15, 2025 13:03

shocklateboy92 commented Apr 16, 2025

View reviewed changes

MindFreeze removed the Needs UX Pull requests requiring a review from the Home Assistant design team label Apr 16, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Promote `top` and `left` style keys to config keys in picture elements card configuration #25049

Promote `top` and `left` style keys to config keys in picture elements card configuration #25049

Uh oh!

shocklateboy92 commented Apr 14, 2025

Uh oh!

MindFreeze Apr 15, 2025 •

edited

Loading

Uh oh!

shocklateboy92 Apr 16, 2025

Uh oh!

MindFreeze Apr 15, 2025

Uh oh!

shocklateboy92 Apr 16, 2025

Uh oh!

MindFreeze Apr 15, 2025

Uh oh!

shocklateboy92 Apr 16, 2025

Uh oh!

home-assistant bot commented Apr 15, 2025

Uh oh!

shocklateboy92 left a comment

Uh oh!

shocklateboy92 Apr 16, 2025

Uh oh!

shocklateboy92 Apr 16, 2025

Uh oh!

shocklateboy92 Apr 16, 2025

Uh oh!

MindFreeze commented Apr 16, 2025

Uh oh!

Uh oh!

		"left": "[%key:ui::panel::page-demo::config::arsaboo::names::left%]",
		"top": "[%key:ui::panel::lovelace::editor::edit_view_header::settings::badges_position_options::top%]",

Promote top and left style keys to config keys in picture elements card configuration #25049

Are you sure you want to change the base?

Promote top and left style keys to config keys in picture elements card configuration #25049

Uh oh!

Conversation

shocklateboy92 commented Apr 14, 2025

Proposed change

Type of change

Example configuration

Additional information

Checklist

Uh oh!

MindFreeze Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

home-assistant bot commented Apr 15, 2025

Uh oh!

shocklateboy92 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MindFreeze commented Apr 16, 2025

Uh oh!

Uh oh!

Promote `top` and `left` style keys to config keys in picture elements card configuration #25049

Promote `top` and `left` style keys to config keys in picture elements card configuration #25049

MindFreeze Apr 15, 2025 •

edited

Loading