Going from a picture elements card to something bit more bespoke

Hi, I am using a Mi Air Purifier 3, where I have exposed the sensors and services through great help from the community, a special shoutout to @schilea is in order.

I have heavily modified the lovelace card to fit the design of the rest of my dashboard, so right now it looks like this:
image

The toggles powers the fan on/off, has an auto-mode where the level is selected based on 2.5 PM level, manual override (1-3) and a night mode it enters at night-time.

And at the bottom, I am using a mini-graph-card to show the recent development in 2.PM value, all put nicely together by stack-in-card.

I consider the use of picture-elements card to be a bit against the intention of the card-type, so my question is, how would you go about creating a card, where I didn’t have to use a transparent picture?

The yaml code is below:

type: 'custom:stack-in-card'
cards:
  - type: vertical-stack
    cards:
      - type: picture-elements
        image: local/AP-Card-Background2.png
        title: Bedroom Air Purifier
        elements:
          - type: state-icon
            entity: binary_sensor.mi_air_purifier_mode_off
            title: 'Off'
            icon: 'mdi:power-standby'
            tap_action:
              action: call-service
              service: fan.turn_off
              service_data:
                entity_id: fan.xiaomi_miio_device
            style:
              top: 0%
              left: 6%
              min-width: 40px
              min-height: 40px
              transform: 'translate(-50%, -50%)'
              '--paper-item-icon-color': 'rgb(128, 128, 128)'
              '--paper-item-icon-active-color': 'rgb(255, 128, 0)'
          - type: conditional
            conditions:
              - entity: binary_sensor.mi_air_purifier_mode_off
                state: 'off'
            elements:
              - type: state-label
                entity: sensor.mi_air_purifier_air_quality_pm25
                title: PM2.5
                tap_action:
                  action: more-info
                style:
                  top: 5%
                  left: 73.5%
                  min-width: 40px
                  min-height: 40px
                  text-align: center
                  font-size: 300%
                  transform: 'translate(-50%, -50%)'
                  color: 'rgb(255,255,255)'
          - type: conditional
            conditions:
              - entity: binary_sensor.mi_air_purifier_mode_off
                state: 'on'
            elements:
              - type: state-label
                entity: sensor.mi_air_purifier_air_quality_pm25
                title: PM2.5
                tap_action:
                  action: more-info
                style:
                  top: 5%
                  left: 73.5%
                  min-width: 40px
                  min-height: 40px
                  text-align: center
                  font-size: 300%
                  transform: 'translate(-50%, -50%)'
                  color: 'rgb(128, 128, 128)'
          - type: state-icon
            entity: binary_sensor.mi_air_purifier_mode_auto
            title: Auto
            icon: 'mdi:autorenew'
            tap_action:
              action: call-service
              service: fan.set_speed
              service_data:
                entity_id: fan.xiaomi_miio_device
                speed: Auto
            style:
              top: 0%
              left: 16%
              transform: 'translate(-50%, -50%)'
              '--paper-item-icon-color': 'rgb(192, 192, 192)'
              '--paper-item-icon-active-color': 'rgb(255, 128, 0)'
          - type: state-icon
            entity: binary_sensor.mi_air_purifier_mode_silent
            title: Silent
            icon: 'mdi:power-sleep'
            tap_action:
              action: call-service
              service: fan.set_speed
              service_data:
                entity_id: fan.xiaomi_miio_device
                speed: Silent
            style:
              top: 0%
              left: 36%
              transform: 'translate(-50%, -50%)'
              '--paper-item-icon-color': 'rgb(192, 192, 192)'
              '--paper-item-icon-active-color': 'rgb(255, 128, 0)'
          - type: state-icon
            entity: binary_sensor.mi_air_purifier_mode_fan
            title: Fan
            icon: 'mdi:fan'
            tap_action:
              action: call-service
              service: fan.set_speed
              service_data:
                entity_id: fan.xiaomi_miio_device
                speed: Fan
            style:
              top: 0%
              left: 26%
              transform: 'translate(-50%, -50%)'
              '--paper-item-icon-color': 'rgb(192, 192, 192)'
              '--paper-item-icon-active-color': 'rgb(255, 128, 0)'
          - type: conditional
            conditions:
              - entity: binary_sensor.mi_air_purifier_mode_fan
                state: 'on'
            elements:
              - type: state-icon
                entity: binary_sensor.mi_air_purifier_mode_fan_1
                title: Fan level 1
                icon: 'mdi:fan-speed-1'
                tap_action:
                  action: call-service
                  service: xiaomi_miio.fan_set_fan_level
                  service_data:
                    entity_id: fan.xiaomi_miio_device
                    level: 1
                style:
                  top: 42%
                  left: 18%
                  transform: 'translate(-50%, -50%)'
                  '--paper-item-icon-color': 'rgb(192, 192, 192)'
                  '--paper-item-icon-active-color': 'rgb(255, 128, 0)'
              - type: state-icon
                entity: binary_sensor.mi_air_purifier_mode_fan_2
                title: Fan level 2
                icon: 'mdi:fan-speed-2'
                tap_action:
                  action: call-service
                  service: xiaomi_miio.fan_set_fan_level
                  service_data:
                    entity_id: fan.xiaomi_miio_device
                    level: 2
                style:
                  top: 42%
                  left: 26%
                  transform: 'translate(-50%, -50%)'
                  '--paper-item-icon-color': 'rgb(192, 192, 192)'
                  '--paper-item-icon-active-color': 'rgb(255, 128, 0)'
              - type: state-icon
                entity: binary_sensor.mi_air_purifier_mode_fan_3
                title: Fan level 3
                icon: 'mdi:fan-speed-3'
                tap_action:
                  action: call-service
                  service: xiaomi_miio.fan_set_fan_level
                  service_data:
                    entity_id: fan.xiaomi_miio_device
                    level: 3
                style:
                  top: 42%
                  left: 34%
                  transform: 'translate(-50%, -50%)'
                  '--paper-item-icon-color': 'rgb(192, 192, 192)'
                  '--paper-item-icon-active-color': 'rgb(255, 128, 0)'
          - type: conditional
            conditions:
              - entity: binary_sensor.mi_air_purifier_mode_favorite
                state: 'on'
            elements:
              - type: state-label
                entity: sensor.mi_air_purifier_favorite_level
                title: Favorite level
                tap_action:
                  action: none
                style:
                  top: 60%
                  left: 16%
                  min-width: 40px
                  min-height: 40px
                  text-align: center
                  font-size: 200%
                  transform: 'translate(-50%, -50%)'
                  color: 'rgb(255, 128, 0)'
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.mi_air_purifier_air_quality_pm25
        show:
          icon: false
          name: false
          state: false
1 Like

Bump, hope someone can inspire me. :blush: