Please help with Code for Custom widget (based off the Matrix Theme)


(Kris K) #1

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 :frowning:

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


(Harry) #2

(Kris K) #3

doesnt help me :frowning:


(Patrick) #4

What’s the behavior you see? Is it a problem of states not being correct in OH or display only?


(Kris K) #5

Hi patrick, thanks for the reply. I dont actually know what I’m doing thats the issue :smiley:

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


(Patrick) #6

Can you post the item config and any rules you have associated to those items?


(Kris K) #7

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


(Patrick) #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.


(Kris K) #9

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> 
  

(Patrick) #10

Correct. What’s the bahavior now? Can you post two screenshots?

EdiT: no, it’s still wrong :slight_smile: 1 sec


(Kris K) #11

Doesnt look right :smiley:


(Patrick) #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> 

(Kris K) #13

Thanks , unforunately the gate doesnt open :frowning:


(Kris K) #14

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


(Patrick) #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?


(Kris K) #16

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 :frowning: I’m really really new to this… You may be right.


(Patrick) #17

I see. I have awnings (on the terrace) that I display like this:

image

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:

image

Make sense?


(Kris K) #18

Hi Patrick

Absolutely!!!

Yes, that would work just fine I think. Can you share what I’d need to make that work?


(Patrick) #19

I can a bit later today! :slight_smile:


(Kris K) #20

Thank you! no rush :slight_smile: Thanks for replying, this has been bugging me for a week!

PS: Your matrix theme is fantastic!! Great work