A different take on designing a Lovelace UI

Share your Projects!
1026

What a great design for my wallmounted tablet! Trying to get everything on the dashboard, I’d like to see.
Can someone help or point me in the right direction?

I would like to replace the Corona statistics with Sensor data (Energy consumption, Solar Energy and Temperature for example), how should I implement something like that?

Original code for this part is:

          - type: custom:hui-markdown-card
            class: coronavirus
            style:
              {top: 93.65%, left: 70.2%}
            content: >
              {% if is_state('sensor.covid_19_folkhalsomyndigheten', 'Tillgänglig') %}
                {% set data = state_attr('sensor.covid_19_folkhalsomyndigheten', 'embedCode') %}
                {% set total = data | regex_findall_index('Totalt[^,]*?(\d+)[^,]*?(\d+)[^,]*?(\d+)') | list %}
                {% set break = ' ‍ ‍ ‍ ‍ ‍ ‍<font color="#2f3436">|</font> ‍ ‍ ‍ ‍ ‍ ‍' %}
                <font color='#6a7377'>
                <ha-icon icon="mdi:virus"></ha-icon> <b>Coronavirus</b>{{ break -}}
                <ha-icon icon="mdi:chart-bar"></ha-icon> <b>{{ ((total[0] | int / 10327589) * 100) | round(2) }}%</b> av Sverige{{ break -}}
                <ha-icon icon="mdi:emoticon-sad"></ha-icon> <b>{{ total[0] }}</b> fall{{ break -}}
                <ha-icon icon="mdi:grave-stone"></ha-icon> <b>{{ total[2] }}</b> avlidna{{ break -}}
                <ha-icon icon="mdi:map-marker-radius"></ha-icon> <b>{{ data | regex_findall_index('Skåne[^,]*?(\d+)') }}</b> fall i Skåne
                </font>
              {% endif %}
1027

You need to define the color in the style section of the custom field. Just add the color in there. It is not taking the style from the value of the entity, because you defined a new custom_field which has randomly the same name.

    styles:

      custom_fields:

        value:
          [top: 74%, left: 11%, line-height: 2vw, position: absolute, color: 'rgba(0, 0, 0, 0.6)']

Or the better way, use your logic as state_display:

    state_display: >
        [[[ if (entity.attributes.hvac_action === 'heating' ) { return 'verwarmen'; }
        if (entity.attributes.hvac_action === 'idle') { return 'inactief'; 
        } ]]]

This only overwrites the value of the state and do not create a new.

1028

What extension you use for the S5 card (with percent displays for filter etc. And the card)?
This looks really great!

1029

thanks for helping.
But putting the color in the value isn’t working, when the thermostat is off it uses the same color.
Where do i put the state_display in this one and do i have to set color?

1030

Use this template for state_display. I already deleted the unneccessary lines from the additional “value”.

  climate:
    template: ['base']
    aspect_ratio: 1/1
    show_state: false
    show_icon: false
    show_name: true
    show_current_temperature: true
    show_control: true
    state_display: >
        [[[ if (entity.attributes.hvac_action === 'heating' ) { return 'verwarmen'; }
        if (entity.attributes.hvac_action === 'idle') { return 'inactief'; 
        } ]]]
    state:
      - operator: template
        value: >
          [[[ return (states[entity.entity_id].attributes.hvac_action == 'heating') ]]]
        styles:
          card: [background-color: 'rgba(255, 255, 255, 0.8)']
          name: [color: 'rgba(0, 0, 0, 0.6)']
          value: [color: 'rgba(0, 0, 0, 0.6)']
    custom_fields:
      circle_current: >
        [[[ {
        const temperature = entity.attributes.current_temperature;
        const stroke_color = entity.attributes.hvac_action === 'heating' ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.8)'; 
        const fill_color = entity.attributes.hvac_action === 'heating' ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.8)';
        const radius = 0;
        return `<svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="0" fill="${fill_color}" style="
        transform: rotate(-90deg); transform-origin: 50% 50%; " />
        <text x="50%" y="54%" fill="#8d8e90" font-size="25" text-anchor="middle" alignment-baseline="middle">${temperature}<tspan font-size="10">°</tspan></text></svg>`; } ]]]
      circle_target: >
        [[[ if (entity.attributes.hvac_action === 'heating' && entity.attributes.temperature) {
        const temperature = entity.attributes.temperature;
        const stroke_color = entity.attributes.hvac_action === 'heating' ? '#b2b2b2' : '#313638'; 
        const fill_color = entity.attributes.hvac_action === 'heating' ? 'idle' : '#FFFFFF08';
        const radius = 0;
        return `<svg viewBox="0 0 50 50"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="0" fill="${fill_color}" style="
        transform: rotate(-90deg); transform-origin: 50% 50%; " />
        <text x="50%" y="54%" fill="#3182b7" font-size="14" text-anchor="middle" alignment-baseline="middle">${temperature}<tspan font-size="10">°</tspan></text></svg>`; } ]]]
    styles:
      name:
        [top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
      state:
        [top: 74%, left: 11%, line-height: 2vw, position: absolute]
      card:
        [font-family: Sf Display, letter-spacing: 0.05vw, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.34vw, background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw, box-shadow: none, transition: none]
      custom_fields:
        circle_target: 
          [top: 8.5%, left: 54.5%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
        circle_current: 
          [top: 8.5%, left: 6%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]

Does your climate.entity does not have a state like heat or idle? If so, you can also replace

    state:
      - operator: template
        value: >
          [[[ return (states[entity.entity_id].attributes.hvac_action == 'heating') ]]]
        styles:
          card: [background-color: 'rgba(255, 255, 255, 0.8)']
          name: [color: 'rgba(0, 0, 0, 0.6)']
          value: [color: 'rgba(0, 0, 0, 0.6)']

with

    state:
      - value: 'heating'

Just change ‘heating’ to whatever your entity has.
I used the template only to change color to red in depence of boost is activated or not.

1031

Thanks for the reply, but it isn’t working. Now it won’t show anything. The climate.entity only has two states, one is heat the thermostat is working and one is off and this is really off. I have to do it with the hvac_action this is the one that does change from heating to idle when i set a temprature.
On Off

1032

So please only change the template. Ignore the last two pieces of code in my post.

Can you confirm that you only changed the template and it is still not working?

1033

I only used your template and it won’t work.

EDIT
Its working now.
the show_state was set to false and in styles for state there where value: instead of state:
Thanks for helping

1 Like
1034

Got problems with border-radius.

Why is the border-radius not taken?

          - type: 'custom:mini-graph-card'
            entities:
              - sensor.wohnzimmer_temperatursensor_luftfeuchtigkeit
            color_thresholds:
              - color: '#007BFE'
                value: 55
              - color: '#26fe00'
                value: 47.5
              - color: '#FF5733'
                value: 40
              - color: '#fe0000'
                value: 35
            style:
              top: 43.4%
              left: 30.31%
              width: 10%
              border-radius: 0.8vw
            line_color: blue
            line_width: 8
            font_size: 75
            show:
              name: false
              icon: false
              state: false

Tried 0.8vw and 25px. nothing works.

Also card-mod workaround wont work

grafik
grafik820×781 50.3 KB

1035

How are you implementing it?

screenshot
this works fine

          - type: custom:button-card
            entity: light.skrivbord
            name: Skrivbord
            style:
              top: 20.35%
              left: 41.31%
              width: 10%
            custom_fields:
              graph:
                card:
                  type: 'custom:mini-graph-card'
                  entities:
                    - sensor.hall_temperature
                  color_thresholds:
                    - color: '#007BFE'
                      value: 55
                    - color: '#26fe00'
                      value: 47.5
                    - color: '#FF5733'
                      value: 40
                    - color: '#fe0000'
                      value: 35
                  line_color: blue
                  line_width: 8
                  font_size: 75
                  show:
                    name: false
                    icon: false
                    state: false
            styles:
              custom_fields:
                graph:
                  [top: 75%, left: 0%, width: 100%, position: absolute]
            template: light
4 Likes
1036
1037

Then you can pretty much delete everything under content: >

{{ states('sensor.energy1') }} | {{ states('sensor.energy2') }}

1038

It’s working.

image
image530×508 29.8 KB

Made a second card and placed it over the button-card. Read it anywhere in this thread. Didn’t know that I can implement it that way.

That way is very nice. Just finished the first version of my camera-card:

image
image450×537 46.8 KB

Use the picture-glance card here. Only the black bar on the bottom is annoying. Dont know how to get rid of that, or maybe another card, which can show me a regulary updated picture of a camera.

1 Like
1039

Thanks! Almost there, seem to have some issues with the alignment of the sensor/data.

Schermafbeelding 2021-02-16 om 22.49.34
Schermafbeelding 2021-02-16 om 22.49.342810×458 76.8 KB

          - type: custom:hui-markdown-card
            class: coronavirus
            style: {top: 93.65%, left: 70.2%}
            content: >
                <font color='#6a7377'>
                <ha-icon icon="mdi:power-plug"></ha-icon> <b>Temperature</b>{{ break -}}
                <ha-icon icon="mdi:chart-bar"></ha-icon> <b>{{ states('sensor.aqara_temp_bedroom_temperature') }}</b> fall{{ break -}}
                <ha-icon icon="mdi:chart-bar"></ha-icon> <b>{{ states('sensor.aqara_temp_bedroom_humidity') }}</b> fall{{ break -}}
                <ha-icon icon="mdi:chart-bar"></ha-icon> <b>{{ states('sensor.aqara_temp_bedroom_humidity') }}</b> fall{{ break -}}
                </font>

Using Temperature sensors now to have some data to present, should work with other sensors I guess.
Help will be much appreciated!

1040

It’s natively supported. Search camera.

1 Like
1041

How did you get the camera in there? :slight_smile:
Do you have the code for me please? I would then namely finish a popup when clicking so that it is then enlarged

1042

I just changed to picture-elements-card like @Mattias_Persson mentioned above.

Also struggling with the state-badge. As far as I see, at least one element is neccessary, so o moved the badge out of sight. The best would be, to have a nice animated svg-icon to show motion.

          - type: custom:button-card
            entity: camera.garten_kamera_hof
            name: Hof
            show_entity_picture: false
            show_state: false
            style:
              top: 64.5%
              left: 55.18%
              width: 10%
            tap_action: 
              action: more-info
            # hold_action: 
            custom_fields:
              picture:
                card:
                  type: picture-elements
                  camera_image: camera.garten_kamera_hof
                  elements:
                    - type: state-badge
                      entity: binary_sensor.garten_kamera_hof_bewegung
                      style:
                        top: 20%
                        left: 15%
            styles:
              custom_fields:
                picture:
                  [top: -7%, left: -75%, width: 190%, position: absolute]
            template: base

The position of the custom_field “picture” is optimated to see the best area of the camera, because its widescreen and not square.

The option camera_view for the picture-elements-card should give you a live-view if you want that. But note that it will require the stream component.
Just add it unter camera_image

camera_view: live

I dont use that, because i disabled the stream component to prevent camera lags.

2 Likes
1043

I meant just adding the camera

picture elements -> camera

You’re doing

picture elements -> button-card -> picture elements -> camera

I mean it works but it’s unnecessary

1044

Hi, can somebody tell what am I missing? There’s clock somehow shifted up, the sidebar fonts are strange, and something missing in a middle of sidebar…

image
image510×938 39.3 KB

1045

pls help mi.

Снимок экрана 2021-02-15 в 21.18.20
Снимок экрана 2021-02-15 в 21.18.20850×494 54.6 KB

how to solve this problem with updating time?