Building Pages in the OH3 UI: documentation draft (2/3)

RGroll · September 19, 2020, 9:00am

Perfect! I´ll do that.
For a non-technical person its sometimes hard to find the right place for your concern.

ysc:

Thinking about that a bit more, having an ability to set variables and then access them in expressions looks doable, and might just work for this use case. Something like:
- component:oh-input
  config:
    type: datetime
    variable: alarmTime # sets widget-local variable "alarmTime" on change
- component: oh-button
  config:
    action: command
    actionItem: AlarmTime
    actionCommand: =vars.alarmTime # "vars" contains a key-value map of variables
The existing widgets like sliders, steppers and knob could also be extended to set a variable instead of sending commands to an item directly - so you could confirm the new state with a separate button and probably other things too

If this would be an optional addition to each widget component, this would be a blast, I think - you can count on me as a beta tester!

I´ll do so! Have to do some beauty work on the YAMLs and making screenshots later this day, so I can post them here tonight, I think.

Sorry, but didnt find any time atm due to sick kid and wife - and my personal demand prohibits me to just clash in some pictures here, without offering any source implementing and develop the seen things for yourself.

So I just cobbled together at least one widget, that is (with a little effort) reussable for different cases.

It looks like this and supports the most oh-list-components for the bottom row (slider, button, stepper, toggle and more or less icons). It´s working mostly correct on all devices I tested it with (web, ios, android)
2020-09-22 00-02-09
brightness_variants

Further more I already roughly cleaned up the color-changing widget of this ‘theme’, which looks something like:
color_example

All of the color and icon ideas came from a dribble UI concept I found via google from Amogh Srivastava (thx! https://dribbble.com/shots/11450842-Smart-Home-UI-Concept#shot-description)

You can find the first itteration of the brightness example from above on a github repo - rebuild it, extend it, use it, do whatever you like: GitHub - rgrollfitz/oh3-widgets

Disclaimer: I only have basic experience in working with css and none with the infinite nested yaml-structure. So please keep this in mind while watching the repo.

Having some more conecept ideas lying around here and will finish and post them in this forum, as soon as I find time.

At last, I want to attach some notes (mostly questions ) I took during the process of creating these widgets:

Would be nice to have a way to react on the different breakpoints via YAML (similar to media queries)
oh-link and oh-image doesn´t support setting actions (it seems, that just oh-button & oh-list-item offers this functionality?!)
No access to the different css sub classes like :hover (annoying e.g. in case of misusing oh-button as a clickable overlay)
No standalone oh-icon class available - would be nice to have one
Not possible to use math functions or exeptions in actionCommands
The oh-slider item reports an error in the widget-config, if you select a 0 as min-value (it works flawelessly if you set it via yaml)
Nice to have: Interacting with svg parameters like we could do in habpanel, to make things move, spin or glow.
Expressions doesnt work in styles
Boolean toogle in settings isnt working for things like ‘visible:true/false’ (tested on oh-stepper-item) - maybe there are some extra “”, which shouldnt be there?
- Workaround: ‘class: =props.yourProp ? props.yourProp : “display-none”’
Is it possible to use transformation in rules?
How to change the site-content depending on a selection made in an element like e.g. a header-slider for selecting the rooms?