Good to know and thanks for the link. I´ll try to learn what´s possible and what`s not.
Another question regarding the option to set property values on some actions called ‘actionModalConfig’ in YAML - How to set them? (there are no options given in the widget-configuration)
And what exactly are these ‘property values’? Are these the ones mentioned in the framework7 documentation? (e.g. https://framework7.io/vue/popup.html#popup-properties) or is it a way to set the declared properties for the widget itself?
Both of these thoughts doesn´t work in my tests.
Is there any writeup on this feature? Best case (from my point-of-view) would be that I can also use this to set a popup title and manipulate css-classes of the popup (but that is wishful thinking)
I think it will be part of the 3rd page in this series, which I still have to write.
If the root component of your widget defines a “label” config property it will be the title of the popup.
For example in the keypad example adding label: Please Input Pin to the root f7-block.
Altering CSS cannot be done now, I’m aware you requested it ([MainUI] Customize css of pages/popups · Issue #408 · openhab/openhab-webui · GitHub)
And tested this already by accident, but obviously it only works if the root component is an f7-block.
So I´ll try to wait patiently for your work on the mentioned request.
On the topic of this request - I managed it to create a widget with a custom background already (at least for the popup-case)
I think it would be best to open a new topic in the UI category (UIs - openHAB Community, maybe there could be a dedicated one) to discuss new widgets like this. I can do the same for the keypad.
I’ll just clean it up a bit and add some parameters and will post it in the mentioned category later tonight. Maybe until then I also got some tweaks done, so that you can define multiple layers of images in the top-section so it can react to different type of weathers and the sunset etc.
One last questions regarding the group-parameters @ysc - Is there a link where I can find all the parameter types to define? and maybe something like a divider / headline group-item as its used for the action param?
@RGroll the format of the props in a widget is the same as the config description parameters (& groups) familiar to binding developers, only in YAML. They are described here:
For instance to have separate sections for parameters you’ll need to define a group and then set groupName: <name> in your parameters.
Is there an expression I can use to make the badge color depend on the state of the Item? I experimented with trying a trinary operator and the like but the editor marks it as wrong no matter what I try (probably means the answer is can’t do it). Maybe I have to use visibility?
Ultimately what I’m shooting for is a three layered accordion list that rolls up the status into one line. If something goes offline I can open up the list and see all my machines and identify which machine has something offline. Clicking on that shows the list of services and I want to see which one is offline.
So, for example, if InfluxDB goes offline All Services will show as OFFLINE. Opening that and Argus will show as OFFLINE. Opening that in turn will show that InfluxDB is OFFLINE and everything else is ONLINE.
Maybe all I can use is the after and not the badge? But being able to show the state with a colored badge would be really useful.
As I play with this stuff it’s clear that building pages is going to be as complicated as building rules to do anything more than just the basics. It’s going to need lots of docs I fear.
Something like this should definitely work I think: badgeColor: =items.vArgus_Status.state === 'ON' ? 'green' : 'red'
As I play with this stuff it’s clear that building pages is going to be as complicated as building rules to do anything more than just the basics. It’s going to need lots of docs I fear.
yes
But @RGroll definitely got the gist of it, so maybe people can learn by examples after a number of those are available.
Yes, i tried it for 1 month, and it’s complicated, simple things are very hard. Maybe just html with access to underline vue.js will have been simpler. Maybe we can add that to the edit mode : yaml mode and html mode with access to f7 component.
(I hate yaml )
So, for example, if InfluxDB goes offline All Services will show as OFFLINE. Opening that and Argus will show as OFFLINE. Opening that in turn will show that InfluxDB is OFFLINE and everything else is ONLINE.
For that you might be better served by a Group item with an aggregation function, and simply displaying the state of that Group in the badge.
They are Group Items that I’m trying to display. That’s actually how I do it in my old sitemap. And I can see that all these Groups and Switch Items have a state when I look at the Items. But the icon isn’t changing color to match the state and the state is always showing as - on the page.
When I tried to use the ternary operator the editor marked it as an error line. When I saved it it deleted everything from that error line to the end of the YAML. I need to stop for today. More experiments tomorrow!
It seems that you have to use apostrophe to enlose your statement so its get recognized as a valid ternary-operation. The round brackets are just a personal thing, which makes clear, what is the ‘if’ part. (especially usefull in long concatenated statements)
Kind of off topic from everyone else, I tried re-creating an abbreviated version of my OH2.5 sitemap (only astro and openweathermap bindings and items) by using both the design and code page, but after a few hours or after a reboot/restart, the system does not see the pages. I get the message that no sitemap pages have been defined, but they are still listed and they show up without any errors, at least in the code page.
OK, I got the badge stuff working. I can’t seem to get at the state of the actual Items though.
But I’m trying to get your collapsible list to work above and it does indeed work if the third level only has one Item (InfluxDB in that example). But if there is more than one, only the first one is shown.
I’ve tried:
using oh-list-items instead of oh-label-items
making the each second layer component be an oh-list-card too
playing with using default and accordion under slots.
Am I doing something stupid? Are two levels as deep as one can go? Obviously I have other approaches to display this information if it simply can’t be done, but I think a collapsible list like this is an elegant solution if I can get it to work.
You don’t really need oh-list-card inside an accordion slot, a oh-list is enough (with accordionList: true if there are accordion items in it) but it is necessary - you can place anything in the accordion slot - i.e. and collapsible area - so you need to organize it like this:
Here’s a working version (without the badge properties for clarity). Note the class: - margin-left to give increasing margins to the lists to make them look like a tree view:
Fantastic! That works! I’m thinking we may need to come up with a pretty good reference and maybe some tutorials for some of the more common widgets users might want to make. I think I’m starting to understand this part of it at least. Thanks!
)
I need to stop for today. More experiments tomorrow!