This widget allows you to make a array of buttons based on the options defined in a channel/item. This is somewhat equivalent of a Switch with with multiple values in the sitemap.
options-switch.widget.json (722 Bytes)
9 Likes
If you want icons, or if you want the buttons not coming from the channel you could change the code in the widget to something like this. The buttons & icons are than defined in the array of the ng-init part
<div class="btn-group btn-group-justified" btn-checkbox-true
ng-init="options = [{'value': 'play','label': 'Playing', 'icon': 'glyphicon glyphicon-play'},{'value': 'pause','label': 'Pause', 'icon': 'glyphicon glyphicon-pause'}]">
<label class="btn btn-primary" ng-model="itemValue(config.string_item)" uib-btn-radio="option.value"
ng-click="sendCmd(config.string_item, option.value)" ng-repeat="option in options">
<span class={{option.icon}} aria-hidden="true"></span>{{option.label}}</label>
</div>
4 Likes
Sorry, I don’t quite understand what type of item I can use for populating this selection widget?
Do I need the items in a group and that is iterated?
A “regular” basic ui selection, the selection is define in a sitemap rather than items, with the result going to an item.
Yes, for sitemap based UI’s you can provide the options via the sitemap.
A binding developer may also choose to provide the options via the thing channel definition.
This widget works with those. If the binding developer does not make those avaialble, this won’t work.
The only alternative you than have is to make a custom version of the widget and provide the options.
ahh right. I see with some modification I can use a group with
ng-repeat="option in itemsGroup(config.string_item)">
and I do notice a choices setting type where the items are separated by commas…but nothing tells me what the keyword is in the widget to iterate the array.
@marcel_verpaalen According to your example image, you applied your widget to a robot vacumer (Neato?). Does the Neato binding provide (state or command) options I can apply directly in the widget? I can’t figure this out. I applied the _SendCommand item to the widget, but it doesn’'t show options in Habpanel (nor does it in Paper UI Control page though).
Can you share an exemple how to do this?
It is an example of the xiaomi robot vacuum (mi io binding)
If depends on if the binding developer predefines the possibile options in the channel configuration.
If not, you need to define the option values yourself
Nice widget and thanks for sharing.
For myself I’ve far more ‘items’ than ‘things’ with bindings, just the way it is with the devices and set up I have. Looks like others are posting with the same experience so just sharing my modification that is a not ‘thing’ bound. I can see the ng-repeat with a group can work but I want to mainly use this for multi state option changes and don’t want to create another group just for the widget display.
It’s a slight variation on your ng-init suggestion above but I’ve added a config item instead.
Pros: its not got data in the code of the widget, means you can multi deploy with per instance data.
Cons: no icons and display text has to match command text.
I’ll continue playing with it and see if I can address the icons and display text but only just starting to dabble in custom widgets and the whole angular stuff so still finding my way around creating the array(s) data side and extracting them code side.
Sorry only registered recently so can’t upload attachment but as it’s quite small have posted json export inline.
{
"template": "<div class=\"btn-group btn-group-justified\" btn-checkbox-true \n ng-init=\"options = config.my_choices.split(',')\">\n \n <label class=\"btn btn-primary\" ng-model=\"itemValue(config.string_item)\" uib-btn-radio=\"option\"\nng-click=\"sendCmd(config.string_item, option)\" ng-repeat=\"option in options\">\n\t{{option}}</label>\n</div>\n",
"author": "Marcel Verpaalen",
"name": "options-switch-list",
"description": "Switch between multiple configured options",
"settings": [
{
"type": "item",
"id": "string_item",
"label": "item with options",
"description": "item with options, each option will be one button"
},
{
"type": "string",
"id": "my_choices",
"label": "List of buttons",
"default": "Alarm,Music,House",
"description": "Enter a coma separated list of items to display as buttons, will also be the value sent as the command to the item"
}
]
}
Ray, how would this change if one would like a title above the buttons (the Name field) and if one would like to have a value and label option like in the sitemap, so your displayed label is not necessarily the value
I have adapted this widget to accomplish just that, but are currently away from home, so cannot post it now. Can try to do it this evening!
Sorry @rswennen missed your post but looks like @pacive has an answer. I haven’t tested his solution but on a quick look it seems to add another array style config item to represent the labels so no reason it wouldn’t work.
In fairness you could do the same for icons and any other field you care to add as an array.
Specifically if you want a single ‘Name field’ above you can add another config item type string and then in the code add it where you want it with an appropriate {{config.namefield}}
yes tried it and @pacive’s solution works great. This is probably a stupid question but is there any kind of WISYWIG type of tool or graphical tool that one could use to build these widgets, like you have html editors.
I’m not that familiar with css and think a graphical editor would help a lot (probably not just for me, see some other people in the forum struggling with that as well).
Not sure as haven’t looked around but it is only html with a bit of angular embedded so likely most tools will work to a degree but unlikely integrated so may mean you have to copy and paste between the editor and habpanel widget.
Another way is to use something like firefox dev and it’s live editor to test little changes that you can then apply to the real code.
Hi Guys,
this would be useful for my Xiaomi Vacuum. Unfortunately i don’t have understand how to setup the file.
In the .items I have the example configuration of the Xiaomi Vacuum of @marcel_verpaalen. Maybe anyone can help me by editing according to this ?
Thanks a lot
how can I change the design of the buttons?
I love this Widget for my Neato bots. Now I tried it for Gardena mower without success.
Gardena binding has a lot of Switch items which are sending commands/todos to the mower. All switch items are in one group. This group I added to the widget but no buttons are displayed. Any idea how to solve it?
Thanks
Is there anyway to add icons to each button or instead of each button label? Thanks for your work
Not without modifying the widget code quite a bit I’m afraid. It’s been a while since I made this (and even then it was just a modification of someone else’s work), so not sure how one would go about it.