FR: Input select template

[1liminal1]

I'm currently using input selects to bring up options for different rooms. But because my CSS is crap, it looks like a dogs breakfast.

Can I request this? Or is there already a template that would work and I've missed it?

Thanks so much and awesome work :)

[CM000n]

Can you give us some more info like screenshots or samples of the code you are currently using so we can get a better understanding of what you really need?

[1liminal1]

Sorry, I thought it made more sense when I wrote it LOL.

So this is my current set up. its been bastardised from:

https://github.com/pqpxo/SWAKES_hassio/tree/master/guides/Light%20Dashboard%202.0/YAML

So I have this first part that looks fine they are button cards that pick an input select

type: grid
cards:
  - type: custom:button-card
    color: transparent
    entity: input_select.room_lights
    show_name: true
    color_type: label-card
    name: Bedroom
    icon: phu:rooms-bedroom
    state:
      - icon: phu:rooms-bedroom
        styles:
          icon:
            - color: white
            - width: 40px
          name:
            - color: white
            - font-size: 12px
            - padding-top: 5px
        value: Bedroom
      - icon: phu:rooms-bedroom
        styles:
          icon:
            - color: white
            - opacity: 0.5
            - width: 40px
          name:
            - color: white
            - font-size: 12px
            - padding-top: 1px
        operator: default
    styles:
      icon: null
    tap_action:
      action: call-service
      service: input_select.select_option
      service_data:
        entity_id: input_select.room_lights
        option: Bedroom

That's just for one of the room select buttons.

But the light buttons look rubbish.

Phone screen shot

below is the code for just one of the buttons. So I was wondering if this would be the kind of functionality you guys might want to template. similar to the input Boolean template.

Hopefully this will be a lot clearer :)

type: custom:state-switch
entity: input_select.room_lights
states:
  Bedroom:
    type: grid
    cards:
      - type: custom:button-card
        icon: phu:light-strip
        entity: light.bedroom_hall_strip
        show_icon: true
        aspect_ratio: 1/1
        hold_action:
          action: more-info
        tap_action:
          action: toggle
        name: Bedroom Hall Strip
        show_state: true
        state:
          - styles:
              card:
                - background-color: '#242e42'
                - border-radius: 10%
                - padding: 12%
                - color: ivory
                - opacity: 0.7
                - font-size: 10px
                - text-shadow: 0px 0px 5px black
                - text-transform: capitalize
                - height: 100px
                - width: 100px
              grid:
                - grid-template-areas: '"i bright" "n n" "s s"'
                - grid-template-columns: 1fr 1fr
                - grid-template-rows: 1fr min-content min-content
              name:
                - font-weight: 300
                - font-size: 10px
                - color: white
                - opacity: 0.7
                - align-self: middle
                - justify-self: start
              state:
                - font-weight: bold
                - font-size: px
                - opacity: 0.7
                - color: white
                - align-self: middle
                - justify-self: start
              img_cell:
                - justify-content: start
                - align-items: start
                - margin: none
              icon:
                - width: 100%
                - opacity: 0.2
                - color: white
              custom_fields:
                bright:
                  - align-self: start
                  - justify-self: end
                  - border-radius: 20px
                  - border-style: solid
                  - border-width: 1px
                  - font-size: 10px
                  - font-weight: 300
                  - box-shadow: 2px 2px rgba(0,0,0,0.7)
                  - border-color: '#67727e'
                  - padding: 15%
            value: 'off'
          - styles:
              card:
                - background-color: '#242e42'
                - border-radius: 10%
                - padding: 12%
                - color: ivory
                - font-size: 10px
                - text-shadow: 0px 0px 5px black
                - text-transform: capitalize
                - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
                - height: 100px
                - width: 100px
              grid:
                - grid-template-areas: '"i bright" "n n" "s s"'
                - grid-template-columns: 1fr 1fr
                - grid-template-rows: 1fr min-content min-content
              name:
                - font-weight: 300
                - font-size: 10px
                - color: white
                - align-self: middle
                - justify-self: start
              state:
                - font-weight: bold
                - font-size: px
                - color: white
                - align-self: middle
                - justify-self: start
              img_cell:
                - justify-content: start
                - align-items: start
                - margin: none
              icon:
                - width: 100%
                - color: white
              custom_fields:
                bright:
                  - align-self: start
                  - justify-self: end
                  - border-radius: 20px
                  - border-style: solid
                  - border-width: 1px
                  - font-size: 10px
                  - font-weight: 300
                  - box-shadow: 2px 2px rgba(0,0,0,0.7)
                  - border-color: '#67727e'
                  - padding: 15%
            value: 'on'
          - styles:
              card:
                - background-color: '#242e42'
                - border-radius: 10%
                - padding: 12%
                - color: ivory
                - opacity: 0.7
                - font-size: 10px
                - text-shadow: 0px 0px 5px black
                - text-transform: capitalize
                - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
                - height: 100px
                - width: 100px
              grid:
                - grid-template-areas: '"i bright" "n n" "s s"'
                - grid-template-columns: 1fr 1fr
                - grid-template-rows: 1fr min-content min-content
              name:
                - font-weight: 300
                - font-size: 10px
                - opacity: 0.7
                - color: white
                - align-self: middle
                - justify-self: start
              state:
                - font-weight: bold
                - opacity: 0.7
                - font-size: 9px
                - color: white
                - align-self: middle
                - justify-self: start
              img_cell:
                - justify-content: start
                - align-items: start
                - margin: none
              icon:
                - width: 100%
                - opacity: 0.2
                - color: white
              custom_fields:
                bright:
                  - align-self: start
                  - justify-self: end
                  - border-radius: 20px
                  - border-style: solid
                  - border-width: 1px
                  - font-size: 10px
                  - font-weight: 300
                  - box-shadow: 2px 2px rgba(0,0,0,0.7)
                  - border-color: '#67727e'
                  - padding: 15%
            value: unavailable

[CM000n]

Hi @1liminal1, sorry for the late reply.
Maybe the latest iteration of our vertical_buttons_custom_state is already a solution for you?: #66

[1liminal1]

Hey mate,

Thanks for that! It does work.

But one thing I don't understand and thought that themes and templating were the point of sorting out (maybe I'm wrong) is spacing.

They are all stuck together.

And when I do hit the select for the light it just trys to add it in the end

Am I just misunderstanding how templates works? I just don't really understand the point if its not going to align it for you LOL

Let me know, or if there is something I've missed in the doco?

Thanks again for remembering and pointing me at this, I do appreciate that. And if I should be looking at some other place for the spacing issues, please let me know :)

This is my code with only one light attached right now

  - icon: phu:double-spot
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Living Room
              color: purple
            entity: input_select.room_lights
            icon: 'phu:rooms-living'
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Bedroom
              color: purple
            entity: input_select.room_lights
            icon: 'phu:rooms-bedroom'
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Bathroom
              color: purple
            entity: input_select.room_lights
            icon: 'phu:rooms-bathroom'  
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Kitchen
              color: purple
            entity: input_select.room_lights
            icon: 'mdi:countertop-outline'
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Liqing's Bathroom
              color: purple
            entity: input_select.room_lights
            icon: 'phu:rooms-bathroom' 
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Hall
              color: purple
            entity: input_select.room_lights
            icon: 'phu:rooms-hallway' 
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Laundry
              color: purple
            entity: input_select.room_lights
            icon: 'mdi:washing-machine' 
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Study
              color: purple
            entity: input_select.room_lights
            icon: 'phu:printer-3d-nozzle'  
          - type: 'custom:button-card'
            template: vertical_buttons_custom_state
            variables:
              state: Balcony
              color: purple
            entity: input_select.room_lights
            icon: 'phu:rooms-terrace'    
          - type: custom:state-switch
            entity: input_select.room_lights
            states:
              Bedroom:
                type: grid
                cards:
                  - type: 'custom:button-card'
                    template: card_light_slider_collapse
                    variables:
                      ulm_card_light_slider_collapse_name: Kitchen Light 4
                    entity: light.kitchen_light_4
          - type: custom:button-card
            template: edge

[CM000n]

I'm sorry, but templates and themes only take care of the respective design of the cards and the general color design of the ui. Only the distance of the individual cards to each other is determined, but not where they are located.
In your case you would have to adjust how the cards behave within the horizontal stack.
Maybe you should have a look at the custom layout card to determine the exact position of your cards:
https://github.com/thomasloven/lovelace-layout-card

Our theme/UI is unlike dwains Dashboard or HKI not a 1 click solution, because we still want to keep the greatest possible freedom in the layout and the dashboard design. Therefore, it currently requires a bit more manual work.

[CM000n]

By the way, it looks like you put your horizontal stack into another card? What kind of card is that? In your code example you can only see the definition of the icon. Maybe this card causes your problems?

[1liminal1]

Ok, so its meant to be like that. I do have the custom layout card and I'm playing with it now. But Its not working for me correctly. Not your problem though LOL :)

I didn't have it separated out at first (this is not my area, so teaching myself as I go) So I have it looking better. But again issues with the layout card the layout break is not working for me. Ill get on the HA forums for that.

Thanks so much for your help :)