Please see the attached picture, the question in the title will be clear.
#How to name elements in a picture-elements so they can be identifiable in the UI?
lime widget
I read somewhere about "alias" and I did try setting that in the custom:hui-element for example, but that does nothing.
The problem is that I'll have 20 repeats of the custom:hui-element and without the ability to write comments in the YAML editor I'm already predicting this will be a major pain in the ass to figure out which custom:hui-element in the list will corresponds to what.
I'm already pretty frustrated that the UI / YAML editor doesn't allow me to do **!include ** which is already forcing me to repeat a bunch of code (style config, gauge card max/min params etc..) that should really be centralized in a file.
ancient pasture
try setting the title key on the element.
lime widget
try setting the `title` key on the element.
That just overlays the title text into the picture-elements, it doesn't change how the element is named in the list.
ancient pasture
Hmm I thought it would.
type: picture-elements
elements:
- type: custom:hui-element
title: Foo
- type: custom:hui-element
title: Bar
image: https://demo.home-assistant.io/stub_config/floorplan.png
lime widget
Hmm I thought it would.
yeah, it's unfortunate
ancient pasture
Well it worked for me above.
lime widget
oh yeah, I didnt even notice the smaller text. OK, this was almost a solution, except the title is actually rendered into the picture-elements and is messing up how the gauges are rendered. Can you think of a way to not render the title?
autumn spear
The problem is that I'll have 20 repeats of the custom:hui-element and without the ability to write comments in the YAML editor I'm already predicting this will be a major pain in the ass to figure out which custom:hui-element in the list will corresponds to what.
I'm already pretty frustrated that the UI / YAML editor doesn't allow me to do !include which is already forcing me to repeat a bunch of code (style config, gauge card max/min params etc..) that should really be centralized in a file.
This is where running a dashboard in YAML mode works best. You'll have to write the out all the code as the UI editor won't work for this dashboard. But, that's okay, because you already have the majority of the code available to you. When editing your dashboard, click the 3 dots in the top right corner and go to Raw Configuration Editor and there's the code. Drop it into a YAML file. Then, you can add comments and use YAML anchors and !includes. Using a combination of YAML anchors and !includes makes the development way easier albeit having to work completely in code.
I'd suggest looking at Adding more dashboards with YAML and note the section:
You can also add YAML dashboards when your main dashboard is UI configured:
This will ensure you still can use the UI editor to configure and test code (on a different dashboard even if it is only used for testing). When you have it the way you like, copy it into your YAML-based dashboard.