A different take on designing a Lovelace UI

Share your Projects!
2354

Reverse it, use hue as entity and add a tap action to toggle shelly instead.

but if you must here’s a quick example

custom_fields:
  circle: >
    [[[
      let e = states['light.dator'],
        h = e.attributes.hs_color[0],
        s = e.attributes.hs_color[1];
      return `<div style="background-color: hsl(${h}, ${s}%, 50%);">test</div>`;
    ]]]
2355

rejectattr on the entities you don’t want

2356

here https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/1981

2357

The other files are specific to my config. Like if you copy automation.yaml to your config you’ll get errors because we don’t have the same physical devices

2358

Yes, https://github.com/custom-cards/button-card#custom-fields

2359

I made it
Thanks!

          - type: custom:button-card
            entity: light.100_giardino_hue
            name: Luce giardino
            template:
              - light
              - icon_hue
            tap_action:
              action: call-service
              service: switch.toggle
              service_data:
                entity_id: switch.100_giardino

your second suggestion will be used for different task. Nothing is wasted

2360

ok, clear.
Any way to retrive iphone (apple…) battery level instead of its state?

2361

could you tell me how you transformed current date to day number and day name?

2362

Great work @Mattias_Persson
I’ve just been reading through your template.yaml file looking at part about the greeting message where it shows God morgon etc
I’m doing similar but my messages are slightly longer and go off the sidebar, do you know if it’s possible to force a line break so it’s on 2 lines within this template.
Thanks

2363

I have my sensor.

- platform: template
  sensors:
    pretty_date:
      friendly_name: Data di oggi
      value_template: >-
        {% set today = states("sensor.date") %}
        {% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
        {% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}
        {% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
        {% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
        {% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
        {% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
        {{ day }} {{ arr_months[month-1] }} {{ year }}
      attribute_templates:
        week_day: >-
          {% set today = states("sensor.date") %}
          {% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
          {% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
          {{ arr_week_days[week_day] }}    
        day: >-
          {% set today = states("sensor.date") %}
          {% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
          {{ day }}      
        month_num: >-
          {% set today = states("sensor.date") %}
          {% set month = as_timestamp(today) | timestamp_custom('%m') | round %}
          {{ month }}  
        month_name: >-
          {% set today = states("sensor.date") %}
          {% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}          
          {% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
          {{ arr_months[month-1] }}  
        year: >-
          {% set today = states("sensor.date") %}
          {% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
          {{ year }}
2 Likes
2364

Thank you a lot!

2365

Howdy, Can you show how you set up your sensors?

Thanks.

2366

This is the sensor I used for the calendar card. I use it by fetching states or attributes

2367

Thanks. Sorry just saw that above

2368

In working with the button_card_templates, how do you override some of the styles in the “base” or custom:button_card templates? I cannot seem to figure it out. I can change what is there, but I cannot add anything extra.

2369

Hello, first I want to say thank you for this lovely UI!

At the moment, I am trying to bring the Corona Footer back (Germany). I want to get my data through this URL: Data

Which delivers me this code:


{
   "objectIdFieldName": "ObjectId",
   "uniqueIdField": {
      "name": "ObjectId",
      "isSystemMaintained": true
   },
   "globalIdFieldName": "",
   "fields": [
      {
         "name": "AdmUnitId",
         "type": "esriFieldTypeInteger",
         "alias": "AdmUnitId",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "BundeslandId",
         "type": "esriFieldTypeInteger",
         "alias": "BundeslandId",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzFall",
         "type": "esriFieldTypeInteger",
         "alias": "AnzFall",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzTodesfall",
         "type": "esriFieldTypeInteger",
         "alias": "AnzTodesfall",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzFallNeu",
         "type": "esriFieldTypeInteger",
         "alias": "AnzFallNeu",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzTodesfallNeu",
         "type": "esriFieldTypeInteger",
         "alias": "AnzTodesfallNeu",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzFall7T",
         "type": "esriFieldTypeInteger",
         "alias": "AnzFall7T",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzGenesen",
         "type": "esriFieldTypeInteger",
         "alias": "AnzGenesen",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzGenesenNeu",
         "type": "esriFieldTypeInteger",
         "alias": "AnzGenesenNeu",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzAktiv",
         "type": "esriFieldTypeInteger",
         "alias": "AnzAktiv",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "AnzAktivNeu",
         "type": "esriFieldTypeInteger",
         "alias": "AnzAktivNeu",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "Inz7T",
         "type": "esriFieldTypeDouble",
         "alias": "Inz7T",
         "sqlType": "sqlTypeFloat",
         "domain": null,
         "defaultValue": null
      },
      {
         "name": "ObjectId",
         "type": "esriFieldTypeOID",
         "alias": "ObjectId",
         "sqlType": "sqlTypeInteger",
         "domain": null,
         "defaultValue": null
      }
   ],
   "features": [
      {
         "attributes": {
            "AdmUnitId": 0,
            "BundeslandId": 0,
            "AnzFall": 7297320,
            "AnzTodesfall": 112925,
            "AnzFallNeu": 58912,
            "AnzTodesfallNeu": 346,
            "AnzFall7T": 215078,
            "AnzGenesen": 6581800,
            "AnzGenesenNeu": 49900,
            "AnzAktiv": 602600,
            "AnzAktivNeu": 8700,
            "Inz7T": 258.6,
            "ObjectId": 101
         }
      },
      {
         "attributes": {
            "AdmUnitId": 8127,
            "BundeslandId": 8,
            "AnzFall": 19455,
            "AnzTodesfall": 286,
            "AnzFallNeu": 78,
            "AnzTodesfallNeu": 0,
            "AnzFall7T": 434,
            "AnzGenesen": 18500,
            "AnzGenesenNeu": 100,
            "AnzAktiv": 700,
            "AnzAktivNeu": 0,
            "Inz7T": 219.3,
            "ObjectId": 355
         }
      }
   ]
}

Is there a way that I can display “AnzFallNeu”, “AnzTodesfallNeu” and “AnzGenesen” from the first attributes section and “Inz7T” from the second one in the footer?

I guess I have to get it in here somehow, don’t I?

state_display: >
      [[[
        if (entity && entity.attributes.embedCode != undefined) {
          let data = entity.attributes.embedCode,
            total = data.match(/Totalt[^,]*?(\d+)[^,]*?(\d+)[^,]*?(\d+)/),
            spacer = '‍ ‍ ‍ ‍ ‍ ‍<font color="#2f3436">|</font> ‍ ‍ ‍ ‍ ';
          return `
            <ha-icon icon="mdi:virus"></ha-icon> <b>Coronavirus</b>${spacer}
            <ha-icon icon="mdi:chart-bar"></ha-icon> <b>${(parseFloat(total[1]) / 10327589 * 100).toFixed(2)}%</b> av Sverige${spacer}
            <ha-icon icon="mdi:emoticon-sad"></ha-icon> <b>${total[1]}</b> fall${spacer}
            <ha-icon icon="mdi:grave-stone"></ha-icon> <b>${total[3]}</b> avlidna${spacer}
            <ha-icon icon="mdi:map-marker-radius"></ha-icon> <b>${data.match(/Skåne[^,]*?(\d+)/)[1]}</b> fall i Skåne
          `;
        }
      ]]]

I tried now pretty much everything but can’t get it to work. Can somebody help me? Thanks!

2370

Hi @Mattias_Persson - thanks for that lovely theme.

To all.
Following situation: I have shelly switches for the lights and a few of the bulbs are IKEA tradfri.
Do anybody know - is it possible to tap on a card for toggle the light (shelly switch) and if I hold on for the dimmer/colour settings (light card).

But that means two different in one card?

Thanks for any info.

Sascha

2371

Wouldn’t that just be two separate actions. One tap and one hold on the same button. Each would call a different service/pop up.

2372

Yes - two actions. Any example for that?

2373

see my method.
Hope to give something back

https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/2359?u=leragazze