Horizontal line state card for Home Assistant

covrig · February 8, 2018, 2:36pm

Horizontal line state card for Home Assistant. Used to separate entities in a group .
Maybe some of you are interested. I use it to organize my large groups.

Features:

Highly customizable: width, thickness, borders, images, color, dashes, double lines etc.
More than one can be added to the interface.
Disabled more-info card.

anon43302295 · February 8, 2018, 7:14pm

This is ace

Thanks for posting

wixoff · February 9, 2018, 7:41pm

Brilliant. I have been looking for something like this.

VDRainer · February 10, 2018, 7:43pm

I can’t get this to work in firefox.
One time it shows up with no line and clicking on it shows the state card, the other time it shows multiple lines and for every line an error in the log.

Auswahl_074

2018-02-10 20:27:58 ERROR (MainThread) [frontend.js.latest.201801300] data:text/javascript;charset=utf-8,%0Aclass%20HLine%20extends%20Polymer.Element%20%7B%0A%20%20static%20get%20is()%20%7B%20return%20'state-card-hline'%3B%20%7D%0A%20%20static%20get%20properties()%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20hass%3A%20Object%2C%0A%20%20%20%20%20%20stateObj%3A%20Object%2C%0A%20%20%20%20%20%20config%3A%20%7B%0A%20%20%20%20%20%20%20%20type%3A%20Object%2C%0A%20%20%20%20%20%20%20%20computed%3A%20'computeConfig(stateObj)'%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20computeConfig(stateObj)%20%7B%20%20%20%20%20%0A%20%20%20%20return%20stateObj.attributes.config%3B%0A%20%20%7D%0A%20%20ready()%20%7B%0A%20%20%20%20super.ready()%3B%0A%20%20%20%20var%20config%20%3D%20this.config%3B%0A%20%20%20%20this.updateStyles(%7B%0A%20%20%20%20%20%20'--width'%3A%20(config.width)%2B'%25'%20%3F%20(config.width)%2B'%25'%20%3A%20'85%25'%2C%0A%20%20%20%20%20%20'--height'%3A%20config.height%2B'px'%20%3F%20config.height%2B'px'%20%3A%20'0px'%2C%0A%20%20%20%20%20%20'--bordertop'%3A%20config.bordertop%20%3F%20config.bordertop%20%3A%20'1px%20solid%20black'%2C%0A%20%20%20%20%20%20'--backgroundcolor'%3A%20config.backgroundcolor%20%3F%20config.backgroundcolor%20%3A%20'white'%2C%0A%20%20%20%20%20%20'--backgroundimage'%3A%20config.backgroundimage%20%3F%20config.backgroundimage%20%3A%20'none'%2C%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%20%20cardTapped(ev)%20%7B%0A%20%20%20%20%20%20ev.stopPropagation()%3B%0A%20%20%7D%0A%7D%0AcustomElements.define(HLine.is%2C%20HLine)%3B%0A%0A%2F%2F%23%20sourceURL%3Dhttp%3A%2F%2F192.168.77.67%3A8123%2Flocal%2Fcustom_ui%2Fstate-card-hline.html.js%0A:0:0 Script error.

What am i doing wrong?

EDIT:
In chrome it shows a line, but also an error on page reload.
Auswahl_075
2018-02-10 20:49:44 ERROR (MainThread) [frontend.js.latest.201801300] http://192.168.77.67:8123/local/custom_ui/state-card-hline.html:46:26 Uncaught TypeError: Cannot read property 'width' of undefined

covrig · February 10, 2018, 9:29pm

Can you post your config options here please? Probably it’s something trivial.

VDRainer · February 10, 2018, 9:46pm

Hi @covrig, thanks for your response.

Here is my config:

Your html file in www/custom_ui/state-card-hline.html

configuration.yaml

frontend:
  themes: !include themes.yaml
  javascript_version: auto
  extra_html_url:
    - /local/custom_ui/state-card-hline.html

packages/pkg_tests.yaml

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

customize.yaml

sensor.hline_1:
  custom_ui_state_card: state-card-hline

groups/tab_keller.yaml

keller_alt:
  name: 'Keller alt'
  control: hidden
  entities:
    - sensor.keller_temp
    - sensor.keller_humi
    - sensor.sonoff16a_temp
    - sensor.sonoff16a_humi
    - sensor.hline_1
    - binary_sensor.keller_lueften

Thats all.
Thanks in advance!

covrig · February 10, 2018, 11:05pm

Should be fixed now. There was a small bug in my code.
Replace the state-card-hline.html with the new one and it should work. I was just asking for the config options under the customize section if your sensor. You can customize the line as you wish.

JesseWebDotCom · February 10, 2018, 11:58pm

I don’t think this works in IOS safari. Can someone else confirm?

VDRainer · February 11, 2018, 12:07am

Thanks for this fast fix!
Works now!

VDRainer · February 11, 2018, 1:14am

Seems like HA shows sensor only once per group.
If i insert the sensor multiple times in a group, only the first is shown.

covrig · February 11, 2018, 7:20am

That is normal. The line is a sensor and acts like one (once per group; can be used in different groups). Just create more of them.

ha_novice · February 14, 2018, 9:57pm

Should this work in OSX Safari (version 11.0.3) as well? Doesn’t seem to work for me with the same setup as above. I see a taller gap between the items in the group where the line ought to be and when I click there I see the line status panel popup.

covrig · February 14, 2018, 10:00pm

Yes, it should. Do you see any error in the console? Try changing the config options or leave empty.

    sensor.hline_1:
      custom_ui_state_card: state-card-hline

ha_novice · February 14, 2018, 10:26pm

Don’t see any errors in the safari console or HA logs and config validation is ok. Tried with both config options and without and also different colour themes (just-in-case) as well as default and still no luck. Probably something I’m doing wrong - will dig around some more…

ha_novice · February 14, 2018, 10:42pm

Ok got it doesn’t seem to work if you have the following in your config:

frontend:
  javascript_version: es5

I recall adding this to fix another issue but I can’t remember what it was…

When I remove the javascript_version from the config the horizontal line works fine. Now to figure out why I added this config in the first place.

covrig · February 15, 2018, 11:58am

I added the ES5, Use the other file.

ha_novice · February 15, 2018, 6:56pm

Thanks, unfortunately I’m getting the following syntax error:

custom_ui%2Fstate-card-hline_es5.html.js%0A:15:0
Feb 15 18:53:43 raspberrypi hass[7951]:  SyntaxError: Unexpected token ';'. Expected '}' to end an object literal.

Tried to debug but my coding is hopeless.

covrig · February 15, 2018, 7:17pm

My fault. Either replace the file or the ; with , on line 41.

ha_novice · February 15, 2018, 8:25pm

Didn’t seem to be happy with the ‘var’ keyword:

Feb 15 20:11:05 raspberrypi hass[23248]: SyntaxError: Unexpected keyword 'var'

No idea if it was the right thing to do but removed the ‘var’ keyword the two lines as shown below and it seems to work fine now:

    configdummy = {
...
    config = this.config || configdummy;

Thanks for the quick turn-around on the es5 version.

BullFrog · April 10, 2018, 10:12am

It doesn’t show anything. Also when I open the HTML in IE or firefox it is just a blank white page.
Without customization, I can see the sensor on its proper place, but when I call the html, I see nothing, it is completely blank.

sensor.yaml

- platform: template
  sensors:
    hline_1:
      value_template: hline
    hline_2:
      value_template: hline

customize.yaml

sensor.hline_1:
  custom_ui_state_card: state-card-hline
sensor.hline_2:
  custom_ui_state_card: state-card-hline

Configuration.yaml

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

groups.yaml

Otthon:
  control: hidden
  entities:
    - alarm_control_panel.alarm
    - device_tracker.google_maps_123
    - device_tracker.google_maps_456
    - sensor.hline_1
    - sensor.gohome
    - sensor.gowork