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


(Patrick) #21

Here’s a solution.

  1. Create a new item “Gate_state” which holds the state in a string (OPEN, CLOSED, PARTIAL):
String Gate_state
  1. Create items for commands:
Switch Gate_full "Fully" <door> { mqtt=">[broker:cmnd/gate/POWER1:command:*:default], <broker:stat/gate/POWER1:state:default]", autoupdate="false" }
Switch Gate_partial "Partial" <door> { mqtt=">[broker:cmnd/gate/POWER2:command:*:default], <broker:stat/gate/POWER2:state:default]", autoupdate="false" }
Contact Gate_status "Gate Status" <door> { mqtt="<[broker:cmnd/gate_switch/POWER4:state:MAP(door.map)]" }
  1. Create the rules to manage the states between “Gate_state” and the Gate_full, Gate_partial and Gate_status
rule "Close Gate"
when
    Item Gate_state received command "CLOSED"
then
    Gate_full.sendCommand(OFF)
end

rule "Open Gate Fully"
when
    Item Gate_state received command "OPEN"
then
    Gate_full.sendCommand(ON)
end

rule "Open Gate Partially"
when
    Item Gate_state received command "PARTIAL"
then
    Gate_partial.sendCommand(ON)
end

rule "Gate changed"
when
    Item Gate changed
then
    val gateState = Gate.state
    if (gateState == OPEN) {
        Gate_state.postUpdate("OPEN")
    }
    if (gateState == CLOSED) {
        Gate_state.postUpdate("CLOSED")
    }
end

Not sure how you will know if the gate is partially open. What’s the value of Gate_status then? You’ll need to add that to the rule …

  1. Finally, the widget:
<div class="widget">
	<div ng-if="itemValue('Gate_state') == 'CLOSED'" class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="{{'/static/matrix-theme/matrixicons.svg#shutter_100}}"></use></svg></div>
	<div ng-if="itemValue('Gate_state') == 'OPEN'" class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="{{'/static/matrix-theme/matrixicons.svg#shutter_0}}"></use></svg></div>
	<div ng-if="itemValue('Gate_state') == 'PARTIAL'" class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="{{'/static/matrix-theme/matrixicons.svg#shutter_50}}"></use></svg></div>
	<div class="name">Garage Door</div>
 	<div class="valueGroup"><div ng-if="itemValue('Gate_state') != 'NULL'" class="value">{{itemValue('Gate_state')}}</div></div>			
		<div class="controlGroup">
			<div class="control" ng-click="sendCmd('Gate_state', 'OPEN')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div>
			<div class="control" ng-click="sendCmd('Gate_state', 'PARTIAL')">50%</div>
			<div class="control" ng-click="sendCmd('Gate_state', 'CLOSED')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
	</div>
</div>

Btw, you will need to download the latest version of the matrixicons.svg file to get the shutter states from here: https://github.com/pmpkk/openhab-habpanel-theme-matrix

The result should look like this for partial:

image

For open:

image

And closed:

image


(Kris K) #22

Wow thanks @pmpkk

So, it partially works. The states arent working right…

The log is FILLED with this,

20:10:29.633 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:29.690 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:29.733 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:29.936 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:29.983 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:30.139 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:30.212 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:32.333 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:32.383 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:32.486 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:32.540 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:35.035 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:35.085 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:35.132 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:35.182 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:40.085 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:40.132 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:41.534 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:41.582 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:41.935 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN
20:10:41.988 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from OPEN to CLOSED
20:10:42.035 [INFO ] [smarthome.event.ItemStateChangedEvent] - Gate_status changed from CLOSED to OPEN

It seems the CLOSED button doesnt work.

<div class="widget">
	<div ng-if="itemValue('Gate_state') == 'CLOSED'" class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="{{'/static/matrix-theme/matrixicons.svg#shutter_100}}"></use></svg></div>
	<div ng-if="itemValue('Gate_state') == 'OPEN'" class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="{{'/static/matrix-theme/matrixicons.svg#shutter_0}}"></use></svg></div>
	<div ng-if="itemValue('Gate_state') == 'PARTIAL'" class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="{{'/static/matrix-theme/matrixicons.svg#shutter_50}}"></use></svg></div>
	<div class="name">Garage Door</div>
 	<div class="valueGroup"><div ng-if="itemValue('Gate_state') != 'NULL'" class="value">{{itemValue('Gate_state')}}</div></div>			
		<div class="controlGroup">
			<div class="control" ng-click="sendCmd('Gate_state', 'OPEN')">Fully</div>
			<div class="control" ng-click="sendCmd('Gate_state', 'PARTIAL')">Partial</div>
			<div class="control" ng-click="sendCmd('Gate_state', 'CLOSED')">Close</div>
	</div>
</div>

(Patrick) #23

Sorry, here are the updated rules:

rule "Gate Action"
when
    Item Gate_state received command
then

    if (Gate_state.state.toString == "OPEN") {
        Gate_full.sendCommand(ON)
    }

    if (Gate_state.state.toString == "CLOSED") {
        Gate_full.sendCommand(OFF)
    }

    if (Gate_state.state.toString == "PARTIAL") {
        Gate_partial.sendCommand(ON)
    }

end

rule "Gate changed"
when
    Item Gate changed
then
    val gateState = Gate.state.toString
    if (gateState == "OPEN") {
        Gate_state.postUpdate("OPEN")
    }
    if (gateState == "CLOSED") {
        Gate_state.postUpdate("CLOSED")
    }
end

(Kris K) #24

No joy @pmpkk Ill send you a PM


(Kris K) #25

All, am I right in saying if i want to send two commands, this would work?

  <div class="widget" ng-click="sendCmd('LivingRoomReset', 'ON') && sendCmd('KitchenReset', '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">Reset Usage</div>
    </div>

Doesnt appear to :frowning: