Found my failure. Tried to configure and save the configuration from “Developer Tools/Widgets” instead of “Configure Cell” or “Edit YAML” on a “Page”.
It’s a bit misleading that the same configuration sheet is also available under “Developer Tools”. But there it can’t be saved.
The rule is triggered every minute if ‘washing_machine_state’ is ‘RUNNING’
I would suggest simple code (ECMA script 262 Edition 11):
var runTimeItem = items.getItem(“washing_machine_runtime”);
var minutes = parseInt(runTimeItem.state) + 1;
runTimeItem.postUpdate(minutes);
Only downside is that this won’t survive reboots but I agree that this should be enough in most scenarios.
To be honest I’m not 100% sure that my solution will work with a reboot, It’s just that this simple solution did not come to my mind back then 
This is a fantastic widget. I would really like to get it working but even though you have crystal clear instructions I am struggling.
My machine states are “OFF” and “ACTIVE”. That’s it. The Item is called washingmachinemode_mode and it is currently set to “OFF”. I tested =items.washingmachinemode_mode.state in the expression but it does not show me OFF in the footer or where the widget is using it.
So I tried to adapt the expression to set the correct state for the widget to evaluate all possible String values. See below my config. Still no success.
For the minutes running I tested using String or Number as input. But it only shows the value correctly in the edit mode while editing a page. During run mode the runtime within the machine stays empty.
Any ideas @DrRSatzteil ?
component: widget:washing_machine_v4
config:
header: Washingmachine
runtime: =items.washing_machine_runtime.state
state: '=items.washingmachinemode_mode.state == "OFF" ? "OFF" :
items.washingmachinemode_mode.state == "ACTIVE" ? "RUNNING" : "FINISHED"'
slots: null
Hmmm I think the ‘ symbols in the state expression may be the problem here. Try to remove them and see if it works. I think if you write it like that it is just interpreted as a string.
For the runtime you should use a number item, this is fine. The runtime is only shown in the widget when the state is RUNNING so maybe this is why you only see it in editing mode?
I forgot to mention that it works now and that the state expression was correct as it is. It was just a weird behaviour and as soon as the machine really started and all that stuff was actually used it worked 
Or maybe there was an OpenHAB restart in the meanwhile.
Hello all,
I already see that you are mapping the status via rules.
I have installed the State-O-Matic Binding instead (marketplace).
However, I am not quite clear how the expression for the status could now look if you want to use this in combination with the widget.
The binding returns the status ready as string…
I tried it this way at first:
component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: widget:washing_machine_v4
config:
title: Waschmaschine
runtime: =items.Waschen_Time.state
state: =items.Waschen_State.state
Thanks in advance for your hints.
If I understand your question correctly you don’t want to use an expression but the Washen_State item state directly?
Then you would need to adapt the widget code and replace the occurrences of RUNNING, FINISHED and OFF with the states that you get from the binding.
Hi @elektrolubach,
I tried the same with my items:
For the item “time” the result is strange: In “edit” mode the time is displayed:
in the “run” mode it is not:
Any idea what could be the reason?
The status item does not work. My mapping under State Description looks like this:
Ideas are welcome…
Unfortunately I think you cannot use the state description since I don’t use the displayState in the widget (could be an improvement).
This should also be the reason why you don’t see the time displayed. It is only shown in RUNNING mode.
Hi,
Yes, you have understood that correctly. The “calculation” of the state is done by the State-O-Matic binding and returns a string.
However, as you can see in my following post, I tried it with a transformation under “State Description” | Options. Actually, the item should directly return the values that the widget expects? When I look at the item itself, that is the case.
Oh well… my answer was not correct. Try to use .displayState instead of .state for your item.
Oh I see you did this already… hm…
Ah OK.
Understood.
I have my difficulties with YAML but I can try to customize it …
After playing with it for half an hour now, it works… I do not understand! Browser cache?
The config is now as above in my screenshots. Where should the status be displayed?
The status is not shown as text but controls the look of the widget: in running state the time is shown and the washing machine spins.
If you want a textual representation of the state you could use the footer.
Thank you. Now I get it.
Great widget by the way! Thanks for making your work available.
In case you wonder why I use the State-O-Matic binding: it gives me some extra info, that’s quite nice …
Hello,
Thanks for the super widget, in which a lot of work and knowledge has gone!
I have a MIELE washing machine that communicates via the cloud.
I saved the status of the MIELE account in an item (getThingStatusInfo(“mielecloud:account:xxxxxxxxxxx”)).
The title background should be colored depending on the item.
component: f7-card
config:
title: =(props.title)
stylesheet: >
.card-header {background: green/red/yellow}
Is there a possibility?
Thanks very much!
Hi and thank you!
I‘m sure it can be done but I’ve never tried that myself. The question is however not directly related to this widget but a more general Main UI question. There are lots of highly customised Main UI examples in the forums where you might already find examples on how to apply a style to the header of a card.
Edit: just tried this:
component: f7-block-header
slots:
default:
- component: Label
config:
text: =props.header
style:
background: red
It works fine. You can add an expression there like they are used in other parts of the widget to change the Color based on the status of your machine.
Hi,
Thank You! It’s a very nice idea!
Here is the result.
I didn’t even think of using the block header