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.
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. 
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 advance
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
However, I would like to have the send button to be placed on the same line like the input like so (photoshopped 
):
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.
Versus
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
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
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
1 Like
