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

OK, here’s another question. Is there a way to use the default widget config from the Item in the code above? Or is this a case where it has to be defined. I tried to replace the config from one of the components with just item: NameOfItem after modifying that Item to override the default List Widget and it came up blank.

Do the default widgets only come into play when adding widgets from the model?

Yes, I wish we had dynamic resolving of default widgets too but since they’re stored in metadata and can’t be retrieved efficiently right now (we don’t want a call to the API to figure out the default control multiple times in the page, that would have poor performance), maybe that’s something that could be retrieved early, cached and somehow kept current in the future… then that could become possible.

1 Like

Thanks, I’m becoming smarter and smarter on OH 3 and the new UI every day. I hope to start really contributing to the wiki pages here very soon with what I’ve learned.

3 Likes

Very cool! It’s probably easy to feel overwhelmed at first, but with decent tutorials and docs, one can start with little things, like changing the color or a button or similar, to understand the concepts, and go on from there

And if we manage to get good design talent on board, given that you have the ability to heavily alter the CSS styling if you want to, why not, I believe it’s not completely out of reach to have a least some of the “inspirational” concepts below imitated and offered as community contributions (to some extent, of course):

https://medium.muz.li/30-inspiring-examples-of-smart-home-app-617311d96303

https://www.behance.net/search/projects?search=Smart+Home&sort=recommended&time=month

I’ll try to draft the 3rd page to finish this series soon.

2 Likes

Maybe we can think of store of component (hosted on github for example) to install it and use it on openhab…

Can not wait to see the third part of the series. Thanks for your work.

1 Like

Yes, I have big hopes it could be part of the new marketplace proposal’s scope (https://github.com/openhab/openhab-addons/issues/8448). Importing directly from github repos could be useful as well.

1 Like

Hi all,

I dont know of this is the right place for this question here?

When i take a look on the examples and past them in a widget to examing on how to make a widget, it is dificult to link the code to what is hapening in the preview.

regards,
Ronny

Sometimes it is, yep - theres a lot of configuration and nesting involved until you see something in the preview - especially on the more complex ones. Using the code-editor tooltips on the components config will help here.

What would be your suggestion to make it easier to understand?

More sophisticated widget examples will come up in the future which should help you, getting a better understanding of the YAML-structure and the component-configuration.

Until then, have a look at the framework7 docs and just play around with what you see there - it helped me a lot.

Maybe just a dashed rectangle in the view to indicate ware in the code you are
In drawing programs like autocad or revit, when you select someting it change color or gives connetors to indicate on your screen your selection.

Or another way is when you select something in the view the code is higlhighted.

regards
Ronny

Generally a good Idea and worth posting this as an enhancement suggestion on the github page - but this might have implications to the code-editors performance and someone have to build it of course.

In the meantime you could use the build-in Chrome dev-tools to inspect (and highlight) your code. It helps a lot!

1 Like

Hello

i am trying to set the backgroud color of oh-cell. Is it at all possible? I see a Highlight color option but it doesnt seem to do anything… even if i click on the cell with a valid action set. pls help

i need something like this from the example in op.
image

You need this config in your YAML

  color: '=(items.YourItem.state === "OFF") ? "green" : "red"'

thanks! by hit and trial, i discovered that in an oh-cell the color property works only if there is an item property defined, even if it is null. but the oh-cell doesnt really expose item as a configurable prop in the UI. as compared to the oh-cell, the oh-label-cell type does have an item property exposed. might be worth looking into.

Hi all,
i am testing OH3 widget creation, and i try to make a widget that i have in habpanel into the new ui.

My quetion is, how to use icons i have made and placed in /etc/openhab/icons/classic/

I try ther following syntax :

- component: oh-button
              config:
                raised: true
                large: true
            - component: oh-image
              config:
                url: "='/static/a1.png'"
                style:
                  position: absolute
                  height: 100%
                  bottom: -90%

Regards
Ronny

You’re trying to display an image inside the oh-button component I suppose. oh-button (and the f7-component it’s based on) doesn’t support slots - so this will not work.

Generally the oh-button component only supports icons from the f7- and the material-iconset, which I attached an example below.

For explanation to the oh-image component you’re trying to use - the ‘/static/’ path corresponds with the ‘/etc/openhab/html/’ folder of your installation. And you don’t need the equal sign in that case, because you’re not accessing a prop, item or variable. So this would work, if you place an image in the above mentioned path:

- component: oh-image
  config:
    url: "/static/a1.png"

To reach your initial goal, you have to use a small workaround. (see the third button example in the code below) Be aware that there is a slight distinction with this workaround in the ‘hover’ and ‘pressed’-state of the button.

You also can leave your icon inside the ‘/etc/openhab/icons/classic/’ folder then, as ‘oh-icon’ is looking for icons there and in the integrated OH-iconset.

button_example

- component: oh-button
  config:
    action: popup
    actionModal: widget:YOURWIDGET
    class:
      - margin-right
    text: F7-icon
    icon-f7: plus_circle
    iconSize: 25
    iconColor: white
    raised: true
    large: true
    fill: true

- component: oh-button
  config:
    action: popup
    actionModal: widget:YOURWIDGET
    class:
      - margin-right
    text: Material-icon
    icon-material: add_circle
    iconSize: 25
    iconColor: white
    raised: true
    large: true
    fill: true

- component: f7-row
  config:
    class:
      - button
      - button-fill
      - button-large
      - button-raised
      - align-items-center
  slots:
    default:
      - component: oh-button
        config:
          action: popup
          actionModal: widget:YOURWIDGET
          style:
            --f7-button-bg-color: transparent
            --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
            --f7-button-pressed-bg-color: rgba(0,0,0,.15)
            position: absolute
            top: 0
            left: 0
            height: 100%
            width: 100%
      - component: oh-icon
        config:
          icon: a1
          style:
            height: 25px
      - component: Label
        config:
          text: OH-icon

Hope it helps!

4 Likes

Hi

Thanks for your example.
It explains how certain syntaxes should be used.

I Stil have problems with the syntaxes

I started from the keypad widget and try to adapt it to created a ir remote control keypad (habpanel widget)

uid: irLed_1c08a67036
tags: []
props:
parameters:

  • description: A text prop
    label: Prop 1
    name: prop1
    required: false
    type: TEXT
  • context: item
    description: An item to control
    label: Item
    name: item
    required: false
    type: TEXT
    parameterGroups: []
    timestamp: Nov 12, 2020, 9:19:25 AM
    component: f7-block
    config:
    title: Sended IR code
    style:
    outline-border-color: rgba(50, 150, 110, 1)
    outline: 2px
    background-color: rgba (60,100,120,1)
    position: relative
    -ms-user-select: None
    -moz-user-select: None
    -webkit-user-select: None
    user-select: None
    –f7-button-text-color: var(–f7-text-color)
    –f7-button-bg-color: var(–f7-card-bg-color)
    –f7-theme-color-rgb: var(–f7-color-blue-rgb)
    class:
  • padding
    slots:
    default:
  • component: oh-label-card
    config:
    title: Sended IR code
    style:
    border-radius: 10px
    background-color: rgba(80, 150, 50, 1)
    outline-border-color: rgba(50, 150, 110, 1)
    outline: true
    class:
    - margin-bottom
    content: =items[props.item].displayState || items[props.item].state
  • component: f7-row
    config:
    style:
    background-color: rgba(80, 150, 50, 1)
    class:
    - margin
    slots:
    default:
    - component: f7-col
    slots:
    default:
    - component: oh-button
    config:
    text: “2”
    raised: true
    large: true
    action: variable
    actionVariable: pincode
    actionVariableValue: ‘=(vars.pincode) ? vars.pincode + “2” : “2”’
    - component: oh-icon
    config:
    icon: a1
    style:
    height: 25px
    - component: Label
    config:
    text: OH-icon

Apparently I haven’t quite mastered the syntax to get the layout right.

Have read all the examples, but apparently there are more possibilities to influence the display.

I have tried your example, but I am still not getting the display aligned properly (see my screenshot).

The new mainui is great, many thanks for this and also for the good article how to create widgets. This was a good starting point.

Does anyone know if it is possible to use javascript or angularjs to dynamically build e.g. f7-rows. I used this on habpanel to extract parts of a json string for my heating control.

Hey again Ronny,

first of all it would be very helpfull if you use code-fences to make your code readable. I also think, that it wouldn’t help you if anybody here present you a ready-2-go soloution, so I´ll try it with some general tips, that helped me…

  1. Read Part 1 and Part 2 of this writeup again and try to understand the general mechanic of slots and components.

  2. Have a look in the f7-vue-documentation to see what components the framework offers (even if not all of them interacting with OH currently). The global f7-docs could also be helpfull (for things like css classes etc.)

  3. Start small. Instead of modifying already existing (complex) code examples, try to set yourself small goals as a starting point (maybe bringing 4 customs buttons in one row) and work up from there.

To at least briefly address your current problem (as far as it´s possible in that code mess :stuck_out_tongue:). It seems you are wrapping all the columns (in which the 1 - 4 buttons are) inside the row from my button-example.

The f7-row in the example acts just as a horizontal wrapper for the contents of the “fake-button” so it replaces a button in the keypad example, not a whole row. The component order here should be then:

f7-row
  f7-col
    f7-row (#1)
      oh-button
        ...
    f7-row (#2)
      oh-button
        ...
    ...

Hey @buschif4

Pure javascript can’t be used AFAIK. There are just some ‘javascript-like’ functions that you can use at the moment as @ysc mentioned here. But these are too limited for your use-case, I think.

I tried to do a similar thing with a dynamic created button-list and ended creating a bunch of placeholder components (which of course could be f7-rows) and triggered their visibility with expressions.

What also might work for you (even if its not customizable and limited to the use in a modal overlay) is adding an ‘action: group’, which creates a list item component for each group member. (see this discussion)

Hi Rainer,

Thanks for the assistance and tips

I tried to use code-fence, but my cromium browser is having a hard time with it.

  1. I’ve read it several times, but I can’t get a clear view of it yet. (but i also find this with other programming languages :slight_smile: and is a more common problem with the current manuals, they explain all the features, but not how to use them. )
  2. it is not always clear how to use this in yaml, the different examples show different possibilities.
  3. I’m working on that.

Regards,
Ronny

1 Like