Help with Garage & Garage Widget

Apps & Services HABPanel
1

Hi All

I have 3 items, one for the Contact status, which indicates the gate open or closed and two switches, one opens my gate fully the other partially.

Im trying to get a custom widget that will give me a button to open fully and partially, along with display the current status of the gate. If the gate is open/On, then display the icon green

Here are my items & map file.


NULL=NULL
-=Undefined
ON=OPEN
OFF=CLOSED


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)]" }

And finally my Widget


<div class="section">

	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div></div>
	<div class="title">Gate</div>
	<div class="controls"></div>      
      
      <div class="widget" ng-click="sendCmd('Gate_Fully', 'On')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
      <div class="name">Open Fully</div>
    </div>

      <div class="widget" ng-click="sendCmd('Gate_Fully', '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">Close Fully</div>
    </div>    
    
      <div class="widget" ng-if="itemValue('Gate')!='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">State: {{itemValue('Gate')}}</div>
                  
    </div>

Does it appear correct?

image
image.png1600Ă—900 60.2 KB

2 
Switch GateFully "Fully" <door> { mqtt=">[broker:cmnd/gate/POWER1:command:*:ON] }
Switch GatePartial "Partial" <door> { mqtt=">[broker:cmnd/gate/POWER2:command:*:default] }
Contact Gate "Gate Status" <door> { mqtt="<[broker:cmnd/gate_switch/POWER4:state:MAP(door.map)]" }

If I remember correctly, the POWER1 on your tasmota only needs the ON command
The two switches don’t need the incoming state as it is only sending back what you just send with no “real” feedback from the tasmota.
The only “real” feedback you get is from the Gate item with the relay we had so much fun installing.

<div class="section">

	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div></div>
	<div class="title">Gate</div>
	<div class="controls"></div>      
      
      <div class="widget" ng-click="sendCmd('Gate_Fully', 'ON')">
      <div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
      <div class="name">Open Fully</div>
    </div>

      <div class="widget" ng-click="sendCmd('Gate_Fully', '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">Close Fully</div>
    </div>    
    
      <div class="widget" ng-if="itemValue('Gate')!='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">State: {{itemValue('Gate')}}</div>
                  
    </div>
1 Like
3

Yep, that makes sense vincent hence the state item down the bottom and not per switch. I’ve mocked something up so Ill give it a test a bit later.

How would I get the State widget to turn the icon green when the gate is Open? and Grey when its closed - as per the matrix theme which this uses.

the 'icon off and ng-if statements

4

Don’t know html at all.
But the Gate is a contact with values of OPEN or CLOSED

1 Like
5

I just updated On to ON, as thats the only difference I could see. Unforunately it doesnt work.

I assume I need to use the proxy switches, not the actual switches @vzorglub?

sitemap:

   Frame label="Garage & Gate" {
        //comment
        Switch item=GateFullyProxy mappings=[ON="Open", ON="Close"]
        Switch item=GatePartialProxy mappings=[ON="Open", ON="Close"]
        Text   item=Gate
6

And Rules

rule "GateFullyProxy"
when
    Item GateFullyProxy received command
then
    logInfo("TEST","TEST1")
    GateFully.sendCommand(receivedCommand)
    logInfo("TEST","TEST2")
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
7

Changing to the Proxy fixed it :smiley: It now works!! now to get the color animations working correctly…