A different take on designing a Lovelace UI

You can probably come close with slider-button-card#styles

EDIT:

or make your own… :sweat_smile:

type: custom:button-card
tap_action:
  slider: function
custom_fields:
  slider: >
    <input type="range">

I tried like you, but the icons doesn’t appear on the same line.

1 Like

https://www.home-assistant.io/lovelace/grid/#columns

@Mattias_Persson , I’m ashamed :see_no_evil:
But also I’m thankful because you give us, the beginners good advices!
Thank you very much!

@Mattias_Persson why did you changed to apex-charts?

Do you have any additional benefits?

Yes, just in the first example I used to use two template sensors adjusted with card mod over a mini graph card. Now it’s just a single apexcharts card :+1:

:heart_eyes: Looks wonderful

Maybe when I have some spare time…

I just got a fire HD 10 to complete my HA setup. Therefore I’m also integrating your tablet configuration.

The Entities Lovelace card says “wrong time format” :confused: Any hints on how to change the time format in a proper way? Thanks in advance :slight_smile:
image

    - unique_id: fullykiosk_last_app_start
      icon: mdi:update
      device_class: timestamp
      state: >
        {{ states('sensor.fire_tablet_last_app_start') | replace(' ','T') | replace('.','-') }}

EDIT: I tried to solve it by replacing 12.11.21 to 12-11-21 but it’s not enough. Probably need 2021-11-12

Yeah, mine’s like that

1

strptime → timestamp_custom?

{% set time = '12-11-21 12:19:54' %}
{{ strptime(time, '%d-%m-%y %H:%M:%S') | timestamp_custom | replace(' ','T') }}
2 Likes

Hi,
I’ve added some Tellstick temprature sensors to my system and to the UI. However when i click on these sensors in the UI i get a error "Failed to call service “sensor/turn_off” is there any way to disable this?

https://www.home-assistant.io/lovelace/actions/#tap_action

There is no specified tap_action or hold action in for this button-card… l I dont need any tap_action for this button. I just want to display the temprature and when tapped nothing should happen. But i get the “Failed to call error” I can’t find where this “Tap_action” is located so i can remove it. Skärmavbild 2021-11-13 kl. 14.26.08
(this seems to apply to all “sensor” entities)

There is. In the base template there’s a toggle tap action. You can override it with the none action from the link

1 Like

Thank you for leading me to the right place. I created a new template and removed the toggle to use for my sensors. :slight_smile:

Nice! I didn’t know about the url part at the end of your post. Works well. Thank you.

I’m just going to leave this here… so that I can possibly leave some inspiration for those still trying to figure this out…just as much as I was inspired by Mattias Persson when I first came across this post just over 3 months ago. Yes it’s been a challenging journey and spending 2-3 hours every evening on progressing to the next level but the reward has been unbelievable. It’s time to give credit where credit it due. I have achieved what I never thought I was capable of and thankfully it isn’t the end as there is still so much to learn! Thank you Mattias Persson for your inspiration and continued support! You are a Rock Star! :clap:

4 Likes

It is a lot of hard work. And be prepared to put in a lot of hours in getting to your acquired results but trust me it is well worth the hours put in. You’re going to end with a result you will be very much proud of. Good luck and please post your progress as it instills inspiration to others.

I’m trying to do a tap_action to turn on a switch and if I do a tap_action again, provided that the switch is on, in this case it turns off the switch. How can I do that?
Je ne vois pas comment gérer avec les variables dans Button_card_template.

U can do this with the service “switch.toggle”. @antyamok

@Mattias_Persson Just WoW! Impressed! I have a question about lights. I’d like to group lights say for kitchen or living room but still be able to handle them individually. I just get a list of all the included lights, but without name or any identifier.
Having the lights friendly name listed in between the hue and brightness would be cool.
Do you have an idéa for the best approach for this? A popup with all the lights in an area with individual settings for each lights also could be an alternative of course…
BR
Runar