User Experiences and Designers

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.

1 Like

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.

1 Like

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.

@petro

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.

1 Like

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;)

1 Like

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.

4 Likes

2 (really) minor improvements I can think of at the moment:

  1. 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.
  2. Lovelace: Save and Continue - Feature Requests - Home Assistant Community (home-assistant.io)
2 Likes

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 :grinning_face_with_smiling_eyes:) 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)

6 Likes

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? :slight_smile:

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;
              }
2 Likes

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.

a9322d5-Gif_-_hiding_a_worksheet.mov

Looks nice!

Or something like this to start :smiling_face_with_three_hearts: 2021.11: Icon picker, device links and entity categories - Home Assistant

1 Like

@marcelod

thank you for your built, i modified it a little bit for my usage.



1 Like

Following like from blog post, the devs_ux channel is closed. And no way to know why and what:

1 Like

Discord channels were reconfigured. Start with the getting started area and give yourself access to the dev channels.

1 Like