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

[dastrix80 (Kris K)]

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

[hr3 (Harry)]

Rename Open / Closed and Template widget "state"

Hi! I’m heavily working with habpanel and try to make several dashboards. atm I’m stuck on the following: I would like to see if my windows are open or closed. I created a “dummy” widget, selected the item and backdrop icon - no problem. But when I create a template which should have the background color red or green (depending on the state of both windows in that room) the color loads only on first change (the dummy element gets that right away when opening the dashboard). What am i doing …

[dastrix80 (Kris K)]

doesnt help me

[pmpkk (Patrick)]

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

[dastrix80 (Kris K)]

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

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

[dastrix80 (Kris K)]

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

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.

[dastrix80 (Kris K)]

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

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

EdiT: no, it’s still wrong 1 sec

[dastrix80 (Kris K)]

Doesnt look right

[pmpkk (Patrick)]

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

[dastrix80 (Kris K)]

@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

[dastrix80 (Kris K)]

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

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?

[dastrix80 (Kris K)]

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

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?

[dastrix80 (Kris K)]

Hi Patrick

Absolutely!!!

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

[pmpkk (Patrick)]

I can a bit later today!

[dastrix80 (Kris K)]

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

PS: Your matrix theme is fantastic!! Great work