A different take on designing a Lovelace UI

Share your Projects!
82

The curl way is more consistent for me. The issue on my tablet is if I turn on the screen after 10 min, fully has to catch up so the screen is unresponsive for seconds.

I use cmd=startScreensaver and cmd=stopScreensaver because it’s instant on and there is no refresh delay.

I guess fully turns off the display in a way that prevents the tablet from going to sleep, or on some devices the screen is lowered to minimal brightness and displays a black image.

# sensor:
  - platform: rest
    name: fullykiosk
    json_attributes:
      ['batteryLevel', 'screenBrightness', 'plugged', 'deviceName', 'deviceModel', 
      'lastAppStart', 'internalStorageFreeSpace', 'internalStorageTotalSpace', 
      'ramFreeMemory', 'ramTotalMemory', 'currentFragment']
    resource: !secret fullykiosk_rest_resource
    value_template: '{{ value_json.isScreenOn }}'

# switch:
  - platform: template
    switches:
      fullykiosk_screensaver:
        value_template: >-
          {% if state_attr('sensor.fullykiosk', 'currentFragment') == 'screensaver' %}
            on
          {% else %}
            off
          {% endif %}
        turn_on:
          service: shell_command.fullykiosk_screensaver_on
        turn_off:
          service: shell_command.fullykiosk_screensaver_off

# shell_command:
fullykiosk_screensaver_on: "/usr/bin/curl -X POST '[REDACTED URL:PORT]/?cmd=startScreensaver&password=[REDACTED]'"
fullykiosk_screensaver_off: "/usr/bin/curl -X POST '[REDACTED URL:PORT]/?cmd=stopScreensaver&password=[REDACTED]'"
1 Like
83

Hey… Great design. I´m working on copy your design… Great job

2222
22221920×1080 554 KB

11 Likes
84

WOW! Great Theme!
Can you share the buttons gifs without the text?

85

Thanks for the great work.
I want to add a Glow Shadow like this one

image

Any idea how to do this?

2 Likes
86

Any idea how to do this?

style:
  filter: drop-shadow(0 0 0.75rem crimson)
3 Likes
87

It should glow with Color base on State of the light :wink:

88

Is that a question or are you telling me? haha

look into this https://www.home-assistant.io/lovelace/picture-elements/#how-to-use-state_filter

89

Thanks, it was a question. I will try it.

90

Hi… I.m trying to use a similar way to use my xiaomi vacuum with valetudo (model 1)… do you know the way to make multiple selection with " input_select" on Home Assistant??? or another command.

the goal is to choose multiples rooms and send to predefined valetudo zones (i´m use node-red for automations)…

Anotación 2020-03-01 192726
Anotación 2020-03-01 1927261892×956 456 KB

Thanks… and great job…

91

I’m not sure

Multiple zones

'zone_ids': ["guest room","study room","bed room","living room"]

If you have to use input select, maybe a template?

 - service: input_select.set_options
   data_template:
     entity_id: input_select.vacuum
     options:
       - Living room
       - '{{ states("input_text.new_zones") }}'
92

Thanks… I will try it…

Now I´m using input_boolean for each zone… But I´m thinking how can I simplify this…

93

Amazing work! I have one quick question though. Is it possible to set the alignment of the text (from markdown)? I have set up multiple markdown cards with templates for dynamic texts. But when the number is above 9 (so double digits) the text becomes longer ofcourse. However, the text seems te be centered, which expands the text from left and right. Basically I want the text to be aligned from left, so if the text becomes longer it just expands to the right. I tried adding ‘text-align: left’ to style, but that didn’t work.

Am I missing something crucial and simple, or is it just not possible?

94
95

Thanks for the quick reply! That does align it, however the text will only contain one word/number per line that way.

This is my style code:

            style:
              '--ha-card-background': none
              '--ha-card-box-shadow': none
              '--primary-text-color': 'rgba(255, 255, 255, 0.9)'
              font-family: Helvetica
              font-size: 10px
              font-weight: 300
              height: 1px
              max-height: 4vw
              left: 19%
              letter-spacing: 0.06vw
              max-width: 1px
              line-height: 2.05vw
              position: absolute
              top: 17%

Screenshot 2020-03-03 at 17.31.27

When I add max-width: 1px it aligns but only shows one text per line as you can see. Basically I want the text in the screenshot, but aligned. Am I missing something from my code?

Screenshot 2020-03-03 at 17.31.35

96

Yeah, max-width probably wouldn’t work for markdown. I don’t know why the text doesn’t align for you. Remove max width and background: none to see whats going on.

You could also make it a template sensor and use state-label with the max-width trick, but then you wouldn’t get line breaks at all.

97

Hey this is so cool :slight_smile: greate job, I am tring to set up the swipe-card and anything is working except the control it’s just blank, but if I swipe I see my 4 media players and what they are plaing, do you have any clue what i might doing wrong??

98

I got the text aligning working btw. Took a few hours of reading up on CSS but all is good now. I’ve been using HA for little over 3 months now, and have never worked with CSS or scripting. Thanks for your config setup, came real handy with understanding how to use picture elements. Also showed me how to create structure using yaml mode. Also borrowed your background :stuck_out_tongue:

I created a tablet version of my smartphone setup:

7 Likes
99

That looks great!

1 Like
100

@Mattias_Persson Hello! Please read your private message

101

There is a way to get spotify inside the “Media” tab?