Editing state-labels in panel view

Configuration Frontend
1

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

panel1
panel11891×921 98 KB

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.

panel2
panel21883×901 149 KB

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

2

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.