Hi All,
Im trying to get this widget to work for my gate.
I have 2 switches and 1 contact. The contact monitors the gate state, open or closed.
The two switches are used to open/close, one opens/closes the gate fully. The other opens it partially.
Im trying to get the buttons to show green when triggered/open, and grey when closed. But it fails to work
Can someone please help me? Ive tried ALOT of things but given I have no experience with coding I’m totally lost.
<div class="section">
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#window"></use></svg></div></div>
<div class="title">Gate</div>
<div class="controls"></div>
<div class="widget" ng-if="itemValue('GateFullyProxy')=='ON'" ng-click="sendCmd('GateFullyProxy', 'OFF')">
<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
<div class="name">Open/Close {{itemValue('GateFullyProxy')}}</div>
</div>
<div class="widget" ng-if="itemValue('GateFullyProxy')=='OFF'" ng-click="sendCmd('GateFullyProxy', 'ON')">
<div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
<div class="name">Open/Close {{itemValue('GateFullyProxy')}}</div>
</div>
I have a map that translate ON to OPEN, OFF to CLOSED.
Thank you
pmpkk
(Patrick)
July 4, 2018, 9:35am
4
What’s the behavior you see? Is it a problem of states not being correct in OH or display only?
Hi patrick, thanks for the reply. I dont actually know what I’m doing thats the issue
Basically the buttons work, they trigger correctly but the visual behaviour does not like it does when using Light switches.
Ie; they dont turn green when the Contact displays ‘OPEN or ON’
Cheers
pmpkk
(Patrick)
July 4, 2018, 9:44am
6
Can you post the item config and any rules you have associated to those items?
1 Like
Certainly
/* Gate & Garage Items*/
Switch GateFullyProxy "Fully" <door> { autoupdate="false" }
Switch GatePartialProxy "Partial" <door> { autoupdate="false" }
Switch GateFully "Fully" <door> { mqtt=">[broker:cmnd/gate/POWER1:command:*:default], <broker:stat/gate/POWER1:state:default]", autoupdate="false" }
Switch GatePartial "Partial" <door> { mqtt=">[broker:cmnd/gate/POWER2:command:*:default], <broker:stat/gate/POWER2:state:default]", autoupdate="false" }
Contact Gate "Gate Status" <door> { mqtt="<[broker:cmnd/gate_switch/POWER4:state:MAP(door.map)]" }
rule "GateFullyProxy"
when
Item GateFullyProxy received command
then
GateFully.sendCommand(receivedCommand)
end
rule "GatePartialProxy"
when
Item GatePartialProxy received command
then
GatePartial.sendCommand(receivedCommand)
end
rule "Gate changed"
when
Item Gate changed
then
val gateState = Gate.state
if (gateState == OPEN) {
GateFullyProxy.postUpdate(ON)
GatePartialProxy.postUpdate(ON)
} else {
GateFullyProxy.postUpdate(OFF)
GatePartialProxy.postUpdate(OFF)
}
end
pmpkk
(Patrick)
July 4, 2018, 9:49am
8
In your template code, I think your icons are switched around.
When the state is “OFF” you want to display ”#off ”.
Same form on. Right now it’s the other way.
Also the CSS class is switched around.
I tried that also. i tried the combinations, but perhaps I got it wrong
Is this the modification you suggest?
<div class="widget" ng-if="itemValue('GateFullyProxy')=='ON'" ng-click="sendCmd('GateFullyProxy', 'ON')">
<div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
<div class="name">Open/Close {{itemValue('GateFullyProxy')}}</div>
</div>
<div class="widget" ng-if="itemValue('GateFullyProxy')=='OFF'" ng-click="sendCmd('GateFullyProxy', 'OFF')">
<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
<div class="name">Open/Close {{itemValue('GateFullyProxy')}}</div>
</div>
pmpkk
(Patrick)
July 4, 2018, 9:55am
10
Correct. What’s the bahavior now? Can you post two screenshots?
EdiT: no, it’s still wrong 1 sec
pmpkk
(Patrick)
July 4, 2018, 9:59am
12
<div class="widget" ng-if="itemValue('GateFullyProxy')=='ON'" ng-click="sendCmd('GateFullyProxy', 'OFF')">
<div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
<div class="name">Open/Close {{itemValue('GateFullyProxy')}}</div>
</div>
<div class="widget" ng-if="itemValue('GateFullyProxy')=='OFF'" ng-click="sendCmd('GateFullyProxy', 'ON')">
<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
<div class="name">Open/Close {{itemValue('GateFullyProxy')}}</div>
</div>
pmpkk:
<div class=“widget” ng-if=“itemValue(‘GateFullyProxy’)==‘ON’” ng-click=“sendCmd(‘GateFullyProxy’, ‘OFF’)”> <div class=“icon on” ><svg viewBox=“0 0 48 48”><use xlink:href=“/static/matrix-theme/matrixicons.svg#on”></use></svg></div> <div class=“name”>Open/Close {{itemValue(‘GateFullyProxy’)}}</div> </div> <div class=“widget” ng-if=“itemValue(‘GateFullyProxy’)==‘OFF’” ng-click=“sendCmd(‘GateFullyProxy’, ‘ON’)”> <div class=“icon off” ><svg viewBox=“0 0 48 48”><use xlink:href=“/static/matrix-theme/matrixicons.svg#off”></use></svg></div> <div class=“name”>Open/Close {{itemValue(‘GateFullyProxy’)}}</div> </div>
Thanks , unforunately the gate doesnt open
OK, odd behaviour
It opens from closed. And it lights up in HabPanel as being OPEN but it cant close it when its open. It wont respond to the clicks/close. Perhaps the state is causing it grief?
using Basic UI i can open/close fine
pmpkk
(Patrick)
July 4, 2018, 10:11am
15
Sorry, I don’t understand what the states mean.
Really this a tri-state?
Open
Closed
Partially open
Wouldn’t it better to mange this like a rollershutter, then?
Its a garage motor which has 2 relays, one to open partially and one to open fully.
And closed.
I’m not entirely sure Patrick I’m really really new to this… You may be right.
pmpkk
(Patrick)
July 4, 2018, 10:16am
17
I see. I have awnings (on the terrace) that I display like this:
This allows me to know the state (open, close, partial) and set the state (open, close, partial). For the awning, I can be very specific (and give any percentage of partial). So for you, you’d just need one extra state.
Maybe something like this:
Make sense?
1 Like
Hi Patrick
Absolutely!!!
Yes, that would work just fine I think. Can you share what I’d need to make that work?
Thank you! no rush Thanks for replying, this has been bugging me for a week!
PS: Your matrix theme is fantastic!! Great work
1 Like