rdehuyss
(Ronald Dehuysser)
July 22, 2018, 5:12pm
1
Hi all,
Is it possible to create a custom Lovelace card that takes 100% of screen width?
Why? I want to create a digital bedside clock which goes full screen at night with large digits (so easy to read) and smaller between 21h and 23h so I can then show some extra cards (weather, lights that are still on, … )
Thanks,
Ronald
Yes, under the title of a view add panel, that will make the first card screen width.
But Badges won’t show with panel: true for me.
title: My Awesome Home
views:
- title: info
panel: true
6 Likes
How are you going about adding a clock display to the interface?
Are you also planning on hiding the top blue menu bar? I’m trying to find away to hide that.
rdehuyss
(Ronald Dehuysser)
July 27, 2018, 12:46pm
4
No, it would still be there… But, just started so. I’ll keep you posted once it is available
I found this, which may be of use if you do want to hide the blue bar.
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
Haven’t tested it myself yet, but likely will later today.
1 Like
ciotlosm
(Marius)
July 30, 2018, 2:15pm
6
I’ve updated that script to hide side bar as well
I’ve got it working (running on a Nexus 7), but after some time (I assume the page refreshes) the blue bar returns.
ciotlosm
(Marius)
July 30, 2018, 3:01pm
8
It depends if you loose the kiosk word from query. Can you try with that in view id?
When using panel: true in my ui-lovelace.yaml the first card is full width as expected
But it is then hiding any cards that i’ve specified underneath
- title: Smart Home
panel: true
cards:
- cards:
- card:
type: glance
title: Components
columns: 12
entities:
- entity: sensor.count_automations
name: Automations
icon: mdi:autorenew
tap_action:
action: call-service
service: automation.reload
- entity: sensor.count_scripts
name: Scripts
icon: mdi:script-text-outline
tap_action: none
- cards:
- card:
type: light
entity: light.living_room_lamp
name: Living Room
- card:
type: light
entity: light.dining_room_lamp
name: Dining Room
type: horizontal-stack
- cards:
- card: light
type: light
entity: light.hallway_lamp
name: Hallway
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
Is there something I’ve missed? I’ve tried replacing the panel: true in different positions but with no joy
I’ve managed to get this working now!
- title: Smart Home
panel: true
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: glance
title: Components
columns: 12
entities:
- entity: sensor.count_automations
name: Automations
icon: mdi:autorenew
tap_action:
action: call-service
service: automation.reload
- entity: sensor.count_scripts
name: Scripts
icon: mdi:script-text-outline
tap_action: none
- type: horizontal-stack
cards:
- type: light
entity: light.hallway_lamp
name: Hallway
JonoS
(Jonathan)
March 18, 2022, 9:04pm
11
Thanks, JT this worked perfectly for me.