API tools faq
paste
Advertisement
Guest User

HA washer card

a guest
Feb 12th, 2025
1,223
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 17.83 KB | Source Code | 0 0
raw download clone embed print report
  1. type: custom:vertical-stack-in-card
  2. cards:
  3.   - type: custom:mushroom-template-card
  4.     primary: |-
  5.       {% if is_state('binary_sensor.washer_wash_completed', 'on') and is_state('input_boolean.laundry_room_washer_finished', 'on') %} Washer Finished
  6.       {% elif is_state_attr('sensor.washer', 'error_state', 'on') %} Washer Error
  7.       {% elif is_state('sensor.washer', 'off') and is_state('binary_sensor.washer_tub_clean', 'on') %} Washer Tub Clean Needed
  8.       {% elif is_state('sensor.washer', 'off') and is_state('binary_sensor.laundry_needed', 'on') %} Washer Overdue
  9.       {% elif is_state_attr('sensor.washer', 'remote_start', 'on') and is_state('sensor.washer', 'on') and is_state_attr('sensor.washer', 'run_state', 'Standby') %} Washer
  10.       {% elif is_state_attr('sensor.washer', 'run_state', 'Paused') %} Washer Paused
  11.       {% elif is_state('sensor.washer', 'unavailable')  %} Washer Unavailable
  12.       {% else %} Washer
  13.       {% endif %}
  14.     multiline_secondary: true
  15.     secondary: |-
  16.       {% if is_state('binary_sensor.washer_wash_completed', 'on') and is_state('input_boolean.laundry_room_washer_finished', 'on') %}
  17.         Finished {{ 'just now' if (now().timestamp() - as_timestamp(states.binary_sensor.washer_wash_completed.last_changed)) < 30 else relative_time(states.binary_sensor.washer_wash_completed.last_changed) | replace('second', 'sec') | replace('seconds', 'secs') | replace('minute', 'min') | replace('minutes', 'mins') | replace('hour', 'hr') | replace('hours', 'hrs') + ' ago' }}
  18.  
  19.       {% elif is_state('binary_sensor.washer_error_state', 'on') %}
  20.         {{ state_attr('sensor.washer', 'error_message') }}
  21.  
  22.       {% elif is_state('binary_sensor.washer_tub_clean', 'on') %}
  23.         {{ state_attr('sensor.washer', 'tubclean_count') }} cycles since last clean
  24.  
  25.       {% elif is_state_attr('sensor.washer', 'remote_start', 'on') and is_state('sensor.washer', 'on') and is_state_attr('sensor.washer', 'run_state', 'Standby') %}
  26.         Remote start enabled · Tap to start
  27.  
  28.       {% elif is_state('sensor.washer', 'on') and is_state_attr('sensor.washer', 'run_state', 'Standby') %}
  29.         Standby
  30.  
  31.       {% elif is_state('sensor.washer', 'on') %}
  32.         {{ state_attr('sensor.washer', 'run_state') }} on {{ state_attr('sensor.washer', 'current_course') }} · {{ states('sensor.washer_time_remaining')  | replace(' hours','h') | replace(' hour','h') | replace ( ' minutes','m') | replace ( ' minute','m') }} left · {{ state_attr('sensor.washer', 'end_time') | as_timestamp(now()) | timestamp_custom('%-I:%M %p') }}
  33.  
  34.       {% elif is_state('sensor.washer', 'unavailable')  %}
  35.         Failed to connect to washer
  36.  
  37.       {% else %}
  38.         Off · Used {{ relative_time(states.input_datetime.washer_last_used.state | as_datetime) | replace('second','sec') | replace('seconds','secs') | replace('minute','min') | replace('minutes','mins') | replace('hour','hr') | replace('hours','hrs') }} ago
  39.       {% endif %}
  40.     entity: sensor.washer
  41.     layout: horizontal
  42.  
  43.     tap_action: &washer-popup
  44.       action: fire-dom-event
  45.       browser_mod:
  46.         service: browser_mod.popup
  47.         data:
  48.           dismissable: true
  49.           content:
  50.             type: vertical-stack
  51.             cards:
  52.               - type: custom:mushroom-title-card
  53.                 title: Washer
  54.  
  55.               - type: heading
  56.                 heading: Controls
  57.                 heading_style: subtitle
  58.                 icon: mdi:gesture-tap-button
  59.    
  60.               - square: false
  61.                 columns: 2
  62.                 type: grid
  63.                 cards:
  64.                  # CONTROL SENSORS
  65.                   - type: tile
  66.                     entity: button.washer_remote_start
  67.                     name: Remote Start
  68.                     icon: mdi:play
  69.                     color: green
  70.                     hide_state: true
  71.                     tap_action:
  72.                       action: perform-action
  73.                       perform_action: button.press
  74.                       target:
  75.                         entity_id: button.washer_remote_start
  76.                     visibility:
  77.                       - condition: state
  78.                         entity: button.washer_remote_start
  79.                         state_not: 'unavailable'
  80.  
  81.                   - type: tile
  82.                     entity: button.washer_pause
  83.                     name: Pause
  84.                     icon: mdi:pause
  85.                     color: amber
  86.                     hide_state: true
  87.                     tap_action:
  88.                       action: perform-action
  89.                       perform_action: button.press
  90.                       target:
  91.                         entity_id: button.washer_pause
  92.                     visibility:
  93.                       - condition: state
  94.                         entity: button.washer_pause
  95.                         state_not: 'unavailable'
  96.  
  97.                   - type: tile
  98.                     entity: select.washer_course_selection
  99.                     name: Course
  100.                     color: amber
  101.                     hide_state: true
  102.                     visibility:
  103.                       - condition: state
  104.                         entity: select.washer_course_selection
  105.                         state_not: unavailable
  106.                     layout_options:
  107.                       grid_columns: full
  108.                     features:
  109.                       - type: select-options
  110.                     tap_action:
  111.                       action: none
  112.                     icon_tap_action:
  113.                       action: none
  114.  
  115.                   - type: tile
  116.                     entity: input_boolean.laundry_room_washer_finished
  117.                     name: Unload Washer
  118.                     color: amber
  119.                     visibility:
  120.                       - condition: state
  121.                         entity: input_boolean.laundry_room_washer_finished
  122.                         state_not: 'off'
  123.  
  124.                   # STATS / DETAILS SENSORS....
  125.                   - type: tile
  126.                     entity: sensor.washer_current_course
  127.                     name: Current Course
  128.                     color: cyan
  129.                     visibility:
  130.                       - condition: state
  131.                         entity: sensor.washer_current_course
  132.                         state_not: '-'
  133.  
  134.                   # future - Change this to be in its own grid, so you can read the error message long... like copy from tablet last notification
  135.                   - type: tile
  136.                     entity: binary_sensor.washer_error_state
  137.                     name: Error State
  138.                     visibility:
  139.                       - condition: state
  140.                         entity: binary_sensor.washer_error_state
  141.                         state_not: 'off'
  142.                   - type: tile
  143.                     entity: sensor.washer_error_message
  144.                     name: Error Message
  145.                     visibility:
  146.                       - condition: state
  147.                         entity: sensor.washer_error_message
  148.                         state_not: '-'
  149.  
  150.                   - type: tile
  151.                     entity: sensor.washer_run_state
  152.                     name: Run State
  153.                     color: cyan
  154.                     visibility:
  155.                       - condition: state
  156.                         entity: sensor.washer_run_state
  157.                         state_not: '-'
  158.  
  159.                   - type: tile
  160.                     entity: sensor.washer_spin_speed
  161.                     name: Spin Speed
  162.                     color: cyan
  163.  
  164.                   - type: tile
  165.                     entity: sensor.washer_water_temp
  166.                     name: Water Temp
  167.                     color: cyan
  168.  
  169.               - type: tile
  170.                 entity: input_datetime.washer_last_used
  171.                 name: Last Used
  172.                 color: purple
  173.                 tap_action:
  174.                   action: none
  175.                 hold_action:
  176.                   action: more-info
  177.  
  178.               - type: heading
  179.                 heading: Maintenance
  180.                 icon: mdi:account-wrench
  181.                 heading_style: subtitle
  182.  
  183.               - type: tile
  184.                 entity: input_datetime.washer_last_maintenance
  185.                 name: Last Maintenance
  186.                 color: purple
  187.                 tap_action:
  188.                   action: none
  189.                 hold_action:
  190.                   action: more-info
  191.  
  192.               - square: false
  193.                 columns: 2
  194.                 type: grid
  195.                 cards:
  197.                   - type: custom:mushroom-template-card
  198.                     primary: Plumber
  199.                     secondary: (XXX) XXX-XXXX
  200.                     icon: mdi:phone
  201.                     icon_color: "#0FFF50"
  202.                     tap_action:
  203.                       action: url
  204.                       url_path: tel://XXX-XXX-XXXX
  205.  
  206.                   - type: custom:mushroom-template-card
  207.                     primary: LG Support
  208.                     secondary: 1-800-243-0000
  209.                     icon: mdi:phone
  210.                     icon_color: "#0FFF50"
  211.                     tap_action:
  212.                       action: url
  213.                       url_path: tel://1-800-243-0000
  214.  
  215.                   - type: custom:mushroom-template-card
  216.                     primary: Support Center
  217.                     secondary: LG.com
  218.                     icon: mdi:note-multiple
  219.                     icon_color: pink
  220.                     tap_action:
  221.                       action: url
  222.                       url_path: https://www.lg.com/us/support/product/lg-WM4000HWA.ABWEUUS
  223.                     hold_action:
  224.                       action: url
  225.                       url_path: https://www.lg.com/us/support/product/lg-WM4000HWA.ABWEUUS
  226.                     double_tap_action:
  227.                       action: url
  228.                       url_path: https://www.lg.com/us/support/product/lg-WM4000HWA.ABWEUUS
  229.  
  230.                   - type: custom:mushroom-template-card
  231.                     primary: "Serial"
  232.                     secondary: "XXXXXX"
  233.                     icon: mdi:barcode
  234.                     icon_color: "#85C1E9"
  235.                     tap_action:
  236.                       action: none
  237.                     hold_action:
  238.                       action: none
  239.  
  240.                   - type: custom:mushroom-template-card
  241.                     primary: "Model"
  242.                     secondary: "WM4000HWA"
  243.                     icon: mdi:information-variant-circle-outline
  244.                     icon_color: "#85C1E9"
  245.                     tap_action:
  246.                       action: none
  247.                     hold_action:
  248.                       action: none
  249.  
  250.                   - type: custom:mushroom-template-card
  251.                     primary: "Purchased"
  252.                     secondary: "April 11, 2022"
  253.                     icon: mdi:calendar-blank
  254.                     icon_color: "#85C1E9"
  255.                     tap_action:
  256.                       action: none
  257.                     hold_action:
  258.                       action: none
  259.  
  260.  
  261.           card_mod:
  262.             style: |
  263.              ha-dialog {
  264.                 --dialog-backdrop-filter: blur(0.8em);
  265.                 background: rgba(255, 255, 255, 0.9);
  266.                 --mdc-dialog-min-width: 90vw !important;
  267.                 --mdc-dialog-min-height: fit-content !important;
  268.                 --mdc-dialog-max-width: var(--mdc-dialog-min-width) !important;
  269.                 --mdc-dialog-max-height:  var(--mdc-dialog-min-height) !important;
  270.                 --ha-dialog-border-radius: var(--ha-card-border-radius) !important;
  271.                 --vertical-align-dialog: center !important;
  272.                 --header-height: 5vh !important;
  273.                 --footer-height: var(--header-height) !important;
  274.                 --padding-y: 8px !important;
  275.                 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  276.               }
  277.               .content {
  278.                 height: fit-content !important;
  279.                 max-height: 90vh !important
  280.                 pointer-events: unset !important;
  281.                 padding: 0 !important;
  282.               }
  283.               .container {
  284.                 padding: 5 !important;
  285.               }
  286.  
  287.     icon: |-
  288.       {% if is_state('binary_sensor.washer_wash_completed', 'on') and is_state('input_boolean.laundry_room_washer_finished', 'on') %} mdi:check-circle
  289.       {% elif is_state_attr('sensor.washer', 'error_state', 'on') %} mdi:washer-alert
  290.       {% elif is_state('sensor.washer', 'off') and is_state('binary_sensor.laundry_needed', 'on') %} mdi:washing-machine-alert
  291.       {% elif is_state('sensor.washer', 'off') and is_state('binary_sensor.washer_tub_clean', 'on') %} mdi:washing-machine-alert
  292.       {% elif is_state('sensor.washer', 'unavailable')  %} mdi:washing-machine-alert
  293.       {% elif is_state('sensor.washer', 'off') %} mdi:washing-machine-off
  294.       {% else %} mdi:washing-machine
  295.       {% endif %}
  296.     icon_color: |-
  297.       {% if is_state('binary_sensor.washer_wash_completed', 'on') and is_state('input_boolean.laundry_room_washer_finished', 'on') %} green
  298.       {% elif is_state('binary_sensor.washer_error_state', 'on') %} red
  299.       {% elif is_state('sensor.washer', 'unavailable')  %} disabled
  300.       {% elif is_state('sensor.washer', 'off') and is_state('binary_sensor.laundry_needed', 'on') %} grey
  301.       {% elif is_state('sensor.washer', 'off') and is_state('binary_sensor.washer_tub_clean', 'on') %} grey
  302.       {% elif is_state('sensor.washer', 'off') %} grey
  303.       {% elif is_state_attr('sensor.washer', 'remote_start', 'on') and is_state('sensor.washer', 'on') and is_state_attr('sensor.washer', 'run_state', 'Standby') %} grey
  304.       {% else %} cyan
  305.       {% endif %}
  306.     badge_icon: |-
  307.       {% if is_state('binary_sensor.washer_error_state', 'on') or is_state('binary_sensor.laundry_needed', 'on') or is_state('binary_sensor.washer_tub_clean', 'on') %} mdi:exclamation-thick
  308.       {% elif is_state_attr('sensor.washer', 'run_state', 'Paused') %} mdi:pause
  309.       {% elif is_state('sensor.washer', 'unavailable')  %} mdi:exclamation-thick
  310.       {% elif is_state_attr('sensor.washer', 'remote_start', 'on') and is_state('sensor.washer', 'on') and is_state_attr('sensor.washer', 'run_state', 'Standby') %} mdi:play-speed
  311.       {% else %} none
  312.       {% endif %}
  313.     badge_color: |-
  314.       {% if is_state('binary_sensor.washer_error_state', 'on') or is_state('binary_sensor.laundry_needed', 'on') or is_state('binary_sensor.washer_tub_clean', 'on') %} orange
  315.       {% elif is_state_attr('sensor.washer', 'run_state', 'Paused') %} orange
  316.       {% elif is_state('sensor.washer', 'unavailable')  %} orange
  317.       {% elif is_state_attr('sensor.washer', 'remote_start', 'on') and is_state('sensor.washer', 'on') and is_state_attr('sensor.washer', 'run_state', 'Standby') %} cyan
  318.       {% else %} none
  319.       {% endif %}
  320.  
  321.     # Below media query makes cards larger on tablet so I can use this one card for both dashboards, work in progress, tweak more...
  322.     card_mod:
  323.       style: |
  324.         @media screen and (min-width: 768px) and (max-width: 1300px) {
  325.           ha-card {
  326.             --icon-size: 150px;
  327.             --card-primary-font-size: 40px;
  328.             --card-primary-font-weight: bold;
  329.             --card-primary-line-height: 40px;
  330.             --card-secondary-font-size: 20px;
  331.             --card-secondary-line-height: 50px;
  332.             margin-top: 8px;
  333.             margin-bottom: 1.5rem;
  334.           }
  335.         }
  336.         ha-state-icon {
  337.           {% if is_state('sensor.washer', 'on') and is_state_attr('sensor.washer', 'run_completed', 'off') and state_attr('sensor.washer', 'run_state') not in ['Standby', 'Paused'] %}
  338.           animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
  339.           transform-origin: 50% 110%;
  340.           {% elif is_state('binary_sensor.washer_error_state', 'on') %}
  341.           animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
  342.           transform-origin: 50% 110%;
  343.           {% else  %}
  344.           {% endif %}
  345.             }
  346.           @keyframes shake {
  347.             0%, 100% { transform: translate(0, 0) rotate(0); }
  348.             20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
  349.             40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
  350.             60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
  351.             80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
  352.           }
  353.           @keyframes drum {
  354.             50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
  355.           }
  356.  
  357.  
  358.   # 🔶 FUTURE: Tablet styling needs to change bar_height from 5px to 20px
  359.   # FUTURE: I might want to remove the text_width to 0px so it doesn't show timer duration, as it's already shown on washer card above.. duplicate info?
  360.   - type: custom:timer-bar-card
  361.     entities:
  362.      - sensor.washer
  363.     sync_issues: ignore
  364.     compressed: true
  365.     bar_width: 60%
  366.     bar_height: 5px
  367.     bar_radius: 5px
  368.     text_width: 0px #60px
  369.     layout: full_row
  370.     bar_foreground: '#00bcd4'
  371.     bar_background: '#163c40'
  372.     icon: mdi:washing-machine
  373.     tap_action: *washer-popup
  374.     visibility:
  375.       - entity: sensor.washer
  376.         state: 'on'
  377.       - entity: sensor.washer_run_state
  378.         state_not: 'Standby'
  379.       - entity: sensor.washer_run_state
  380.         state_not: 'Paused'
  381.       - entity: binary_sensor.washer_wash_completed
  382.         state_not: 'on'
  383.     # To fix mobile display, change to -32px for margin-bottom?
  384.     card_mod:
  385.       style: |
  386.        ha-card {
  387.           border: none;
  388.           background: none;
  389.           background-color: transparent;
  390.           margin-top: -32px;
  391.           margin-left: 0px;
  392.           margin-right: 0px;
  393.           margin-bottom: -16px; /* Default for non-tablet */
  394.         }
  395.         @media screen and (min-width: 768px) and (max-width: 1300px) {
  396.           ha-card {
  397.             margin-bottom: unset; /* Removes margin-bottom for tablets */
  398.           }
  399.         }
  400.  
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!