GITHUB Link Here: https://github.com/asierralozano/ha-ui-editor
Hello HA community!
I’m really happy to present you a personal project in which I’m working on. The name is not really clear, so let’s call it for now HA Lovelace Editor.
The basic idea behind this tool, is to have an easy way of managing custom views with custom cards (like button-card, mini-graphic-card…).
My father and I, both have home assistant as our brain for home automation. I love tinkering with Lovelace and custom cards. My father loves that as well, but he does not have the same confidence to start coding and supporting dozens of yaml files in order to get a custom and beauty Lovelace. There is where I had the idea of simplify the process.
Basically, this tool is composed of different themes, and each theme contains it’s own cards. Each card (each node), have the Lovelace code behind it. Each of those cards, generates a node within this tool, being able to connect them between themselves, generating the Lovelace Code. Then, it is as simple as copy and paste that code from this tool, to HA, and that’s it! You will have your custom view!
These templates are really easy to do! They are yaml files, so if you are familiar with HA, you know them.
Right now I’m working on implemeting my own theme (90% of the style was based on a lovelace that a reddit user posted some time ago. I cannot remember your name, but dude… it’s awesome! Thanks) within this tool, but at time of release of it, you will be able to create your own themes.
This is the theme that I’m implemeting here right now:
)
And this is how the LightsView gets generated using this tool
Each node contains it’s own part of code, and connecting them, generates the whole code for the whole view.
This is how the `LightNode` template looks like:
type: custom:decluttering-card
template: color_light_button variables:
- entity: {{ entity }}
- name: {{ name }}
And this is the code generated by the graph the I posted above:
title: Lights
icon: mdi:home
path:
visible: false
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: view_title
variables:
- title: Lights
- type: horizontal-stack
cards:
- type: custom:button-card
template: shoulder_blank_card
- type: custom:layout-card
min_columns: 1
max_columns: 3
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: title_button_card
variables:
- name: Salon
- type: grid
columns: 3
square: true
cards:
- type: custom:decluttering-card
template: color_light_button
variables:
- entity: light.salon
- name: Salon
- type: custom:decluttering-card
template: color_light_button
variables:
- entity: light.luz_del_mueble
- name: Luz del mueble
Easy right? And you can create as many nodes as you want!
There are still a lot of things to do, but I hope you like it!
I’m looking to release within this or next week.
Let me know what you think guys!
but a stupid question: how do I add/create Nodes?
