API tools faq
paste
Advertisement
the_wolfman56

Mushroom Laundry Room Card Example

the_wolfman56
Jun 2nd, 2025
635
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 19.78 KB | None | 0 0
raw download clone embed print report
  1. type: custom:vertical-stack-in-card
  2. cards:
  3.   - type: custom:mushroom-template-card
  4.     icon: mdi:washing-machine
  5.     icon_color: red
  6.     primary: Laundry Room
  7.     secondary: |2-
  8.        Washer: {%- set state = states('sensor.washer_run_state') -%}
  9.           {%- if state == ('Washing') -%}
  10.               Washing
  11.           {%- elif state == ('Rinsing') -%}
  12.               Rinsing
  13.           {%- elif state == ('Spinning') -%}
  14.               Spinning
  15.           {%- else -%}
  16.               Off      
  17.           {%- endif %} Dryer:
  18.       {%- set state = states('sensor.dryer_run_state') %}
  19.         {%- if state == ('Dry') -%}
  20.             Drying
  21.         {%- elif state == ('Fan') -%}
  22.             Drying
  23.         {%- elif state == ('Wrinkle Care') -%}
  24.             Wrinkle Care
  25.         {%- else -%}
  26.             Off      
  27.         {%- endif %} Mini:
  28.       {%- set state = states('sensor.pedestal_washer_run_state') -%}
  29.           {%- if state == ('Washing') -%}
  30.               Washing
  31.           {%- elif state == ('Rinsing') -%}
  32.               Rinsing
  33.           {%- elif state == ('Spinning') -%}
  34.               Spinning
  35.           {%- else -%}
  36.               Off      
  37.           {%- endif %}
  38.     layout: horizontal
  39.     tap_action:
  40.       action: navigate
  41.       navigation_path: /lovelace-wife/laundry
  42.     hold_action:
  43.       action: none
  44.     badge_color: |
  45.      {% if is_state('binary_sensor.ac_2', 'on') %}
  46.         blue
  47.       {% endif %}
  48.     badge_icon: |
  49.      {% if is_state('binary_sensor.ac_2', 'on') %}
  50.         mdi:air-conditioner
  51.       {% endif %}
  52.     picture: ""
  53.     double_tap_action:
  54.       action: none
  55.     multiline_secondary: true
  56.     card_mod:
  57.       style:
  58.         mushroom-state-info$: |
  59.          .primary {
  60.             font-size: 15px !important;
  61.             position: relative;
  62.             top: -40px;
  63.             left: -155px;
  64.             overflow: visible !important;
  65.             white-space: nowrap !important;
  66.           }
  67.           .secondary {
  68.             position: relative;
  69.             overflow: visible !important;
  70.             top: -40px;
  71.             left: -155px;
  72.            
  73.           }
  74.         mushroom-shape-icon$: |
  75.          .shape {
  76.             position: relative;
  77.             left: -40px;
  78.             top: 35px;
  79.           }
  80.         .: |
  81.          :host {
  82.             --mush-icon-size: 140px;
  83.  
  84.           }
  85.         style: |
  86.          mushroom-badge-icon {
  87.             left: 80px;
  88.             top: 4px;
  89.           }
  90.   - type: custom:mushroom-template-card
  91.     primary: ""
  92.     secondary: ""
  93.     icon: mdi:washing-machine
  94.     entity: sensor.washer_run_state
  95.     tap_action:
  96.       action: fire-dom-event
  97.       browser_mod:
  98.         service: browser_mod.popup
  99.         data:
  100.           deviceID: THIS
  101.           dismissable: true
  102.           autoclose: false
  103.           content:
  104.             type: vertical-stack
  105.             cards:
  106.               - type: picture-elements
  107.                 elements:
  108.                   - type: image
  109.                     entity: sensor.washer_run_state
  110.                     image: /local/lg-icons/sensing.png
  111.                     state_image:
  112.                       Detecting: /local/lg-icons/sensing-on.png
  113.                     style:
  114.                       top: 33%
  115.                       left: 33%
  116.                       width: 20%
  117.                       image-rendering: crisp
  118.                   - type: image
  119.                     entity: sensor.washer_run_state
  120.                     image: /local/lg-icons/wash.png
  121.                     state_image:
  122.                       Washing: /local/lg-icons/wash-on.png
  123.                     style:
  124.                       top: 33%
  125.                       left: 51%
  126.                       width: 20%
  127.                       image-rendering: crisp
  128.                   - type: image
  129.                     entity: sensor.washer_run_state
  130.                     image: /local/lg-icons/rinse.png
  131.                     state_image:
  132.                       Rinsing: /local/lg-icons/rinse-on.png
  133.                     style:
  134.                       top: 33%
  135.                       left: 69%
  136.                       width: 20%
  137.                       image-rendering: crisp
  138.                   - type: image
  139.                     entity: sensor.washer_run_state
  140.                     image: /local/lg-icons/spin.png
  141.                     state_image:
  142.                       Spinning: /local/lg-icons/spin-on.png
  143.                     style:
  144.                       top: 33%
  145.                       left: 87%
  146.                       width: 20%
  147.                       image-rendering: crisp
  148.                   - type: image
  149.                     entity: sensor.washer
  150.                     image: /local/lg-icons/wifi.png
  151.                     state_image:
  152.                       "on": /local/lg-icons/wifi-on.png
  153.                     style:
  154.                       top: 73%
  155.                       left: 32%
  156.                       width: 10%
  157.                       image-rendering: crisp
  158.                   - type: image
  159.                     entity: sensor.washer_door_lock
  160.                     image: /local/lg-icons/lock.png
  161.                     state_image:
  162.                       "on": /local/lg-icons/lock-on.png
  163.                     style:
  164.                       top: 73%
  165.                       left: 45%
  166.                       width: 10%
  167.                       image-rendering: crisp
  168.                   - type: state-label
  169.                     entity: sensor.blank
  170.                     prefix: "8:88"
  171.                     style:
  172.                       color: "#555"
  173.                       font-family: PegHolesRegular
  174.                       font-size: 50px
  175.                       left: 95%
  176.                       top: 74%
  177.                       transform: translate(-100%,-50%)
  178.                   - type: state-label
  179.                     entity: sensor.washer_time_display
  180.                     style:
  181.                       color: "#a68df7"
  182.                       font-family: PegHolesRegular
  183.                       font-size: 50px
  184.                       left: 95%
  185.                       top: 74%
  186.                       transform: translate(-100%,-50%)
  187.                 image: /local/hass-washer-card-fl-steel-wm550hva.png
  188.               - type: conditional
  189.                 conditions:
  190.                   - entity: sensor.washer_run_state
  191.                     state_not: "-"
  192.                 card:
  193.                   type: entities
  194.                   entities:
  195.                     - entity: sensor.washer
  196.                       type: attribute
  197.                       attribute: current_course
  198.                       name: Current Course
  199.                       icon: mdi:tune-vertical-variant
  200.                     - entity: sensor.washer
  201.                       type: attribute
  202.                       attribute: water_temp
  203.                       name: Water Temperature
  204.                       icon: mdi:coolant-temperature
  205.                     - entity: sensor.washer
  206.                       type: attribute
  207.                       attribute: spin_speed
  208.                       name: Spin Speed
  209.                       icon: mdi:rotate-right
  210.                   state_color: false
  211.     card_mod:
  212.       style:
  213.         mushroom-shape-icon$: |
  214.          .shape {
  215.           {% set state = states('sensor.washer_run_state') %}
  216.            {% if state == ('Washing') %}
  217.              --shape-color: rgba(149,59,227, .2) !important;
  218.            {% elif state == ('Rinsing') %}
  219.              --shape-color: rgba(149,59,227, .2) !important;
  220.            {% elif state == ('Spinning') %}
  221.              --shape-color: rgba(149,59,227, .2) !important;
  222.            {% else %}
  223.              --shape-color: rgba(90,90,90, .3) !important;
  224.            {% endif %}  
  225.           }
  226.         .: |
  227.          ha-state-icon {
  228.            {% set state = states('sensor.washer_run_state') %}
  229.            {% if state == ('Washing') %}
  230.              --shape-color: rgba(149,59,227, 1) !important;
  231.            {% elif state == ('Rinsing') %}
  232.              --shape-color: rgba(149,59,227, 1) !important;
  233.            {% elif state == ('Spinning') %}
  234.              --shape-color: rgba(149,59,227, 1) !important;
  235.            {% else %}
  236.              color: var(--grey-color) ;
  237.            {% endif %}  
  238.           }
  239.           ha-card {
  240.             width: 66px;
  241.             margin-left: 68%;
  242.             top: -160px;
  243.             background: none;
  244.           }
  245.           :host {
  246.             --mush-icon-size: 38px;
  247.           }
  248.   - type: custom:mushroom-template-card
  249.     primary: ""
  250.     secondary: ""
  251.     icon: mdi:tumble-dryer
  252.     entity: sensor.dryer_run_state
  253.     tap_action:
  254.       action: fire-dom-event
  255.       browser_mod:
  256.         service: browser_mod.popup
  257.         data:
  258.           deviceID: THIS
  259.           dismissable: true
  260.           autoclose: false
  261.           content:
  262.             type: vertical-stack
  263.             cards:
  264.               - type: picture-elements
  265.                 elements:
  266.                   - type: image
  267.                     entity: sensor.dryer_run_state
  268.                     image: /local/lg-icons/keep-fresh.png
  269.                     state_image:
  270.                       KeepFresh is on: /local/lg-icons/keep-fresh-on.png
  271.                     style:
  272.                       top: 40%
  273.                       left: 54%
  274.                       width: 20%
  275.                       image-rendering: crisp
  276.                   - type: image
  277.                     entity: sensor.dryer_run_state
  278.                     image: /local/lg-icons/dry.png
  279.                     state_image:
  280.                       Drying: /local/lg-icons/dry-on.png
  281.                     style:
  282.                       top: 33%
  283.                       left: 69%
  284.                       width: 20%
  285.                       image-rendering: crisp
  286.                   - type: image
  287.                     entity: sensor.dryer_run_state
  288.                     image: /local/lg-icons/cool.png
  289.                     state_image:
  290.                       Cooling: /local/lg-icons/cool-on.png
  291.                     style:
  292.                       top: 33%
  293.                       left: 87%
  294.                       width: 20%
  295.                       image-rendering: crisp
  296.                   - type: image
  297.                     entity: sensor.dryer
  298.                     image: /local/lg-icons/wifi.png
  299.                     state_image:
  300.                       "on": /local/lg-icons/wifi-on.png
  301.                     style:
  302.                       top: 73%
  303.                       left: 32%
  304.                       width: 10%
  305.                       image-rendering: crisp
  306.                   - type: state-label
  307.                     entity: sensor.blank
  308.                     prefix: "8:88"
  309.                     style:
  310.                       color: "#555"
  311.                       font-family: PegHolesRegular
  312.                       font-size: 50px
  313.                       left: 95%
  314.                       top: 74%
  315.                       transform: translate(-100%,-50%)
  316.                   - type: state-label
  317.                     entity: sensor.dryer_time_display
  318.                     style:
  319.                       color: "#a68df7"
  320.                       font-family: PegHolesRegular
  321.                       font-size: 50px
  322.                       left: 95%
  323.                       top: 74%
  324.                       transform: translate(-100%,-50%)
  325.                 image: /local/hass-dryer-card-fl-steel-dlex5500v.png
  326.               - type: conditional
  327.                 conditions:
  328.                   - entity: sensor.dryer_run_state
  329.                     state_not: "-"
  330.                 card:
  331.                   type: entities
  332.                   entities:
  333.                     - entity: sensor.dryer
  334.                       type: attribute
  335.                       attribute: current_course
  336.                       name: Current Course
  337.                       icon: mdi:tune-vertical-variant
  338.                     - entity: sensor.dryer
  339.                       type: attribute
  340.                       attribute: temp_control
  341.                       name: Temperature Control
  342.                       icon: mdi:thermometer
  343.                     - entity: sensor.dryer
  344.                       type: attribute
  345.                       attribute: dry_level
  346.                       name: Dry Level
  347.                       icon: mdi:air-filter
  348.     hold_action:
  349.       action: none
  350.     double_tap_action:
  351.       action: none
  352.     card_mod:
  353.       style:
  354.         mushroom-shape-icon$: |
  355.          .shape {
  356.           {% set state = states('sensor.dryer_run_state') %}
  357.            {% if state == ('Dry') %}
  358.              --shape-color: rgba(149,59,227, .2) !important;
  359.            {% elif state == ('Fan') %}
  360.              --shape-color: rgba(149,59,227, .2) !important;
  361.            {% else %}
  362.              --shape-color: rgba(90,90,90, .3) !important;
  363.            {% endif %}  
  364.           }
  365.         .: |
  366.          ha-state-icon {
  367.            {% set state = states('switch.waterfall') %}
  368.            {% if state == ('Dry') %}
  369.              --shape-color: rgba(149,59,227, .2) !important;
  370.            {% elif state == ('Fan') %}
  371.              --shape-color: rgba(149,59,227, .2) !important;
  372.            {% else %}
  373.              color: var(--grey-color) ;
  374.            {% endif %}  
  375.           }
  376.           ha-card {
  377.             width: 66px;
  378.             margin-left: 68%;
  379.             top: -175px;
  380.             background: none;
  381.           }
  382.           :host {
  383.             --mush-icon-size: 38px;
  384.           }
  385.   - type: custom:mushroom-template-card
  386.     primary: ""
  387.     secondary: ""
  388.     icon: mdi:washing-machine
  389.     entity: sensor.pedestal_washer_run_state
  390.     tap_action:
  391.       action: fire-dom-event
  392.       browser_mod:
  393.         service: browser_mod.popup
  394.         data:
  395.           deviceID: THIS
  396.           dismissable: true
  397.           autoclose: false
  398.           content:
  399.             type: vertical-stack
  400.             cards:
  401.               - type: picture-elements
  402.                 elements:
  403.                   - type: image
  404.                     entity: sensor.pedestal_washer_dryer_run_state
  405.                     image: /local/lg-icons/sensing.png
  406.                     state_image:
  407.                       Detecting: /local/lg-icons/sensing-on.png
  408.                     style:
  409.                       top: 33%
  410.                       left: 33%
  411.                       width: 20%
  412.                       image-rendering: crisp
  413.                   - type: image
  414.                     entity: sensor.pedestal_washer_run_state
  415.                     image: /local/lg-icons/wash.png
  416.                     state_image:
  417.                       Washing: /local/lg-icons/wash-on.png
  418.                     style:
  419.                       top: 33%
  420.                       left: 51%
  421.                       width: 20%
  422.                       image-rendering: crisp
  423.                   - type: image
  424.                     entity: sensor.pedestal_washer_run_state
  425.                     image: /local/lg-icons/rinse.png
  426.                     state_image:
  427.                       Rinsing: /local/lg-icons/rinse-on.png
  428.                     style:
  429.                       top: 33%
  430.                       left: 69%
  431.                       width: 20%
  432.                       image-rendering: crisp
  433.                   - type: image
  434.                     entity: sensor.pedestal_washer_run_state
  435.                     image: /local/lg-icons/spin.png
  436.                     state_image:
  437.                       Spinning: /local/lg-icons/spin-on.png
  438.                     style:
  439.                       top: 33%
  440.                       left: 87%
  441.                       width: 20%
  442.                       image-rendering: crisp
  443.                   - type: image
  444.                     entity: sensor.pedestal_washer
  445.                     image: /local/lg-icons/wifi.png
  446.                     state_image:
  447.                       "on": /local/lg-icons/wifi-on.png
  448.                     style:
  449.                       top: 73%
  450.                       left: 32%
  451.                       width: 10%
  452.                       image-rendering: crisp
  453.                   - type: image
  454.                     entity: sensor.pedestal_washer_door_lock
  455.                     image: /local/lg-icons/lock.png
  456.                     state_image:
  457.                       "on": /local/lg-icons/lock-on.png
  458.                     style:
  459.                       top: 73%
  460.                       left: 45%
  461.                       width: 10%
  462.                       image-rendering: crisp
  463.                   - type: state-label
  464.                     entity: sensor.blank
  465.                     prefix: "8:88"
  466.                     style:
  467.                       color: "#555"
  468.                       font-family: PegHolesRegular
  469.                       font-size: 50px
  470.                       left: 95%
  471.                       top: 74%
  472.                       transform: translate(-100%,-50%)
  473.                   - type: state-label
  474.                     entity: sensor.pedestal_washer_time_display
  475.                     style:
  476.                       color: "#8df427"
  477.                       font-family: PegHolesRegular
  478.                       font-size: 50px
  479.                       left: 95%
  480.                       top: 74%
  481.                       transform: translate(-100%,-50%)
  482.                 image: /local/hass-mini-washer-card-bg-wd300cv.png
  483.               - type: conditional
  484.                 conditions:
  485.                   - entity: sensor.pedestal_washer_run_state
  486.                     state_not: "-"
  487.                 card:
  488.                   type: entities
  489.                   entities:
  490.                     - entity: sensor.pedestal_washer
  491.                       type: attribute
  492.                       attribute: water_temp
  493.                       name: Water Temperature
  494.                       icon: mdi:coolant-temperature
  495.                     - entity: sensor.pedestal_washer
  496.                       type: attribute
  497.                       attribute: spin_speed
  498.                       name: Spin Speed
  499.                       icon: mdi:rotate-right
  500.                     - entity: sensor.pedestal_washer
  501.                       type: attribute
  502.                       attribute: current_course
  503.                       name: Current Program
  504.                       icon: mdi:air-filter
  505.                     - entity: sensor.pedestal_washer
  506.                       type: attribute
  507.                       attribute: run_state
  508.                       name: Current State
  509.                       icon: mdi:archive
  510.                     - entity: sensor.pedestal_washer
  511.                       type: attribute
  512.                       attribute: tubclean_count
  513.                       name: Washes Since Tub Clean
  514.                       icon: mdi:creation
  515.                   state_color: false
  516.     card_mod:
  517.       style:
  518.         mushroom-shape-icon$: |
  519.          .shape {
  520.           {% set state = states('sensor.pedestal_washer_run_state') %}
  521.            {% if state == ('Washing') %}
  522.              --shape-color: rgba(149,59,227, .2) !important;
  523.            {% elif state == ('Rinsing') %}
  524.              --shape-color: rgba(149,59,227, .2) !important;
  525.            {% elif state == ('Spinning') %}
  526.              --shape-color: rgba(149,59,227, .2) !important;
  527.            {% else %}
  528.              --shape-color: rgba(90,90,90, .3) !important;
  529.            {% endif %}  
  530.           }
  531.         .: |
  532.          ha-state-icon {
  533.            {% set state = states('sensor.pedestal_washer_run_state') %}
  534.            {% if state == ('Washing') %}
  535.              --shape-color: rgba(149,59,227, 1) !important;
  536.            {% elif state == ('Rinsing') %}
  537.              --shape-color: rgba(149,59,227, 1) !important;
  538.            {% elif state == ('Spinning') %}
  539.              --shape-color: rgba(149,59,227, 1) !important;
  540.            {% else %}
  541.              color: var(--grey-color) ;
  542.            {% endif %}  
  543.           }
  544.           ha-card {
  545.             width: 66px;
  546.             margin-left: 68%;
  547.             top: -190px;
  548.             background: none;
  549.           }
  550.           :host {
  551.             --mush-icon-size: 38px;
  552.           }
  553. card_mod:
  554.   style: |
  555.    ha-card {
  556.       height: 155px !important;
  557.  
  558.     }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!