A different take on designing a Lovelace UI

Share your Projects!
2461

Only the current day can be viewed via the calendar sensor. I’m trying to create a rest sensor to create an event list. Otherwise you have to use other cards like atomic calendar revive.

    card:
      type: custom:atomic-calendar-revive
      style: |
        .cal-card {
          padding: 0px !important;
        }
        .cal-eventContainer {
          padding-top: 0px !important;
        }
        .event-left {
          padding: 0px !important;
        } 
        .event-titleRunning {
          border-left: 3px solid blue;
          text-align: left;
          font-weight: 600;
          padding-left: 3px !important;
        }           
        .event-leftCurrentDay {
          width: 0px !important;
        }
      entities:
        - entity: calendar.lavoro
          color: >
            [[[
              if (states['sun.sun'].state == 'below_horizon'){
                return 'rgba(255, 255, 255, 0.8)';
              } else
                return 'rgba(0, 0, 0, 0.6)';
            ]]]                               
      showFullDayProgress: false
      showHiddenText: false
      firstDayOfWeek: 1
      maxDaysToShow: 1
      maxEventCount: 3
      language: it
      refreshInterval: 21600
      showLoader: false
      showLocation: false
      showDescription: false
      showProgressBar: false
      showLastCalendarWeek: false
      calShowDescription: false
      disableCalEventLink: false
      disableCalLocationLink: false
      disableCalLink: false
      dimFinishedEvents: false
      cardHeight: 100%
      showDate: false
      showCurrentEventLine: false
      timeSize: 0
      dateSize: 0
      eventTitleSize: 100
      showMonth: false
      showWeekDay: false
      showHours: false
      disableEventLink: false
      disableLocationLink: true
      showNoEventsForToday: true
      showEventIcon: true
      fullDayEventText: null
      noEventText: null
      hideFinishedEvents: true
      showRelativeTime: true
      sortByStartTime: true
2462

oki Thank you.

I used atomic calendar revive befor but yours looks better in my Dashboard :slight_smile:

1 Like
2463

Hey, first, thanks for sharing your work, an excellent UI was the missing piece for me to finally leave Homekit for good (not that Homekit’s app was very good, but the controls were user-friendly).

I am still a new to HA, but I have a background in web development, my question is, what is the coding language in the yaml files, in the template.yaml file for example? Is there any documentation on the syntax? Is it python, embedded in yaml using something like handlebars? It’s a huge pain trying to write an if statement that executes properly just by following your existing code, if there’s somewhere I can look to check all the available methods and proper syntax it would speed up my efforts considerably.

Thanks!

2464

”Jinja2 is a modern day templating language for Python developers.”

Templating documentation

Jinja2 documentation

https://jinja.palletsprojects.com/en/3.0.x/templates/

Live testing

1 Like
2465

thank you so much, this will speed up development considerably!

2467

Thanks Mattias for sharing your awesome dashboard and configuration. I had a tablet laying around for some time and not really used it. Decided to put some time and effort in using your dashboard and very happy with the result. The tablet now has a nice place in my living room :grinning:

For my computer I have installed the dashboard as an app with Microsoft Edge which is also a cool solution. See the attached screenshot.
Thanks again for making and sharing this. It makes Home Assistant even nicer to use :+1:

HA tablet
HA tablet1323×868 161 KB

8 Likes
2468

Why it wont recognize the template?

image
image1560×556 66.2 KB

image

2469

Did not know of Teslamate! It’s awesome, thanks!

Two quick questions:

  • where did you get the blance_battery_sensor? Is that still the tesla addon that I head as well?
  • as far as I’m aware teslamate doesn’t expose services to enable climate or sentry.

How did you solve these?

2470

Hi. Why cards such as “Keuken” and “Eeettafel” have black light bulbs when they are turned on?

2471

These are lights that can only be dimmed and have no color attributes so that will be the reason that the light_color calculation in the button-card-template will return it as black.

1 Like
2472

The blanche_battery_sensor if from the Tesla integration that you are using. My wife named her Tesla “Blanche” (white in french). You reminded me that I need to change that back to the Teslamate value.

And you are correct, Teslamate doesn’t do climate (but it does have a on/off binary sensor for climate). That’s why I still use the tesla integration along the teslamate one.

Both are running at the same time and I use the info I need from one or the other, whatever one is more accurate in time.

2474

Thanks! Final question for now:

All mqtt sensors that have a payload_on key in the configration fail with this error:

Invalid config for [sensor.mqtt]: [payload_on] is an invalid option for [sensor.mqtt]. Check: sensor.mqtt->payload_on. (See ?, line ?).

for this sensor (as an example):

  - platform: mqtt
    name: tesla_healthy
    state_topic: "teslamate/cars/1/healthy"
    payload_on: "true"
    payload_off: "false"
    icon: mdi:heart-pulse

Pretty sure I’m missing something but can’t figure out why.

Nevermind! Found what I did wrong: I put those sensors under the sensor tag, should have been the binary_sensor tag.

2475

Yeah, it’s a lot of new sensors all over the place… :sweat_smile:

2476

Would you mind sharing your climate popup card? perhaps I can steal a thing or two :smiley:

2477

Sure, it’s super simple. My card_mod that ads top-level-graph class is a gradient background that’s kinda cool. I added it in the themes.yaml

        .top-level-graph {
          border: solid 1px var(--secondary-text-color);
          background: linear-gradient(rgba(57, 103, 158, 1), rgba(0, 0, 0, 0.6) 56px, rgba(0, 0, 0, 0.6) 100%);
        }

and this is the popup

action: fire-dom-event
browser_mod:
  command: popup
  title: CLIMATE TESLA BLANCHE
  style:
    hui-vertical-stack-card:
      $hui-entities-card$ : |
        #states {
          padding-top: 0.5em;
          padding-bottom: 1.2em;
        }
  card:
    type: vertical-stack
    card_mod:
      class: top-level-graph
    cards:

      - type: thermostat
        entity: climate.blanche_hvac_climate_system

      - type: entities
        entities:
          - entity: sensor.tesla_inside_temp_1
            name: Temperature inside
          - entity: sensor.tesla_outside_temp_1
            name: Temperature outside

I’m still tweaking it. It’s not a priority right now.
Funny enough my values had been missing for the Tesla Integration and just today HA asked me to refresh the Refresh token. That was a first.

2478

Teslamate can be very powerful combined with Grafana and a database but I have to admit that I tried to make it work for months and was never able to so I gave up. I just use the values, no graphs.
I already have an iPhone app for the graphs so I’m good.

2479

Perhaps I can help? I have it working

2480

Man, I could never get it to work. I gave up when the database disappeared one day and then Teslamate wouldn’t work even after reset and deleting it and reinstall and the guy who created it couldn’t figure out why. Then 5 months later I tried to reinstall it and it worked. I just left it at that. :joy:
But thanks… I’m good though. :sweat_smile:

2481

Hey @Mattias_Persson What is the size of the footer if I want to put images in there, what size should they be to fit correctly?
Thanks

2482

Thanks for this great theme!

Been using for a while with some mods I made. This is the best theme for home assistant. Thanks Mattias!!

Screenshot_2022-01-13-16-08-14-939|170x500

2 Likes