Configuring Lovelace Cards, File Structure and Method of Work

I am quite new and trying to do some configuration of my lovelace dashboard. I have been looking at other set ups and configurations but a bit confused. I have created a vertical stacked card with two button cards to control the left and right side of my Zooz double outlet. The card works but is too large. I would like to chance the icon size and move the icons to the left of the title. I am not sure how. I suspect it is a yaml change but not sure where the sizing and positioning goes. Which brings me to my next question, where is this information stored? I can edit yaml direct in the card itself but it seems that the lovelace file in .storage/config is in json. I am guessing the editor is saving any edits to this file. I have also seen some projects that have a lovelace-ui yaml file with their configs in there. So where should I be putting edits?

Along these lines, what is the strategy for laying out your automation project from a workflow and file strategy. Currently I have one outlet. But I have created a light on and light off scene. I have created some automation to trigger the scene. Is that the proper thinking? or should the automation be calling the switch directly, check the state and then adjust accordingly? I can see when adding a lot of things it can get quite complicated. So I would like to understand what others are doing to manage complex environments. Loving what I can do, just need to learn a bit more on the why and how.

This depends on how you configured lovelace. Take a look at the docs here, they show how you can change to yaml mode to edit your files in yaml

Always try to keep it as simple as possible and in a way that you also understand what the code does 1 year later. I also recommend to comment your code. This will differ for everyone,what might seem complex for one person could be really easy for another person.
I also recommend to use packages, this allows you to configure things that belong to the same logical group (e.g. rooms) together in a separate file. This way you’ll not clutter your configuration.yaml and config that belongs together is at the same place.

alternatively, one can split up the configuration as it might be easier and not everything can be put in separate packages :wink:

p.s Lovelace reformats the code if you edit cards in UI editor so one way is to have original versions in .yaml files and paste them to the editor when you change something. a bit tiresome but saves your comments and card structure.
now it’s possible to have both UI and yaml dashboards in one setup, nice if you din’t want to copy your cards into the editor each time but sometimes need to use it to say, create a quick model and see how it’s built inside.

1 Like

Thanks for the info. That first doc link really helps out. I would almost rather deal with the yaml that try to a combo of a config file and the UI.

I was looking at someone’s GIT repo and they seem to have a yaml for everything, sensor, person, zones. So got me thinking about the mindset I need to have going further. Appreciate the link.

look, it’s not that simple.
there is backend configuration (for stuff like sensors, automations etc) and frontend configuration - for what you see in your browser (Lovelace).

For the former you can either use UI editors (like Automation editor) to generate the config for you or you can do it manually as it’s all YAML. For a long time writing YAML was the only option.
That’s why you see

For the latter it’s JSON internally but we still have to use YAML either for doing it manually (lovelace_ui.yaml or yaml dashboard) or in UI editor/raw editor. And it’s completely different story, the only common thing between the backend’s config and fronted one is they use YAML and follow its rules. What is inside and how it’s processed is different as they are completely separate things. You can use lovelace_gen for frontend, but not for backend. And so on.

as I said, it’s handy sometimes to configure Lovelace cards/views visually. and then look at how it’s configured and use it in your yaml lovelace config so don’t rule it out as it cost you nothing nowadays (until recently you had to choose and it wasn’t an easy choice).

1 Like

I also split up my configuration like this (see here in case you are interested) but this doesn’t mean that it’s the best way to do things. It works for me, but doesn’t mean it will make you equally happy, as my brain works differently than your brain :slight_smile:

1 Like

Thank for linking that config. For me it is nice to see working examples when dealing with a new system. I like to think I am decent with coding but whenever you encounter a new environment you never really know the correct layout. All trial and error. I am liking what I can do with the system and just a single plug. Have a vacuum on the way so will certainly be checking your GIT configs.

In case you you have some questions about my setup you can send me a PM here on the forum.

Hello,
I need help i just recently added my ecobee thermostat to my HA through the integration tab. I want to change it to Fer. how do i do this?

image

Please open a separate topic for this and don’t spam other people’s topic.

Do you have this in your configuration.yaml?

homeassistant:
  unit_system: imperial

If you don’t have this in configuration.yaml it will default to metric.

so just add this just like that?

got it. thank you very much

Are you familiar with tuya motion sensors? I have read the sensor comes on and off so fast when it detect motion my smart life app can detect it but HA cant. What is the easiest way to get HA to detect changes from it?

Please open a separate topic for this! You can tag me in the topic if you want me to take a look at it.

1 Like

I open I got no reply …

You posted a link to my profile, you should’ve tagged me with @myname. I didn’t get a notification.