@Nic0205 One last thing…Pls tell me when to stop!.
You haven’t even started =) Doors, windows, motion, leakage, lights, dimmers, colorpickers, media, temperature, humidity, co, gates, crops watering, energy, battery and so on, and so on, and everything with dynamic icons-colors-pictures.
Before starting to create so many custom icons, we should check for existing ones in the possible sources…
cc @Dimitris
I suspect this is the exact same problem as before. With css, unless you set properties that mean otherwise, every element is always just looking at it’s direct parent and direct children for sizing information. In this case, by adding the widget to a page inside the cell grid, the cell grid is now the parent of the widget. Unless you give the widget a definite height, the cell grid is just going to be the minimum height it needs to be to contain the widget at it’s minimum spacing. So to make sure that your widget also fills a page you have to make sure 1) that the widget always fills the full height of the cell grid and 2) the cell grid fills the full height of the page. The problem here is that OH puts a lot of other pieces “under the hood” so a cell grid is not just a single element.
So, your instinct was correct; you want to set the actual height of the widget, but to a responsive value, not an absolute value. In this case I would the css length unit of vh which equals 1% of the height of the browser window. So 100vh equals the whole height of the browser window. However, there are some pieces of the OH MainUI that are in the way (the top and bottom toolbar) so you have to subtract those elements that are already taking up some space on the window. If you use the page inspector in your browser, eventually you will find that those have heights set by some f7 variables. So to calculate the exact, responsive height the widget should be you would need something like this:
uid: demo:responsive_height
tags: []
props:
parameters: []
parameterGroups: []
component: f7-block
config:
style:
height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-safe-area-top))
width: 100%
margin: 0
padding: 0
display: flex
flex-direction: column
justify-content: space-between
slots:
default:
- component: Label
config:
text: The top of the block
style:
flex: 0 0 0
- component: f7-block
config:
style:
flex: 1 1 auto
slots:
default:
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: Label
config:
text: The bottom of the block
style:
flex: 0 0 0
2 Likes
Good evening @hmerk ,
If you define as sources the standard OH or f7 icons, i have checked both thoroughly failed to find ones suitable for our design.
f7 provides extremely well designed and directly accessible icons but the collection misses a lot -if not all- of the equipment specific icons - that’s exactly what we need now.
If you have a hint for us to find commercial free - well designed icons pls let us know!
I appreciate your response.
No, there are more sources through iconify, see here
Very good info. Thank you.
I missed that cause i’m always going through official OH documentation!
1 Like
@JustinG cool- that makes things clearer.
While testing the code I noticed a challenge:
All is fine as long as the content is not longer than the block / the screen. The footer is still at the bottom - but at the bottom of the page and not the actual screen.
For example this code:
uid: demo:responsive_height1
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Aug 22, 2022, 10:41:05 PM
component: f7-block
config:
style:
height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-safe-area-top))
width: 100%
margin: 0
padding: 0
display: flex
flex-direction: column
justify-content: space-between
slots:
default:
- component: Label
config:
text: The top of the block
style:
flex: 0 0 0
- component: f7-block
config:
style:
flex: 1 1 auto
slots:
default:
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: Label
config:
text: The bottom of the block
style:
flex: 0 0 0
You’re going to have to tell the block that holds the middle pieces what to do when it’s content overflows. See the css overflow property.
Iconify has limited usage, cause it requires internet connection. Check @martiniman icons, or feed Openhab with your own, i totally agree with you that f7 are better styled, but not designed for smart home use case.
Generally yes, but if your read @ysc post , openHAB is caching the icons and you can import the font files for offline usage.
Therefore there is no need for a permanent internet connection.
Hey @JustinG,
great tip! I tried to put the three entries (header, content, footer) in separate block - if this is clever I will see…
This code now works:
uid: demo:responsive_height1
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Aug 22, 2022, 10:41:05 PM
component: f7-block
config:
style:
height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-safe-area-top))
margin: 0
padding: 0
display: flex
flex-direction: column
justify-content: space-between
slots:
default:
#Header
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
slots:
default:
- component: f7-segmented
config:
style:
flex: 1 1 auto
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: SECTION1
large: true
style:
color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.selectSection=="SECTION1" ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: Home
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: SECTION2
large: true
style:
color: '=vars.selectSection=="SECTION2" ? "black" : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.selectSection=="SECTION2" ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: Rooms
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: SECTION3
large: true
style:
color: '=vars.selectSection=="SECTION3" ? "black" : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.selectSection=="SECTION3" ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: Floors
# Middle
- component: f7-block
config:
style:
flex: 1 1 auto
overflow: scroll
slots:
default:
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
# Footer
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
slots:
default:
- component: f7-segmented
config:
style:
flex: 1 1 auto
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: SECTION1
large: true
style:
color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.selectSection=="SECTION1" ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: Home
In the widget-editor it looks great:
But on the iPhone / responsive mode it looks squeezed:
I think the problem is the width of the first block which holds the other blocks is not wide enough and I need another time a relative width. Is there something like for the height to be noted?
1 Like
Thank you!
A german saying is “den Wald vor lauter Bäumen nicht gesehen” (did not see the forrest cause of all the trees).
1 Like
Hey there,
developing the UI / Design goes further and further.
To avoid overloading this thread I will create a GitHub Repo and a new Thread only for this Topic.
I hope that all of you guys will join the new thread too and this okay for you.
I will post the thread and the GitHub Repo later, as soon as I could manage a few things…
@Dimitris: Do you have a short Name for our Project? My first thought was NewUI but feel free to give a better name 
I’m working on widgets for this NewUI. What do you think if i will join new topic and post also those new widgets?
1 Like
Don’t call it NewUI, as ist is not a complete UI but a collection if widgets (and pages?)
2 Likes
Cool! We welcome every help!
Thank you!
I am free about the name - just give me a tip how to call the thing and then I will create the GitHub Repo and open the new topic
@ all:
Next Proposal:
MFC-Design (Mobile First Collection)
1 Like
@Nic0205 I’m with @hmerk . This Project is actually an OH Page under current OH’s UI.
I’ll liked the “OpenPage” but they have used a lot out there…
Other possible names: HabWindow, OpenPlug, OpenPage or just Nic’s OpenHab Page.
Example:
Pal. Just pick the name you like and motivates you!
Let me know if you like to have a temp logo with the chosen name.
Cheers!