A different take on designing a Lovelace UI

[Abeksis]

thank you for the answer. But that is not the same background

[masoncrawford1994 (mason)]

try this post

A different take on designing a Lovelace UI

hi Dave, yes it is possible to add new icons, this I not to hard but a little bit of work you have 2 option’s for the speaker you could use “icon_monitors” as a template like so - type: custom:button-card entity: media_player.sonos name: "Sonos" template: - media - icon_monitors however adding new icons is a good skill to have I would recommend the following in the button_card_templates folder you add a new file named my_icons.yaml in that file add the following …

[larryo108 (Larry Overn)]

So coming back to this. Is there anyway to have the circle use some sort of if/else statement when evaluating the state. Instead of just on or off?

[rauwman]

Hey guys, i worked the last days on some new icons. I modified them so you don’t need to adapte your theme or extra style.
The first two are with a glow light effect:

icon_bed_lamp:
  styles:
    custom_fields:
      icon:
        - width: 100%
        - margin-top: -1%
        - margin-left: -13%
        - fill: >
            [[[
              return variables.state_on
                  = '#9da0a2';
            ]]]
  custom_fields:
    icon: >
      [[[
        let style = `
          <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 = `
            <path d="M14.8,17.6v13.2h2.4V17.6 M9.4,31.7h13.1c0.5,0,0.9-0.3,0.9-0.8c0-1-0.9-1.7-2.3-1.7H10.8 c-1.4,0-2.3,0.7-2.3,1.7C8.5,31.4,8.9,31.7,9.4,31.7z"/>
          `,
          filter = `
            <filter id="blurMe">
              <feGaussianBlur in="SourceGraphic" stdDeviation="0.3" />
            </filter>
          `;
        if (variables.state_on) {
            return `
              <svg viewBox="0 0 50 50"> ${style} ${filter} ${path}
              <ellipse class="on" fill="#ffcc00" cx="16.1" cy="16.5" rx="9.4" ry="3.8" filter="url(#blurMe)" opacity="0.6"/>
              <path class="on" fill="#3182b7" d="M16,17.6c3.2,0,6.4-0.2,8.9-0.5c2-0.3,2.6-1.6,1.9-3.4L23,3c-0.7-1.9-2.4-2.8-4.8-2.8h-4.4 C11.4,0.2,9.7,1.1,9,3L5.1,13.7c-0.7,1.8-0.1,3.1,1.9,3.4C9.6,17.5,12.8,17.6,16,17.6zM17.2,17.6v-0.7h-2.4v0.7"/>
              </svg>
            `;
        } else {
            return `
              <svg viewBox="0 0 50 50"> ${style} ${path}
              <path d="M16,17.6c3.2,0,6.4-0.2,8.9-0.5c2-0.3,2.6-1.6,1.9-3.4L23,3c-0.7-1.9-2.4-2.8-4.8-2.8h-4.4 C11.4,0.2,9.7,1.1,9,3L5.1,13.7c-0.7,1.8-0.1,3.1,1.9,3.4C9.6,17.5,12.8,17.6,16,17.6zM17.2,17.6v-0.7h-2.4v0.7"/>
              </svg>
            `;
        }
      ]]]

icon_shade_long:
  styles:
    custom_fields:
      icon:
        - width: 140%
        - margin-top: -1%
        - margin-left: -25%
        - fill: >
            [[[
              return variables.state_on
                  = '#9da0a2';
            ]]]
  custom_fields:
    icon: >
      [[[
        let style = `
          <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 = `
            <path d="M15.7,13v13.9c-2.9,0.1-5.2,0.7-5.8,1.5c-0.1,0.1-0.1,0.2-0.1,0.4V30c0,1,3.1,1.9,6.9,1.9s6.9-0.8,6.9-1.9v-1.2
              c0-0.9-2.6-1.7-5.9-1.8V13"/>
          `,
          filter = `
            <filter id="blurMe">
              <feGaussianBlur in="SourceGraphic" stdDeviation="0.3" />
            </filter>
          `;
        if (variables.state_on) {
            return `
              <svg viewBox="0 0 50 50"> ${style} ${filter} ${path}
              <ellipse class="on" fill="#ffcc00"cx="16.7" cy="12.2" rx="6.6" ry="2.7" filter="url(#blurMe)" opacity="0.6"/>
              <path class="on" fill="#3182b7" d="M21.6,13.3c1.2-0.3,1.9-0.8,2.1-1.2c0-0.1,0-0.1,0-0.2v-9c0-0.1,0-0.1,0-0.2c-0.2-0.4-0.8-0.8-1.9-1.2
                c-2.8-0.8-7.3-0.8-10,0c-1.1,0.3-1.8,0.7-1.9,1.2c0,0.1,0,0.1,0,0.2v9c0,0.1,0,0.1,0,0.2c0.2,0.4,0.9,0.9,2.1,1.2
                c1.1,0.3,2.5,0.5,3.9,0.5h2C19.1,13.7,20.5,13.6,21.6,13.3z M13.2,4.5c-2-0.4-2-1-0.1-1.4c2-0.4,5.2-0.4,7.2,0
                c1.9,0.4,1.9,1-0.1,1.4C18.2,4.9,15.1,4.9,13.2,4.5z"/>
              <path class="on" fill="#ffcc00" d="M16.7,0.2c-3.6,0-6.6,0.7-6.2,1.8c0.9,2.5,2.1,2.8,6.2,2.8c4.2-0.1,5.4-0.3,6.2-2.8C23.3,0.9,20.3,0.2,16.7,0.2z" filter="url(#blurMe)" opacity="0.6"/>
              </svg>
            `;
        } else {
            return `
              <svg viewBox="0 0 50 50"> ${style} ${path}
              <path d="M21.6,13.3c1.2-0.3,1.9-0.8,2.1-1.2c0-0.1,0-0.1,0-0.2v-9c0-0.1,0-0.1,0-0.2c-0.2-0.4-0.8-0.8-1.9-1.2
                c-2.8-0.8-7.3-0.8-10,0c-1.1,0.3-1.8,0.7-1.9,1.2c0,0.1,0,0.1,0,0.2v9c0,0.1,0,0.1,0,0.2c0.2,0.4,0.9,0.9,2.1,1.2
                c1.1,0.3,2.5,0.5,3.9,0.5h2C19.1,13.7,20.5,13.6,21.6,13.3z M13.2,4.5c-2-0.4-2-1-0.1-1.4c2-0.4,5.2-0.4,7.2,0
                c1.9,0.4,1.9,1-0.1,1.4C18.2,4.9,15.1,4.9,13.2,4.5z"/>
              </svg>
            `;
        }
      ]]]

icon_side_lamp:
  styles:
    custom_fields:
      icon:
        - width: 140%
        - margin-top: -1%
        - margin-left: -5%
        - fill: >
            [[[
              return variables.state_on
                  = '#9da0a2';
            ]]]
  custom_fields:
    icon: >
      [[[
        let style = `
          <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 = `
              <path d="M21.9,5.1c0-0.1,0-0.1,0-0.2c-0.1-1-0.7-1.9-1.5-2.2c-0.3-0.1-0.6-0.2-1-0.2c-0.9,0-1.7,0.5-2.2,1.3
                  c-0.2,0.4-0.4,0.9-0.4,1.4c0,0,0,0,0,0.1l-4.9,2.7c0,0,0,0,0,0c-0.2-0.1-0.3-0.2-0.5-0.3c-0.3-0.1-0.6-0.2-1-0.2
                  c-0.9,0-1.7,0.5-2.2,1.3H3.3V3.8C3.3,2.1,2.5,1,1.2,1C0.6,1,0.2,1.4,0.2,2v17.9c0,0.6,0.4,1,1.1,1c1.2,0,2.1-1.1,2.1-2.8v-6.8h4.9
                  c0.4,0.8,1.2,1.3,2.2,1.3c1.3,0,2.3-1,2.5-2.3l5.2-2.8c0,0.1,0,0.2,0,0.2l0,2.1c0.4-0.1,0.8-0.2,1.2-0.2c0.4,0,0.8,0.1,1.2,0.2
                  l0-2.1c0-0.1,0-0.2-0.1-0.3C21.3,7.1,21.9,6.2,21.9,5.1z"/>
          `;
          if (variables.state_on) {
              return `
              <svg viewBox="0 0 50 50"> ${style} ${path}
              <path class="on" fill="#ffcc00" d="M16.2,30.3c1.7,1.8,4.5,1.7,6.2,0c0.7-0.8,1.2-1.8,1.2-2.9H15C15,28.5,15.5,29.6,16.2,30.3z"/>
              <path class="on" fill="#3182b7" d="M29.6,23.1c-1.5-3-3.7-5.6-6.9-8.6l0-1.3c0.1-1.6-0.8-2.9-2.2-3.3c-0.4-0.1-0.8-0.2-1.2-0.2c-0.4,0-0.8,0.1-1.2,0.2
                  c-1.4,0.5-2.2,1.7-2.2,3.3l0.1,1.3c-0.3,0.3-0.6,0.5-0.8,0.8c-0.9,0.9-1.8,1.7-2.5,2.6c-1.5,1.7-2.7,3.4-3.6,5.3
                  c-0.7,1.3-0.2,2.6,1.2,2.6l18.2,0C29.8,25.7,30.3,24.4,29.6,23.1z"/>
              </svg>
              `;
          } else {
              return `
              <svg viewBox="0 0 50 50"> ${style} ${path}
              <path d="M16.2,30.3c1.7,1.8,4.5,1.7,6.2,0c0.7-0.8,1.2-1.8,1.2-2.9H15C15,28.5,15.5,29.6,16.2,30.3z"/>
              <path d="M29.6,23.1c-1.5-3-3.7-5.6-6.9-8.6l0-1.3c0.1-1.6-0.8-2.9-2.2-3.3c-0.4-0.1-0.8-0.2-1.2-0.2c-0.4,0-0.8,0.1-1.2,0.2
                  c-1.4,0.5-2.2,1.7-2.2,3.3l0.1,1.3c-0.3,0.3-0.6,0.5-0.8,0.8c-0.9,0.9-1.8,1.7-2.5,2.6c-1.5,1.7-2.7,3.4-3.6,5.3
                  c-0.7,1.3-0.2,2.6,1.2,2.6l18.2,0C29.8,25.7,30.3,24.4,29.6,23.1z"/>
              </svg>
              `;
          }
      ]]]

will do more in the next time.
And big thanks to @Mattias_Persson for your work. I have a lot of fun with adapting it to my needs.

[Abeksis]

Thanks for your hard work.

Could you please fix the code you attached here. There are spaces in the code you attached here.

Thanks

[rauwman]

Hi will try to do it after work. Don’t know why it’s posted like this. Just copy/paste

EDIT: @Abeksis ok corrected. Hope its showing right now for you

[Br3b]

Hi guys,
any idea, on how to achieve long calendar entries displaying in two lines instead of getting cut?

Template:

  widget_calendar:
    aspect_ratio: 1/1
    show_icon: false
    show_name: false
    show_state: false
    show_label: false
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: Kalender
        hide_header: false
        card:
          type: vertical-stack
          cards:
            - type: calendar
              entities:
                - calendar.karls_kalender
                - calendar.feiertage
              initial_view: dayGridMonth
              style: |
                ha-card {
                  box-shadow: none;
                }
    styles:
      grid:
        - grid-template-areas: |
            "giorno"
            "numero"
            "event1title"
            "event1"
        - grid-template-columns: auto
        - grid-template-rows: min-content min-content min-content 1fr
        - gap: 0%
        - overflow: hidden
      card:
        - color: |
            [[[
              if (states['sun.sun'].state == 'below_horizon'){
                return 'rgba(0, 0, 0, 0.6)';
              } else
                return 'rgba(255, 255, 255, 0.8)';
            ]]]         
        - background-color: |
            [[[
              if (states['sun.sun'].state == 'below_horizon'){
                return '#1c1c1e';
              } else
                return 'rgba(255, 255, 255, 0.8)';
            ]]]          
      custom_fields:
        event1title:
          - margin-left: 10%
          - padding-left: 4px
          - border-left: 4px blue solid
          - place-self: start
          - font-weight: 400
          - text-transform: uppercase
          - color: |
              [[[
                if (states['sun.sun'].state == 'below_horizon'){
                  return 'rgba(255, 255, 255, 0.8)';
                } else
                  return 'rgba(0, 0, 0, 0.6)';
              ]]]   
        event1:
          - font-size: 1vw
          - margin-left: 10%
          - place-self: start
          - font-weight: 400
          - color: |
              [[[
                if (states['sun.sun'].state == 'below_horizon'){
                  return 'rgba(255, 255, 255, 0.8)';
                } else
                  return 'rgba(0, 0, 0, 0.6)';
              ]]]   
        giorno:
          - margin-left: 10%
          - place-self: start
          - color: '#ff3b2f'
          - text-transform: uppercase
          - font-weight: 400
        numero:
          - margin-left: 10%
          - place-self: start
          - color: |
              [[[
                if (states['sun.sun'].state == 'below_horizon'){
                  return 'rgba(255, 255, 255, 0.8)';
                } else
                  return 'rgba(0, 0, 0, 0.6)';
              ]]]             
          - font-weight: 400
    custom_fields:
      giorno: |
        [[[ return `${states['sensor.pretty_date'].attributes.week_day}` ]]]
      numero: |
        [[[ return `${states['sensor.pretty_date'].attributes.day}` ]]]
      event1title: |
        [[[
          var gsDayNames = [
          'Sonntag',
          'Montag',
          'Dienstag',
          'Mittwoch',
          'Donnerstag',
          'Freitag',
          'Samstag'
          ];
        var date = states['calendar.karls_kalender'].attributes.start_time;
        var d = new Date(date);
        var dayName = gsDayNames[d.getDay()];
        return dayName
        ]]]
      event1: |
        [[[ return `${states['calendar.karls_kalender'].attributes.message}` ]]]
    extra_styles: |
      [[[
        return `
          #giorno {
            font-size: 0.95vw;
          }
          #numero {
            font-size: 1.9vw;
          }  
          #event1title {
            font-size: 0.8vw;
          }
          #event1 {
            font-size: 0.6vw;
          }  

          /* portrait */
          @media screen and (max-width: 1200px) {
            #numero {
              font-size: 4.5vw;
            }
            #giorno {
              font-size: 1.3vw;
            }      
            #event1title {
              font-size: 2vw;
            }
            #event1 {
              font-size: 2vw;
            }               
          }
          /* phone */
          @media screen and (max-width: 800px) {
            #giorno {
              font-size: 2vw;
            }              
            #numero {
              font-size: 4vw;
            {
            #event1title {
              font-size: 2vw;
            }
            #event1 {
              font-size: 2vw;
            }           
          }
        `
      ]]]

ui:

type: custom:button-card
entity: calendar.karls_kalender
template:
  - base
  - widget_calendar
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Kalender
      content:
        type: calendar
        entities:
          - calendar.karls_kalender
          - calendar.feiertage

[djoaza]

Add this

event1:
  - white-space: pre-wrap

[Abeksis]

No, you still have a problem there.

[rauwman]

ok re-checed all tree. Last one was not ok. Must wiok now. More will follow tomorrow.
Will Try to make a Github with a collection.

[falco1717]

Here is my take on the sidebar card for those interested.

GitHub - falco1717/sidebarHASS: Homeassistant layout with the sidebar card

[zs2766]

Hello everyone, after I recently upgraded my home assistant to the latest version, the switch status language of the card is displayed in English. I am using Simplified Chinese and the system language is also Chinese. I have tried to clear the browser cache, but it did not work. I tried to rollback to the old version and the language display is normal in Chinese. Is this a bug in the version? Or do I need to modify those configurations?

[zs2766]

Hello, I really like your sunrise card. Can you share the complete code and custom icons?

[Emad131 (Emad)]

Someone ?

GitHub - FunkeyFlo/ps5-mqtt: Integrate your PlayStation 5 with Home Assistant

Example pic in the url

[Markii2430]

Hello im having a problem after i copy all into my config file but this is my error

any idea where to start?

[Emad131 (Emad)]

Where do you put the code? and where to change camera in the code

[slofii (Michael)]

A different take on designing a Lovelace UI

Did anyone got a solution for the translation Problem? [image] Till Update 2023.3 or so there was the correct translation. Edit: Found a workariund with state_display in the base.yaml state_display: > [[[ if (variables.state === true) return variables.translate_unknown; if (entity.state == 'on') return 'An'; if (entity.state == 'off') return 'Aus'; if (entity.state == 'open') return 'Offen'; if (entity.state == 'opening') return 'Öffnen'; if (en…

[djoaza]

Add this if the graph is to be, for example, red:

                    style: |
                      .header, .value, .measurement {
                        display: none !important;
                      }
                      ha-card {
                        --accent-color: red;
                      }  

[bjortte]

@pex81

          - type: custom:button-card
            template: 
              - base
              - widget_phone
            variables:
              # iPhone 13mini
              entity_phone: sensor.ipex_battery_level
              entity_phone_battery_state: sensor.ipex_battery_state
              entity_picture_iphone: /local/apple/i12.png

Hi Pex! Where to i input those code strings?
And do you know how i can add a little circle without that iphone icon on me an my GF profile picture?

[bjortte]

Or maybe around the profile picture if possible

@pex81