#Trying to create simple UI for datetime and boolean

1 messages · Page 1 of 1 (latest)

kindred gyro
#

Hi,

I'm pretty new to HA. I want to create this simple UI for an input_datetime and input_boolean. Something clean, aligned, with time-picker (from HACS) and a switch to toggle the boolean (see example image).

So far, I've been frustratingly unsuccessful. Can't find a way to create the switch so it appears as toggle and not a button. Using "entity" card doesn't seem to work (displayed as state) and putting it inside "entities" messes up the alignment and has an icon I can't seem to remove.

type: custom:vertical-stack-in-card
cards:
  # This part is ok
  - type: custom:time-picker-card
    entity: input_datetime.water_heater_timer_start_time
    name: Water Heater Start Time
    icon: mdi:timer-sync
    layout:
      name: inside
      thin: true
      align_controls: right
  # This doesn't display a switch
  - type: entity
    entity: input_boolean.water_heater_timer_active

Seems like something trivial to do, any ideas?

Thanks

nova hornet
#

As far as i know, you need card_mod to do this (CMIIW)
If you have it installed, try this:

type: custom:vertical-stack-in-card
cards:
  - type: custom:time-picker-card
    entity: input_datetime.water_heater_timer_start_time
    name: Water Heater Start Time
    icon: mdi:timer-sync
    layout:
      name: inside
      thin: true
      align_controls: right
  - type: entities
    entities:
      - entity: input_boolean.water_heater_timer_active
        name: Enabled
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge {
                display: none;
              }
              .info {
                margin-left: 25px !important;
              }
blissful pine
#

Here's my take on this kind of set up. Instead of the stack-in-card, I used a custom:button-card for a bit more layout and styling control. The time-picker-card and entities card are added a custom_fields. Some extra (almost too much) card_mod for some extra styling.

kindred gyro
#

@blissful pine That's nice, very close to what I wanted but I should be able to tweak that.

I'm somewhat disappointed to learn how much biolerplate and hackish code is required to achieve even very trivial custom UI setup in HA but it's good to know it's doable at least.

Thanks!