I’m sorry if this has already been discussed before, I’ve tried to search and read what I thought might be relevant, but I haven’t really found anything.
My problem is that I can’t find a way to get (custom) widgets to scale nicely. It’s not so much a problem with very simple widgets like most of the standard widgets, because they have quite a lot of “free space” to eat into before you get into real trouble. But when trying to make more “intricate” widgets, for example by using the echart gauges (which can produce very nice results), it quickly turns out to bite me.
I quite liked HABPanel back in OH2, but the failure to scale meant that I didn’t really bother to use it much. So, I was hoping that the new Main UI would handle it better. And while it does handle it better, it’s still limited.
The problem boils down to, as far as I can understand, that none of the units that I can use to specify distances, size etc are relative to the widget size. I know that px has been given its own “relativity logic” in HTML/CSS, but that has mostly made them useless in my opinion (because they’re unpredictable). rem and em scale to the device, but not to the viewport and certainly not to the widget. ‘vw’. etc doesn’t seem to be supported, but they wouldn’t work either. ‘%’ tends to be the percentage of something, just never what you want it to be (usually the outermost container I think).
In many ways this isn’t a problem with Main UI, it is a problem with HTML/CSS. I really wish they would come up with some way to reference a percentage of a specified parent, like 2:47% to use 47% of the second parent or something like that. But, this probably won’t happen, at least not anytime soon, so it’s not relevant here. Usually you have to solve this using JavaScript and calculate and overwrite selected values according to the circumstances. It’s somewhat fragile, ugly, slow and far from ideal, but it’s what we got. But, that’s not possible when writing YAML widgets for Main UI. So, this is where Main UI comes into the picture really.
My question is: Is there any way at all to reference the widget size that I’ve missed. If not, maybe that would be a good idea? I get that it might be somewhat complicated, but in a UI like this, I’d consider it really essential. I’d hate to have to make “one version” of each widget for each intended use, layout wise. I mean, gauges for example can be shown relatively small and still be readable, and they could “pop-up” into a larger version when pressed. As it is today, that would have to be two different widgets, or everything will be “out of scale” when it comes to line widths, fonts sizes, distances etc. The layout of each page where you want to place them will also vary, so it should be expected that they won’t always have the same size. The whole “dynamic layout” and “responsive design” kind of guarantees that widgets will be displayed in different sizes, and that just doesn’t work very well when all the internal parts of the widget is fixed-sized or “unpredictable-sized”.
