There is of course an automatically generated lovelace panel that organises stuff in groups of rooms. It quickly gets untidy by including every damn entity.
That’s true. But i can’t really choose that when i add the integration.
I can deactivate the entity afterwards or take control over my dashboard. What i thought of was an autogenerated dashboard with a simple hide/show option for entities, for example.
That existed a long time ago. There was an option to hide entities from the autogenerated lovelace. But that was deprecated and removed.
that was hide_entity:
?
After some quick research i understand why this was removed and found this topic Lovelace and hiding entities - #24 by bcwhite. But i still think for better UX this option would be an improvement.
We have blueprints and we have integrations. Why don’t we combine them? Often you see on the documentation page of the integration how you can setup certain triggers automations etc. But why can’t a blueprint be attached to an integration? This makes setting up advanced automations for integrations a breeze.
So after integration config flow you would get an option to go over automation flow where you can set the fields for you automation to work with your setup.
This is an option because there are always other ways to setup automations. So for hardcore users this won’t break anything.
On the backside it uses a blueprint with version number. So when a new version of the integration appears your automation could also be updated. It sees the new version of the blueprint and it could update the automation.
Let me know what you think
Thanks and welcome!
Imo the value of blueprints is that they are integration and entity agnostic. It doesn’t matter what light, switch, lock, etc. that you are using, you can apply the same blueprint to it.
Blueprints are quite general I know. But the usefulness of them will be only extended if certain blueprints are in conjuncture with integration. For example if you have a water-heater it would be awesome when you install that integration that it detect you solar panel pulls solar forecast and make the water heat when the solar forecast is at the max prediction. Maybe we don’t need them coupled but a smart system that can suggest blueprints on the integrations you have.
So that is what I mean link them more together. Now you need to make a plan and gather/find them yourself.
Also I think you can make automation quite specific for an integration if the integration is quite specific;)
A GUI that allows me to;
- Place cards anywhere I want, relative or fixed
- Create cards and change their looks in real time
- Place icons, text, values, toggles inside cards as I see fit
IMHO Home Assistant suffers from the same issues as Linux dists do; it’s great, but it’s not usable unless you invest time and effort into understanding how to use it by text/console/coding, and this hinders the boarder mainstream users.
2 (really) minor improvements I can think of at the moment:
- An easier way to manipulate the data in the energy tab, without the need of learning SQL commands. For now even a reset / clear data button to clear number prior to some selectable datetime would help.
- Lovelace: Save and Continue - Feature Requests - Home Assistant Community (home-assistant.io)
Hey that sounds a lot like something I custom built. Mine is exposing lights per room by default as these are the most common items I tend to need to interact with, but other stuff like scenes, cameras, curtains, etc are on the expanded state.
I’m a product designer and I’d honestly love to help ship something like this as default in HA, would do a world of difference to get people onboard (eg, get our partners to buy into home automation ) and make it more usable out of the box.
I took inspiration from Philips Hue and HomeKit to make it more app-like in terms of visual presentation and functionality.
Edit: including the same view as it appears on mobile.
(nevermind all the unavailable temperature sensors, I’ve been postponing giving them new batteries for a while)
Is it feasible for automation blueprints to get updated after they have been used? That would be awesome and open up all kinds of possibilities.
I guess it should be possible. You just fill in fields and when blueprint updates you get for example en extra field.
So if the automation the blueprint created inherit the blueprint. (blueprint should be for example greyed out for deletion, otherwise it breaks the automation) If you update the blueprint the inherit code wil be updated and extra fields will be available in the automation.
But for this the blueprints should be more maintained like integrations. So that they are in main repository (HACS for outside the repository) so that there is easy tracking if a blueprint is updated.
The next thing is that we should have some AI that can suggest blueprints on the integrations you have. So if you have a room with lights and a sensor. It should suggest some blueprints that can setup routines. If you have solar panels and water heater. That is setup an heating automation based on solar forecast.
Just like you get now suggested integrations for the broadcast of devices you have in your network.
Do you have any code for that?
Sure, I’m using a mix of fold-entity-row
, multiple-entity-row
, card-mod
, hui-element
, and slider-entity-row
(only used for curtains), all installed via HACS.
Here’s the code for one of the cards if you want to give it a shot. There are a few CSS vars sprinkled throughout which are colours I defined in themes.yaml
so I only had to update them in one place if needed.
type: entities
style: |
ha-card {
background: {% if is_state('light.kitchen', 'on') %}
var(--card-on) {% endif %};
}
ha-card .card-content {
padding: 12px 0 12px 12px;
}
entities:
- type: custom:fold-entity-row
padding: 0
style:
.: |
#head {
--toggle-icon-width: 24px !important;
}
#head ha-icon {
display: flex;
align-items: center;
height: 52px;
padding-right: 8px;
padding-left:4px;
border-left:1px solid var(--divider-color);
}
#items[open] {
padding-right: 12px;
}
head:
entity: light.kitchen
type: custom:multiple-entity-row
name: 🍽 Kitchen
secondary_info:
entity: sensor.multi_temperature_kitchen
name: ' '
show_state: false
state_color: true
toggle: false
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
div.info {
margin-left: 0;
}
.: |
.entities-row .entity:not(:last-of-type) {
margin-right: 2px !important;
}
.entities-row .entity span {
display: block;
margin-bottom: -8px;
}
entities:
- entity: light.cabinet_top
name: Top
icon: true
state_color: true
styles:
width: 44px
tap_action:
action: toggle
hold_action:
action: more-info
- entity: light.cabinet_spots
name: Spots
icon: mdi:wall-sconce-flat
state_color: true
styles:
width: 44px
tap_action:
action: toggle
hold_action:
action: more-info
- entity: light.cabinet_strip
name: Strip
icon: true
state_color: true
styles:
width: 44px
tap_action:
action: toggle
hold_action:
action: more-info
- entity: light.kitchen_ceiling
name: Ceiling
icon: true
styles:
width: 44px
tap_action:
action: toggle
hold_action:
action: more-info
- entity: light.kitchen
name: All
icon: true
state_color: true
styles:
width: 44px
tap_action:
action: toggle
hold_action:
action: more-info
entities:
- type: section
- type: custom:hui-horizontal-stack-card
cards:
- color: var(--bg-button)
color_type: card
label: Ceiling
name: Ceiling
show_icon: false
show_label: true
show_name: false
styles:
card:
- width: auto
- height: 36px
- padding: 0 16px
- border-radius: 36px
- font-size: 14px
- margin-top: 8px
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.kitchen_ceiling_only
transition: 1
type: custom:button-card
- color: var(--bg-button)
color_type: card
label: Dim
name: Dim
show_icon: false
show_label: true
show_name: false
styles:
card:
- width: auto
- height: 36px
- padding: 0 16px
- border-radius: 36px
- font-size: 14px
- margin-top: 8px
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.kitchen_low_light
transition: 1
type: custom:button-card
- color: var(--bg-button)
color_type: card
label: Worktop
name: Worktop
show_icon: false
show_label: true
show_name: false
styles:
card:
- width: auto
- height: 36px
- padding: 0 16px
- border-radius: 36px
- font-size: 14px
- margin-top: 8px
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.kitchen_worktop
transition: 1
type: custom:button-card
- type: section
- type: custom:hui-horizontal-stack-card
style: |
#root {
flex-wrap: wrap;
padding-bottom: 4px;
}
button-card {
margin: 0 !important;
margin-right: 12px !important;
margin-top: 12px !important;
}
cards:
- type: custom:button-card
entity: light.kitchen
name: All
color: auto
size: 24px
tap_action:
action: toggle
hold_action:
action: more-info
style: |
ha-card:active {
transform: scale3d(0.9,0.9,1);
}
styles:
img_cell:
- justify-content: start
- align-items: start
card:
- width: 80px
- height: 80px
- padding: 8px
- border-radius: 12px
- font-size: 14px
- background: var(--bg-button)
name:
- justify-self: start
icon:
- height: 24px
state:
- value: 'on'
styles:
card:
- box-shadow: 0 2px 12px rgba(0,0,0,0.3)
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- type: custom:button-card
entity: light.kitchen_ceiling
name: Ceiling
color: auto
size: 24px
tap_action:
action: toggle
hold_action:
action: more-info
style: |
ha-card:active {
transform: scale3d(0.9,0.9,1);
}
styles:
img_cell:
- justify-content: start
- align-items: start
card:
- width: 80px
- height: 80px
- padding: 8px
- border-radius: 12px
- font-size: 14px
- background: var(--bg-button)
name:
- justify-self: start
icon:
- height: 24px
state:
- value: 'on'
styles:
card:
- box-shadow: 0 2px 12px rgba(0,0,0,0.3)
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- type: custom:button-card
entity: light.cabinet_strip
name: Strip
color: auto
size: 24px
tap_action:
action: toggle
hold_action:
action: more-info
style: |
ha-card:active {
transform: scale3d(0.9,0.9,1);
}
styles:
img_cell:
- justify-content: start
- align-items: start
card:
- width: 80px
- height: 80px
- padding: 8px
- border-radius: 12px
- font-size: 14px
- background: var(--bg-button)
name:
- justify-self: start
icon:
- height: 24px
state:
- value: 'on'
styles:
card:
- box-shadow: 0 2px 12px rgba(0,0,0,0.3)
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- type: custom:button-card
entity: light.cabinet_top
name: Top
color: auto
size: 24px
tap_action:
action: toggle
hold_action:
action: more-info
style: |
ha-card:active {
transform: scale3d(0.9,0.9,1);
}
styles:
img_cell:
- justify-content: start
- align-items: start
card:
- width: 80px
- height: 80px
- padding: 8px
- border-radius: 12px
- font-size: 14px
- background: var(--bg-button)
name:
- justify-self: start
icon:
- height: 24px
state:
- value: 'on'
styles:
card:
- box-shadow: 0 2px 12px rgba(0,0,0,0.3)
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- type: custom:button-card
entity: light.cabinet_spots
name: Spots
color: auto
size: 24px
tap_action:
action: toggle
hold_action:
action: more-info
style: |
ha-card:active {
transform: scale3d(0.9,0.9,1);
}
styles:
img_cell:
- justify-content: start
- align-items: start
card:
- width: 80px
- height: 80px
- padding: 8px
- border-radius: 12px
- font-size: 14px
- background: var(--bg-button)
name:
- justify-self: start
icon:
- height: 24px
state:
- value: 'on'
styles:
card:
- box-shadow: 0 2px 12px rgba(0,0,0,0.3)
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- type: section
- type: custom:hui-horizontal-stack-card
style:
.: |
#root {
padding-top: 8px;
}
cards:
- type: picture-entity
entity: camera.kitchen
camera_image: camera.kitchen
show_state: false
show_name: false
aspect_ratio: 64%
- type: markdown
content: []
style: |
ha-card {
background: transparent;
}
- type: markdown
content: []
style: |
ha-card {
background: transparent;
}
I use data analysis dashboarding tools at work a bit (PowerBi and Tableau).
I particularly like Tableau’s UX for building dashboards.
You see icons for the different cards on one side then drag and drop them onto the page. You can add vertical/horizontal stacks and cards can be fixed or full width.
I can see this workflow working well for Home Assistant dashboard builds.
Looks nice!
Or something like this to start 2021.11: Icon picker, device links and entity categories - Home Assistant
Discord channels were reconfigured. Start with the getting started area and give yourself access to the dev channels.