Horizontal line state card for Home Assistant

Share your Projects! Dashboards & Frontend
23

You’re missing the es5 extra_html configuration.

24

Do I need that? I thought its only needed when we use this:

frontend:
  javascript_version: es5

I’m literally copy pasted the guide and didn’t see the mentioning there.

25

This looks great!
But it doesn’t work for me either, again I just copied and pasted as per the instructions, with the es5 (although I agree the installation instructions do say “or” without any guide about how to choose!)

I saw this though “(create the folder structure if you don’t have it - mind the permissions)”
I had to create my custom_ui folder and I did it from Visual Studio Code. Perhaps that is the problem?

It’s no big deal but I do like the look of it.

26

@BullFrog @klogg
I updated the instructions.

Main idea:

Just to be sure - download both versions to your local folder and add the following in the frontend section.

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-hline.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-hline_es5.html

The value in the config can be overiden by putting es5 or latest in the URL. For example http://localhost:8123/states?es5. However, this shouldn’t be needed if you use both versions.

Clear the cache of the browser (CTRL+F5 or https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/).

A restart might help in some cases for you @klogg. After the restart the folders will be visible in Linux.

27

Thanks, it works fine without any change on my home computer, I will give it a try tomorrow at my notebook too. Looks great, thank you!

28

I tried again but still no luck.
I do have a slightly bigger space between the entities where the hline sensor should be so it is trying to do something.

It’s obviously no big deal this end, I can live without it for now, but if you want some more info from me I’m happy to provide it.

29

Did you clear the cache? Did you customize your line?
e.g.

    sensor.hline_1:
     custom_ui_state_card: state-card-hline
     config:
       width: 90 --> in percents
       height: 0 --> in pixels, adds to bordertop
       backgroundcolor: white
       bordertop: '1px solid black'
30

Yes I cleared the cache and customised.

This is how I have it set up but don’t feel you need to pursue this on my behalf unless you want to! I have plenty to be getting on with in terms of setting up my HA.

frontend:
  # Horizontal line state card
  # https://github.com/covrig/homeassistant-hline
  extra_html_url:
    - /local/custom_ui/state-card-hline.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-hline_es5.html

sensors.yaml

- platform: template
  sensors:
# Horizontal line state card      
    hline_1:
      value_template: hline
    hline_2:
      value_template: hline

groups.yaml

system:
  name: System
  entities:
  - input_boolean.on_demand_snapshot
  - input_text.backup_name
  - sensor.hline_1
  - sensor.season
  - sensor.date
  - sensor.time
  - sensor.next_sunrise
  - sensor.next_sunset
  - sensor.sun_elevation
  - sensor.hline_2
  - sensor.current_version
  - sensor.uptime

customize.yaml

# Horizontal line state card customisations
sensor.hline_1:
  custom_ui_state_card: state-card-hline
  config:
    width: 90
    height: 0
    backgroundcolor: white
    bordertop: '1px solid black'

sensor.hline_2:
  custom_ui_state_card: state-card-hline
  config:
    width: 90
    height: 0
    backgroundcolor: white
    bordertop: '1px solid black'

image

Note the slightly bigger gaps

image
image513×576 7.59 KB

31

I just installed it and I had the exact same thing happening as you.

I literally just had to hit the reload button on the browser for the frontend and everything showed up.

32

Thanks, I’ll give it a try again at some point!

33

You can’t use the same hline sensor twice or more in the same group/card. Or am I being captain obvious?

34

In the same group, no. It acts like a normal sensor.

35

Yep all good. I did some testing and just created multiple. Thanks!

36

Sadly, I can’t get this to work.
I tried a different PC too so that it shouldn’t have been affected by any cache issues.
I suppose I should say I am using Edge browser, maybe that makes a difference?

It’s a shame because I am really ready to use this now.

Any ideas? (Apart from use a different browser :stuck_out_tongue_winking_eye:)

37

@covrig When are you submitting this to Lovelace?

38

The line shows in full Width even though I have tried to set it to 10%. I can change the bordertop and see a difference but nothing happens to the Width when changing it. I have tried to reboot.