A different take on designing a Lovelace UI

I´m not sure if these is the most elegant way but I used it like this in my ui_lovelace.yaml:

                  - type: custom:button-card
                    entity: light.licht_wohnzimmer_decke_l2
                    name: Front
                    state_display: >
                      [[[
                        if (variables.state === 'off') {
                          return 'Aus';
                        }
                        if (variables.state === 'on') {
                          return 'Ein';
                        }
                            ]]]
#                    show_state: false
                    template:
                      - homekit_light
                      - icon_shade

Michael

of course you are absolutely right, before 2023.4 it took from the base template the values ​​open closed or on and off from the entity class and therefore if it was opening and closing automatically I saw open or closed while now it is no longer like this after the update… very strange

I added the language in according to your format, but it still displays in English.

1 Like

你好,能不能分享一下你的sidebar配置

This might help.

Without more details I can help more, keep in mind this is not a help center for all home assistance issues, and this sounds like a home assistant issue not an issue with the dashboard.

I don’t know why button card is not translated anymore, but some translations straight up disappeared.

For example inside ha container /usr/src/homeassistant/homeassistant/components/media_player/translations/ compare en.json and sv.json.

I’m guessing instead of migrating translations to a new keys devs deleted them instead so it has to be translated again?

1 Like

image
image
image

language: zh-cn

invalid RFC 5646 formatted language for dictionary value @ data[‘language’]

检查配置重新启动

mib1185 commented 3 days ago
with 2023.4 the ability to translate entity names has been introduced in the HA core and already many integrations implemented this feature (for details, see the release notes). With this there are also changes for custom integrations necessary, which the maintainers have to care about.

Mushroom card already fixed it.
Hopefully soon also button cards

Hi @Laffer
Thank you for your good job in addition to @Mattias_Persson with this awesome project
i try to reproduce your dashboard but your github miss some files i think
can you please update your Github with the latest files ? :kissing_closed_eyes:
In exemple : browser_mod is not updated on popup cards
and some popup cards are missing :blush:

1 Like

Hello @Br3b can you share the code of your weather and a calendar cards?
Thanks!
Davide

Sorry been away for work below code for group lights with animation :slight_smile:

add this to your icons yaml

icon_hue:bulb-group:
  styles:
    custom_fields:
      icon:
        - width: 77%
        - margin-left: -14%
        - margin-top: 1%
  custom_fields:
    icon: >
      [[[
        let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
        return `
          <svg viewBox="0 0 50 50">
            <style>
              @keyframes on {
                0% {
                  transform: scale(0.85);
                }
                20% {
                  transform: scale(1.1);
                }
                40% {
                  transform: scale(0.95);
                }
                60% {
                  transform: scale(1.03);
                }
                80% {
                  transform: scale(0.97);
                }
                100% {
                  transform: scale(1);
                }
              }
              .on {
                animation: on 0.8s;
                transform-origin: center;
              }
            </style>
            <path fill="#9da0a2" d="M22.9 1.163C19.303 1.419 16.596 2.011 14.716 2.953 12.66 3.982 11.8 5.327 11.8 7.513 11.8 9.142 12.183 10.569 13.246 12.9L13.771 14.05 14.86 14.323C20.905 15.84 30.818 15.815 36.719 14.268L37.55 14.05 37.99 13.15C40.139 8.76 40.11 5.483 37.907 3.732 36.43 2.557 33.973 1.766 30.5 1.348 29.205 1.192 24.202 1.07 22.9 1.163M8.825 4.054C6.257 4.524 4.385 5.313 3.355 6.361 2.519 7.21 2.103 8.679 2.299 10.085 2.496 11.508 2.771 12.347 3.619 14.12L4.131 15.19 5.191 15.444C6.916 15.856 8.454 16.064 11.775 16.333 12.181 16.366 12.211 16.135 11.861 15.668 11.227 14.825 10.07 12.081 9.656 10.439 9.032 7.969 9.118 6.121 9.95 4.075 10.036 3.864 9.883 3.861 8.825 4.054M41.557 4.499C42.142 5.939 42.254 7.963 41.852 9.85 41.483 11.586 40.168 14.844 39.48 15.728 38.965 16.39 39.028 16.405 41.4 16.192 42.996 16.048 44.951 15.744 46.211 15.443L47.274 15.189 47.634 14.419C48.775 11.977 49.044 11.024 49.046 9.4 49.048 7.783 48.853 7.236 47.955 6.337 46.815 5.196 44.843 4.44 41.729 3.95L41.307 3.884 41.557 4.499M14.641 16.46C14.873 17.061 15.738 20.317 16.09 21.914 17.061 26.327 17.7 31.304 17.7 34.457 17.7 35.722 17.813 36.057 18.515 36.886L19.1 37.575 20.425 37.713C22.177 37.894 28.934 37.9 30.8 37.721L32.15 37.591 32.674 37.021C33.487 36.136 33.6 35.833 33.6 34.543 33.602 31.529 34.136 27.087 35.01 22.839 35.39 20.991 36.225 17.711 36.546 16.809 36.632 16.567 36.69 16.358 36.676 16.345 36.662 16.332 36.11 16.427 35.45 16.556 29.888 17.649 22.073 17.682 16.4 16.639 15.657 16.502 14.941 16.363 14.809 16.33 14.602 16.279 14.578 16.298 14.641 16.46M4.924 17.364C4.953 17.466 5.185 18.267 5.439 19.144 6.688 23.453 7.533 28.567 7.688 32.764 7.767 34.898 7.766 34.894 8.662 35.875 9.042 36.292 9.069 36.303 9.95 36.405 11.189 36.549 15.4 36.653 15.4 36.539 15.4 36.489 15.354 36.292 15.298 36.099 15.242 35.907 15.173 35.03 15.145 34.15 14.994 29.418 14.045 23.561 12.654 18.778 12.464 18.126 12.53 18.154 10.95 18.047 9.297 17.934 5.777 17.448 5.06 17.234 4.912 17.19 4.882 17.217 4.924 17.364M45.35 17.404C44.126 17.649 41.504 17.975 40.075 18.06L38.9 18.129 38.704 18.79C37.386 23.225 36.446 28.916 36.201 33.95 36.147 35.05 36.075 36.096 36.04 36.275L35.977 36.6 37.514 36.598C38.934 36.597 40.8 36.489 41.911 36.345 42.324 36.291 42.424 36.222 42.888 35.668 43.173 35.328 43.446 34.893 43.496 34.7 43.545 34.508 43.633 33.428 43.691 32.3 43.932 27.605 44.894 22.301 46.342 17.675 46.452 17.323 46.459 17.203 46.37 17.212 46.304 17.218 45.845 17.304 45.35 17.404M40.8 38.106C40.388 38.149 38.889 38.217 37.469 38.258L34.888 38.332 34.544 38.734C34.31 39.008 34.201 39.234 34.204 39.443 34.206 39.612 33.995 41.107 33.735 42.765L33.261 45.78 33.805 46.43C34.623 47.406 34.838 47.5 36.249 47.5 37.697 47.5 37.896 47.417 38.733 46.461 39.076 46.07 39.64 45.48 39.988 45.151 40.335 44.821 40.66 44.475 40.71 44.381 40.787 44.238 41.8 38.4 41.8 38.101 41.8 38.045 41.744 38.007 41.675 38.015 41.606 38.023 41.213 38.064 40.8 38.106M9.544 38.312C9.575 38.443 9.801 39.8 10.048 41.328 10.296 42.855 10.562 44.229 10.64 44.381 10.718 44.532 11.09 44.95 11.466 45.31 11.842 45.669 12.443 46.281 12.8 46.67 13.404 47.326 13.493 47.385 14.05 47.501 14.783 47.653 16.168 47.574 16.59 47.355 17.048 47.118 18.106 45.815 18.048 45.559 17.907 44.94 17.189 40.078 17.178 39.67 17.168 39.265 17.106 39.121 16.788 38.76L16.41 38.33 13.73 38.264C12.256 38.228 10.699 38.17 10.27 38.135L9.489 38.073 9.544 38.312M19.7 39.714C19.701 40.158 20.708 46.225 20.828 46.508 20.908 46.696 21.28 47.143 21.654 47.5 22.029 47.858 22.629 48.505 22.988 48.939 23.857 49.988 24.099 50.095 25.623 50.098 27.192 50.101 27.41 50.008 28.276 48.966 28.647 48.52 29.257 47.864 29.632 47.508 30.007 47.153 30.385 46.726 30.471 46.559 30.618 46.275 31.732 39.699 31.648 39.615 31.627 39.593 30.777 39.633 29.76 39.702 27.971 39.824 22.245 39.784 20.425 39.636 19.851 39.59 19.7 39.606 19.7 39.714"/>
            <path class="${state} light-color" d="M22.9 1.163C19.303 1.419 16.596 2.011 14.716 2.953 12.66 3.982 11.8 5.327 11.8 7.513 11.8 9.142 12.183 10.569 13.246 12.9L13.771 14.05 14.86 14.323C20.905 15.84 30.818 15.815 36.719 14.268L37.55 14.05 37.99 13.15C40.139 8.76 40.11 5.483 37.907 3.732 36.43 2.557 33.973 1.766 30.5 1.348 29.205 1.192 24.202 1.07 22.9 1.163M8.825 4.054C6.257 4.524 4.385 5.313 3.355 6.361 2.519 7.21 2.103 8.679 2.299 10.085 2.496 11.508 2.771 12.347 3.619 14.12L4.131 15.19 5.191 15.444C6.916 15.856 8.454 16.064 11.775 16.333 12.181 16.366 12.211 16.135 11.861 15.668 11.227 14.825 10.07 12.081 9.656 10.439 9.032 7.969 9.118 6.121 9.95 4.075 10.036 3.864 9.883 3.861 8.825 4.054M41.557 4.499C42.142 5.939 42.254 7.963 41.852 9.85 41.483 11.586 40.168 14.844 39.48 15.728 38.965 16.39 39.028 16.405 41.4 16.192 42.996 16.048 44.951 15.744 46.211 15.443L47.274 15.189 47.634 14.419C48.775 11.977 49.044 11.024 49.046 9.4 49.048 7.783 48.853 7.236 47.955 6.337 46.815 5.196 44.843 4.44 41.729 3.95L41.307 3.884 41.557 4.499"/>
          </svg>
        `;
      ]]]

then in your lovelace just add : - icon_hue:bulb-group under your template section :slight_smile:

      - type: custom:button-card
        entity: group.stalllights
        name: Stalls
        double_tap_action: !include /config/popup/lightgroup.yaml
        template:
          - base
          - icon_hue:bulb-group
          - loader
2 Likes

Did you make these icons? Would love the garage icon if so! Looks great.

Hey Mason,

you’ve helped me a few times already, so sorry for all the questions. I’ve made a few icons in photoshop but not sure how to animate them. I can animate in after effects but not sure what to export or how to get that into HA. Any documentation or videos that show this process? Also, would you possible share the icons you’ve made, specifically the garage icon? This UI is the most complicated thing I’ve done in HA and its teaching me a ton, so thanks for all your help!

3 Likes

I don’t have the skills to create a simple icon or an animated icons, all the icons I have are from this thread or from this method A different take on designing a Lovelace UI - #3799 by masoncrawford1994

Hi all again. Need some help.

how do I set up the pperson persistence.
I see the yaml file and i know I need mqtt but beyind that i feel like im 2 years old …:stuck_out_tongue:

Hi, i like your bottom columns. I’m stuggling both with update part and the RPi pop-up with info. Is this anything you could share with me? Really nice UI!

Is there anyway to improve the image-quality of the plex-media button?

image

Referring to image_resolution in the recently_added sensor