A different take on designing a Lovelace UI

Share your Projects!
350

Hello, I’m the same. I have tried to modify the button size but this happens. Ignore the other buttons on the card and it is positioned in the upper left. It is the same with everyone when I modify them. The template code is the same as that of your configuration. The buttons are adapted in terms of size depending on the buttons you have in that row of the letter and depending on the size of the screen where you see it but I can not set it as you want.

styles:
  card:
    - width: 7vw
    - height: 7vw

imagen

custom_fields:
  icon_fan: >
    [[[ const path = '<circle cx="25" cy="25" r="6.6"/> <path d="M31.9
    30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9
    1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9
    4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17
    28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19
    6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1
    1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5
    4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1
    1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>';
     const style = '<svg viewBox="0 0 50 50"> <style>@keyframes rotate{0%{visibility: visible; transform: rotate(0deg);}100%{transform: rotate(1080deg);}}.start{animation: rotate 2.8s ease-in; transform-origin: center; fill: #5daeea; visibility: hidden;}.on{animation: rotate 1.8s linear infinite; transform-origin: center; fill: #5daeea; animation-delay: 2.8s; visibility: hidden;}.end{animation: rotate 2.8s; transform-origin: center; fill: #9ca2a5; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);}</style>';
     if (entity.state === 'on') { return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`; }
     else { return `${style}<g class="end">${path}</g></svg>`; } ]]]
entity: switch.velocidad_baja
name: ON/OFF
style:
  left: 80.05%
  top: 37.9%
  width: 10%
styles:
  card:
    - width: 7vw
    - height: 7vw
  custom_fields:
    icon_fan:
      - top: 9%
      - left: 10%
      - width: 3vw
      - position: absolute
tap_action:
  action: toggle
template: switch
type: 'custom:button-card'

The card config:

  - cards:
      - custom_fields:
          icon_fan: >
            [[[ const path = '<circle cx="25" cy="25" r="6.6"/> <path d="M31.9
            30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3
            0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7
            3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7
            7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0
            0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7
            11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2
            9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5
            4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7
            1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>';
             const style = '<svg viewBox="0 0 50 50"> <style>@keyframes rotate{0%{visibility: visible; transform: rotate(0deg);}100%{transform: rotate(1080deg);}}.start{animation: rotate 2.8s ease-in; transform-origin: center; fill: #5daeea; visibility: hidden;}.on{animation: rotate 1.8s linear infinite; transform-origin: center; fill: #5daeea; animation-delay: 2.8s; visibility: hidden;}.end{animation: rotate 2.8s; transform-origin: center; fill: #9ca2a5; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);}</style>';
             if (entity.state === 'on') { return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`; }
             else { return `${style}<g class="end">${path}</g></svg>`; } ]]]
        entity: switch.velocidad_baja
        name: ON/OFF
        style:
          left: 80.05%
          top: 37.9%
          width: 10%
        styles:
          card:
            - width: 7vw
            - height: 7vw
          custom_fields:
            icon_fan:
              - top: 9%
              - left: 10%
              - width: 3vw
              - position: absolute
        tap_action:
          action: toggle
        template: switch
        type: 'custom:button-card'
      - custom_fields:
          icon_fan: >
            [[[ const path = '<circle cx="25" cy="25" r="6.6"/> <path d="M31.9
            30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3
            0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7
            3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7
            7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0
            0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7
            11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2
            9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5
            4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7
            1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>';
             const style = '<svg viewBox="0 0 50 50"> <style>@keyframes rotate{0%{visibility: visible; transform: rotate(0deg);}100%{transform: rotate(1080deg);}}.start{animation: rotate 2.8s ease-in; transform-origin: center; fill: #5daeea; visibility: hidden;}.on{animation: rotate 1.8s linear infinite; transform-origin: center; fill: #5daeea; animation-delay: 2.8s; visibility: hidden;}.end{animation: rotate 2.8s; transform-origin: center; fill: #9ca2a5; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);}</style>';
             if (entity.state === 'on') { return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`; }
             else { return `${style}<g class="end">${path}</g></svg>`; } ]]]
        entity: switch.velocidad_media
        name: MEDIA
        style:
          left: 80.05%
          top: 37.9%
          width: 10%
        styles:
          custom_fields:
            icon_fan:
              - top: 9%
              - left: 10%
              - width: 3vw
              - position: absolute
        tap_action:
          action: toggle
        template: switch
        type: 'custom:button-card'
      - custom_fields:
          icon_fan: >
            [[[ const path = '<circle cx="25" cy="25" r="6.6"/> <path d="M31.9
            30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3
            0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7
            3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7
            7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0
            0 1 6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7
            11.3-1.2 4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2
            9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5
            4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7
            1.3 7.1 1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/>';
             const style = '<svg viewBox="0 0 50 50"> <style>@keyframes rotate{0%{visibility: visible; transform: rotate(0deg);}100%{transform: rotate(1080deg);}}.start{animation: rotate 2.8s ease-in; transform-origin: center; fill: #5daeea; visibility: hidden;}.on{animation: rotate 1.8s linear infinite; transform-origin: center; fill: #5daeea; animation-delay: 2.8s; visibility: hidden;}.end{animation: rotate 2.8s; transform-origin: center; fill: #9ca2a5; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);}</style>';
             if (entity.state === 'on') { return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`; }
             else { return `${style}<g class="end">${path}</g></svg>`; } ]]]
        entity: switch.velocidad_alta
        name: ALTA
        style:
          left: 80.05%
          top: 37.9%
          width: 10%
        styles:
          custom_fields:
            icon_fan:
              - top: 9%
              - left: 10%
              - width: 3vw
              - position: absolute
        tap_action:
          action: toggle
        template: switch
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - custom_fields:
          icon_hue: >
            [[[ const state = entity.state === 'on' ? 'animate' : null; return
            `<svg viewBox="0 0 50 50"><style>@keyframes animate{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);}}.animate{animation: animate
            0.8s; transform-origin: center;}</style> <path fill="#9da0a2"
            d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0
            .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
            .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
            .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2
            0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8
            0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0
            1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18
            3.2-18.8.1-.4.1-.5.1-.7"/> <path class="${state}"
            fill="var(--button-card-light-color-no-temperature)" d="M14.1
            15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5
            38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0
            .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]
        entity: switch.on_off_luz
        name: LUZ
        style:
          left: 30.31%
          top: 20.35%
          width: 10%
        styles:
          custom_fields:
            icon_hue:
              - top: 11%
              - left: 4.5%
              - width: 3.05vw
              - position: absolute
        template: light
        type: 'custom:button-card'
      - custom_fields:
          icon_fan: >
            <svg viewBox="0 0 1150 1150"><path d="M316.54 164.3c-48.85
            20.66-92.713 50.232-130.373 87.893s-67.23 81.524-87.893
            130.375c-21.4 50.592-32.25 104.313-32.25 159.675s10.85 109.083 32.25
            159.675c20.66 48.85 50.232 92.713 87.893 130.373s81.524 67.23
            130.373 87.893c50.592 21.398 104.314 32.248 159.675
            32.248s109.083-10.85 159.675-32.25c48.85-20.66 92.713-50.23
            130.373-87.893s67.23-81.524 87.893-130.373c21.398-50.592
            32.25-104.314
            32.25-159.675s-10.852-109.083-32.25-159.676c-20.66-48.85-50.232-92.713-87.893-130.374l-1.328-1.297
            18.656-19.75 34.818 29.54 44-51.854-118.792-100.783-43.992 51.854
            32.05 27.2-18.875
            19.982c-23.94-16.935-49.645-31.244-76.9-42.773a407.64 407.64 0 0
            0-61.477-20.432V68h54.727V0H323.3v68h54.727v75.868c-20.92
            5.147-41.445 11.96-61.476 20.432zm501.864 377.94c0 91.4-35.594
            177.333-100.225 241.965S567.617 884.43 476.215 884.43 298.882
            848.837 234.25 784.206 134.025 633.644 134.025 542.24 169.62 364.907
            234.25 300.276c40.77-40.77 90.02-69.97 143.766-85.985 22.003-6.557
            44.76-10.9 68-12.9 9.986-.867 20.057-1.33 30.2-1.33a349.06 349.06 0
            0 1 30.199 1.331c23.24 2.02 45.998 6.353 68 12.9 53.748 16.016
            102.996 45.216 143.766 85.985 64.63 64.63 100.224 150.563 100.224
            241.965zM446.016 70.112h60.398v63.03a418.36 418.36 0 0
            0-30.2-1.09c-10.126 0-20.193.367-30.2 1.1v-63.03zm30.2
            167.67v68c7.832 0 15.603.38 23.298 1.128 54.36 5.282 104.78 29.005
            143.902 68.13 44.662 44.662 69.258 104.042 69.258 167.202 0
            11.352-.805 22.576-2.375 33.645L574.2
            535.7c-3.373-51.114-46.023-91.67-97.976-91.67-54.147 0-98.2
            44.052-98.2 98.2s44.052 98.197 98.2 98.197c32.167 0 60.77-15.547
            78.693-39.52l199.73 58.954 2.096.887c15.887-37.556 23.94-77.432
            23.94-118.52
            0-81.323-31.668-157.78-89.174-215.285-33.518-33.518-73.48-58.238-117.084-73.046-31.207-10.594-64.276-16.125-98.2-16.125zm0
            334.657a30.15 30.15 0 0
            1-8.547-1.238c-12.5-3.696-21.652-15.276-21.652-28.96 0-16.652
            13.547-30.2 30.2-30.2a30.14 30.14 0 0 1 8.548 1.239c12.5 3.695 21.65
            15.275 21.65 28.96.001 16.65-13.546 30.197-30.198 30.197z"/></svg>
        entity: switch.temp_2h
        name: |
          [[[ 
            if (states["timer.temp2h"].state == 'idle') return "TIEMPO 2H";
            else return states["timer.temp2h"].state
          ]]]  
        show_state: false
        style:
          left: 80.05%
          top: 37.9%
          width: 10%
        styles:
          custom_fields:
            icon_fan:
              - top: 13%
              - left: 10%
              - width: 3.5vw
              - position: absolute
        tap_action:
          action: toggle
        template: switch
        type: 'custom:button-card'
      - custom_fields:
          icon_fan: >
            <svg viewBox="0 0 1150 1150"><path d="M316.54 164.3c-48.85
            20.66-92.713 50.232-130.373 87.893s-67.23 81.524-87.893
            130.375c-21.4 50.592-32.25 104.313-32.25 159.675s10.85 109.083 32.25
            159.675c20.66 48.85 50.232 92.713 87.893 130.373s81.524 67.23
            130.373 87.893c50.592 21.398 104.314 32.248 159.675
            32.248s109.083-10.85 159.675-32.25c48.85-20.66 92.713-50.23
            130.373-87.893s67.23-81.524 87.893-130.373c21.398-50.592
            32.25-104.314
            32.25-159.675s-10.852-109.083-32.25-159.676c-20.66-48.85-50.232-92.713-87.893-130.374l-1.328-1.297
            18.656-19.75 34.818 29.54 44-51.854-118.792-100.783-43.992 51.854
            32.05 27.2-18.875
            19.982c-23.94-16.935-49.645-31.244-76.9-42.773a407.64 407.64 0 0
            0-61.477-20.432V68h54.727V0H323.3v68h54.727v75.868c-20.92
            5.147-41.445 11.96-61.476 20.432zm501.864 377.94c0 91.4-35.594
            177.333-100.225 241.965S567.617 884.43 476.215 884.43 298.882
            848.837 234.25 784.206 134.025 633.644 134.025 542.24 169.62 364.907
            234.25 300.276c40.77-40.77 90.02-69.97 143.766-85.985 22.003-6.557
            44.76-10.9 68-12.9 9.986-.867 20.057-1.33 30.2-1.33a349.06 349.06 0
            0 1 30.199 1.331c23.24 2.02 45.998 6.353 68 12.9 53.748 16.016
            102.996 45.216 143.766 85.985 64.63 64.63 100.224 150.563 100.224
            241.965zM446.016 70.112h60.398v63.03a418.36 418.36 0 0
            0-30.2-1.09c-10.126 0-20.193.367-30.2 1.1v-63.03zm30.2
            167.67v68c7.832 0 15.603.38 23.298 1.128 54.36 5.282 104.78 29.005
            143.902 68.13 44.662 44.662 69.258 104.042 69.258 167.202 0
            11.352-.805 22.576-2.375 33.645L574.2
            535.7c-3.373-51.114-46.023-91.67-97.976-91.67-54.147 0-98.2
            44.052-98.2 98.2s44.052 98.197 98.2 98.197c32.167 0 60.77-15.547
            78.693-39.52l199.73 58.954 2.096.887c15.887-37.556 23.94-77.432
            23.94-118.52
            0-81.323-31.668-157.78-89.174-215.285-33.518-33.518-73.48-58.238-117.084-73.046-31.207-10.594-64.276-16.125-98.2-16.125zm0
            334.657a30.15 30.15 0 0
            1-8.547-1.238c-12.5-3.696-21.652-15.276-21.652-28.96 0-16.652
            13.547-30.2 30.2-30.2a30.14 30.14 0 0 1 8.548 1.239c12.5 3.695 21.65
            15.275 21.65 28.96.001 16.65-13.546 30.197-30.198 30.197z"/></svg>
        entity: switch.temp_4h
        name: |
          [[[ 
            if (states["timer.temp4h"].state == 'idle') return "TIEMPO 4H";
            else return "Quedan:"
          ]]]  
        show_state: false
        style:
          left: 80.05%
          top: 37.9%
          width: 10%
        styles:
          custom_fields:
            icon_fan:
              - top: 13%
              - left: 10%
              - width: 3.5vw
              - position: absolute
        tap_action:
          action: toggle
        template: switch
        type: 'custom:button-card'
      - custom_fields:
          icon_fan: >
            <svg viewBox="0 0 1150 1150"><path d="M316.54 164.3c-48.85
            20.66-92.713 50.232-130.373 87.893s-67.23 81.524-87.893
            130.375c-21.4 50.592-32.25 104.313-32.25 159.675s10.85 109.083 32.25
            159.675c20.66 48.85 50.232 92.713 87.893 130.373s81.524 67.23
            130.373 87.893c50.592 21.398 104.314 32.248 159.675
            32.248s109.083-10.85 159.675-32.25c48.85-20.66 92.713-50.23
            130.373-87.893s67.23-81.524 87.893-130.373c21.398-50.592
            32.25-104.314
            32.25-159.675s-10.852-109.083-32.25-159.676c-20.66-48.85-50.232-92.713-87.893-130.374l-1.328-1.297
            18.656-19.75 34.818 29.54 44-51.854-118.792-100.783-43.992 51.854
            32.05 27.2-18.875
            19.982c-23.94-16.935-49.645-31.244-76.9-42.773a407.64 407.64 0 0
            0-61.477-20.432V68h54.727V0H323.3v68h54.727v75.868c-20.92
            5.147-41.445 11.96-61.476 20.432zm501.864 377.94c0 91.4-35.594
            177.333-100.225 241.965S567.617 884.43 476.215 884.43 298.882
            848.837 234.25 784.206 134.025 633.644 134.025 542.24 169.62 364.907
            234.25 300.276c40.77-40.77 90.02-69.97 143.766-85.985 22.003-6.557
            44.76-10.9 68-12.9 9.986-.867 20.057-1.33 30.2-1.33a349.06 349.06 0
            0 1 30.199 1.331c23.24 2.02 45.998 6.353 68 12.9 53.748 16.016
            102.996 45.216 143.766 85.985 64.63 64.63 100.224 150.563 100.224
            241.965zM446.016 70.112h60.398v63.03a418.36 418.36 0 0
            0-30.2-1.09c-10.126 0-20.193.367-30.2 1.1v-63.03zm30.2
            167.67v68c7.832 0 15.603.38 23.298 1.128 54.36 5.282 104.78 29.005
            143.902 68.13 44.662 44.662 69.258 104.042 69.258 167.202 0
            11.352-.805 22.576-2.375 33.645L574.2
            535.7c-3.373-51.114-46.023-91.67-97.976-91.67-54.147 0-98.2
            44.052-98.2 98.2s44.052 98.197 98.2 98.197c32.167 0 60.77-15.547
            78.693-39.52l199.73 58.954 2.096.887c15.887-37.556 23.94-77.432
            23.94-118.52
            0-81.323-31.668-157.78-89.174-215.285-33.518-33.518-73.48-58.238-117.084-73.046-31.207-10.594-64.276-16.125-98.2-16.125zm0
            334.657a30.15 30.15 0 0
            1-8.547-1.238c-12.5-3.696-21.652-15.276-21.652-28.96 0-16.652
            13.547-30.2 30.2-30.2a30.14 30.14 0 0 1 8.548 1.239c12.5 3.695 21.65
            15.275 21.65 28.96.001 16.65-13.546 30.197-30.198 30.197z"/></svg>
        entity: switch.temp_8h
        name: |
          [[[ 
            if (states["timer.temp8h"].state == 'idle') return "TIEMPO 8H";
            else return "Quedan:"
          ]]]  
        show_state: false
        style:
          left: 80.05%
          top: 37.9%
          width: 10%
        styles:
          custom_fields:
            icon_fan:
              - top: 13%
              - left: 10%
              - width: 3.5vw
              - position: absolute
        tap_action:
          action: toggle
        template: switch
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack
351

I’m trying to add some battery information to one of my panels. I have it working but it looks terrible.

It is using

  • type: custom:battery-state-card

Should I be trying to embed this card into a button card like everything else (if this is possible) or style the card manually to match the others in this repo.

Here is what I have added (I’m using most of the configuration from this repo)

I would like to have this with rounded corners, the light grey color in the rest of this repo.

Need guidance on how to get this integrated, Thanks!

          - type: custom:battery-state-card
            title: "Battery Status"
            secondary_info: last_updated
            filter:
              include: 
                - name: entity_id 
                  value: "*_battery_level"
                - name: attributes.device_class 
                  value: battery
              exclude: 
                - name: entity_id 
                  value: "*ipad*"
                - name: entity_id 
                  value: "*iphone*"
            bulk_rename:
              - from: "Battery Level" 
                to: "sensor"
              - from: "/\\s(temperature|temp)\\s/" 
                to: " temp. "
            sort_by_level: "asc"
            collapse: 4
            color_gradient:
              - "#ff0000" # red
              - "#ffff00" # yellow
              - "#00ff00" # green
            style:
              top: 35%
              left: 42%

image

352

Hi, I have made this animated svg icon of a running timer but i dont know how to enter it into the code. I cannot reduce the code with SVG Editor. I have tried but I can’t find the key. Can you help me?

imagen

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<!-- Animated using aniGen version 0.8.1 Quality of Life - http://anigen.org -->
<svg width="48px" height="48px" fill="black" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" id="svg7732" preserveAspectRatio="xMidYMid" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:anigen="http://www.anigen.org/namespace" anigen:version="0.8.1">
 <defs id="defs3350"></defs><sodipodi:namedview id="base" bordercolor="#666666" borderopacity="1" inkscape:cx="18.445267433524364" inkscape:cy="-8.97624006544654" inkscape:zoom="16.000000000000004"></sodipodi:namedview><metadata id="metadata1742">
  <rdf:rdf id="rdf:rdf6886">
   <cc:work rdf:about="" id="cc:work9873">
    <dc:format id="dc:format114">image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" id="dc:type1365"></dc:type>
    <dc:title id="dc:title195"></dc:title>
   </cc:work>
  </rdf:rdf>
 </metadata>
 <path d="M0 0h24v24H0z" fill="none" id="path1185"></path>
 <path transform="scale(.5)" d="m18 2v4h12v-4zm6 6c-9.94 0-18 8.06-18 18s8.04 18 18 18 18-8.06 18-18c0-4.24-1.4795-8.1407-3.9395-11.221l2.8398-2.8398c-0.86-1.02-1.8003-1.9803-2.8203-2.8203l-2.8398 2.8418c-3.1-2.48-7.0002-3.9609-11.24-3.9609zm0 4c7.74 0 14 6.26 14 14s-6.26 14-14 14-14-6.26-14-14 6.26-14 14-14zm0.52148 5.5879c-0.0063 0.0054-0.01322 0.01018-0.01953 0.01563 0.0039 8.24e-4 0.0079 7.18e-4 0.01172 2e-3 0.0031-0.0058 0.0047-0.01178 0.0078-0.01758zm0.12695 6.7109c-0.0026 2.37e-4 -0.0052 0.0017-0.0078 2e-3 6.84e-4 0.0039 0.0012 0.0078 2e-3 0.01172 0.0018-0.0046 4e-3 -0.0091 0.0059-0.01367z" stroke-width="2" id="path9266"></path>
 <rect x="11" y="8" width="2" height="6" fill="#000" fill-rule="evenodd" stroke-width=".5" inkscape:transform-center-x="-0.12658317441930933" inkscape:transform-center-y="1.6503689031462212" id="rect4289"><animateTransform attributeName="transform" attributeType="auto" type="rotate" values="1.1614052573951312 12.082738110421964 12.604827265860937;1.1614052573951312 12.082738110421964 12.604827265860937" calcMode="spline" keyTimes="0;1" keySplines="0 0 1 1" dur="10s" begin="0s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" id="animateTransform7802"></animateTransform><animateTransform attributeName="transform" attributeType="auto" type="rotate" values="358.79 11.994349762773645 12.56063309203678;358.79 11.994349762773645 12.56063309203678" calcMode="spline" keyTimes="0;1" keySplines="0 0 1 1" dur="5s" begin="0s" repeatCount="indefinite" additive="sum" accumulate="none" fill="freeze" style="" id="animateTransform6441"><animateTransform attributeName="transform" attributeType="auto" type="rotate" values="0 11.994349762773645 12.753875785289079;365 11.994349762773645 12.753875785289079" calcMode="spline" keyTimes="0;1" keySplines="0 0 1 1" dur="5s" begin="0s" repeatCount="indefinite" additive="sum" accumulate="none" fill="freeze" id="animateTransform1546"></animateTransform></animateTransform><animateTransform attributeName="transform" attributeType="auto" type="rotate" values="0 11.950155588949485 12.6212932638166;360 11.950155588949485 12.6212932638166" calcMode="spline" keyTimes="0;1" keySplines="0 0 1 1" dur="10s" begin=";1s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" id="animateTransform9188"></animateTransform><animateTransform attributeName="transform" attributeType="auto" type="rotate" values="0 12.007767433524364 12.788740065446536;90 12.007767433524364 12.788740065446536;180 12.007767433524364 12.788740065446536;260 12.007767433524364 12.788740065446536;320 12.007767433524364 12.788740065446536;360 12.007767433524364 12.788740065446536" calcMode="spline" keyTimes="0;0.2;0.4;0.6;0.8;1" keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1" dur="10s" begin="0s" repeatCount="indefinite" additive="sum" accumulate="none" fill="freeze" id="animateTransform3242"></animateTransform><animateTransform attributeName="transform" attributeType="auto" type="rotate" values="0 11.945267433524364 12.976240065446536;180 11.945267433524364 12.976240065446536;360 11.945267433524364 12.976240065446536" calcMode="spline" keyTimes="0;0.5;1" keySplines="0 0 1 1;0 0 1 1" dur="10s" begin="0s" repeatCount="indefinite" additive="sum" accumulate="none" fill="freeze" id="animateTransform2547"></animateTransform></rect>
</svg>
353

Hi Frank,

Would you mind sharing your code for the below pop-up?

image
image546×773 66.8 KB

It looks very slick.

In addition, I was wondering if you know it to be possible to place this kind of slider on the home page, (So not in a pop-up)

Looking forward to hear from you.

354

@Mattias_Persson how can i resize the icon? If i put my iPhone in horizontal mode the icon is bigger but not in vertical mode.

Skärmavbild 2020-06-28 kl. 18.46.46

355

Hi, i have it from Lukevinks Repo, but atm i dont use it.

You find it here: hass-config-lajv/www/js/light-slider-card-lajv.js at 2543d441fa2b5a448d794a83d58d348b5acf9421 · lukevink/hass-config-lajv · GitHub

I fail when i try to put it in a Template :frowning:

356

Thanks! I will try to see if I can find some succes in implementing it!

357

Hey all, looking for some guidance here…

Some time back the top left Time in my test config based on this code, lost its formatting. It seem like the span formatting gets ignored. I think I did some updates and not sure where to go from here.

I have used the latest config from the github under the picture-element style, which does not seem to do anything for it either.

Has anyone else experienced this ? I did see some mention of changes for the card-mod maybe affecting this.

Thanks!

358

I had real trouble with the markdown section and I just couldn’t get it to work reliably for me. I don’t use it now. For the time in the top left I have added two sections to the original code,

  ⚓4: &heading-style
    #color: '#bcbebf'
    color: '#ffffff'
    font-family: DB Sans Cond
    font-size: 4vw
    font-weight: bold
    font-style: normal
    max-width: 1px
    cursor: default

(change to your own font)

and then on each view add the following element

  - title: Main
    panel: true
    path: main
    cards:
      - type: picture-elements
        image: /local/images/background/uibg.png
        style:
          .: |
            /* Global */
            #root > hui-icon-element {color: rgba(255, 255, 255, 0.1) !important; transition: 0.4s;}
            #root > hui-icon-element:hover {color: rgba(255, 255, 255, 0.25) !important; transition: none;}
            #root > hui-icon-element:active {color: rgba(255, 255, 255, 0.35) !important; transition: none;}
          "#root > hui-element > hui-markdown-card":
            $: |
              ha-card > ha-markdown {padding: 0 !important;}
              ha-card > ha-markdown > p > font > ha-icon {margin-bottom: 0.15%; opacity: 0.6;}
              ha-card > ha-markdown > p > span {font-family: DB Sans Comp; font-size: 5vw; 
              font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}
          "#root > hui-state-label-element":
            $: |
              div {padding: 0 !important;}

        elements:

          - entity: sensor.time
            tap_action:
              action: none
            hold_action:
              action: none
            type: state-label
            style:
              top: 9%
              left: 3%
              <<: *heading-style

I also put the temperature in the same way with

          - entity: sensor.home_temp
            tap_action:
              action: none
            hold_action:
              action: none
            type: state-label
            style:
              top: 16%
              left: 3%
              z-index: 999
              <<: *heading-style

and the text ends up looking like this

image

359

So I actually just split the date out to a mardown card on its own, above the rest. That worked wonderful.

360

@Mattias_Persson i want to use this on more than 1 tablet so i want the same feature with sound, restart app etc so what is the best option, create a group for all my tablets?

1 Like
361

First, @Mattias_Persson - THANK YOU for sharing you’re entire package. I won’t lie, as a newbie, I opened everything a few weeks ago, set it up and gave up because I didn’t think I could figure out how to set it up with my home. But, here we are a few weeks later and taking on this little project of reverse engineering your coding, I’ve got a very nice set up of my own that works! What I love even more, is that this set up adapts easily between different size tablets and I don’t end up with extra space on bigger tablets.

Everything is set up for the most part. I do have two question so far that’s come up. What or where do I change the size of cards within browser_mod for the pop-ups? I’m using the same pop up light card functionality for my hue lights on a hold action with a light entity card for color picking. But as you can see

1114×574 116 KB
594×684 163 KB
, on my 8" tablets, the pop up light card and the color wheel aren’t in full view and I have to scroll down. (It works fine on my 10" tablets though!). I’m also getting the same issue with my sidebar vacuum pop up, where I have to scroll down to view everything in the pop up. Not sure if this is a setting in the individual cards within the pop up or if theres a general setting in the browser_mod card. I have tried changing values in CSS styles and within the .js files for the past 2 days and I can’t seem to figure it out.

My next question is with the sidebar: Where do i change the width of the sidebar? I tried changing the width % below, but when i decrease the size, it distorts the sidebar image and makes it shorter too.

- type: image
  image: local/sidebar.png
  tap_action:
     action: none
  hold_action:
     action: none
  style:
 {top: 50%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,0.2)'}

Bonus: Is there a website or video tutorial that you recommend for learning:

  • the CSS style coding you used in your files? When researching CSS styles in general, there’s a lot of information but it varies on the different types of coding it’s used in.
  • How you animated icons? I’ve downloaded illustrator and after effects and I think I’ve got a basic understanding of changing the icons using your current animations based on the posts earlier in this thread, but I’d like to learn more about creating my own animations if ever needed and uploaded to HA.
362

Popup

As you said using relative lengths like vw and % throughout the ui scales it well between different screen sizes. But I use the ui on both my 10" tablet display as well on my 27" computer and there my popups became ridiculously huge. So I settled on only using em units inside popups and I try to fit popups on the tablet first, then it’ll look good on the computer too.

An entities card entity is fixed in size, I believe it’s 14px font size. You’d have to use relative lengths (not em) or
it’ll not scale well if you try to fit that into the bigger screen first. It’s just the way it is.

I recently answered a similar “issue” in my repository:

I think the easiest solution is to reduce size/zoom in the browser itself.

The popup is sized after the content so your options are:

  • Remove entities, obviously…
  • Use a horizontal stack card to utilize the whole screen
  • Scale the whole card with transform
service: browser_mod.popup
service_data:
...
  card:
    type: entities
    style: |
      ha-card {
        transform: scale(0.7);
      }

Sidebar

Yup, changing the width scales it both x and y. The easiest way would be to push it out of view with like left: 6%. You can use an image with correct ratio or use css transform: scale property instead of width to actually distort the image.

Animation

After effects (gifs) is the old way but I switched over to svg’s and there is unfortunately no comparable software for pure css animation. You have to do it by hand which is actually quite hard to get right/smooth. To help with easing animations I used easings.net for cubic-beziers. Another resource to see how to do different animations is Animatopy. I’ve also installed simonsiefke.svg-preview extension in VS Code to get a live preview when coding an animation.

1 Like
363

is there a way to close a popup window after some time automatically?

364 
  - alias: close_popups_on_tablet
    initial_state: true
    trigger:
      - platform: state
        entity_id: switch.fullykiosk_screensaver
        from: 'off'
        to: 'on'
        for:
          minutes: 15
    action:
      - service: browser_mod.close_popup
        data:
          deviceID: tablet
1 Like
365

a stupid question, how to install this theme or all components the easiest way? has anyone found the best way?

:slight_smile:

366

Can some one help how i can fix the icon so also the steam will be colored. I guess it because it is not connected to the rest of the icon…
Skärmavbild 2020-07-07 kl. 18.19.58Skärmavbild 2020-07-07 kl. 18.23.36

367

Hi,
you can unify all elements of your icon by edit path by nodes, select the elements you want and then use Union function.

inkscape
inkscape442×536 33.5 KB

I hope this helps.

1 Like
368

You get the color from fill="var(--button-card-light-color-no-temperature)"

If you don’t define fill on the paths you can color every path using fill in the top svg tag

<svg viewBox="0 0 50 50" fill="var(--button-card-light-color-no-temperature)">
...

or group the paths

<g fill="var(--button-card-light-color-no-temperature)">
<path d="1...
<path d="2...
</g>
...

or define the fill on every path

<path fill="var(--button-card-light-color-no-temperature)" d="1...
<path fill="var(--button-card-light-color-no-temperature)" d="2...
2 Likes
369

Possible to show icon without steam when it’s off by code settings?