Hi guys,
I found some time and analyzed the concept and the widgets more deeply.
I’m not sure yet if the approach is the best, because in this concept specific widgets on pages are not possible. For example: I want Cards to Climate, Shutter and Lights but additionally another custom widget under the chapter Rooms, Livingroom. This is not possible with the current concept. Another way would be to place the sematic-cards (rollershutter, lights etc. from this concept) in Room-pages, so that there is still the possibility to add custom widgets.
But as is well known, several paths lead to the goal
Challenges
It would also be a big step forward if semantics were accessible via widgets and expressions.
For example: items[“Testitem”].name, items[“Testitem”].sematics.config.isPartof and so on.
Now the standard only includes item.state and item.displayState.
Maybe this is something for the future @ysc
Through this, many oh-repeaters can be replaced and more functionalities can be used.
Anyway, I accepted the challenge and tried to implement the design concept further.
I also made various adjustments for a responsive layout. The current widgets were not optimally programmed for responsive layouts.
All my adjustments and suggestions are not to be seen as criticism. Everyone has different ideas and there are always several solutions
But now to the intermediate state.
In general:
I have removed the variables and control the chapters and things via two items. This way it is also possible to control the view via rules. I don’t know which is better :-D. But this is the biggest change in the concept, which I did only for myself. The owners and designers of the concept are @hmerk and @Nic0205 (as I see it). I don’t want to change the concept fundamentally at this point. Above all, enough time has gone into it.
For this reason I can’t publish any codes at the moment, because they are not backwards compatible with the concept favored here. (objVar)
When I find time I will implement the variables again and share the yamls if interested.
At this moment my comments as a design suggestion.
Major changes:
mainWidget
- Removal of the oh-repeater to change floors and rooms. Instead f7-swiper components. This reduces the required computing resources (I think). The filter and map functions take a long time because of the nested components. Adjustments of the swiper possible depending on the screen size (more responsive).
- Various style adjustments to use f7-variables. If possible I advise not to use hardcoded colors.
- Instead of css-flex I used a css grid. This way the top-bar and bottom-bar are always fixed and the flex-content (sematic cards) is scrollable. It also works with flex attributes
- The bottom-bar has the style of @Dimitris design.
widgte_FloorsAndRooms
- Integration of responsive cols and rows
- all components got a f7-col. So the design is responsive.
- The repeaters are now nested in containers. So the repeater runs at intial site load and the container is always generated. The benefit is, that the repeater never runs again on change the room selection.
widget:Rollershutter
- the timepicker is still missing. i have not implemented it yet.
- The chart looks a little different because items for aggreation series cannot be used as props. There is a bug here. As far as I know this has been fixed (ISSUE, I tested the last snapshot but got some errors in the log so I went back to stable).
As soon as the bug is fixed, the design can be made better via aggreated-series and a bar-chart. - the expand area was solved via css classes
Here is a little demonstration.
All the best,
Nico