Allow editor to remain open

[OToussaint]

Hello there,

I'm trying to set up a picture-elements card with image overlays (my car as the base, then adding elements like an open trunk, open doors, etc.).

Positioning these overlays precisely using top/left (and sometimes transform: translate, scale) is quite tricky. To fine-tune it, I work with two windows:

• One with the UI editor or YAML code
• One displaying the card

When I save, the second window prompts for a refresh, which is great. However, the first window exits edit mode and returns to the Lovelace dashboard after saving.

This forces me to repeatedly go through Edit > Show code editor > scroll back to my position, just to make small adjustments (tweaking values by 1 or 2 hundredths of a percent).

Instead of exiting edit mode after saving, it would be much better if the "Save" button simply became a "Close" button after saving, allowing the editor to stay open and keep my current cursor position.

EDIT: Preview is not the way to go, here is my card in preview

And this is how it looks like in real size

[karwosts]

I don't know about implementing this suggestion in the card editor, though if you open the Raw Configuration Editor in edit mode, you can repeatedly save dashboard yaml without exiting the editor. Maybe that would save you a few clicks?

[OToussaint]

It is not that easy, because I do a lot of transform (translate/scale)
But I'm keeping the trick for another time, thx

[OToussaint]

When I do a translate(-30.45698%,-45.129865%), it does

Why do I do that? Because when I'm using my car as the background and isolate the trunk (for exemple), it doesn't work as expected.

All my images are exactly the same height/width with various transparency mask on each of them,
It should be as easy as top: 0%, left: 0% but it is not, it is streched, resized and moved by HA
I've to spend so much time to scale it back to an acceptable size and position:

1. printscreen
2. calculate % between the current size and the target dividing one by the other
3. count pixels to move and apply the percentage for top/right

But one is changing the other, so much time ...

As exemple, both 722x722, if I do the second one over the first one with top: 0%, left: 0%, it is not on top of the trunk

Result:

[OToussaint]

But in the communty I was asked to post my request here.
I don't want to discuss the scale/translate basically, I'm explaining why I need the editor to remain open
Either the behaviour of HA is coherent (like my result here above and I need the editor to remain open) or it is not the expected behaviour and I can raise an issue but there is no other way for me to solve my unecessary laborious work

[thlucas1]

Another possibility is to write your own editor, and save the configuration programmatically. I do something similar to this for my SpotifyPlus Card, where a user can create a Preset (shortcut) to a Spotify media item and it adds it to the UserPresets collection in the card configuration.

The requirement is that the configuration must have a cardUniqueId property set with a value that uniquely identifies the card. I then do a find / replace on that card object in the current LovelaceRawConfig instance, then call the LovelaceRawConfig.saveConfig to save the configuration. All of this is done without entering the HA configuration UI. I put together a small TypeScript helper class to make it easy to access.

The key to making it work is the cardUniqueId property, which uniquely identifies the card. The card configuration can be embedded in any type of dashboard: Masonry, Panel, Section, as a child config in a vertical / horizontal stack, etc. Just as long as the cardUniqueId property is set to unique values amongst the card instances.

Hope it helps!