You have to insert the marked lines, don’t ask me why, but it works
i decided to go with a new widget for my dimmer card:
uid: Card_Dimmer
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- context: item
description: Item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Oct 23, 2021, 7:52:37 PM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 70px
margin-left: 2px
margin-right: 2px
margin-top: 2px
margin-bottom: 2px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 8px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: '=(Number.parseInt(items[props.item].state) > 0) ? "lightbulb_fill" : "lightbulb"'
size: 16
style:
margin-right: 5px
color: '=(Number.parseInt(items[props.item].state) > 0) ? "#F4E274" : ""'
- component: Label
config:
text: Licht
style:
font-size: 12px
margin-top: 0px
padding-right: 5px
- component: Label
config:
text: =items[props.item].displayState
style:
font-size: 12px
margin-top: 0px
visible: "=(Number.parseInt(items[props.item].state) > 0) ? true : false"
- component: f7-block
config:
style:
position: absolute
top: 50px
left: 9px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=props.header ? props.header : 'Set Props'"
style:
font-size: 15px
font-weight: 600
margin-left: 0px
margin-top: 2px
line-height: 1
- component: oh-link
config:
action: toggle
actionItem: =props.item
actionCommand: ON
actionCommandAlt: OFF
style:
position: absolute
top: 30px
left: 0px
height: 40px
width: 100%
- component: oh-link
config:
action: popup
actionModal: widget:RollershutterPopup
actionModalConfig:
item: =props.item
style:
position: absolute
top: 0px
left: 0px
width: 100%
height: 30px
with this widget i can open a popup in the upper (blue) part to set a dimmer value or i can just toggle the light in the lower (red) part:
works fine so far but i’m struggling with the popup…
this is the widge RollershutterPopup:
uid: RollershutterPopup
props:
parameters:
- context: item
description: Item to control
label: Item
name: item
required: false
type: TEXT
timestamp: Oct 23, 2021, 6:05:55 PM
component: oh-slider-card
config:
item: =props.item
min: 0
max: 100
label: true
scale: true
scaleSteps: 4
unit: "%"
and this is what it looks like:
is there a way to adjust the size of the popup and could i remove the (orange) header part of the popup?
Hello,
can u tell me how u get the “Overview” Page filled with items or informations? In my openHAB it looks like a “big black hole”. I find nothing to change this page or fill with items. I have the three “standard” cards: Locations, Equipment and Properties. I dont know what i need to do to fill the “Overview” Page.
The Overview tab is a Layout Page. That page shows how to configure it so the page is responsive (i.e. changes it’s layout based on the size of the screen). Further information can be found in Building Pages.
The wdigets you put on a Layout Page are usually going to be Custom Widgets or they will be widgets installed from the Marketplace.
Thanks for the quick help, I found the bug on myself. 
doesn’t look like anyone’s interested, but maybe one day someone can use this… popup size can be configured with f7-popup:
uid: Card_Dimmer
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
- context: item
description: Item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Oct 28, 2021, 1:53:05 PM
component: f7-card
config:
style:
noShadow: false
class:
- padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: 70px
margin-left: 2px
margin-right: 2px
margin-top: 2px
margin-bottom: 2px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 8px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: '=(Number.parseInt(items[props.item].state) > 0) ? "lightbulb_fill" : "lightbulb"'
size: 16
style:
margin-right: 5px
color: '=(Number.parseInt(items[props.item].state) > 0) ? "#F4E274" : ""'
- component: Label
config:
text: Licht
style:
font-size: 12px
margin-top: 0px
padding-right: 5px
- component: Label
config:
text: =items[props.item].displayState
style:
font-size: 12px
margin-top: 0px
visible: "=(Number.parseInt(items[props.item].state) > 0) ? true : false"
- component: f7-block
config:
style:
position: absolute
top: 50px
left: 9px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=props.header ? props.header : 'Set Props'"
style:
font-size: 15px
font-weight: 600
margin-left: 0px
margin-top: 2px
line-height: 1
- component: oh-link
config:
action: toggle
actionItem: =props.item
actionCommand: ON
actionCommandAlt: OFF
style:
position: absolute
top: 30px
left: 0px
height: 40px
width: 100%
- component: oh-link
config:
action: popup
popupOpen: .myPopupOpenDI
style:
position: absolute
top: 0px
left: 0px
width: 100%
height: 30px
slots:
default:
- component: f7-popup
config:
class: myPopupOpenDI
swipeToClose: true
style:
--f7-popup-tablet-width: 70%
--f7-popup-tablet-height: 101px
slots:
default:
- component: widget:Popup_Dimmer
config:
item: =props.item
title: =props.header
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 
5 Likes
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
component: oh-cell
config:
action: popup
popupOpen: .myPopupOpenDI
style:
position: absolute
top: 0px
left: 0px
width: 100%
height: 100px
slots:
default:
- component: f7-popup
config:
class: myPopupOpenDI
swipeToClose: true
style:
--f7-popup-tablet-width: 30%
--f7-popup-tablet-height: 400px
slots:
default:
- component: widget:caddx_graphic_portrait_V6
config:
item: =props.item
title: =props.header
EDIT: Seems to work if you have a widget calling a widget. But not if you are calling the widget from a Cell etc?
tried with oh-cell myself and the widget didn’t even popup when i clicked on the cell, sorry. that is all way above my level. good luck!
Try f7-popover instead.
@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.
There’s a reference to a widget, called Wetter_OneCall.
Is that also a custom widget you made?
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 
1 Like
Hi!
i tried your widget Cell_Weather_Actual_1
on your screenshot for mobile it looks like this:
on pc it looks just like that, but on mobile the line-height changes:
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?
I think you can just use 2 groups. One for cutting GroupLightStatus and the other for control GroupLightControl
1 Like
so the info on Items | openHAB is out of date?
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 beONas 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.
1 Like