i’m playing a bit with custom widget right know with OH3 M5.
Thanks to the tutorial in this forum, i’ve figured out how to create customer widgets, but wat I didn’t get is if there’s a possibility to extend the esisting widgets.
e.g. I really like the label card to display temerpatures:
i’d like ot extend the layout of this card with
Buttons to change the temperature
Buttons to switch the heating mode of the radiator
so something like this:
I know I can take the YAML from that card and use it with my custom widget which enables me to change some settings.
But i don’t see the possibility to add controls here since adding slots to the existing component does not work (and I believe this would be the wrong approach)
Long story short:
Is the complete YAML code for the existing widgest available somewhere so that I can take this as a basic example or is there some other possibility to extend existing widgets?
One thing I would say though is you probably wouldn’t create such a widget as the default one for an individual Item as those buttons would be working with other Items. I would expect something like you describe to be build under Custom Widgets (see the Developer Tools section).
I would call it recreating rather than extending - as you’re not able to extend the original code of the standard widgets without changing the vue-template and commit these to the git repo.
You could find the code for all the standard vue-components in the git-repo here - but they’re not represented as YAML there, so you have to abstract the vue-template-code and translate it into YAML for yourself.
It should be doable, as the names of the template components matches exactly the ones you need to use for your custom-widget - it’s just another structure.
Further more, it might be helpfull to have a look at the default custom widget code or the ones that are already posted here in the forum to learn more about the usage of the properties, which would make your cutom-widget way more dynamic and reusable - this is something you can’t realy abstract from the vue component code.
And as @rlkoshak already mentioned, you have to do all your custom widget creation in the Developer Tools section.
@RGroll, @rlkoshak
Thanks to both of you for your tips.
Maybe i did express myself a bit wrong.
My goal was to create a customer widget. So yes, recreating would have been the correct word for it
I will have a look at the original widget definition from the repo and try to recreate it in YAML.
I using a binding that has set values for items if you create them all using a model so if you set it as a default widget for your thing you don’t need to enter any values into the prams to get it working. Also currently if you push on the temp button it will bring up analyser.
Yes it is a cool 27deg in bed room without the aircon on
Here is a the code for the one on the right.
Most of this is copied from others on the forum and yes it is ugly 290 lines and probably is full of stuff you don’t need.
Just to be clear here - you sure can use the YAML of the standard widgets and put them inside your custom widgets.
The difference here is, that you’re limited to the given config parameters of that widget then and elements might not fit together as well as if you’re doing it with the smaller underlying vue-components.
If you’re happy with the given possibilites of a standard widget, theres no real downside doing it that way.
I do the same since I’ve no idea what I’m doing. When I’m happy I’ll move the YAML to a custom widget in the developer tools and modify it to use properties.
It didn’t occur to me to set it as the default widget for the Equipment Group though. That’s a really great idea!
Option 1:
Try to recreate the oh-label-card.vue from the repository using YAML.
It somehow works, but adding actions when clicking on the item is not possible since the action configuration property is only available for the oh-* widgets. So with the standard f7 components it’s not working.
Option 2:
Try to wrap a F7 card around the oh-label-card:
Partly works, but the oh-label-card comes always with a padding / margin that i cannot change (i’ve just marked it in yellow for a better view). The button beyond does not have a border.
To eliminate this, I would need to change the margin via the config section in the YAML, but in order for this to work, there must be a corresponding config tag in the vue code or the oh-label-card. But there isn’t one
For completeness my YAML code:
uid: Thermostat
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: Dec 10, 2020, 4:03:01 PM
component: f7-card
config:
outline: false
noBorder: true
padding: false
noShadow: true
slots:
content:
- component: oh-label-card
config:
trendItem: ThermostatArbeitszimmerErdgeschoss_temperature
action: analyzer
actionAnalyzerItems:
- ThermostatArbeitszimmerErdgeschoss_Solltemperatur
- ThermostatArbeitszimmerErdgeschoss_temperature
item: ThermostatArbeitszimmerErdgeschoss_Solltemperatur
title: Arbeitszimmer
icon: oh:temperature
actionAnalyzerCoordSystem: time
vertical: false
- component: oh-button
config:
text: my button
So in the end:
I’m not able to create my customer thermostat widgest based on the oh-label-card
I’ve learned a lot about how the widgets work and also quite a lot about vue and f7
Thanks a lot for your help so far and your discussions.
I’ll keep you posted if I proceed here.
You’re right - forgot to mention that you should exchange the f7-action components with their oh-pendant. oh-link, oh-button are available and this is everything you need, if your plan is still the one from your initial post.
You can change most of the pre-defined styles by using the f7-style variables that are listed in the f7-docs on a component level.
In your case it’s the safe-area that messes up the layout - which you can remove by adding --f7-safe-area-left / right: 0 as a style to the standard component. (this one sadly isn’t mentioned clearly in the documentation - but you could use the chrome dev-tools (F12) in those cases and inspecting the element, you want to change)
The standard oh-button does not come with a background or outline - but you could add both with a config parameter.
All available paramters shows up as a tooltip while you’re writing your code, if not you can trigger it with ‘CTRL + Space’
I’m still not a fan of nested cards - but if this is what you want, I attached a small example which might help you coming a step closer to what you would like to archieve:
Its the Sesibo binding so all the item names follow the same pattern. The “group” equipment name is BedroomAircon
So when you follow the default props the item value is this BedroomAircon
Looking at only the power button / _MasterSwitch it builds the actionItem
- component: oh-button
config:
action: toggle
actionItem: =(props.item + "_MasterSwitch")
actionCommand: ON
actionCommandAlt: OFF
icon-f7: power
iconSize: 28
iconColor: '=(items[props.item + "_MasterSwitch"].state === "OFF") ? "red" : "green"'
Only one parameter when adding the custom widget on the page. You can select add from model then you don’t need to set the item. I leaving it in to allow the user multiple way to add a widget to pages.
I only have 2 parameters now instead of 8
props:
parameters:
- description: The Label at the top of the card
label: Friendly name of your aircon eg. Lounge
name: title
required: false
type: TEXT
- context: item
description: Aircon Group
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
Many thanks for your advice here. I will try it asap.
I also wasn’t keen to put a card into a card so with the hint about the action, I think I will proceed with my orignal idea
Ok. almost there. Thanks again for the great help here.
I just need a hint for the following things:
1: How can I make a multiple item selection in the config? I tried searching, but couldn’t find anything
2: what is the syntax if I want to add items from the config to the actionAnalyzerItems list?
I know that for a single setting it is e.g. item: =props.ItemName
But for a YAML list, i’m stuck
actionAnalyzerItems:
- //<what needs to be here if the item from the config can be adressed via props.ItemName
I’ve been planning to rewrite the cards as I did with the cells, that is, make an oh-card component that you can customize with slots (header, footer, beforeContent, afterContent) and make oh-label-card and friends based on oh-card instead of f7-card directly. When that’s done you will be able to add content to every card by putting components in slots.
Hi Sascha, I have been looking around to find a good tutorial in this forum but couldn’t find any so far. Do you mind pointing out one where I can learn and understand writing yaml widgets? (I have seen the “building-pages-in-the-oh3-ui” thread but it is hard to start with).
i’ve made quite some progress with checking how the existing cards are realized in the GitHub repository
I always thought that I would need to create some widgets for my needs, but in the end I stumbled upon this thread and it kind of opened my eyes what is already possible without creating my own widgets.
