Editing state-labels in panel view

AdmiralRaccoon · July 26, 2022, 8:32am

Hi,
I wanted to create a panel view of the 3 levels of my house, which fits on a 24" touch screen like this:

However, I find in extremly difficult, almost impossible to move the state-labels/icons into the correct position, as the edit window is simply to tiny and overlapping the panel image with no option to move it away.

What I do now is trying to find the right position for the state-label step-by-step, with saving and verifiying each percent-step, but i can´t imagine this is the best way.
Did I miss some great Addon to place the state-labels via drag-and-drop for example, or is there no other option right now?

Thanks,
Philipp

Ildar_Gabdullin · August 2, 2022, 12:49am

Currently you are building UI in a “storage mode”:

open your card in HA Editor;
make a change;
CLOSE the window;
check if your changes are OK;
repeat.

In case of using a “yaml mode”:

open a corresponding yaml-file in some text editor like Visual Studio Code (VSC);
make a change & save;
switch to HA window & refresh a page;
check if your changes are OK;
switch to VSC, repeat.

Never heard about drag-n-drop features here.

Anyway, you are spending lot of time to allocate your elements in your Picture Elements card.
Hope you will like the results.
But - as soon as your open your page on a device with another dimensions (assume you are using 1920x1080, then you go to iPad) - you will be rather disappointed about your results (((.
Check for plenty of issues on GitHub regarding positioning & scaling of elements when viewing on different clients.

Update: check this post.