Configure lovelace cards as side panels

Miicroo · January 29, 2020, 7:46pm

I have a few input_booleans and input_numbers to configure things like when and if automations should run. It is nice to have them in the UI so I don’t have to change the config every time I would like to update the values. However, the frontend feels kind of cluttered when I add them, and usually I just end up with lots of tabs with configuration. Instead I would like to add them as different side panels (like HACS and configuration panel and such). Is there an easy way to create such a side panel without having to code a custom panel in javascript? I dont mind coding it, I just prefer to configure it just like the main UI if I can

silvrr · January 30, 2020, 3:55am

A bit of a hack but I was curious if you could do this.

First use the link below to get a kisok view (no top bar no side bar)

gist.github.com

https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931

Readme.md

# Kiosk mode

## Installation

Add `kiosk.js` file with the content below to your `www` folder in config.

Like any other custom script, use `ui-lovelace.yaml` resources section to reference the `kiosk.js` file.

Make sure you add `kiosk` somewhere in your URL. You can use it in the id of your view or in the query string.

This file has been truncated. show original

kiosk.js

if (window.location.href.indexOf('kiosk') > 0) {
    setTimeout(function () {
        try {
            const home_assistant_main =  document
                  .querySelector("body > home-assistant").shadowRoot
                  .querySelector("home-assistant-main");
            
            const header = home_assistant_main.shadowRoot
                  .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                  .querySelector("hui-root").shadowRoot

This file has been truncated. show original

ui-lovelace.yaml

resources:
  - url: /local/kiosk.js
    type: js
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.1
    type: module
title: Lovelace Demo
views:
  - title: Home
    icon: mdi:heart
    id: kiosk_thermostat

This file has been truncated. show original

Then use the url for a view and follow it with ?kiosk as the URL for an iframe_panel (ie. https://192.168.1.2:8123/lovelace/4?kiosk)

example:

panel_iframe:
  automations:
    title: 'Automations'
    url: https://192.168.1.2:8123/lovelace/4?kiosk
    icon: mdi:home-automation

If you don’t want the view to show, put it as the last view and use icon: mdi:blank which will hide the icon and make it appear as its not there.

So super hacky, but it works.

Miicroo · January 30, 2020, 12:08pm

Really like this despite the hackiness! Haven’t tried it yet on my system, but I cant think of anything that prevents me from using the same solution in several panels, right? In that case it would be a supersmooth solution since adding more panels would only require 3 more lines of code (per panel)!