A different take on designing a Lovelace UI

Share your Projects!
904

Thanks man. I have found what my problem is. In my case, i dont use the width of the card exactly like him. Mine is with 10%, so, the overlay propriety on the button_card_templates.yaml must be like that:

overlay:

          [background:

          "[[[ return entity.attributes.entity_picture == null ? 'backdrop-filter: blur(4px) brightness(60%)' : 'backdrop-filter: blur(4px) brightness(60%)'; ]]]", 

          background-size: cover, z-index: 0, top: 8vw, left: 0%, width: 100%, opacity: 1, position: absolute]

The top propriety must be 8vw.

905

hi where do I find this icon icon: custom:roborock-vacuum??

906

Hi

That is where I’m trying to configure it. I think it’s more a mistake in how to do it.

907

hello can anyone help me with any problem. If I put a markdown card in my sidebar it works for a while. When I reload my ui, I get an error here with the message:
“Must specify card_type, element_type or row_type”

my code is:

title: Thuis
views:
  - panel: true
    path: default_view
    cards:
      - type: picture-elements
        image: local/background.png
        elements:

          # markdown fix
          - type: custom:hui-element
            card-type: markdown
            style: {opacity: 0}
            content: preload

          ##########################################################################
          #                                                                        #
          #                              * SIDEBAR *                               #
          #                                                                        #
          ##########################################################################

          - 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,0.2)'}


          - type: custom:hui-markdown-card
            style:
              {top: 20%, left: 11%, font-size: 0.65vw}
            content: >
              Volgende afval dat wordt opgehaald over **<font color=grey>{{states('sensor.afvalwijzer_next_in_days')}}</font>** dag(en)<br>

              Afval dat opgehaald wordt: **<font color=grey>{{states('sensor.afvalwijzer_next_item')}}**
908

Im having the same issue tying to scale the graph :frowning:
I’ve tried many things even with card-mod but no success.

If you get to something please let me know or share here :slight_smile:

909

Hi @Mattias_Persson, how did you get your animated icons, you made by yourself? They are amazing, i want to do some by myself. Nice job on the project btw.

If theres any tutorial for the icons i’ll be happy to see.

910

Ok did I miss the install instructions?

911

Hi @Mattias_Persson et al,

I have a question - why do you call input_boolean.turn_on in the turn_off service in the switch template for (for instance) playstation_4 in the snippet below. Shouldn’t be input_boolean.turn_off? I don’t understand… :grimacing:

      playstation_4:
        friendly_name: Playstation
        icon_template: mdi:sony-playstation
        value_template: "{{ is_state('binary_sensor.playstation_4', 'on') }}"
        turn_on:
          - service: input_boolean.turn_on
            entity_id: input_boolean.playstation_4
          - service: media_player.turn_on
            entity_id: media_player.playstation_4
        turn_off:
          - service: input_boolean.turn_on
            entity_id: input_boolean.playstation_4
          - service: media_player.turn_off
            entity_id: media_player.playstation_4

Thanks!

912

I bet you’ll figure it out once you spend a little more time with HA :slightly_smiling_face:

913

Entity state is undefined? Does you entity actually exist?

Post code and I’ll have a look

914

@andrew47 @johansvensson911

Does the slider work as expected without my styles? Otherwise open an issue over at that repo. Some css is browser specific.

915

Have you looked at line 92, column 65?
Post that line.

916

I don’t remember… isn’t that just the “ordinary” icons?

blue

You can set colors yourself

icon_home:
  [top: 10.5%, left: 10.1%, width: 2.9vw, position: absolute,
  fill: "[[[ return entity.state === 'on' ? '#c7983e' : '#9da0a2'; ]]]"]
1 Like
917

You can’t use jinja {{ states }} in button card, you have to use javascript.

[[[ return states['sensor.velux_sensor_temperature'].state; ]]]

918
919

If you strip everything down it’s basically just this

title: Home
views:
  - panel: true
    path: default_view
    cards:
      - type: picture-elements
        image: /local/background.png
        elements:

          - type: custom:button-card
            entity: light.skrivbord
            name: Hello
            style:
              top: 50%
              left: 50%
              width: 10%
              
          - type: icon
            icon: mdi:information
            title: World
            style:
              top: 20%
              left: 50%
              color: rgb(255, 255, 255)
              --mdc-icon-size: 4vw
1 Like
920

Yup did exactly this, just not sure why the fonts are all the wrong scale.

921

the CSS variable --button-card-light-color will contain the current light color
the CSS variable --button-card-light-color-no-temperature will contain the current light without the temperature

*icon_hue_styles

922
1 Like
923

card_type: not card-type: