Custom Widget: Multi-state Widget

very nice and simple widget for a noob like me,is there a way to change switch color from green to orange so it can match with my orange tree skin?

this is great for keeping on eye on all my exterior lights, if any is left ON

I have a problem using switch for a group of lamps in this template: clicking on the switch item only OFF commands are sent but the switch item changes the colour to green. Clicking again also OFF is sent to the item and the coulur changes back.
What is going wrong?

Werner

Could you modify the Widget so that it does not always show the first 4 chars of the values when Showvalues_(On/Off) is selected? Maybe make it configurable.

In addition a Showvalues without On or Off would be nice so it just displays the values.

The reason behind this is that I’m using the widget to monitor my washing mashine and my dryer. The states may be longer thatn 4 chars, e.g. “Finished” and it looks a little bit uggly to have one of 10 items with a green background just because “Remote Control Activation State” is “On”.

Hi!
I’m using a custom widget that’s based on this one and since some time i have a problem with the order of my items…

i have three different groups with items like this:

Group WTx:
WTx1 Monday
WTx2 Tuesday
WTx3 Wednesday
WTx4 Thursday
...
Group WTy:
WTy1 Monday
WTy2 Tuesday
WTy3 Wednesday
WTy4 Thursday
...

items are listed exactly the same way in file.items
last year the items where listed correct in 3 different multi-state widgets, but now i have one widget with the correct order and two widget with “an alternative” (=wrong) order. already tried to restart openhab and to delete/re-add the widget, but it remains the same. Here’s what it looks like:


first part is correct (“Montag” is not visible / outside screen), second part with alternative order. below is a third widget - with a different order again.

has this happened to anyone? and: how can i fix this?

Peter

A nice widget.

I want to use it for a long List.
But the widget must have the size of the Number of the list.

How can i get a scroll down to have a small widget with the full list?
How can i get a scrollbar for long list in a small widget window? I dont understand how and where i have to change the code of the Widget for this case.

Hello. I would like to say that the plugin is excellent.
There is one small typo, you wrote “von” which I think is “of” in German, in this line:

{{config.item_header}} : {{(itemsInGroup(config.item_groupid) | filter:{state:'ON'}).length}} von {{(itemsInGroup(config.item_groupid)).length}}

Hi,

just used your widget. Thnx for that.
Is there a way to sort the items when displayed? The listing seems random.

Thx

Good day,
Most of my lights are on dimmers, so would like to use this to display all of the Dimmer items, however, Dimmer is not a supported type. Also interested in showing groups of type Contact to cover doors and windows. Any plans to add? Thank you.

Update: I have been able to add Dimmer and Contact type support to the widget. For simplicity, I made Dimmer just like Switch - on/off only.

            <div ng-if="(config.item_type=='Dimmer')">
								<div style="height:30px;"><label class="myswitch">
                  <input type="checkbox" ng-checked="(itemValue(item.name)=='ON')||(itemValue(item.name)>0)" ng-click="sendCmd(item.name, (itemValue(item.name)=='OFF') ? 'ON':'OFF')"/><div class="myslider round"></div></label>
              </div>
            </div>

Contact is similar to Window. Along the way I discovered the code can be confused if there are Things in the group that have never been used (status is NULL) so added handling on Contact for it but left other types alone.

            <div ng-if="(config.item_type=='Contact')">
               <div>
				<div ng-if="(itemValue(item.name)=='OPEN')"> {{"open"}}  </div>
                <div ng-if="(itemState(item.name)=='CLOSED')"> {{"closed"}}</div>       
                <div ng-if="(itemState(item.name)=='NULL')"> {{"uninitialized"}}</div> 
               </div>
              	<div ng-style="{'background-color': (itemState(item.name)=='OPEN') ? '#FF0000' : 'transparent' }">
                    <button style="width: 100%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px" ng-click="">
                        <div ng-if="((config.item_icon_iconset)==NULL)"><widget-icon iconset="'freepik-household'" icon="'door'" /></div>
                        <div ng-if="((config.item_icon_iconset)!=NULL)"><widget-icon iconset='config.item_icon_iconset' icon='config.item_icon' /></div>
                    </button>
                </div>
            </div>

I would like to use the widget, but I have problems with the basics. Unfortunately, I do not know where to get the GroupID. and I do not know how I can create a group, or how I can get in there devices, can someone help me?

Hi Matt

I have a similiar issue, I see you used config.item_type==‘Dimmer’

How does this work? My config is

<div class="widget" ng-if="item.type=='Dimmer' && itemValue(item.name)=='OFF'" ng-click="sendCmd(item.name, 'ON')">

but fails.

Did you some how define item type as dimmer somewhere or does it recognise it?

Thanks!

Is there a way to change text size and alignment?

Very nice widget. I am searching the way to remove the whtie lines between the items. I have no idea which item color to adjust to get this fixed. I changed al the white reference to magneta in the styling to no avail. Is there a way to remove them all together?

nvm. It was defined in the default stylesheet. I copied some code to a new custom style sheet and the borders are gone.

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
padding: 8px;
line-height: 1.42857;
vertical-align: top;
border-top: 1px solid
#ddd;
}

Hi!
You can create your own tailored widget just by copying the code.
Michael

Hi,

this is a great widget for my first openhab Tests and Displaying values.
But unfortunally the order is not correct (see attached Screenshot)

In Widget1 (Arbeitszimmer) the order is like in the item file
In Widget2 (Serverraum) the order is exactly reversed to the item file.

A reboot didn’t helped. Have someone an idea?

Question2: Is there a way to give individual Units (for example line2 _W and line3 _kWh)?

Protheus

I had the ordering problem too.
Changing this line:

<tr ng-repeat="item in itemsInGroup(config.item_groupid)">

to this line:

<tr ng-repeat="item in itemsInGroup(config.item_groupid) | orderBy:'name'">

fixed it for me

2 Likes

Ist es möglich das mir irgend jemand sagt wie ich eine Gruppe anlegen kann. ich bekomme es einfach nicht hin. Gibt es irgendwo eine Anleitung?

Danke für eine Antwort.

First of all, thank you very much for a great widget @martmiwp. I found it very useful in my OpenHAB installation to control numerous items in a small space.

I also needed some tweaks so that the widget is more usable. I’ve released the tweaks in a GitHub project that willl get versions of other widgets I’ve modified.

The project can be found: https://github.com/jannekalliola/openhab-widgets

Hello Michael,

maybe you can help me finding the right values to adjust in code to change this:
grafik
You can see the digits after the “.” is cut off and the units “W” are also cut.

Thanks

is there a way to custom change the sort order?I changed the order that i want in my items files but its not changing anything,i also restarted my system but its the same.I tried the

<tr ng-repeat="item in itemsInGroup(config.item_groupid) | orderBy:'name'">

it works but i dont want alphabetical order.

1 Like