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

pmpkk · July 4, 2018, 1:31pm

Here’s a solution.

Create a new item “Gate_state” which holds the state in a string (OPEN, CLOSED, PARTIAL):

String Gate_state

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

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 …

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:

For open:

And closed:

dastrix80 · July 4, 2018, 8:29pm

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>

pmpkk · July 5, 2018, 12:33pm

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

dastrix80 · July 5, 2018, 8:55pm

No joy @pmpkk Ill send you a PM

dastrix80 · July 9, 2018, 9:03am

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

pmpkk · August 1, 2018, 6:18am

Use “;” instead of “&&”!

dastrix80 · August 1, 2018, 6:27am

Thanks Patrick, in the end i did this which works OK and added my items to a group

<div class="widget" ng-if="itemValue('gPowerReset')=='OFF'" ng-click="sendCmd('gPowerReset', '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>
<div class="widget" ng-if="itemValue('gPowerReset')=='ON'" ng-click="sendCmd('gPowerReset', '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">Reset Usage</div>
</div>
<div class="widget" ng-if="itemValue('gPowerReset')=='NULL'" ng-click="sendCmd('gPowerReset', '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">Reset Usage</div>

dastrix80 · August 1, 2018, 6:34am

Hi @pmpkk

You’re a guru on this and may know the answer.

This piece of code displays this like video nicely using a basic UI sitemap, however no matter what I try in HabPanel, it doesnt work correctly on Mobile.

Can you suggest how I can embed this code to work correctly on mobile? It a 640x480 Webcam feed from a doorbell.

Its not responsive at all

sitemap doorbird label="Kris Home" {
    Frame label="Front Yard" {
        Video url="http://username:password@URL:6168/bha-api/video.cgi" encoding="mjpeg"

Here is the failing Habpanel code:

  <div class="widget" style="width: 100%; text-align: center;">
      <iframe name="Video Widget" ng-style="{ 'background-color': vm.widget.background }" frameborder="0" ng-src="http://url:pass@URL:6168/bha-api/video.cgi" width="320" height="240" > </iframe>
    </div>