A different take on designing a Lovelace UI

Share your Projects!
1170

image
image386×788 50.4 KB
Works as it will underline, but not “clickable”
Any idea @Frank_Hagenbuch?

         - type: custom:hui-element
           card_type: markdown
           style:
             top: 9%
             left: 11.1%
           card_mod:
             class: markdown-sidebar
             style:
               .: |
                 ha-markdown {
                   padding: 0 !important;
                 }
               ha-markdown:
                 $: |
                   :host {
                     opacity: 0.9;
                   }
                   ha-markdown-element > p > span {
                     font-family: SF Text;
                     font-size: 5vw;
                     font-weight: 200;
                     margin-left: -0.3vw;
                     letter-spacing: -0.05vw;
                   }
                   ha-markdown-element > p > span > span {
                     position: relative;
                     top: -.09em;
                   }

           content: >
             <span>{{ now().strftime('%H') }}<span>:</span>{{ now().strftime('%M') }}</span>

             My favorite search engine is [Duck Duck Go](https://duckduckgo.com).
             
             <font color='#6a7377'><b>{{ states('sensor.sidebar_day') }}</b><br>
             <b>{{ states('sensor.sidebar_date') }}</b> </font><br> 


             <b>{{ states('sensor.sidebar_greeting') }}</b>


             <font color='#6a7377'>
             {{ states('sensor.sidebar_active') }}


             {{ states('sensor.sidebar_vacuum') }}


             {{ states('sensor.sidebar_weather') }}


             The alarm is {{ states('alarm_control_panel.alarmo') }}
             
             </font>
1171

Got it!
added this to styling

                    ha-markdown-element a {
                      pointer-events: all !important;
                    }
1 Like
1172

On the picture elements card, what is “theme: tablet” referring to? I’ve been digging around and cannot figure it out. I don’t see any theme files in the repo, and I also can’t find a HA theme called just “Tablet”.

I’m trying to build something similar to this dashboard, and I have a lot of styles not behaving. For example, there’s a strange box shadow on the sidebar markdown container that I didn’t set, and I can’t figure out where it’s being inherited from. Wondering if I don’t have some base styles set in a theme or something.

1173

chcek the include file in mat’s repository: @rogersmj

1174

Doh, I totally missed that. Thank you!

1175

Any updates on the slowdown issues? No updates of any custom components fixed it so far.

1 Like
1176

Hi @Mattias_Persson

Should it be not possible to turn a button-card-template: light, into a simple switch button, by doing the below? The background and color adaption of the spot is not working. The light turns of and on fine.

2021-03-27_18h55_57

1177

Hi! Requesting for your help on how I can expand this one just like the sample of Mattias.
Sorry but I do not have any background with CSS.
Thank you!

image
Addendum:
I have copied the samples/recommendations here but to no avail
Themes.yaml

          - type: custom:hui-element
            card_type: markdown
            style:
              top: 9%
              left: 11.1%
            card_mod:
              class: markdown-sidebar
              style:
                ha-markdown:
                  $: |
                    ha-markdown-element > font > p {
                      text-align: right;
                    }
            
          - type: image
            image: local/sidebar.png
            tap_action:
              action: none
            hold_action:
              action: none
            style:
              {top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,1)', opacity: 30%, border-radius: 0.7em}

ui-lovelace.yaml

                 - type: custom:hui-element
        card_type: markdown
        style:
          top: 9%
          left: 11.1%
        card_mod:
          class: markdown-sidebar
          style:
            ha-markdown:
              $: |
                ha-markdown-element > font > p {
                  text-align: right;
                }
        
      - type: image
        image: local/sidebar.png
        tap_action:
          action: none
        hold_action:
          action: none
        style:
          {top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,1)', opacity: 30%, border-radius: 0.7em}
1178

Hello. how do you make your side bar transparent? @celeritas0725

1179

Hope that someone can help me find a way to address these 4 key issues.

The blue line is a button card representing the header and the green line is a a button card representing the footer. I would like to replace the button cards with a picture elements card, but I need to find a way to control their height.

20210330_135645
20210330_1356454032×2268 2.14 MB

20210330_135624
20210330_1356244032×2268 1.9 MB

Questions:

  • Is there a way to format/scale the image so that it fits only within the allotted grid space?

  • If not, then is there a way to determine the image size needed for a 10in tablet.

  • Is there away to remove the spacing under the picture elements image. This black/gray bar is not part of the original picture. This appears to me a solely part of the picture elements card feature.
    Here is the code for the header/main and footer: https://paste.ubuntu.com/p/J3c7kccVh6/

  • I have attempted to use grid-gap: 0px as a way to remove the gap between the sidenav and the header, main and footer, but I am not seeing a change in the picture. Is my use and understanding of this element not correct?

  • Lastly, How do I keep from having a left side scroll bar while still having the tab in full screen or kiosk mode?
    Here is my code to the whole card: https://paste.ubuntu.com/p/yyb7JJpKdw/

1180

Hi! If you are referring to this part:

image

here’s the code (ui-lovelace.yaml), just adjust the opacity based on your liking.

          - type: image
            image: local/sidebar.png
            tap_action:
              action: none
            hold_action:
              action: none
            style:
              {top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,1)', opacity: 30%, border-radius: 0.7em}
1181

Thanx for the tip. i totally miss the fact that it was not the side bar card :slight_smile:

any way, could you explain me how to scale the whole thing to fit an ipad Pro 13inch please. Don’t get where to edit.

1182

Hi, thank you so much for your sharing. You’ve done a nice work :+1:

As a newbie, i tried to copy your code and understand how it works. Unfortunatly, I can’t figure out why the light-popup-card for my lightbulb is not showing. the on/off work fine and the icon animation as well.

button_card_templates.yaml

light:
    template:
      - base
      - circle
    variables:
      circle_input: >
        [[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
    hold_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: >
          [[[ return entity.attributes.friendly_name ]]]
        card:
          type: entities
          entities:
            - type: custom:light-popup-card
              entity: >
                [[[ return entity.entity_id ]]]
              icon: none
              fullscreen: false
              brightnessWidth: 130px
              brightnessHeight: 360px
              borderRadius: 1.7em
              sliderColor: '#c7c7c7'
              sliderTrackColor: rgba(25, 25, 25, 0.9)
            - type: custom:hui-element
              card_type: horizontal-stack
              card_mod:
                style: >
                  #root {
                    justify-content: center;
                    margin-top: 2em;
                  }
              cards:
                - type: custom:button-card
                  styles:
                    card:
                      - background: '#d8d9e1'
                  tap_action:
                    action: call-service
                    service: light.turn_on
                    service_data:
                      entity_id: >
                        [[[ return entity.entity_id ]]]
                      color_temp: 153
                  template: color_light
                - type: custom:button-card
                  styles:
                    card:
                      - background: '#d5b08d'
                  tap_action:
                    action: call-service
                    service: light.turn_on
                    service_data:
                      entity_id: >
                        [[[ return entity.entity_id ]]]
                      color_temp: 326
                  template: color_light
            - type: custom:hui-element
              card_type: horizontal-stack
              card_mod:
                style: >
                  #root {
                    justify-content: center;
                    margin-bottom: 1em;
                  }
              cards:
                - type: custom:button-card
                  styles:
                    card: 
                      - background: '#ce944b'
                  tap_action:
                    action: call-service
                    service: light.turn_on
                    service_data:
                      entity_id: >
                        [[[ return entity.entity_id ]]]
                      color_temp: 500
                  template: color_light
                - type: custom:button-card
                  styles:
                    card:
                      [background: 'radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%), 
                      conic-gradient(rgb(120, 39, 230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25, 25), 
                      rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230, 41), rgb(52, 232, 40), rgb(51, 231, 92), 
                      rgb(52, 232, 224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39, 230))']
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      command: popup
                      title: >
                        [[[ return entity.attributes.friendly_name ]]]
                      card:
                        type: custom:light-entity-card
                        entity: >
                          [[[ return entity.entity_id ]]]
                        brightness: true
                        color_temp: true
                        full_width_sliders: false
                        hide_header: true
                        show_slider_percent: true
                        smooth_color_wheel: true
                        persist_features: true
                        consolidate_entities: true
                  template: color_light

ui-lovelace.yaml

          - type: custom:button-card
            entity: light.lumiere
            style:
              top: 20.35%
              left: 30.31%
              width: 10%
            template:
              - light
              - icon_hue

I’m using the last version of light-popup-card.js and button_card.js

image

When I click or doubleclick it just go Off :confused:

Am I missing something?

Thank you for your help

1183

The light popup card is a hold_action. Have you tried this:

Action that will be performed when an object on a card is tapped, held for at least half a second and then released.

1184

Hi, someone can point me to the right direction to make it fit a custom resolution? thxs.

1185

@Mattias_Persson is the browser_mod.popup service still working to you? I’m not sure after which update ( or what exactly happened ) but to me it just doesn’t work anymore. No error though…

1186

I’ve already tried, also double_tap_action… nothing was triggered :frowning: and HA shows 0 error.
Any idea?

1187

Thanks @xyboox, you pointed me to the right direction. I’ve an extra indentation for my brower_mod: integration in my configuration.yaml.
The popup-up shows perfectly now :slight_smile:

1188

ok… I’m glad it fixed your issue :))

1189

This will be dependent on the aspect ratio of the background.

Here is Mattias’ answer