Hello,
I’m working on a widget but I couldn’t get the positioning correct. I tried it with css but it was outside the screen. Or it will not show up.
What I want is to place everthing on one line and the next one below the first one.
The precense icon -> name of item -> text “is” -> state of the items
Could someone help me with this?
.
<div><span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'window'" state="itemValue('Window1')" inline="true"/></span>Window 1 is {{itemValue('Window1')}}</div>
or
<div>Window 1 is {{itemValue('Window1')}}<widget-icon iconset="'eclipse-smarthome-classic'" icon="'window'" state="itemValue('Window1')" inline="true"/><div>
@hr3 sorry I was forgotten to post my code:
<!DOCTYPE html>
<html>
<head>
<style>
#switch_table, #switch_td, #switch_th {
border: 0px;
padding: 3px;
font-size: 16px;
text-align: center;
}
#switch_table {
border-collapse: collapse;
width: 100%;
}
#switch_row1 {
width: 32px;
float: right;
}
</style>
</head>
<body>
<h2>{{config.top_label}}</h2>
<table id="switch_table">
<tr>
<td id="switch_row1">
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch1_item)" ng-click="sendCmd(config.switch1_item, (itemValue(config.switch1_item)=='OFF') ? 'ON':'OFF')" >
</widget-icon>
<span>
<h4>{{config.name1_item}} is</h4>
<div ng-if="itemValue(config.switch1_item)=='ON'">
<span style="color: green; font-size: 12pt">thuis</span>
</div>
<div ng-if="itemValue(config.switch1_item)=='OFF'">
<span style="color: red; font-size: 12pt">weg</span>
</div>
</span>
</td>
</tr>
<tr>
<td id="switch_row1">
<widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" state="itemValue(config.switch2_item)" ng-click="sendCmd(config.switch2_item, (itemValue(config.switch2_item)=='OFF') ? 'ON':'OFF')" >
</widget-icon>
<span>
<h4>{{config.name2_item}} is</h4>
<div ng-if="itemValue(config.switch2_item)=='ON'">
<span style="color: green; font-size: 12pt">thuis</span>
</div>
<div ng-if="itemValue(config.switch2_item)=='OFF'">
<span style="color: red; font-size: 12pt">weg</span>
</div>
</span>
</td>
</tr>
</table>
</body>
</html>
With your code everything is on one line. But I couldn’t get ‘weg’ and ‘thuis’ on the same line
Group gAtHomeSw
Switch switch1 "Sw1" (gAtHomeSw)
Switch switch2 "Sw2" (gAtHomeSw)
<table class="table table-condensed"; style="font-size: 12pt">
<tr ng-repeat="item in itemsInGroup('gAtHomeSw')">
<td ng-style="{color:'lightblue'}">{{item.state}}</td>
<td><widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" inline="true" state="item.state" ng-click="sendCmd(config.switch1_item, (itemValue(config.switch1_item)=='OFF') ? 'ON':'OFF')" /></td>
<td class="text-left">
{{item.label}} is
<span ng-if="item.state=='ON'" style="color:green">thuis</span>
<span ng-if="item.state=='OFF'" style="color:red ">weg</span>
</td>
</tr>
</table>
<div class="text-left" style="font-size: 12pt" ng-repeat="item in itemsInGroup('gAtHomeSw')">
<span><widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" inline="true" state="item.state" ng-click="sendCmd(item.name, (item.sate=='OFF') ? 'ON':'OFF')" /></span>
<span ng-style="{color:'lightblue'}">{{item.state}}</span>
<span>{{item.label}} is</span>
<span ng-if="item.state=='ON'" style="color:green">thuis</span>
<span ng-if="item.state=='OFF'" style="color:red ">weg</span>
</div>
Two variants.
The ng-click-statement you have to change yourselve, because I don’t understand what do you want to catch.
@hr3 thanks for your help. It wil try this when I’m home.
So when you want to put elements behind of another you do:
<div>
<span></span>
<span></span>
</div>
@hr3 I used your code and now it works. So I thought I could add more items and they will show up, because of the ng-repeat function. But they don’t .
Group gAtHomeSw
Switch Server_Andrea "Andrea [MAP(unifi.map):%s]" (gAtHomeSw) {channel="unifi:client:home:Server_Andrea:online"}
Switch Server_Jeroen "Jeroen [MAP(unifi.map):%s]" (gAtHomeSw) {channel="unifi:client:home:Server_Jeroen:online"}
Switch UnifiSG "UniFi Security Gateway 3P" (gAtHomeSw) {channel="unifi:client:home:UnifiSG:online"}
Switch UnifiSW1 "UniFi Switch 8 POE-60W" (gAtHomeSw) {channel="unifi:client:home:UnifiSW1:online"}
Switch UnifiAP_Boven "UniFi AP-AC-Lite Boven" (gAtHomeSw) {channel="unifi:client:home:UnifiAP_Boven:online"}
Switch UnifiAP_CV_Hok "UniFi AP-AC-Lite Boven" (gAtHomeSw) {channel="unifi:client:home:UnifiAP_CV_Hok:online"}
Switch UnifiAP_Woonkamer "UniFi AP-AC-Lite Boven" (gAtHomeSw) {channel="unifi:client:home:UnifiAP_Woonkamer:online"}
Switch Server_Synology_NAS "Synology DS214 Play" (gAtHomeSw) {channel="unifi:client:home:Server_Synology_NAS:online"}
Switch Server_PiHole "PiHole" (gAtHomeSw) {channel="unifi:client:home:Server_PiHole:online"}
Switch PS4Pro "Playstation 4 Pro" (gAtHomeSw) {channel="unifi:client:home:PS4Pro:online"}
Switch Camera_Babykamer "Camera Babykamer" (gAtHomeSw) {channel="unifi:client:home:Camera_Babykamer:online"}
Switch Camera_Liam "Camera Liam" (gAtHomeSw) {channel="unifi:client:home:Camera_Liam:online"}
Switch Camera_Voordeur "Camera Voordeur" (gAtHomeSw) {channel="unifi:client:home:Camera_Voordeur:online"}
Switch Camera_Voorkant "Camera Voorkant" (gAtHomeSw) {channel="unifi:client:home:Camera_Voorkant:online"}
They do!
Mmm… . Strange. I did the Sam and it didn’t work. Did you used my Item-file?
Yes
What plattform, oH-version, java-version do you use?
Post your actual widget-code please.
What kind of problem do you have?
Platform : ARMBIAN 5.38 stable Debian GNU/Linux 9 (stretch) 4.14.18-sunxi
oH-version: openhab2 v2.3.0-1
Java: openjdk version “1.8.0_152”
OpenJDK Runtime Environment (Zulu Embedded 8.25.0.76-linux-aarch32hf) (build 1.8.0_152-b76)
OpenJDK Client VM (Zulu Embedded 8.25.0.76-linux-aarch32hf) (build 25.152-b76, mixed mode, Evaluation)
My actual widget-code is:
<table class="table table-condensed"; style="font-size: 12pt">
<tr ng-repeat="item in itemsInGroup('gAtHomeSw')">
<td ng-style="{color:'lightblue'}">{{item.state}}</td>
<td><widget-icon iconset="'eclipse-smarthome-classic'" icon="'presence'" size="32" inline="true" state="item.state" /></td>
<td class="text-left">
{{item.label}} is
<span ng-if="item.state=='ON'" style="color:green">thuis</span>
<span ng-if="item.state=='OFF'" style="color:red ">weg</span>
</td>
</tr>
</table>
This is my Things-file:
Bridge unifi:controller:home "Unifi Controller:hier" [host="xxx.xxx.xxx.xxxx.", username="XXXXXXXX", password="xxxxxxx", port=8443, refresh=10]
{
Thing client Server_Jeroen "Jeroen" [mac="XX:XX:XX:XX:XX:XX", considerHome=120]
Thing client Server_Andrea "Andrea" [mac="XX:XX:XX:XX:XX:XX", considerHome=120]
Thing client UnifiSG "UniFi Security Gateway 3P" [mac="XX:XX:XX:XX:XX:XX"]
Thing client UnifiSW1 "UniFi Switch 8 POE-60W" [mac="XX:XX:XX:XX:XX:XX"]
Thing client UnifiAP_Boven "UniFi AP-AC-Lite Boven" [mac="XX:XX:XX:XX:XX:XX"]
Thing client UnifiAP_CV_Hok "UniFi AP-AC-Lite CV-Hok" [mac="XX:XX:XX:XX:XX:XX"]
Thing client UnifiAP_Woonkamer "UniFi AP-AC-Lite Woonkamer" [mac="XX:XX:XX:XX:XX:XX"]
Thing client Server_Synology_NAS "Synology DS214 Play" [mac="XX:XX:XX:XX:XX:XX"]
Thing client Server_PiHole "PiHole" [mac="XX:XX:XX:XX:XX:XX"]
Thing client PS4Pro "Playstation 4 Pro" [mac="XX:XX:XX:XX:XX:XX"]
Thing client Camera_Liam "Camera Liam" [mac="XX:XX:XX:XX:XX:XX"]
Thing client Camera_Babykamer "Camera Babykamer" [mac="XX:XX:XX:XX:XX:XX"]
Thing client Camera_Voordeur "Camera Voordeur" [mac="XX:XX:XX:XX:XX:XX"]
Thing client Camera_Voorkant "Camera Voorkant" [mac="XX:XX:XX:XX:XX:XX"]
}
My problem is that the first two items wil show up in the widget but the rest doesn’t
I tested you code and it works.
Build a sitemap
sitemap tmp label="TMP" {
Default item=gAtHomeSw
}
and see if you get all members
Post a screenshot from your HABPANEL please.
OK, but a other point.
You use switch-items, that’s ok, but what’s about contacts for that?
I’ve used contacts before and changed the states to OPEN and CLOSED but the icon state doesn’t change when I used contacts. I wanted to use the door icon.
