Hi All,
I have a nsPanel touch panel (Tuya 6TE) installed and working. I am using FullyKiosk Android (licensed) to provide integration with Home Assistant.
I have created a specific dashboard for use only on this panel. I am using Kiosk mode to remove the HA headers and sidebar. Everything is working except for a specific layout issue.
The screen is 480x480 pixels, and I am strugging to get my layout to fill the available space.
I want this top layout, but I get the 2nd and 3rd (Apologies for combining them - as a new user I can only add a single image to this post).
In the second photograph, I’ve had to scroll down to get to the buttons
I want the ‘interaction area’ to be a fixed size, with the content being stretched or shrunk to fit. This should mean the ‘fixed button area’ is always visible and always ‘docked’ to the bottom of the screen.
If the content of the interaction area is smaller than the available space, then I’m happy also to have white space added below the content (but above the buttons - keeping the buttons fixed at the bottom).
Ideally, the dashboards should not scroll (with the main content being shrunk to fit the interaction area).
My Yaml (for the lights page) is as follows:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: light.lounge_lights
state: "off"
card:
show_name: true
show_icon: true
type: button
entity: light.lounge_lights
name: 100%
tap_action:
action: perform-action
perform_action: script.turn_on
target:
entity_id: script.set_lounge_light_100
icon: mdi:lightbulb-on
- type: conditional
conditions:
- condition: state
entity: light.lounge_lights
state: "on"
card:
show_name: true
show_icon: true
type: button
entity: light.lounge_lights
name: "Off"
tap_action:
action: perform-action
perform_action: script.turn_on
target:
entity_id: script.set_lounge_light_0
icon: mdi:lightbulb-off
- type: vertical-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: perform-action
perform_action: script.turn_on
target:
entity_id: script.set_lounge_light_33
entity: light.lounge_lights
name: 33%
icon: mdi:lightbulb-on-30
- show_name: true
show_icon: true
type: button
tap_action:
action: perform-action
perform_action: script.turn_on
target:
entity_id: script.set_lounge_light_66
entity: light.lounge_lights
name: 66%
icon: mdi:lightbulb-on-60
- square: false
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /tablet-kiosk-dashboard/heating
name: Heating
icon: mdi:home-thermometer
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /tablet-kiosk-dashboard/door-bell
name: Door
icon: mdi:door
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /tablet-kiosk-dashboard/alarm
name: Alarm
icon: mdi:alarm-panel-outline
show_state: false
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /tablet-kiosk-dashboard/wifi
name: Wifi
icon: mdi:wifi
show_state: true
columns: 4
I am happy to do any hacks or tricks to get this working, as this dashboard is specifically ONLY for this device and won’t be used anywhere else (it is hidden on all other devices)
ChatGPT doesn’t have a cooking-clue as to what to do here, I think I need a proper human with knowledge of css or flow layouts to help?
Many thanks in advance!
2 posts - 2 participants