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

Is it possible to freeze somehow a widget (e.g image) on top of a layout page? So it’s not scrolling like other components?

Anyone able to point me in the right direction. I figured now that I have all my lights and such fully working via the Model that I would try my luck at creating a Widget for a universal remote. I started with the weather widget that is in the tutorials here and stripped it down to just a button but can not get this to trigger my RM3 broadlink IR which I have working via the Model and a test Page for controling my cable box, tv, receiver, etc… Im pretty sure Im just confused or not completely understanding some concept of this code. I thought it would have been as simple as issuing the same YAML code that was created for my button.

Screen Shot 2021-02-28 at 4.28.36 PM

uid: universalremote
tags: []
props:
  parameters:
    - context: item
      description: Prefix for the items with the data
      label:
      name:
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 28, 2021, 3:52:22 PM
component: f7-card
config:
  title: Universal Remote Control
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-center
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    text: POWER
                    action: command
                    actionOptions: 
                    actionitem: BroadlinkRM3v1105719216810137_Command
                    actioncommand: CABLE_POWER
                    style:
                      fontSize: 24px
                - component: f7-icon
                  config:
                    f7: power
                    color: blue

Edit; I tried following a few other posts regarding this same idea but still cant make the widget trigger anything.
https://community.openhab.org/t/oh3-ui-ir-widget/108293

Edit: I figured it out. I had a spelling and punctuation mistake in multiple spots. :slight_smile: took about 12 hours too long to figure it out lol

Hello everybody,
how can i use the badge “1” as in example?
I didn’t find anything in the documentation.
Thank you in advanceSchermata 2021-03-09 alle 01.11.04

You can find it in the Framework7 documentation:

Thanks a lot

Hi! A short question here: Can I somehow react in a widget on whether light or dark mode is active? Is the background color available in some css variable for example?
Thanks!

Hey @BobMiles

if you want to somehow react on the theme color you could use =themeOptions.dark ? something : something else

If you just want to reuse the card background color that reacts on the used theme, you could use the css variable var(--f7-card-bg-color).

2 Likes

Rainer, thank you so much! As always!!!

I have a hyperion ambilight. There is one String item named Effect.
When I check the items page and click on the current value (in this case fire), I get a list of all available effects


Is there a possibility, to configure my own page with a list item or input item (or maybe something completely different) in that way that the items are also presented to the page and not in the item view?

Create a default list widget metadata for the Item. Select oh-label-item as the type and Command options as the Action. That will show a filed labeled “Command options” where you can provide the list of options and the command that will be sent when that option is selected.

You can also set the command options as item meta data (in case you need them more often)

I am using an oh-input-card like so

- component: oh-input-card
                        config:
                          visible: =(props.rs1_closetime!=null)
                          sendButton: true
                          outline: true
                          inputmode: text
                          placeholder: hh:mm:ss
                          title: Schließzeit
                          type: time
                          validate: true
                          item: rs1_closetime

which results into a send-button on the next line

image

However, I would like to have the send button to be placed on the same line like the input like so (photoshopped :wink: ):

image

This is what vue renders

Does anyone have an idea how this could be achieved by providing a css style to the widget definition?

TIA
Stefan

The button on the side of the input is actually the default setting because the two pieces are rendered in an f7-row in the input component:

  <f7-row no-gap v-else class="oh-input-with-send-button">
    <f7-input class="input-field col-90" ref="input" v-bind="config" :value="(config.type.indexOf('date') === 0) ? valueForDatepicker : value" @input="$evt => updated($evt.target.value)" :change="updated" @calendar:change="updated" @texteditor:change="updated" @colorpicker:change="updated" />
    <f7-button class="send-button col-10" v-if="this.config.sendButton" @click="sendButtonClicked" v-bind="config.sendButtonConfig || { iconMaterial: 'done', iconColor: 'gray' }" />
  </f7-row>

The reason your button is below is just that your card isn’t wide enough.
image
Versus
image
These are from the exact same code just different widths

Doesn’t look like you can influence the wrapping of that f7-row from the OH yaml. You might get more control over the formatting if you build your own card from the separate pieces, but I doubt it because the f7-row is part of the oh-input component and not just the card. Alternatively, you can just ensure that your card is always a minimum width that allows the button to stay on the side.

Thanks for looking into it

The reason your button is below is just that your card isn’t wide enough.

Is there a way to make the card wider then?

That’s going to depend on the context. If you’re just adding the card directly to a page in the UI then the card’s width is simply going to be based on the column width (which is itself responsive to the screen width):


So if you can arrange your page so that the card is in a row with few enough columns you’ll get the result you want even in fairly narrow (e.g. mobile) screens.

If you are including the card in a custom widget then just setting the width of the container the card is in.

My widget is part of a page where enough space is available:

The component itself is embedded in a page

config:
  label: Rollladen Planung
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:rollladen_zeit

So maybe it is related how the widget is composed ?

uid: rollladen_zeit
tags: []
props: ...
component: f7-card
config:
  title: title
slots:
  default:
    - component: f7-card-content
      config:
        width: 100%
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: oh-input-card
                        config:
                          visible: true
                          sendButton: true
                          outline: true
                          inputmode: text
                          placeholder: hh:mm:ss
                          title: Schließzeit
                          type: time
                          validate: true
                          item: item1
                      - component: oh-input-card
                        config:
                          visible: true
                          sendButton: true
                          outline: true
                          inputmode: text
                          placeholder: hh:mm:ss
                          title: Öffnungszeit
                          type: time
                          validate: true
                          item: item2

You can, with an oh-repeater and the sourceType: itemStateOptions or sourceType: itemStateOptions depending on your item.

Example:

component: f7-card
config:
  title: Surround Program
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-horizontal-half
      slots:
        default:
          - component: oh-repeater
            config:
              for: program
              sourceType: itemStateOptions
              itemOptions: YamahaReceiver_SurroundProgram
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - margin-vertical-half
                      - col-25
                    raised: true
                    outline: true
                    color: blue
                    fill: =items.YamahaReceiver_SurroundProgram.state === loop.program.value
                    text: =loop.program.label

image

Thanks Yannick,

I will try that out tomorrow!

Stefan

I would switch the f7-row and f7-col around. This is closer to what you are trying to render (two columns within one row) and the columns will then be the full width that the input components can fill (I think, that without the columns in between the f7-row and the input components the 90%/10% settings of the row in the input component are interfering with the row you have defined).

With those changes you can eliminate the spacing around the input cards and get the effect you’re looking for at fairly narrow sizes.

Example yaml
component: f7-card
config:
  title: title
slots:
  default:
    - component: f7-card-content
      config:
        width: 100%
      slots:
        default:
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-input-card
                        config:
                          visible: true
                          sendButton: true
                          outline: true
                          inputmode: text
                          placeholder: hh:mm:ss
                          title: Close Time
                          type: time
                          validate: true
                          item: item1
                - component: f7-col
                  slots:
                    default:
                      - component: oh-input-card
                        config:
                          visible: true
                          sendButton: true
                          outline: true
                          inputmode: text
                          placeholder: hh:mm:ss
                          title: Open Time
                          type: time
                          validate: true
                          item: item2

image

I, personally, would clean up the space even further by getting rid of the card components and just using the input components directly (with labels above them in the columns).

No card example
component: f7-card
config:
  title: title
slots:
  default:
    - component: f7-card-content
      config:
        width: 100%
      slots:
        default:
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Close Time
                          style:
                            fontWeight: bold
                      - component: oh-input
                        config:
                          sendButton: true
                          outline: true
                          inputmode: text
                          placeholder: hh:mm:ss
                          type: time
                          validate: true
                          item: item1
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Open Time
                          style:
                            fontWeight: bold
                      - component: oh-input
                        config:
                          sendButton: true
                          outline: true
                          inputmode: text
                          placeholder: hh:mm:ss
                          type: time
                          validate: true
                          item: item2

image

1 Like

Perfect, Justin!

That did the trick!

in hindsight I know why I mixed them up: f7-col != f7-cols (I thought it would provide columns but it IS a column).