A different take on designing a Lovelace UI

Share your Projects!
1990

Thanks but was already in my themes.yaml file…

frontend:
  themes:

    ####################################################
    #                                                  #
    #                      THEME                       #
    #                                                  #
    ####################################################

    Dark:
      #default dark mode
      primary-text-color: '#e0e1e1'
      primary-background-color: '#222627'
      secondary-background-color: '#202020'
      card-background-color: '#222627'
      primary-color: '#e0e1e1'
      app-header-text-color: var(--primary-text-color)
      app-header-background-color: var(--primary-background-color)
      table-row-background-color: var(--primary-background-color)
      table-row-alternative-background-color: var(--secondary-background-color)
      sidebar-background-color: var(--card-background-color)
      divider-color: var(--secondary-background-color)

      #edited
      ha-card-box-shadow: none
      ha-card-background: none
      grid-card-gap: 5%
      masonry-view-card-margin: 0px
      state-icon-color: '#fea00b'
      state-icon-active-color: '#3182b7'
      switch-checked-color: '#fea00b'
      switch-unchecked-button-color: '#3b4041'
      switch-unchecked-track-color: '#0c0d0d'
      paper-slider-knob-color: '#fea00b'
      paper-slider-knob-start-color: '#fea00b'
      paper-slider-pin-color: '#fea00b'
      paper-slider-active-color: '#626a6f'
      paper-slider-container-color: '#202020'
      mdc-dialog-scrim-color: rgba(0, 0, 0, 0.5)
      paper-toast-color: var(--primary-text-color)
      paper-toast-background-color: '#1b1b1bf2'
      vertical-stack-card-margin: 0

      #En +
      paper-item-icon-color: '#9da0a2'
      paper-item-icon-active-color: '#fea00b'
      #ha-card-header-color: 'rgba(255, 255, 255, 0.8)'
      #ha-card-header-font-size: 24px
      #bar-card-border-radius: '0.3em'

      #custom variables
      ha-card-background-color: rgba(34,38,39,0.9)
      ha-card-header-background-color: rgba(48,52,52,0.8)
      custom-layout-card-padding: 3.3vw
      custom-button-card-border-radius: 8%
      sidebar-time-font-size: 4vw
      sidebar-time-line-height: 3vw
      sidebar-font-size: 1.3vw
      sidebar-line-height: 1.6vw
      card-content-padding: 1.8em 2.2em 1.8em 2em

      lovelace-background: center / cover no-repeat url("/local/background.png") fixed

    ####################################################
    #                                                  #
    #                     CARD-MOD                     #
    #                                                  #
    ####################################################

      card-mod-theme: tablet

      card-mod-view: |
        .: |
          hui-view {
            background: none !important;
            min-height: 100vh
          }

        #################################################
        #                                               #
        #              GRID CARD HEADINGS               #
        #                                               #
        #################################################

        grid-layout$:
          hui-grid-card:
            $: |
              /* default */
              h1 {
                font-size: 2.5vw !important;
                line-height: 0 !important;
                font-family: SF Text !important;
                font-weight: 500 !important;
                color: rgba(255, 255, 255, 0.8) !important;
                padding: 1vw 0 2vw 0 !important;
              }
              /* portrait */
              @media screen and (max-width: 1200px) {
                h1 {
                  font-size: 3.3vw !important;
                  line-height: 1.1vw !important;
                }
              }
              /* phone */
              @media screen and (max-width: 800px) {
                h1 {
                  font-size: 5.5vw !important;
                  line-height: 6vw !important;
                  margin: 2vw 0 0 0 !important;
                }
              }

        #################################################
        #                                               #
        #               SWIPE CARD MARGIN               #
        #                                               #
        #################################################

            $swipe-card$:
              hui-horizontal-stack-card$:
                .: |
                  hui-conditional-card {
                    margin: 0 !important;
                  }

        #################################################
        #                                               #
        #            SIDEBAR VERTICAL-STACK             #
        #                                               #
        #################################################

        grid-layout$hui-vertical-stack-card$: |
          #root {
            background-color: rgba(0, 0, 0, 0.06);
            border-radius: 0;
            border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
            min-height: 100vh;
          }
          /* phone */
          @media screen and (max-width: 800px) {
            #root {
              background-color: rgba(0,0,0,0);
              border-right: none;
              min-height: 100%;
              margin-left: -0.8%;
              margin-bottom: -6%;
            }
          }

        #################################################
        #                                               #
        #             SIDEBAR BOTTOM ICONS              #
        #                                               #
        #################################################

        "grid-layout$hui-vertical-stack-card$hui-grid-card":
          .: |
            hui-grid-card {
              display: flex;
              flex: auto;
              align-items: flex-end;
            }

            /* phone */
            @media screen and (max-width: 800px) {
              hui-grid-card {
                position: absolute;
                right: 5.5vw;
              }
            }

          $: |
            #root {
              width: 100%;
              padding: 0 13% 25% 13%;
            }

            /* phone */
            @media screen and (max-width: 800px) {
              #root {
                padding: 0 0 0 55%;
              }
            }

          #conditional color
          "$hui-button-card:last-of-type$": |
            {% if is_state('binary_sensor.template_sidebar_update_color', 'on') %}

              ha-card, ha-state-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }

      card-mod-card: |
        .header .card-header {
          font-family: SF Text;
          letter-spacing: 0.005em;
          font-size: 1.6em;
          font-weight: 500;
          padding: 1em 0 0 1.68em;
          line-height: initial;
          cursor: default;
        }

        .content .card-content {
          padding: var(--card-content-padding);
        }

         /* * * * * * * * * * * * * * * * * *
          *                                 *
          *           BUTTON CARD           *
          *                                 *
          * * * * * * * * * * * * * * * * * */

        .type-button {
          display: block;
          --paper-item-icon-color: var(--state-icon-color);
          opacity: 0.2;
          transition: 0.4s;
          height: initial;
        }

        .type-button:hover {
          opacity: 0.5;
          transition: none;
        }

        .type-button:active {
          opacity: 0.7;
          transition: none;
        }

         /* * * * * * * * * * * * * * * * * *
          *                                 *
          *         CUSTOM BAR CARD         *
          *                                 *
          * * * * * * * * * * * * * * * * * */

        .type-custom-bar-card bar-card-name {
          padding-left: 0.25em;
        }

        .type-custom-bar-card bar-card-iconbar {
          padding-left: 0.23em;
        }

        .type-custom-bar-card bar-card-value {
          font-size: 1em;
          font-weight: 400;
          color: #e0e1e1;
          letter-spacing: 0.01em;
          text-shadow: none;
          margin-right: auto;
          margin-top: 5px;
        }

        .type-custom-bar-card bar-card-backgroundbar {
          background: none;
        }

        .type-custom-bar-card bar-card-background  {
          background: radial-gradient(circle, rgba(52, 57, 58, 0.1) 0%, rgba(17, 18, 18, 0.2) 75%);
          box-shadow: inset 0 0 25px #00000045;
          border-radius: 0.3em;
          overflow: hidden;
        }

      card-mod-more-info-yaml: |
        .: |
          app-toolbar {
            background: none !important;
          }

          .main-title {
            margin-top: 5px;
            font-family: SF Text;
            letter-spacing: 0.005em;
          }

          mwc-icon-button {
            margin-top: -2px;
            color: #9e9e9e;
          }

        "mwc-icon-button":
          $: |
            button > mwc-ripple {
              margin-top: 3px;
            }

        "layout-card$grid-layout$": |
            #root {
              margin: 0 !important;
            }

        $: |
          .mdc-dialog__scrim {
            -webkit-backdrop-filter: blur(1.5em);
            backdrop-filter: blur(1.5em);
            transition: none !important;
          }

          .mdc-dialog .mdc-dialog__container {
            background: none;
          }

          .mdc-dialog__surface {
            background: linear-gradient(180deg,
              var(--ha-card-header-background-color) 0%,
              var(--ha-card-header-background-color) 4.6em,
              var(--ha-card-background-color) 4.6em,
              var(--ha-card-background-color) 100%) !important;
            box-shadow: none !important;
            border-radius: 1em !important;
          }

          .mdc-dialog--closing {
            display: none !important;
          }


        #################################################
        #                                               #
        #            CUSTOM LIGHT POPUP CARD            #
        #                                               #
        #################################################

        "hui-entities-card$light-popup-card$": |
          #popup {
            margin: -2.4em 0 1.4em 0;
            isolation: isolate;
          }

          input[type=range] {
            cursor: grab;
          }

          #brightnessValue {
            color: rgba(255, 255, 255, 0.8);
            margin: 1.3vh 0 0 0;
            font-size: 2em;
            font-weight: 400;
            position: absolute;
            z-index: 100;
            font-family: SF Display;
            letter-spacing: 0.02em;
            pointer-events: none;
            mix-blend-mode: difference;
            text-align: center;
          }

          #popup>div.range-holder>input[type=range] {
            --slider-thumb-color: #b4b4b4 !important;
          }

          #popup>div.range-holder>input[type=range]::-webkit-slider-thumb {
            cursor: grabbing;
          }
1991

but did you try to change the value and call frontend.reload_themes?

1992

Yes, tried with 20px, 0px and -20px to see if something change but no luck

1993

It’s because you decided to change card-mod-view-yaml to card-mod-view

1994

mm i removed template but same error… can you please me share the code??

thanks :smiley:

1995

I didn’t save it, unfortunately. Use my ui-lovelace and add your stuff back in, one section at a time and you’ll see what’s causing it.

1 Like
1996

Schermata 2021-11-07 alle 19.48.24
Schermata 2021-11-07 alle 19.48.241920×1156 46 KB

i change ui-lovelance , button_card_template and theme.yaml but nothing change… I’m wrong something??
so strange

1997

My value is in percent

image
image1408×131 14.7 KB

Is there a problem with the value itself?

Again, with the light template it is working??

1998

Wich mower do You use? I want to buy one and I dont know Who it will integrate in HA?

1999

Is use a Gardena R40Li, which is quite old and does not offer any “smart” functionalities.
I upgraded the mower with the “robonect” module.

The communication with homeassistant is done via mqtt.

I would prefer this over a customer made interface, because will always be open to any system which can talk mqtt.

2000

Ohhh, this is Wonderful! I didn’t know about roboconect!

My plan was to buy a Husqvarna but I was sceptic about the abilities of it to be integrated in HA, but it roboconect I think it will be very easy!

What a great news!!!
Thank you very much @Se7enair :hugs:

1 Like
2001

Except of the installation of the module it should be easy. But note, that you will lose your guarantee, because you have to open the mower.

2002

There is something I don’t quite get yet.
How to create the galaxy_tab_a entities.

I have browser_mod: in config. I even assigned each device discovered number to the name of the device so galaxy_tab_a is defined. I have fullykiosk running too on the device and in HA with all settings set as demanded.

sensor.5fb63dde_91018c9c
1	type: browser_mod
last_seen: 2021-11-07T14:35:57.415503
deviceID: 5fb63dde-91018c9c
path: /lovelace/default_view
visibility: hidden
userAgent: Mozilla/5.0 (Linux; diordnA 11; SM-T510 Build/RP1A.200720.012; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/95.0.4638.74 Safari/537.36
currentUser: Paul
fullyKiosk: true
width: 1280
height: 800
battery_level: 85
charging: false
darkMode: false
userData: 
id: 55489a810cfb44a7aa8fbe4729a89601
name: Paul
is_owner: true
is_admin: true
credentials:
  - auth_provider_type: homeassistant
    auth_provider_id: null
mfa_modules:
  - id: totp
    name: Authenticator app
    enabled: false

config: 
command: update
name: galaxy_tab_a

So it’s seen. But none of the galaxy entities you use are created.
For example…
sensor.galaxy_tab_a_internal_storage_total_space
sensor.galaxy_tab_a_ram_free_memory
sensor.galaxy_tab_a_ram_total_memory
sensor.galaxy_tab_a_last_app_start
switch.galaxy_tab_a_screensaver

I understand that I can change the name of the entities to match what I want but I thought this would be all done automatically. Or am I wrong?

Btw, I also only have three Fullykiosk entities created:
sensor.template_fullykiosk_memory
sensor.template_fullykiosk_storage
sensor.template_fullykiosk_last_app_start

Thanks

2003

The entities are created by the fullykiosk integration. The integration is set-up correctly?
grafik

Also the fullykiosk app on the tablet is correctly set-up? I am not sure if there are some settings, which needs to be activated. Maybe someone can help here.

1 Like
2004

This works. I obviously don’t have the luftfeuchtigkeit template, can that be the issue? Have you tried return parseInt(states...);

          - type: custom:button-card
            entity: fan.studio_wemo
            name: Fan test
            template:
              - base
              - circle
              #- luftfeuchtigkeit
              - icon_fan2
            variables:
              circle_input: >
                [[[ return states['sensor.rpi_mem'].state; ]]]

1

2

1 Like
2005

omg paul you just asked this :sweat_smile:

2006

Oh man, yes. The luftfeuchtigkeit template was the problem. There is also a circle defined. And that caused a problem. If I deactivate it, it works…
Sometimes I can’t see the forest because of to much trees…

2007

Can someone explain to me how I can install the theme in my home assistant?
Is there any tutorial

Thank you

2008

Obviously there is no tutorial. You have to read the code from Matthias and understand it. Then you can copy it to your system.

2009

Thanks @ Se7enair Now I have them all.

Mattias, I had the integration in HACS and I thought that was enough. I guess I missed something.

Cool, Thanks guys.