I’m sure it has to use the template widget…but how could I make a selection widget? (Press the button, see a menu of choices, make the choice, send the command w/ the choice)
Any pointers, starting points or code I can look at?
Thanks!
There is an example in post #12 of the “Template Widget” thread in this section of the forum.
If the sitemap support pull request ends up merged, it’ll probably include a standard selection widget for compatibility with the sitemaps anyway. In the meantime, the post mentioned by @MikeD is a good start!
Interested in the selection widget. What ever happened to the sitemap support PR?
I was looking for something similar
I created this widget, which renders the possible option values as buttons
options-switch.widget.json (722 Bytes)
so the different buttons com from the OH item definition and don’t need to be maintained manually
example
4 Likes
@marcel_verpaalen this is great! Looking forward to test it.
Would you like to create a separate thread with “Custom Widget - Selection” and #widget tag so it’s easier to find for others?
Also linked your solution in this issue
Cheers
@marcel_verpaalen While you’re at it, could you also include an example of how to define the item in order to make this work? Thanks!
@mhilbush
It is not something you do as user, rather it is set by the developer of the binding.
I’m not sure if it is possible to define this in the item definition itself. (I have not seen that before)
In the binding you define it as below as part of the definitions in ESH-INF
<channel-type id="control">
<item-type>String</item-type>
<label>Control Vacuum</label>
<state>
<options>
<option value="vacuum">Vacuum</option>
<option value="spot">Spot Clean</option>
<option value="pause">Pause</option>
<option value="dock">Dock</option>
</options>
</state>
</channel-type>Ah, I see now. That’s why I was confused. 
In my post above, I was looking for something functionally equivalent to the Selection widget in the sitemap, but that’s not what this widget does.
What I made would be the equivalent of a Switch with with multiple values in the sitemap.
With the difference that the options would come from the channel/item definition.
Same ‘trick’ would be possible as dropdown I think (similar to sitemap selection).
The possible selections come from the values seen as options in the rest interface.
As I read your question once more, I think this is what would work for you
<div class="btn-group" uib-dropdown dropdown-append-to-body="true"
ng-init="vacoptions = [
{
'value': 'vacuum',
'label': 'Vacuum',
'myicon': 'glyphicon glyphicon-play'
},
{
'value': 'pause',
'label': 'Pause',
'myicon': 'glyphicon glyphicon-pause'
},
{
'value': 'spot',
'label': 'Spot',
'myicon': 'glyphicon glyphicon-record'
},
{
'value': 'dock',
'label': 'Dock',
'myicon': 'glyphicon glyphicon-home'
}
]">
<div class="btn-group btn-group-justified" btn-checkbox-true >
<label class="btn btn-primary" ng-model="itemValue('actionControl')" uib-btn-radio="option.value"
ng-click="sendCmd('actionControl', option.value)" ng-repeat="option in vacoptions">
<span class={{option.myicon}} aria-hidden="true"></span> {{option.label}}</label>
</div>
Which is what I actually use. In this case the simple dropdown would not provide the icon, so I had to provide the possible options with the associated icons (if you just want the buttons, just removing the icon definitions and the span from the example)
1 Like
Yes, I think that will do it. Thanks!
I’m using something like a drop down or list box.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{itemValue('Lautsprecher')}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Küche')">Küche</a></li>
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Wohnzimmer')">Wohnzimmer</a></li>
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Gästezimmer')">Gästezimmer</a></li>
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'GästeBadRadio')">GästeBadRadio </a></li>
</div>Hi all,
i look for a Widget to select only one value.
But the two Widget which presented here selected no values.
How can i change the selection Widget, that i see which button i have press? only one Button can press at the same Time.
But what i need more is a drop down Widget Like a combobox.
A group of items which incan switch about this Widget and i see the selected value in the Widget.
Its almost the dropdown Widget that was presented here.
can someone help me?
Hi!
I am trying to create a dropdown (or multiple buttons) for my spotify playlists and devices. I use the official spotify connect binding and the Sting Items respond with the value (ID of Spotify Device or Playlist) and Label.
I struggle to embed the Item to show me the options available and then select the device or playlist i want.
does someone have a solution for this?
thank you!
I’m using the following code in order to show a hardcoded selection for the item “Lautsprecher” which is prosecuted in a rule to select an audiosink.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{itemValue('Lautsprecher')}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Küche')">Küche</a></li>
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Wohnzimmer')">Wohnzimmer</a></li>
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Gästezimmer')">Gästezimmer</a></li>
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Büro')">Büro</a></li>
<li role="menuitem"><a ng-click="sendCmd('Lautsprecher', 'Echo')">Echo</a></li>
</div>
[Edit] Ups, I posted the same some posts above☺. Such happens when posting from a phone.
1 Like
Not a problem 
I am using the same atm but i am sure there is a more elegant option because i have a sting item that already contains value / label pairs …
So i don’t need to update the device list when i buy a new echo or phone for example.
I’ll search the internet and post my solution here if i find one
Jonas,
Did you ever find a solution? Have been trying to do the same in HabPanel angularjs to get a dropdown of devices. really annoying as sitemap does it, and paperui control does it, but so far a way of dong it has eluded me!!
Hi!
i did hard code it …
Here’s the code snippet and how it looks.
sure the color could be adjusted but i am fine with it for now.
<div class="widget">
<div class="icon off"><svg viewBox="0 -15 48 63"><use xlink:href="/static/matrix-theme/squidink.svg#box"></use></svg></div>
<div class="name">Gerät<div class="value">
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{itemValue('Haus_Spotify_Akt_Geraet')}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Wohnküche')">Wohnküche</a></li>
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Wohnung')">Wohnung</a></li>
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Küche')">Küche </a></li>
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Wohnzimmer')">Wohnzimmer</a></li>
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Bad')">Bad</a></li>
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Schlafzimmer')">Schlafzimmer</a></li>
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Kinderzimmer')">Kinderzimmer </a></li>
<li role="menuitem"><a ng-click="sendCmd('Haus_Spotify_Akt_Geraet', 'Keller')">Keller </a></li>
</div>
</div>
</div>
</div>
1 Like