Pushbutton, Monostable Button

Hi, im trying to create widget that should work like a monostable button.
So It’s should send ON when it is pressed ad OFF in other states.

My automation system is based on WAGO PLC.

I used doorbell buttons as a light switch. So it always works on rising edge and change state of light every time you press switch.

Thanks to that i can also create additional function for hold and doubleclick.

I would like have the same functionality in my HABPanel.

I also want that my widget looks like ordinary switch. So it have to send command to one binding and read state of light in other.

Can someone help me?

At least send script for original switch widget.

The behavior you will probably need to implement in a Rule or use the Expire binding, depending on how long you want the button to remain ON after being pressed. If a seconds isn’t too long

Switch MyButton { expire="1s,command=OFF" }

If it needs to be shorter

rule "Reset button"
when
    Item MyButton received command ON
then
    createTimer(now.plusMillis(500), [ | MyButton.sendCommand(OFF) ] )
end

I can’t help with the UI elements.

2 Likes

You will to respond to the mousedown and mouseup events instead of the click event in the code

@rlkoshak
He is looking for the finctionality in habpanel and that means coding the widget not openHAB

@vzorglub, you have right I want to create widget and i think that is a better way.

I tried the solution that @rlkoshak described.

It is not good enough. I’m not quite sure why, I suppose that sendCommand(OFF) would send a new command to switch, in my example, 1 (ON) to modbus binding instead turn off the trigger.

Do You know where I cant find original switch html/java code?

Sorry for bad English.

You can change that

Switch MyButton { expire="1s, state=OFF" }

Modbus binding only recieves and passes on ON command

What do You think about that.

Widget code (alfa):

<div>
  <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-mousedown="sendCmd('{{itemValue(config.btn_name)}}', 'ON'); wait(5)" ng-mouseup="sendCmd('{{itemValue(config.btn_name)}}', 'OFF')" >
  <span>
		<widget-icon iconset="'smarthome-set'" icon="'bulb'" size="32" state="{{itemValue(config.btn_name)}}" />
  </span>
	<span style={{itemValue(config.btn_name)=='ON' ? 'white' : '#7B879C'}}>
		Wiatrołap
	</span>
  </button>
</div>

I works quite good. Now I have another problem: How make this widget object oriented.

I have made, new code for testing:

Code:

<div>
  <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none" ng-mousedown="sendCmd('Kuchnia', 'ON'); wait(5)" ng-mouseup="sendCmd('Kuchnia', 'OFF')">
  Test
  </button>
  <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-mousedown="sendCmd('{{config.btn_name}}', 'ON'); wait(5)" ng-mouseup="sendCmd('{{config.btn_name}}', 'OFF')">
  Test2
  </button>
</div>

HTML:

<div class="template-contents"><div>
  <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none" ng-mousedown="sendCmd('Kuchnia', 'ON'); wait(5)" ng-mouseup="sendCmd('Kuchnia', 'OFF')">
  Test
  </button>
  <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none" ng-mousedown="sendCmd('Kuchnia', 'ON'); wait(5)" ng-mouseup="sendCmd('Kuchnia', 'OFF')">
  Test2
  </button>
</div></div>

Kuchnia - Switch

Result in html is identical for Test and Test2 but only Test works?!

Can You help me with this?

Ok :slight_smile: I found a bug in my code, and made an beta solution.

<div>
  <button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
  ng-mousedown="sendCmd(config.btn_name, 'ON'); wait(5)" ng-mouseup="sendCmd(config.btn_name, 'OFF')">
  <span>
		<widget-icon iconset="config.icon_name_iconset" icon="config.icon_name" size="32" state="itemValue(config.btn_name)"/>
  </span>
	<span style="color: {{itemValue(config.btn_name)=='ON' ? 'white' : '#7B879C'}}">
		{{getItem(config.btn_name).label}}
	</span>
  </button>
</div>

Item has

autoupdate="disabled"

monostable-button.widget v0.1.json (943 Bytes)

1 Like

Hi Jakub,
I’v installed your widget to control a doorlock. The doorlock is connected to a velbus relay.
Works fun when the widget is used on a mac/pc: pushed = activated, else not.
When used on an ios device the behaviour is different: pushed = activated for a slit second, then not.
Any idea on how to fix this? I would like a nice momentary button on my phone to open the door…
btw: great work, been looking for this for a while.

Hi @roelwelters,
I read about it earlier in this forum. I suppose that this is not a problem of the widget itself but the entire habpanel operating under the ios system.

@kubaz
hi thank u for your useful widget but there is a problem when i press widget on my habpanel it do rightclick how can i fix it?

Hi @Hossein_Piri,
I don’t know why it works differently in your Habpanel and I don’t know solution yet, but I think about it.
If you find a couse of error yourself, write. Maybe someone will use it :slight_smile:

Dear Jakub,
You widget works perfect, but there is a small estetic problem, the name on the button shows the name of the Item, and not the name given in the settings of the button !