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.
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.
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.
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.
Yes, I have big hopes it could be part of the new marketplace proposal’s scope ([RfC] new openHAB marketplace structure proposal · Issue #8448 · openhab/openhab-addons · GitHub). Importing directly from github repos could be useful as well.
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!
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.
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.
- 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!
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:
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…
Read Part 1 and Part 2 of this writeup again and try to understand the general mechanic of slots and components.
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.)
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 
). 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.
and is a more common problem with the current manuals, they explain all the features, but not how to use them. )Regards,
Ronny