Yes I think your solution is simple and would work just like my more complicated rule. Thanks for sharing!
When you set the runtime to 0 is more a matter of taste in my opinion. I set it to 0 when the machine is starting so I am able to see how long the last washing was running after the washing is finished. However I agree that this information is pretty useless so it does not really matter
Thanks a lot @DrRSatzteil for this great Widget 
I use it with the Siemens/Bosch HomeConnect Binding.
I did some small modifications today to implement some parameters provided by the HomeConnect Binding for Washer and Dryer.
I replaced the âdummyâ buttons with the âRemainingTimeâ used from the binding.
The following parameters are added to your wonderful widget as well.
When the Widget is set in âDryerâ mode, then the colors are changing from blue to red.
uid: washing_machine_v3
tags: []
props:
parameters:
- description: Title of the card
label: Title
name: title
required: false
type: TEXT
- description: Header text above washing machine
label: Header
name: header
required: false
type: TEXT
- context: item
description: Set Washer/Dryer Item (BSH HomeConnect)
label: Washer/Dryer Item
name: item
required: true
type: TEXT
- description: Set On if Dryer is defined to change the color of Widged
label: Item is Dryer?
name: isDryer
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Mar 14, 2021, 6:59:23 PM
component: f7-card
config:
title: =(props.title)
slots:
default:
- component: f7-card-content
config:
style:
height: 175px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-center
style:
width: 100%
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
width: 90px
slots:
default:
- component: f7-block-header
slots:
default:
- component: Label
config:
text: =props.header
- component: f7-block
config:
style:
height: 120px
width: 90px
border-radius: 9px 9px 5px 5px
background: rgba(255,255,255,1)
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-block
config:
class:
- display-flex
- justify-content-space-between
- align-items-center
- flex-shrink-0
- no-margin
style:
height: 23px
width: 85px
padding-right: 5px
slots:
default:
- component: f7-icon
config:
size: 10
color: gray
- component: f7-icon
config:
size: 10
color: gray
- component: Label
config:
text: =Math.floor(items[props.item + '_Remainingprogramtime' ].state.split(' ')[0] /3600) + ':' + (Math.floor(items[props.item + '_Remainingprogramtime'].state.split(' ')[0] /60) - Math.floor(items[props.item + '_Remainingprogramtime'].state.split(' ')[0] /3600) * 60)
visible: "=(items[props.item + '_Remainingprogramtime' ].state === 'UNDEF' || items[props.item + '_Remainingprogramtime' ].state === '0 s') ? false : true"
style:
font-size: 10px
- component: f7-icon
config:
f7: "=(items[props.item + '_OperationState'].state === 'UNDEF' || items[props.item + '_OperationState'].state === 'Ready') ? 'circle_fill' : 'sun_min'"
size: 10
style:
align-self: center
color: "=(items[props.item + '_OperationState'].state === 'UNDEF' || items[props.item + '_OperationState'].state === 'Ready') ? 'gray' : 'green'"
- component: f7-progressbar
config:
progress: =Number.parseInt(items[props.item + '_ProgressState'].state)
infinite: false
style:
--f7-progressbar-progress-color: "=Number.parseInt(items[props.item + '_ProgressState'].state) == 100 ? '#00ff00' : props.isDryer === true ? 'red' : '#179cd1'"
--f7-progressbar-bg-color: "#ededed"
--f7-progressbar-height: 2px
width: 85px
z-index: 999
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
height: 60px
width: 60px
border: 5pt solid lightgray
border-radius: 50%
margin-top: 7px
slots:
default:
- component: f7-preloader
config:
size: 50
colorTheme: "=props.isDryer === true ? 'red' : 'lightblue'"
visible: =items[props.item + '_OperationState'].state == 'Run'
style:
position: absolute
- component: f7-icon
config:
f7: "=items[props.item + '_OperationState'].state == 'Finished' ? 'circle_bottomthird_split' : 'circle'"
size: 50
style:
color: "=(items[props.item + '_OperationState'].state === 'UNDEF' || items[props.item + '_OperationState'].state === 'Ready') ? 'lightgray' : props.isDryer === true ? '#ff4f4f' : 'lightblue'"
border-radius: 50%
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.25) inset
- component: f7-block-header
config:
visible: =items[props.item + '_OperationState'].state == 'Run'
class:
- no-margin
style:
position: absolute
text-align: center
slots:
default:
- component: Label
config:
text: "=items[props.item + '_SpinSpeed'].displayState === NULL ? items[props.item + '_SpinSpeed'].state.split('RPM')[1] : items[props.item + '_SpinSpeed'].displayState.split(' ')[0]"
style:
font-size: 11px
color: black
- component: Label
config:
text: "=items[props.item + '_WashingProgramTemperature'].displayState === NULL ? items[props.item + '_WashingProgramTemperature'].state.split('.')[4] : items[props.item + '_WashingProgramTemperature'].displayState"
style:
font-size: 11px
color: black
- component: Label
config:
text: "=items[props.item + '_ActiveProgram'].state !== 'UNDEF' ? items[props.item + '_ActiveProgram'].state : ''"
style:
font-size: 10px
color: black
Hi,
I also canât get the expression to work. I am very new to openHab and donât have an idea how to implement the expression for OFF, RUNNING, etc.
I have the rule implemented that you posted above. This is working fine. I have an Item âWaschmaschine_Statusâ which gets values from 0-3.
I have also changed the YAML file as you described it.
But when I write Waschmaschine_Status in the state props field nothing happens.
Can you please give me a hint what I am doing wrong?
Thank you!
If you have already changed the yaml to work with values 0, 1, 2 and 3 you should set the expression to:
=items.Waschmaschine_Status.state
And you should be all set. Let me know if that works for you 
Ok, now it works.
Thank you
@muelli1967 could you explain what you have modified to show the widget in the rounded cell style?
I am using only these rounded cells, would be nice to add this widget in the same style as well.
Thanks!
I am away from my computer for a couple of days and will send it once back.
sorry guys, but I don´t get where I have to let the widget know what device/item I´m talking about. I can configure the states but still the widget won´t know which item it should watch.
edit: Ok, I found itâŚ
I made an update to the first post: The look and feel of the washing machine will now be the same on android and iOS devices. Thanks goes to @Nico_R who created this custom component for the dishwasher status widget.
Hi, everyone.
I get the following error on the UI when trying to install this widget and the Dishwasher Status :
Installation of add-on 116621 failed
On the Karaf console I get the following:
12/26/2022 20:45:52.656 [ERROR] [mmunity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Couldn't find the widget in the add-on entry
I installed other widgets from Rich Koshak and Thomas Lauterbach without problems.
Iâm running OpenHAB 3.2 (stable) on a Raspberry Pi 4B with CentOS 8 (64bits).
Does anyone have any idea why this may happen?
Maybe my post is in the wrong format!? The post is older than the community marketplace so this might be the case. I donât find a lot of time during the holidays but I will check asap whether this could be the problem.
Could you please try again to install the widget from the marketplace? I just updated the first post so that it matches the required structure. Thank you!
It appears in the marketplace, but fails to âAddâ with the following message in the logs:
16:52:35.337 [ERROR] [mmunity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Couldn't find the widget in the add-on entry
Same goes for the Dishwasher widget.
I am able to install other widgetsâŚ
Thanks for testing. Could you try once more please? If it still does not work Iâm out of ideas how to fix thisâŚ
Yep, works now!
I can also confirm it works. Thanks a lot for your support and for such a great widget @DrRSatzteil!
hey guys,
Iâm struggling to get the widget running.
This is my expression for the state and the item washingmachineBosch_state.state is switched via rule between âAusâ, âWaschvorgangâ, âWaschvorgang beendetâ
=items.washingmachineBosch_state.state == 'Aus' ? "OFF" : items.washingmachineBosch_state.state == 'Waschvorgang' ? "RUNNING" : items.washingmachineBosch_state.state == 'Waschvorgang beendet' ? "FINISHED"
after configuration the widget looks like this:
but in run mode there is no time and no status (animation)
Could anyone help me please?
The screenshot you provided is from the edit mode of the page you added the widget to. It should behave normally once you saved the page and open the page from the normal Main UI view. Did you try that? Does it still look like this?
Alternatively you can switch to run mode in the bottom right corner.