Quantcast
Channel: Configuration - Home Assistant Community
Viewing all articles
Browse latest Browse all 107680

Dashboard Layout help please!

$
0
0

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

Read full topic


Viewing all articles
Browse latest Browse all 107680

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>