Multiple switches

[ghost]

I want to use this card to control my fan. but I need more than one switch - one for speed (off, low, med, high) and a second column with oscillation (on, off)

[DBuit]

Hi, you could use horizontal stack card and add 2x the switch card

[Benekification]

Hi DBuit,

first of all thanks for all your hard work, my Lovelace consists of all your dev work ;) I have been daring to achieve the same as ghost and followed your recommendation to use the Horizontal Stack card unsuccessfully. Would you be able to check my code below or provide a working example to tinker with please?

fan.humidify: title: "" style: $: | .mdc-dialog .mdc-dialogcontainer { width: 100%; } .mdc-dialog .mdc-dialogcontainer .mdc-dialog__surface { width:100%; box-shadow:none; } .: | :host { --mdc-theme-surface: rgba(0,0,0,0); --secondary-background-color: rgba(0,0,0,0); --ha-card-background: rgba(0,0,0,0); --mdc-dialog-scrim-color: rgba(0,0,0,0.8); --mdc-dialog-min-height: 100%; --mdc-dialog-min-width: 100%; --mdc-dialog-max-width: 100%; } mwc-icon-button { color: #FFF; } card: type: horizontal-stack cards:

      type: custom:switch-popup-card
      icon: "mdi-fan"
      noActiveState: '-'
      entity_value_path: attributes.percentage
      service: fan.set_percentage
      service_data:
        entity_id: fan.humidify
        percentage: value
      entities:
      - fan.humidify
      buttons:
        - icon: "mdi:signal-cellular-3"
          value: "100"
          name: "High"
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"
        - icon: "mdi:signal-cellular-2"
          value: "70"
          name: 'Medium'
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"
        - icon: "mdi:signal-cellular-1"
          value: "40"
          name: "Low"
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"
        - icon: "mdi:weather-night"
          value: "10"
          name: "Sleep"
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"

      type: custom:switch-popup-card
      icon: "mdi-fan"
      noActiveState: '-'
      entity_value_path: attributes.percentage
      service: fan.set_percentage
      service_data:
        entity_id: fan.livingroom
        percentage: value
      entities:
      - fan.livingroom
      buttons:
        - icon: "mdi:signal-cellular-3"
          value: "100"
          name: "High"
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"
        - icon: "mdi:signal-cellular-2"
          value: "70"
          name: 'Medium'
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"
        - icon: "mdi:signal-cellular-1"
          value: "40"
          name: "Low"
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"
        - icon: "mdi:weather-night"
          value: "10"
          name: "Sleep"
          color: "#FFF"
          icon_color: "rgba(255,255,255,1)"

  icon: mdi:fan

Thanks in advance for your time and commitment, Ben

[jherby2k]

Did you ever figure this out? When i try a horizontal stack card they both end up on top of each other. I imagine its a style issue but that part is greek to me.

[400HPMustang]

Did you ever figure this out? When i try a horizontal stack card they both end up on top of each other. I imagine its a style issue but that part is greek to me.

I'm actually doing this on a button I pop up a light and a fan side by side. Ignore the ridiculous amount of blank cards in my vertical stack...I'm just doing that to center the particular card on screen. It's not perfect mind you, for some reason I cannot get the button colors to work the same as the examples for the popup button card.

type: vertical-stack
cards:
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - type: custom:button-card
    color_type: blank-card
  - icon: mdi:ceiling-fan-light
    name: Fan | Light Combo
    size: 60px
    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        content:
          card:
            cards:
              - card:
                  cardStyle: |
                    background-color:#808080;
                  entity: light.office_fan
                  fullscreen: false
                  sliderColor: '#FDF4DC'
                  switchHeight: 380px
                  switchWidth: 150px
                  type: custom:light-popup-card
                type: custom:mod-card
              - card:
                  buttons:
                    - color: '#000000'
                      icon: mdi:fan
                      icon_color: rgba(255,255,255,1)
                      name: Woosh!
                      value: 100
                    - color: '#000000'
                      icon: mdi:fan
                      icon_color: rgba(255,255,255,1)
                      name: High
                      value: 75
                    - color: '#000000'
                      icon: mdi:fan
                      icon_color: rgba(255,255,255,1)
                      name: Medium
                      value: 50
                    - color: '#000000'
                      icon: mdi:fan
                      icon_color: rgba(255,255,255,1)
                      name: Low
                      value: 25
                    - icon: mdi:fan-off
                      name: 'Off'
                      value: 0
                  entities:
                    - fan.office_fan
                  entity: fan.office_fan
                  entity_id: this
                  entity_value_path: attributes.percentage
                  service: fan.set_percentage
                  service_data:
                    entity_id: this
                    percentage: value
                  fullscreen: false
                  icon: mdi:fan
                  noActiveState: '-'
                  switchHeight: 380px
                  switchWidth: 150px
                  type: custom:switch-popup-card
                type: custom:mod-card
            type: horizontal-stack
          hide_header: true
          style:
            $: |
              .mdc-dialog .mdc-dialog__container {
                width: 100%;
              }
              .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                #width:100%;
                box-shadow:none;
              }
            .: |
              :host {
                --mdc-theme-surface: rgba(0,0,0,0);
                --secondary-background-color: rgba(255,255,255,1);
                --ha-card-background: rgba(255,255,255,1);
                --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
                --mdc-dialog-min-height: 50%;
                --mdc-dialog-min-width: 100%;
                --mdc-dialog-max-width: 100%;
              }
              mwc-icon-button {
                color: #FFF;
              }
          title: null
          type: custom:mod-card
      target: {}
    type: custom:button-card
  - type: custom:button-card
    color_type: blank-card