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

[Tobi77 (Tobias)]

@RGroll Thanks, this is close to what I thought about. But for thermostat control, I would be very happy to

• see and change the desired temperature
• see vaule and trend of the current temperature.

If I get it right, I can only adress one value in the widget for control and trend, right? Can this be split in the widget without causing too much work for you?

Sorry for putting so much work for you, but up to now, these proof-of-concepts are all that beginners like me have. A library (for dimmer, for thermostat) would be of really great help.

[e36Alex (Alexander)]

This is how i show the room temperatures and the humidity:
(Background is getting red, when humidity rises avove 60%)

component: oh-label-cell
config:
  header: Wohnzimmer
  item: HM_WZ_Heizung_ActTemp
  trendItem: HM_WZ_Heizung_ActTemp
  action: group
  actionGroupPopupItem: WZ_Klima
  icon: f7:thermometer
  subtitle: =items.HM_WZ_Heizung_ActProfile.displayState
  footer: = "Luftfeuchtigkeit " + items.HM_WZ_Heizung_Humidity.displayState
  expandable: false
  style:
    background: '=(items.HM_WZ_Heizung_Humidity.state > 60) ? "red" : ""'

I created a group item for the heating in every room, so profiles or set temperature can be changed by clicking on the cell:

[rlkoshak (Rich Koshak)]

@RGroll

Now to the 3rd row which should show the title of the currently played app.

I’ve been trying to work through you version of the Chromecast widget and make sure I totally understand what you’ve done and why. I think it makes sense so far. But I’m running into a problem.

I the 3rd row you defined a Label. But as far as I can tell, that doesn’t work with an Item. In this case, the app is a String held in a String Item. So I looked around and there is no oh-label. And when I tried to use =props.prefix+“_App” for the text in the Label nothing shows up. I also tried an oh-label-card (out of desperation) but it doesn’t show anything either (because it’s a card?).

I appreciate any pointers. Everything else about the widget makes sense to me so far. I’m not sure how I would have figured out to do it that way on my own but at least now I’m starting to get it and may be able to start getting that part of the tutorial filled out more.

My current attempt is as follows.

uid: chromecast_widget
tags: []
props:
  parameters:
    - description: How all the Items associated with this chromecast starts
      label: Item prefix
      name: prefix
      required: false
      type: TEXT
    - description: Title for the widget
      label: Static Title
      nameJS(secs2hours.js):%s: title
      required: false
  JS(secs2hours.js):%s    type: TEXT
  parameterGroups: []
timestamp: Dec 3, 2020, 8:57:58 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: oh-image
            config:
              item: =props.prefix+"_Image"
              style:
                width: 100%
                height: auto
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  text: =items[props.prefix+"__MediaArtist"].state
                  style:
                    font-size: 24px
          - component: f7-col
            slots:
              default:
                - component: Label
                  text: =items[props.prefix+"_MediaTitle"].state
                  style:
                    font-size: 24px
    - component: f7-row
      config:
        class:
          - padding-top
          - padding-bottom
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-player-controls
                  config:
                    item: =props.prefix+"_MediaControl"
          - component: f7-col
            slots:
              default:
                - component: oh-slider
                  config:
                    item: =props.prefix+"_Volume"
                    min: 0
                    max: 100
                    step: 10
                    unit: %
                    label: true
                - component: oh-button
                  config:
                    text: Stop
                    iconF7: stop
                    fill: true
                    color: red
                    action: command
                    actionCommand: ON
                    actionFeedback: Media Stopped
                    actionItem: =props.prefix+"_Stop"
                    class:
                      - margin-top
    - component: f7-row
      config:
        class:
          - padding-top
          - justify-content-center
        style:
          border-top: 1px solid lightgray
          border-bottom: 1px solid lightgray
        slots:
          default:
            - component: Label
              config:
                text: =items[props.prefix+"_App"].state

[RGroll (Rainer)]

Hey @rlkoshak

@rlkoshak

I the 3rd row you defined a Label. But as far as I can tell, that doesn’t work with an Item. In this case, the app is a String held in a String Item. So I looked around and there is no oh-label. And when I tried to use =props.prefix+“_App” for the text in the Label nothing shows up.

The Label component is nothing documented I think (or at least I don’t know where) - I saw it in one of the Yannick’s widgets some time ago I think, so I just began to use it. It doesn’t have the oh- prefix.

@rlkoshak

I also tried an oh-label-card (out of desperation) but it doesn’t show anything either (because it’s a card?).

This should also work.

I tried your code and didn’t found the error at first until I see the very small (but decisive) faux-pas - the slots: is not aligned with the config: of the f7-row component - the YAML structure is kinda evil.

So the last part would look like this:

    - component: f7-row
      config:
        class:
          - padding-top
          - justify-content-center
        style:
          border-top: 1px solid lightgray
          border-bottom: 1px solid lightgray
      slots:
        default:
          - component: Label
            config:
              text: =items[props.prefix+"_App"].state

[rlkoshak (Rich Koshak)]

Yep, I just discovered that right before your reply. Now I’m just struggling with how to center justify the column. You showed how to do the row but that doesn’t appear to flow on down into the f7-cols. And justify-content-center doesn’t seem to do anything as a class under the config for the f7-col. But that’s more for my own knowledge and not something I’m trying to actively do.

The working widget (at least for now) is:

uid: chromecast_widget
tags: []
props:
  parameters:
    - description: How all the Items associated with this chromecast starts
      label: Item prefix
      name: prefix
      required: false
      type: TEXT
    - description: Title for the widget
      label: Static Title
      name: title
      required: false
  parameterGroups: []
timestamp: Jan 12, 2021, 3:25:58 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: oh-image
            config:
              item: =props.prefix+"_Image"
              style:
                width: 100%
                height: auto
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.prefix+"_MediaArtist"].state
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.prefix+"_MediaTitle"].state
    - component: f7-row
      config:
        class:
          - padding-top
          - padding-bottom
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-player-controls
                  config:
                    item: =props.prefix+"_MediaControl"
          - component: f7-col
            slots:
              default:
                - component: oh-slider
                  config:
                    item: =props.prefix+"_Volume"
                    min: 0
                    max: 100
                    step: 10
                    unit: "%"
                    label: true
                - component: oh-button
                  config:
                    text: Stop
                    iconF7: stop
                    fill: true
                    color: red
                    action: command
                    actionCommand: ON
                    actionFeedback: Media Stopped
                    actionItem: =props.prefix+"_Stop"
                    class:
                      - margin-top
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: Label
            config:
              text: =items[props.prefix+"_App"].state

though it would be nice to know how to left, right, and center justify those labels when there is more than one column.

I will probably still play around with the padding but over all I’m satisfied I know enough now to write up how I did this.

[RGroll (Rainer)]

@rlkoshak

how to center justify the column.

class:
  - align-self-center
  - align-self-flex-start
  - align-self-flex-end

@rlkoshak

though it would be nice to know how to left, right, and center justify those labels when there is more than one column.

To align the text, use:

class:
  - text-align-center
  - text-align-left
  - text-align-right

Yannick posted a nice source if you’re interested to dive a bit deeper into the handling of flex-box.

[rlkoshak (Rich Koshak)]

Thanks! For clarity that is put under the config for the Label.

[RGroll (Rainer)]

@ysc

The parameters related to actions are somewhat special because they’re dynamic based on the type of action you select. They are defined in the code here and it’s not currently possible to have these parameters described in a custom widget, but it would be interesting to have a way to do it, I’ll try to find a solution. It will probably involve setting a context to a parameter group

Hey @ysc

are there any news on that? Just asking, to be sure that I don’t miss anything while creating a widget where this feature would be usefull.

And one more questions on the same topic - you’ve introduced a feature some time ago, to set parameters for a selected widget within the action configuration.

Is there a way to use that function in custom widgets?

Thanks!

[ysc (Yannick Schaus)]

@RGroll

are there any news on that? Just asking, to be sure that I don’t miss anything while creating a widget where this feature would be usefull.

Yes you define a parameterGroup with a context: action in your props (this will replace the group props with the standard dynamic action form), and then instead of the action* propertes in widgets, you specify actionPropsParameterGroup instead and it will normally take all the action parameters from that group.

uid: widget_281d436ead
props:
  parameterGroups:
    - name: myaction
      context: action
      label: My Action
  parameters:
    ...
component: oh-link
config:
  actionPropsParameterGroup: myaction

---

@RGroll

Is there a way to use that function in custom widgets?

  actionModalConfig:
    prop1: abc
    item: Item1

or am I misunderstanding something?

[RGroll (Rainer)]

Thanks for your quick answer - this is exactly what I’m looking for! Awesome, will start right away to implement this.

@ysc

or am I misunderstanding something?

To be honest, I haven’t thought about, that this context:action could already include the external component configuration (which makes sense) and thought every action configuration setting has its own context parameter. The soloution like this is even better (and much easier to implement)

So, thank you, again!

[John_Siemon]

After searching a number of posts, I am still unable to determine if it is possible to change the default grid spacing and element size in the overview page, or any other pages such as location and equipment. For example if I want the standard element size to be only half as tall as the default, is this possible to do on a global or eleven element by element basis. Any help here is appreciated.

[RGroll (Rainer)]

Only one more thing here…

Can I access the groupParameter like a normal parameter to hide the link-component if nothing is specified as action? (you seems to do that in all the standard widgets)

The obvious at least won’t work

props.widgetAction

[ysc (Yannick Schaus)]

@John_Siemon

After searching a number of posts, I am still unable to determine if it is possible to change the default grid spacing and element size in the overview page, or any other pages such as location and equipment. For example if I want the standard element size to be only half as tall as the default, is this possible to do on a global or eleven element by element basis

For the Overview page, it’s a layout so you can do a lot with CSS variables. For the other pages, you can only customize the order, grouping, header, but not the layout.

@RGroll

Can I access the groupParameter like a normal parameter

They are regular props with a little bit of logic to deal with prefixes etc. It’s a little complex to explain accurately.
Use something like this temporarily to inspect the props object:

component: f7-card
config:
  content: =JSON.stringify(props)

[RGroll (Rainer)]

@ysc

They are regular props with a little bit of logic to deal with prefixes etc. It’s a little complex to explain accurately.
Use something like this temporarily to inspect the props object:

This is enough explanation for now - got it working! TY

@ysc

  actionModalConfig:
    prop1: abc
    item: Item1

or am I misunderstanding something?

Maybe we both misunderstood something here - I can set the ‘actionModal’ parameters on the widget YAML manually, to open the widget with them, yes.

My naive expectation was, that the available parameters of the widget to open, would be loaded automatically after setting the widget/page - but it looks like this on my side…

This was my last question for today, I swear!

[ysc (Yannick Schaus)]

Oh, that’s probably a regression, good catch.

[MikeTheTux]

Is there a possibility to set color in rgb for an OH-CELL? For F7 cards it is working.

Working:

- component: oh-colorpicker-cell
  config:
    item: FloorLamp_Color
    action: toggle
    actionItem: FloorLamp_Color
    color: blue
    title: Color Picker
    icon: f7:paintbrush

Not working:

- component: oh-colorpicker-cell
  config:
    item: FloorLamp_Color
    action: toggle
    actionItem: FloorLamp_Color
    color: rgb(255, 219, 214)
    title: Color Picker
    icon: f7:paintbrush

Working:

- component: f7-card
  config:
    content: Color Picker
    style:
      border-radius: 20px
      background-color: rgb(255, 219, 214)

How to set a color for OH-CELLS that is not pre-defines as name?

[stefan.hoehn (Stefan Höhn)]

I am trying to use an expression but I can’t get it to work. Here is my code:

component: oh-plan-marker
config:
  name: KellerBewegungsAlarmMarker
  item: MotionSensor1_MotionAlarm
  icon: f7:lightbulb_fill
  iconUseState: true
  coords: 581.1919724802726,1004.9085116169801
  tooltip:=items.MotionSensor1_MotionAlarm.state === 'ON' ? 'An': 'Aus'
slots:
  default: []

The problem is this line

tooltip:=items.MotionSensor1_MotionAlarm.state === 'Alarm' ? 'Einbruch': 'Aus'

Not only that it doesn’t work but when I leave the Yaml and come back it takes away the ‘’ from the last part of the ternary expression like so

tooltip:=items.MotionSensor1_MotionAlarm.state === 'Alarm' ? 'Einbruch': Aus

And why doesn’t even this work?

tooltip:=items.MotionSensor1_MotionAlarm.state + ' mytext'

Sorry if this sounds like a stupid question …

TIA
Stefan

[buschif4 (Flo)]

@stefan.hoehn

tooltip:=items.MotionSensor1_MotionAlarm.state === 'Alarm' ? 'Einbruch': 'Aus'

Try this one:

tooltip: "=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? 'Einbruch' : 'Aus'"

[stefan.hoehn (Stefan Höhn)]

Ok, thanks a lot for the super fast answer! That does work.

Do I have to use the double quotes because the result of the expression is a string or does the expression always have to be in double quotes?

And why then do both of these not work?

icon: "=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? oh:motion : oh:camera"
icon:=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? oh:motion: oh:camera

[buschif4 (Flo)]

I use the double quotes because sometimes i had problems when making the expression without quotes. With quotes i never had problems.

I think the second expression should work but you need to make sure to make spaces between the single parameters. See the difference here:

@stefan.hoehn

icon:=(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? oh:motion: oh:camera

icon: =(items.MotionSensor1_MotionAlarm.displayState === 'Alarm' || items.MotionSensor1_MotionAlarm.state === 'Alarm') ? oh:motion : oh:camera