A different take on designing a Lovelace UI

celeritas0725 · November 27, 2020, 11:38am

Already reverted module to js.
button-card is not visible in HACS even after adding the repository GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

image1158×652 77.5 KB

i also tried to to move the contents of button_card_templates.yaml to ui-lovelace.yaml but to no avail

No logs were also seen even after reboot.

Logs:

Updating ping binary_sensor took longer than the scheduled update interval 0:00:01
7:30:32 PM – Binary sensor (WARNING) - message first occurred at 7:30:23 PM and shows up 5 times
Uncaught thread exception
7:30:29 PM – /usr/src/homeassistant/homeassistant/bootstrap.py (ERROR)
Error while processing template: Template(“{{ states(‘sensor.date__time’) == (states.input_datetime.crockpot_start_time.attributes.timestamp | int | timestamp_custom(’%Y-%m-%d, %H:%M’, True)) }}”)
7:30:24 PM – helpers/template.py (ERROR) - message first occurred at 7:30:24 PM and shows up 2 times
None Connection Failed (count=1). Waiting 10s. Err: HTTPConnectionPool(host=‘192.168.254.161’, port=80): Max retries exceeded with url: /ISAPI/Event/notification/alertStream (Caused by NewConnectionError(’<urllib3.connection.HTTPConnection object at 0x7f1b12cfc580>: Failed to establish a new connection: [Errno 111] Connection refused’))
7:30:24 PM – /usr/local/lib/python3.8/site-packages/pyhik/hikvision.py (WARNING)
Failed to connect to the device at 192.168.254.26: Device not found
7:30:24 PM – Broadlink (ERROR) - message first occurred at 7:30:24 PM and shows up 2 times
Detected integration that attempted to create another Zeroconf instance. Please use the shared Zeroconf via await homeassistant.components.zeroconf.async_get_instance(hass). Please report issue to the custom component author for sonoff using this method at custom_components/sonoff/sonoff_local.py, line 130: self._zeroconf = Zeroconf()
7:30:24 PM – helpers/frame.py (WARNING)
Unable to connect to Dark Sky: 403 Client Error: Forbidden for url: https://api.darksky.net/forecast/hey/12.546228467728584,111.00465281328633?units=si&lang=en
7:30:20 PM – darksky (ERROR)
Hikvision event stream has no data, unable to set up
7:30:19 PM – hikvision (ERROR)
Unable to fetch deviceInfo, error: HTTPConnectionPool(host=‘192.168.254.161’, port=80): Max retries exceeded with url: /ISAPI/System/deviceInfo (Caused by NewConnectionError(’<urllib3.connection.HTTPConnection object at 0x7f1b1acf09a0>: Failed to establish a new connection: [Errno 111] Connection refused’))
7:30:18 PM – /usr/local/lib/python3.8/site-packages/pyhik/hikvision.py (ERROR)
The ‘host’ option is deprecated, please remove it from your configuration
7:30:17 PM – Broadlink (WARNING) - message first occurred at 7:30:17 PM and shows up 9 times
SwitchDevice is deprecated, modify TuyaDevice to extend SwitchEntity
7:30:17 PM – Switch (WARNING)
You are using a custom integration for localtuya which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant.
7:30:17 PM – loader.py (WARNING)
You are using a custom integration for braviatv_psk which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant.
7:30:17 PM – loader.py (WARNING)
Unable to register panel Floorplan: Either js_url, module_url or html_url is required.
7:30:17 PM – Custom Panel (ERROR)

Apologies if I got so much question and thank you for your support!

GodOdin · November 27, 2020, 12:42pm

Thanks for your answer. I hope you will fix it soon.

stugreenham · November 27, 2020, 4:05pm

@Mattias_Persson thanks for sharing your work and also helping so many people in this thread already. I’m stuck and wondering if you or anyone else can help me. I’ve got the markdown sidebar card pinned at the top and full width. On my desktop it’s fine but on my iPad it appears with a white background.

Looking through the inspector, it seems to be the following style:

background: var( --ha-card-background, var(--card-background-color, white) );

I just can’t figure out how to target it from here:

- type: custom:hui-element
  card_type: markdown
  class: sidebar
  style:
    top: 0%
    left: 0%
    width: 100%
  content: >
    <h1>{{ states('sensor.time') }}</h1>
    <h2>{{ states('sensor.sidebar_day') }}, {{ states('sensor.sidebar_date') }}</h2>

Here is what I’m seeing (tablet vs desktop)

stugreenham · November 27, 2020, 5:19pm

Turns out I was logged in as a different user which had a different theme selected

celeritas0725 · November 28, 2020, 12:26am

hi! may I know how did you show the grid on your interface?

stugreenham · November 28, 2020, 10:25pm

I just added guidelines in Figma and exported it as a png. I’m trying to replicate my dashboard design

celeritas0725 · November 29, 2020, 1:50am

nice. will check that out. thank you!

Schlibib · November 29, 2020, 8:38pm

Hi @Mattias_Persson, i saw that you are able to get the uptime of your Synology through SNMP. Are you using SNMPv1, SNMPv2c service with public community name? I’m not knowledgable regarding SNMP but i was thinking if it is possible/better to use SNMP v3?

Mattias_Persson · November 30, 2020, 1:38pm

I do. But this reminds me that there’s a ”new” synology uptime sensor here

Schlibib · November 30, 2020, 3:37pm

Awesome, that solves it! Thanks!

mabrilgarrido · December 2, 2020, 11:13am

Hi there. I cannot apply styling and I am going crazy. Am I missing sth? Here you are my pieces of code:

include/themes.yaml: got from @Mattias_Persson repo. No modification.
configuration.yaml

default_config:

homeassistant:
  allowlist_external_dirs: [/config/]
  packages: !include_dir_named include

lovelace:
  mode: yaml

  resources:
    [ {url: /hacsfiles/bar-card/bar-card.js,                                  type: module},
      {url: /hacsfiles/button-card/button-card.js,                            type: module},
      {url: /hacsfiles/decluttering-card/decluttering-card.js,                type: module},
      {url: /hacsfiles/lovelace-buien-rain-card/buien-rain-card.js,           type: module},
      {url: /hacsfiles/lovelace-card-mod/card-mod.js,                         type: module},
      {url: /hacsfiles/lovelace-hui-element/hui-element.js,                   type: module},
      {url: /hacsfiles/lovelace-layout-card/layout-card.js,                   type: module},
      {url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js,             type: module},
      {url: /hacsfiles/mini-media-player/mini-media-player-bundle.js,         type: module},
      {url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js,     type: module},
      {url: /hacsfiles/stack-in-card/stack-in-card.js,                        type: module},
      {url: /hacsfiles/thermostat-popup-card/thermostat-popup-card.js,        type: module},
      {url: /hacsfiles/weather-card/weather-card.js,                          type: module},
      {url: /local/font.css,

ui-lovelace.yaml

button_card_templates: !include button_card_templates.yaml

# It is to reuse code. Similar than anchors
decluttering_templates:
  title:
    card:
      type: markdown
      content: '[[content]]'
      style: |
        ha-card {
          --ha-card-background: rgba(0, 0, 0, 0.0);
          --ha-card-box-shadow: none;
          color: '#bcbebf';
          font-family: SF Text;
          font-size: 2.4vw;
          font-weight: 500;
          max-width: 1px;
          cursor: default;
        }

title: Casa
views: !include_dir_list ui-lovelace/

ui-lovelave/main.yaml

title: Main
path: Main
panel: true
badges: []
cards:
  - type: picture-elements
    image: /local/background.png
    elements:
      - type: 'custom:hui-element'
        card_type: markdown
        style:
          opacity: 0
        content: preload
          
      ## SIDEBAR ###############################################################

      - type: image
        image: local/sidebar.png
        tap_action:
          action: none
        hold_action:
          action: none
        style:
          {top: 49.24%, left: 10.6%, width: 21.5%, pointer-events: none, border-right: '1.5px solid rgba(58,69,73,0.2)'}

      ## MARKDOWN ##############################################################

      - type: 'custom:hui-element'
        card_type: markdown
        class: sidebar
        style:
          {top: 9%, left: 11.1%}
        content: >
          <span><h1>{{ states('sensor.time') }}</h1></span>
          <font color='#6a7377'><b>{{ states('sensor.day') }}</b><br>
          <b>{{states('sensor.month') }}</b></font><br>
          <b>{{states('sensor.sidebar_greeting') }}</b>

      # LIVING ROOM ############################################################
      - type: 'custom:decluttering-card'
        template: title
        variables:
          - content: 'Salón'
        style:
          top: 9.15%
          left: 25.4%

Mattias_Persson · December 2, 2020, 11:29am

At a quick glance resources should be in configuration not ui-lovelace.

mabrilgarrido · December 2, 2020, 12:37pm

My mistake copying&pasting. I updated my previous post and I attached the result:

xyboox · December 2, 2020, 1:16pm

Hey guys,

qq: is it important the order the properties are written in the config files? I’m asking this because I have this rather awkward situation: every ~3 out of 4 times I load the HASS UI in Chrome browser ( on Mac ) I get the error as seen in the attached screenshot and of course the kiosk mode is not working. So I thought… maybe the kiosk lib is used before lovelace is inited!?

benji1703 · December 3, 2020, 8:28am

@xyboox - I’ve faced this issue as well, without any real good reason.
Looks like a weird race condition.
In my system, when removing browser_mod, everything was rock solid.
But since I needed browser_mod more than kiosk_mode…

Mattias_Persson · December 3, 2020, 11:09am

@xyboox @benji1703

Same. If you have the time open an issue over at the repo. I’ve downgraded to 1.2.2 for now.

xyboox · December 3, 2020, 12:27pm

Thanks @Mattias_Persson for the tip, but for me is not working. Further more, if I try to install v1.2.2, I end up with v1.2.1 ( which is now loading, but not doing the job ). This is so messed up…

benji1703 · December 3, 2020, 12:35pm

@xyboox - I’ve seen that you opened a bug on github, put mine in the thread as well.

@Mattias_Persson - I opened in browser_mod, since I am not really sure what is the cause.

johansvensson911 · December 3, 2020, 3:18pm

I’m new to this kind of thing and everything about coding is totally new for me. Are moving away from HomeKit and would like to learn Home Assistant at my best to get the most out of my smart home as possible. This UI looks absolutely stunning. Holy crap! But how? How on earth do I make my own Home Assistant UI look like this? I’ve read every comment on this topic and I still don’t understand. Where do I begin? What files do I copy? OR can I copy from this link at all?

Someone, please. Just explain where I begin to build this amazing UI?

xyboox · December 4, 2020, 4:19pm

If you’re new to HASS, I would recommend to firstly try and go through the documentation at https://hass.io for a while, until you grasp the concept ( especially of lovelace ). This implementation is not what I would call a simple or basic one. It doesn’t have an “install” button and does not rely in simple copy the source and paste on destination. Everything and I mean EVERYTHING needs to be personalised according to your setup. This is just an example and should be used only as a guide to achieving something alike. If you have punctual question related to this, someone will most likely offer help here. Good luck!