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

And is there a way to rename “open” and “closed” in the dummy widget?

My Template code (Dont wrap in container is “off”):

<div ng-if="itemValue('EG_Buero_Fenster_beide') == 'OPEN'">
   <button 
           style="width: 100%; 
                  border: 0; 
                  color: white; 
                  background: #FF7373; 
                  position: absolute; 
                  top: 0; 
                  bottom: 0; 
                  font-size: 14px">
   </button>
</div>

<div ng-if="itemValue('EG_Buero_Fenster_beide') == 'CLOSED'">
   <button 
           style="width: 100%; 
                  border: 0; 
                  color: white; 
                  background: #26FF93; 
                  position: absolute; 
                  top: 0; 
                  bottom: 0; 
                  font-size: 14px">
   </button>
  <background-icon iconset="'freepik-household'" icon="'window-3'"  style="color:green" />
</div>

My items:

Contact 		EG_Buero_Fenster_links 		"Fenster Büro links [MAP(en.map):%s]" (EG_Buero) {knx="4/4/0"}
Contact 		EG_Buero_Fenster_rechts		"Fenster Büro rechts [MAP(en.map):%s]" (EG_Buero) {knx="4/4/1"}
Contact 		EG_Buero_Fenster_beide		"Fenster Büro beide [MAP(en.map):%s]" (EG_Buero) {knx="4/4/0+4/4/1"}

How it looks like:

ng-style + the ternary operator to the rescue:

<div 
     ng-style="{
      'background-color': itemValue('EG_Buero_Fenster_beide')=='OPEN' ? '#26FF33' : '#FF7373'
     }"
     class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'window'"
     state="itemValue('EG_Buero_Fenster_beide')" size="100" center="true" />
  </div>
</div>

Also the widget-icon can pass the state to the icon API when using the ESH classic iconset, so the actual icon adapts to the state, and the icons are not colorized.

OPEN:

anything else:

3 Likes

Works perfectly… and found out that it is case sensitive :wink:

1 Like

Hi! I’m using your template, Icon change on State change works well but not the color change?!???

I had the same problem. It was because I used an en.map in the items config file:
item file:
Contact Window_GF_Living “Terras deur [MAP(en.map):%s]” (GF_Living, Windows)
en.map file
CLOSED=Gesloten
OPEN=Open

It was solved when I had changed “OPEN” in “Open”.

[SOLVED] enjoy the widget!

Can someone point me in the right direction here please?

I can’t get the icon to change, it always defaults to open-icon. The background changes fine.

I have a nodemcu with espeasy with a contact reed switch and a relay on it using mqtt-nodered-openhab fo communication. the reed switch only seems to like to update state in nodered openhab out item as a 0 or 1. Which is fine the background is changing, but I think I need to be using a different command for the icon to change or should it work as is? I get a (can’t parse 400) error if I try to switch the output via mqtt to open or closed or on or off (perhaps I need a rule in openhab for that??).
So I am trying to make a single widget that will display the state of the contact and has a button to press overlay to command the relay on it. Which I seem to have achieved. except for the icon being dumb, or the user being dumb.

EDIT dumb user. It doesn’t like number(instead of string) or 0(zero) for items. It needs string which is what was causing my can’t parse error… if only that had been easy to find in google.

<div 
     ng-style="{'background-color': itemValue(config.item1)=='Closed' ? '#26FF3340' : '#ed3434BF'}" //last two digits for transparency, not sure if that works.
     class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute">
  
     <button style="height:100%;width:100%;background:inherit"
             ng-mousedown="sendCmd(config.item2, '1')" ng-mouseup="sendCmd(config.item2, '0')">
       <div class="template-contents">
     <widget-icon iconset="config.icon1_iconset" icon="config.icon1"
                  state="itemValue(config.item1)" size="(config.string1)" center="true" />
       </div>
  
    </button>
  
</div>

Switch-remote.widget.json (1.6 KB)

These errors were difficult for me to find answers to so I putting them here in case they help somoene in the future.

“response error '{“statusCode”:400,“body”:”{“error”:{“message”:“State could not be parsed: Open”,“http-code”:400}}",“headers”:{“content-type”:“application/json”,“content-length”:“71”,“connection”:“close”,“server”:“Jetty(9.3.22.v20171030)”},“request”:{“uri”:{“protocol”:“http:”,“slashes”:true,“auth”:“Openhabian:Speedy55”,“host”:“localhost:8080”,“port”:“8080”,“hostname”:“localhost”,“hash”:null,“search”:null,“query”:null,“pathname”:"/rest/items/Garage_Door/state",“path”:"/rest/items/Garage_Door/state",“href”:"http://Openhabian

2018-03-02 20:54:08.963 [WARN ] [rest.core.internal.item.ItemResource] - Received HTTP PUT request at ‘items/Garage_Door/state’ with an invalid status value ‘Open’.

These errors together in node red and frontail mean you are giving the wrong output, which I knew, I just didn’t know how to remedy it. You have to change the expected output in paperui/items/item to string or number etc.

@ysc can you help with item state and changing the icon? It should turn green when ON and grey when off.
Im not sure what im doing wrong :frowning: Thank you!

My code:

<div class="section" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
	<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div></div>
  <div class="title"><div class="name">Lights</div></div>
  <div class="controls">

<div class="widget" ng-if="itemValue('LivingRoomSw1')=='OFF'" ng-click="sendCmd('LivingRoomSw1', '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">Living {{itemValue('LivingRoomSw1')}}</div>
    </div>
      <div class="widget" ng-if="itemValue('LivingRoomSw1')=='ON'" ng-click="sendCmd('LivingRoomSw1', '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">Living {{itemValue('LivingRoomSw1')}}</div>
    </div> 
    <div class="slider-div" ng-init='LivingRoomDim1={"name": "Dining Brightness", "item": "LivingRoomDim1", 
                    "floor" : 0,
                    "ceil": 100,
                    "step": 1,
                    "hidelabel" : "true",
                    "hidelimits": "true",
                    }'>
    <widget-slider ng-model="LivingRoomDim1"/>
  </div>

Hello, I use the following code:


<div 
     ng-style="{
      'background-color': itemValue('WZ_Fenster')=='OFFEN' ? '#FF7373' : '#26FF33'
     }"
     class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'window'"
     state="itemValue('WZ_Fenster')" size="100" center="true" />
  </div>
</div>

The background color also changes, but the icon always shows the same state. Can someone help me?`