Migrating to OH3 I wanted to create a “dashboard” for my tablet. For this use case I found the current (otherwise great!) layouting to be somewhat limiting (e.g. it’s not possible to nest rows and columns), so I started experimenting.
The result of this “proof of concept” is a HABPanel like grid-layouting as shown below. It allows to add cards and to resize and drag them to desired positions. Despite that it works just like the “normal” layouting.
Technical details:
The module used for this is vue-grid-layout and for fullscreen vue-fullscreen. Each card is wrapped in a “oh-dashboard-item”, which stores the position and size in its config.
Since cards are designed to create their own height most library components require a little css tweaking (like done for oh-image-card in this example).
I’m posting this here in the forums since I have gotten further than expected, wanted to share and discuss this idea and like to know what especially the main developers (like @ysc) think.
Very nice work @hubsif - I like the drag, drop & resize in the grid layout. It might be a bit more intuitive for new users than working with row- and column-settings.
How all of this would behave on different screen-sizes, like mobile devices? The ‘Column Options’ of the current flexbox-layout allows a lot of flexibility regarding the styling for multiple devices / screen sizes and isn’t too hard to understand.
I could imagine it wouldn’t be that easy with a nested structure like this? Creating device- / screen size-specific versions of layouts (like in HabPanel) might be very time consuming?!
Well, my experiment actually aimed at a predefined screen size, to have a one-page fullscreen design for my tablet “panel” at the wall (actually I had a hard time choosing a name for this kind of layout, perhaps “panel” would be better than “dashboard”…). As mentioned above, with the current layouting it seems you cannot put two buttons, one on top of the other, next to a larger widget. And with a masonry I think you’re limited to all cards having the same width.
And that vue-grid-library is actually quite mighty. With my current design the whole screen i.e. all items would be scaled to still fit (to a certain degree of course). Have a look a the basic vue-grid-layout example and resize the width of the browser window to see what I mean.
Additionally, that library actually supports responsive modes. You can even have different predefined “arrangements” for different screen sizes. To get a feeling you can check out the responsive example. Of course that would require the default setting of “vertical compact” (makes all cards fill from the top), as with the “place freely” variant used in my sample it’s probably too unpredictable. That setting could be chosen by the user.
Moreover, I don’t see it as a competitor to the current layouting, but more as an addon for those that would like to have a flexible fullscreen layout (like me ). I would think of the current layout being the (much more powerful) replacement for basicui while this aims to be more of a HABpanel substitute - with the beauty to be able to use the same design and custom widgets.
If the openHAB maintainers are interested I could continue working on this, which I’d like to discuss here (hoping this is the right place).
Yepp - flexbox isn’t that flexible (pun not intended) and does not allow 2-dimensional arrangements like the grid-layout does. But flexbox might be easier to handle when it comes to arrange things automatically or with few css on the other hand.
But this shouldn’t be a big deal as you can combine these two methods to get the best from both worlds.
Great example of what the library is capable of - TY!
I read some discussions in the past, that the availability of multiple UIs with a wide variety of differing functions is one of the problems that the current OH-ecosystem is suffering from. To my knowledge, one of the targets of the MainUI was to clean up this landscape.
So I think it would be a good idea to not introducing another UI here - But maybe theres a way to introduce this as a kind of expert-setting or something?!
I would really appreciate seeing this in the MainUI, but there might be some downsides here, which I’m not aware of. I’m curious what Yannick think about this concept.
I think there are two things to that:
First, it actually isn’t really a new UI, it’s just another way of layouting. It uses the same components and (custom) widgets. I think the multiple UIs issue with OH2 was that those were all completely independent of each other.
This panel layout could theoretically also be added as third option to the current layout page, in addition to „blocks“ and „masonry“. (Though IMHO it doesn’t really fit there, as you’d never mix it. But then, who‘d actually mix blocks and masonry… Thinking about this I think I‘d like it having those three as a choice of general „layout type“ setting of a layout page …)
Second, HABpanel was kept as part of OH3. So, it seems they still see the need of having something like it (besides not wanting to waste its many widgets, which are not available yet in mainui).
Nice work @hubsif ! You might want to open a ticket up on GitHub - openhab/openhab-webui: Web UIs of openHAB and start a conversation there with @ysc to see if this could be a good addition. In my own personal experience, i had intended to stick with Habpanel for my tablets (i have quite a few) , but after using the new UI, my Habpanel layouts started to look a little, well…dated, so i created a tablet friendly interface instead in the new 3UI, but i could see how this could have made that easier, especially if there is the ability to make it responsive so it possibly worked on many devices.
This panel layout could theoretically also be added as third option to the current layout page, in addition to „blocks“ and „masonry“
I was thinking the same thing, it would seem to fit in nicely there.
@hmerk Link seems ok, but I’ve also had issues when the forum wouldn’t display it correctly. Hard reloading my browser helped in my case, could you please try that?
Theres definitely a need for a deeply customizable UI, yes! HabPanel has a big user-base and a wide variety of already existing widgets, so it would be somewhat destructive to remove it now - but in the long term, I think it would be beneficial if all the effort of contributors would focus on one UI (which should be the MainUI from my point of view)
I use habpanel for the SVG integration, but have concerns about its longevity for exactly these reasons. A lot of effort is going to go into the new widgets, and it would be great to be able to utilize those with habpanels flexibility.
Great Idea @hubsif ! This is exactly what I’ve been looking for.
I started out migrating to OH3 a few weeks ago and although I think the new UI looks quite nice, I ended up trying to create a page of my own. I tried modifying gaps and have columns and rows trying to match some sort of flexible grid where I wanted a 4 + 1 + 4 look, but I’m still not happy with the result.
Having a dashboard page, or “Grid Layout page” as part of the overall main ui concept would make a big difference. Drag’n drop and full-view are really nice features.
If this for any reason doesn’t make it’s way into the official branch will you consider releasing it to the community?
Very interesting @hubsif - I do think I considered this library very early, but don’t remember what I thought about it, perhaps it was its size, or a dependency… but time for another look I guess!
For this UI the layout being responsive is also very important to me, because the intent was to use it on mobile devices and keep HABPanel for fixed-sized tablets (HABPanel is notoriously not responsive).
We want to avoid situations where people will naturally prefer a certain type of layout because it’s easier, with the drag and drop and everything, and then miss out on the responsivess capabilities of the other layouts. But if we can achieve that here then why not.
I’m all for adding it to the existing layout pages instead of creating another page type that would end up being very similar. In fact if you look closely at the oh-masonry I couldn’t decide between 2 implementations and finally kept them both and made it a choice. They both have their strengths and weaknesses. We could consider adding a third option there (so it will be another type of “masonry”, and we could have a menu to easily choose the type like when you do “add widget”).
I don’t know, I think it’s a viable scenario to have a controlled layout made of blocks/rows/cols or cells at the top of the page, or cells, then for the “rest” below, a freer layout.
Anyways, feel free to open a draft/WIP PR any time, so we could have a look at the implementation and give pointers - even if it’s a little messy, it doesn’t matter!
Well, with this discussion I also wanted to get more information on this:
From what I understood, HABPanel is mostly still there because there’s no substitute for it (yet) and you (maintainers) didn’t want to drop the “fixed size panel feature”. But the long term goal always was to somewhen have it replaced by mainUI, am I mistaken? (what’s following assumes a lot I’m not )
Also, I agree with @jace, that a lot of efforts will go in the (cool!) new widgets. And I think it would be great to be able to use all these upcoming new widgets in a tablet layout as well. And like @digitaldan mentioned, for some people HABPanel might look a little “stale” and with all your efforts going into mainUI I don’t expect it to get a major upgrade anymore.
All things considered, in my opinion HABPanel is most probably not targetting a prosperous future…
I’m saying all this because of that :
Actually, it was (and still is) my explicit intention to create a fixed-size layout, since I wanted to have exactly what’s mentioned above: A HABPanel like “screen” with the new look and custom widgets. Unfortunately, I wasn’t able to achieve this with blocks (rows/cols) or masonry (actually at first I tried to extend the rows/cols, but that somehow wasn’t satisfactory either).
And believe it or not, my meanwhile “fiddling” was actually about getting the more of the responsiveness out of that library!
It may not sound like, but I like the current layouting and it’s flexibility and responsiveness a lot! I’m just one of those that don’t need responsiveness for their tablet(s) on the wall. And I’m one of those who are willing to create extra layouts for that .
I could explain more of what I did and why, but it might be better situated in that PR, which I’m going to create as soon as there’s time. Thank you for considering, and offering your support!
Did you actually share the result somewhere? If not, would you be willing to share a screenshot or so?
I’m curious how it could look like. Generally, I’m curious how a real-life mainUI set up could look like. Besides the openHAB demo, I’ve actually not seen any “pages” yet. Perhaps I need to dig a little deeper in the forums…
Fantastic, love your work as this is one of the things I missed/wished the main UI would do as I find it quicker to visually move and resize widgets.
The other things I miss and wish were added (unless they exist and I have not noticed them yet) is a way to change the background picture and also a master CSS file like HABpanel had. The idea is the same as website design. You create the panel you like and then as Christmas arrives you can ‘skin’ the look for Christmas without having to recode, just select two files and the new look is there. Halloween, Easter, family members Birthday, whatever the occasion the panel has the same functionality in the same places, it is just the look/skin that changes.
Looking forward to the changes that come over the next year.
). I would think of the current layout being the (much more powerful) replacement for basicui while this aims to be more of a HABpanel substitute - with the beauty to be able to use the same design and custom widgets.
…)
.
