uid: Popup_Dimmer
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- context: item
description: item to control
label: Item
name: item
required: false
type: TEXT
timestamp: Oct 28, 2021, 12:45:25 PM
component: f7-card
config:
title: =props.title + " Dimmen"
style:
margin: 0px
slots:
default:
- component: f7-row
config:
class:
- display-flex
style:
padding-left: 20px
padding-right: 20px
padding-top: 15px
padding-bottom: 25px
slots:
default:
- component: oh-slider
config:
item: =props.item
min: 0
max: 100
label: true
scale: true
scaleSteps: 4
unit: "%"
edit: yaml updated, had to add swipeToClose: true to the f7-popup so i can close the popup also on phone. wasn’t able to figure out how to close the popup with a button
Hi Peter
I have been looking for a way to do this too…
Working with you option to call my widget from an oh-cell, but it pops up a blank popup instead of my widget.
Will keep trying to figure it out though
@Oliver2 The screenshot in your post #4 in this thread looks like you were able to merge the old Habpanel design with the Main UI environment. Is this correct and if so how did you accomplish this?
Thanks
Martin
At that early stage there was no “Fixed Grid” layout available so that I wrote one widget which contained several items.
You can see it here:
However, life is now much easier. Thanks to “hubsif” who made the Fixed Grid layout available. Start with this and you can rebuild your habpanel layout.
I also ended up with a Fixed Grid layout (what you see above was a workaround when only Responsive layouts were available.
If you like I can post my layout and widget yaml codes
Maybe open a seperate thread for this if there are further questions
Thanks for the reply - I have already started to convert Habpanel to the Fixed Grid Layout from hubsif but somewhat liked the design from the Habpanel a bit better than the new one. But anyway - Don´t want to live in two worlds so will continue to dig deeper into F7.
Awesome stuff @narf27 and @Mark_VG! I might just create a generic ‘button’ widget to pop-up my other widgets in a specific window format. For the time being until we can call a specific pop-up format from a cell off course
please ignore the display state for temp and the missing values - the screen should only show the gap between lines.
card is exactly the same as in your code (height: 150px) and on your example 3 lines would fit in the card. on my android phone the third line it outside the card… as i would like to add another row i would reeaaally like to change the line-height / gap between the lines. i tried with margin-bottom = 0px for the f7-chips but the space between lines (on phone) is still to big…
Hi!
i presume the group for lights is defined as Group:Number:SUM, right?
with “SUM” i’m not able to switch OFF all lights in the group with gLights.sendCommand(OFF) anymore.
Or is there another way to count the lights that are “ON” and where i will still be able to send commands through the group item?
Examples for derived states on Group Items when declared in the Item DSL:
Group:Number Lights "Active Lights [%d]" // e.g. "2"
Group:Switch:OR(ON,OFF) Lights "Active Lights [%d]" // e.g. ON and "2"
Group:Switch:AND(ON,OFF) Lights "Active Lights [%d]" // e.g. ON and "2"
The first three examples above compute the number of active lights and store them as group state. However, the second group is of type switch and has an aggregation function of OR . This means that the state of the group will be ON as soon as any of the member lights are turned on.
no, the docs describe exactly what @opnhab7373 said. If you want the count of lights that are on and also to be able to command all the lights through the Group, you need two Groups, one with Number and the other with Switch as the type.
I am absolutely stoked by the look of your Main UI. I’ll try to copy some of your widgets to customize them by my own needs. Very nice template!
By the way: Is anyone able to give me a hint how to configure the f7-components when developing new widgets. I tried very hard the last days, but the docs at Building Pages - Components & Widgets | openHAB and Component Reference | openHAB are not very meaningful in case of explaining how to use f7-components. It ist not easy to get the openHAB documentation and Framework7 Documentation together. I didn’t manage to find out, which config options and slot options are available for the different f7 components in openHAB. Is there any tutorial or additional documentation beside the mentioned openHAB sides available? Especially for developing openHAB widgets with f7 components?
I would like to share with you my widgets for the grid layout. The widgets are available in table version and in a special version for mobile screens optimized. The widgets are tested on iPad and iPhone.
Your widgets for iphone and ipad looks good and i would like to use them.
Could you pls. share the YAML of the grip page you use to have a easy starting point for myself
Thanks in advance.
Hello guys! Finally i’ve made my widgets to show some useful info from my rooms!
first i wanna thank all people that post their widgets here in the forum so i’ve learnt many things and to put the right code in the right place (i hope!).
i would like to say that this widget is highly customizable and is studied to add those functions that are missing in openhab customization and are made easy to understand for beginners like me.
there is the possibility to add a big icon on top center, the description, and if you want, you can add 2 other items to display the state. in my case it show the number of lights turned on, and the status of rollershutter. all labels and icons can be colored by widget settings.
last, you can decide to add the wallpaper to the card and eventually a footer text. one last thing, i’ve added action when the widget is clicked.
This image is how the widget looks like from computer.
let me know what do you think of this job, i will appreciate. also i add the widget code to be checked and eventually cleaned and adjusted by who is better than me in coding.
thanks to all for feedback!
uid: Label-Card-Background-IconsV2
tags:
- MadeByEvil
props:
parameters:
- description: Path of the background image
label: Image path
name: imagepath
required: false
type: TEXT
- description: Icon name (without f7)
label: Icon
name: icon
required: false
type: TEXT
- description: Icon color
label: Icon color
name: iconcolor
required: false
type: TEXT
- description: Label of the card
label: Label
name: desc
required: false
type: TEXT
- description: Label color for the title of the card
label: Label color
name: desccolor
required: false
type: TEXT
- description: Description under the card
label: Footer text
name: defi
required: false
type: TEXT
- context: item
description: Extra item to show
label: Item
name: extra_item
required: false
type: TEXT
- context: icon
description: Icon of the extra item (visible only when extra item is defined)
label: Extra item icon
name: extra_item_icon
required: false
type: TEXT
- context: item
description: Another extra item to show
label: Item
name: extra_item_2
required: false
type: TEXT
- context: icon
description: Icon of the secondary extra item (visible only when extra item is defined)
label: Secondary extra item icon
name: extra_item_2_icon
required: false
type: TEXT
parameterGroups:
- name: widgetAction
context: action
label: Action
description: Action to perform when the element is clicked
timestamp: Dec 4, 2021, 1:52:48 PM
component: f7-card
slots:
default:
- component: oh-link
config:
actionPropsParameterGroup: widgetAction
color: white
class:
- no-padding
- no-margin
style:
max-height: 192px
width: 100%
height: 100%
position: absolute
top: 0
left: 0
z-index: 98
- component: f7-block
config:
style:
min-height: 110px
background: ='url(' + props.imagepath + ')'
background-size: 100% 240%
background-repeat: no-repeat
display: flex
flex-direction: column
background-position: center
slots:
default:
- component: f7-icon
config:
f7: =props.icon
color: =props.iconcolor
size: 28
style:
position: absolute
width: 100%
height: 100%
top: 15%
left: 0
- component: oh-link
config:
action: navigate
actionPage: ='page:' + props.targetPage
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
- component: Label
config:
text: =props.desc
style:
font-weight: 400
color: =props.desccolor
font-size: 18px
text-align: center
margin-top: 35px
line-height: 50px
overflow: hidden
- component: f7-icon
config:
f7: =props.extra_item_icon
size: 15
color: =props.iconcolor
visible: "=props.extra_item ? true : false"
style:
margin-left: -5px
bottom: 5px
position: absolute
- component: Label
config:
visible: "=props.extra_item ? true : false"
text: =items[props.extra_item].state
style:
color: =props.iconstextcolor
font-size: 15px
margin-left: 15px
bottom: 1px
position: absolute
- component: f7-icon
config:
visible: "=props.extra_item_2 ? true : false"
f7: =props.extra_item_2_icon
size: 15
color: =props.iconcolor
style:
margin-left: 40px
bottom: 5px
position: absolute
- component: Label
config:
visible: "=props.extra_item_2 ? true : false"
text: =items[props.extra_item_2].state
style:
color: =props.iconstextcolor
font-size: 15px
margin-left: 60px
bottom: 1px
position: absolute
- component: f7-block
config:
min-height: 20px
- component: Label
config:
text: =props.defi
style:
font-weight: 400
color: grey
font-size: 10px
margin-left: 15px
line-height: 20px
overflow: hidden