galexey
(Alexey Grubauer)
December 13, 2021, 11:24am
1
Navigating between pages in the new OH 3 (tried all versions up to 3.2.0M5) UI is extremely slow on Android devices (tried Firefox, Chrome, Duckduckgo, Lynket). The more references to items I add in components and widgets in the page, the slower it gets.
I created a testpage (screenshot) which takes 4-5 seconds to load and another 1-2 seconds to reder it. (on a samsung galaxy A71 in firefox. It is ca. 1 second faster on Duckduckgo).
If I navigate from a page with many items to another it takes additional time.
The same page on a iPhone 11 on any browser (safari, firefox, chrome) takes less than a second to open and render. It´s super smooth.
On a PC (windows with Firefox or chrome), it´s also a bit slow (about 1.5 to 2 seconds).
I tried to optimize my page and store many datapoints in a JSON and pick it to use less items like this:
icon: =JSON.parse(items.Helligkeit_in_world_Haus_EG_TestRaum1_ui_widget_controller.state)[“room_detail_edit__icon_iconname”]
text: =JSON.parse(items.Helligkeit_in_world_Haus_EG_TestRaum1_ui_widget_controller.state)[“room_detail_edit__value”]
But my pages are still unusably slow.
If I remove ALL references to items pages load quite fast. So I don´t think it´s the rendering of the page.
I think its related to the connection to openhab items.
openhab is running in a docker container on a superfast LINUX-Server. ping to openhab machine is 1ms on wired network, 1-3 ms on wifi
I did a profiling in chrome for a reload of my page:
(see screenshot)
I´m quite desperate already because I tried so many things already. I´m playing with the idea to store ALL itemdata in one single string item as JSON to speed up things.
galexey
(Alexey Grubauer)
January 15, 2022, 3:46pm
2
I found a solution which makes everything superfast:
simply open your pages with the action popup.
eg:
- component: oh-button
config:
action: popup
actionModal: =props.page_link
on mobiles this is great, but on desktop the popup page dimension is fixed with the variables:
–f7-popup-tablet-width, --f7-popup-tablet-height , widht and height with 50% and some margin.
for desktop I have no idea how to change the size and position of the page.
maybe I´ll create a second set of pages without pop just for destop.
So your Overview page is just a bunch of label cells which, when clicked, open pop-ups?
galexey
(Alexey Grubauer)
January 15, 2022, 4:46pm
4
My overview page looks like this - a series of custom widgets which represent each room.
here is the yaml for it:
config:
label: Übersicht
sidebar: true
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin-top: 0px
display: flex
flex-direction: column
justify-content: flex-start
align-items: stretch
padding: 0px
slots:
default: []
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin-top: 0px
display: flex
flex-direction: column
justify-content: flex-start
align-items: stretch
padding: 0px
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world
config:
page_link: page:prod_world_detail
hierarchy_link: page:welt
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Aussenbereich
config:
page_link: page:prod_world_Aussenbereich_detail
hierarchy_link: page:aussen_overview
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Haus
config:
page_link: page:prod_world_Haus_detail
hierarchy_link: page:haus_overview
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Garage
config:
page_link: page:prod_world_Garage_detail
hierarchy_link: page:not implemented yet
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-accordion-item
config:
opened: true
slots:
default:
- component: f7-accordion-toggle
config:
style:
margin: 0px
margin-top: 5px
padding: 0px
slots:
default:
- component: f7-block
config:
style:
--f7-grid-gap: 0px
align-items: center
background: lightgrey
border-radius: 12px
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: flex-start
margin: 0
padding: 0
slots:
default:
- component: oh-icon
config:
icon: favourites
style:
height: 2.5em
- component: Label
config:
style:
color: black
font-size: 2em
margin-left: 20px
text-align: left
text: Favoriten
- component: f7-accordion-content
config:
style:
margin: 0px
margin-left: 5px
margin-top: 3px
slots:
default:
- component: f7-accordion-item
slots:
default:
- component: f7-block
config:
style:
--f7-grid-gap: 0px
align-items: stretch
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
margin: 0px
padding: 0px
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin-top: 0px
display: flex
flex-direction: column
justify-content: flex-start
align-items: stretch
padding: 0px
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Haus_OG_Studio
config:
page_link: page:prod_world_Haus_OG_Studio_detail
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Haus_EG_Esszimmer
config:
page_link: page:prod_world_Haus_EG_Esszimmer_detail
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Haus_EG_Wohnzimmer
config:
page_link: page:prod_world_Haus_EG_Wohnzimmer_detail
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Haus_OG_Schlafzimmer
config:
page_link: page:prod_world_Haus_OG_Schlafzimmer_detail
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG
config:
page_link: page:prod_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG_detail
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG_Pool
config:
page_link: page:prod_world_Aussenbereich_Aussenbereich_EG_Garten_Terrasse_EG_Pool_detail
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-bottom: 20px
slots:
default:
- component: widget:prod_room_overview_roomoverview_world_Haus_EG_Kueche
config:
page_link: page:prod_world_Haus_EG_Kueche_detail
masonry: null
grid: null
galexey
(Alexey Grubauer)
February 22, 2022, 10:57am
5
I followed my plan of popups and I achieved:
fullscreen popup. Navigation back and forth.
PRO:
page transition is suuuper fast
CON:
The initial loading of the (overview)page takes 15 to 20 seconds which again makes the UI unusable because most browsers and the openHAB App does not keep the page open. (when you open the app after some time (hours) it will reload the overview page). To wait 15 seconds until you can start doing something feels like infinity.
browser-back does not work properly.
However, if someone wants to give it a try, here is what I did:
I moved every room-page into a room-widget.
E.g. one room looks like this:
here is a part of the code for it:
uid: prod_world_Haus_OG_Studio_detail
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Feb 20, 2022, 9:18:01 AM
component: f7-block
config:
class: page-content infinite-scroll-content
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
slots:
default:
- component: oh-button
config:
text: Studio
popup-close: true
fill: true
style:
font-size: 2em
height: 2.5em
display: flex
align-items: center
- component: oh-button
config:
text: zurück
popup-close: true
fill: true
style:
height: 2.5em
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
slots:
default:
- component: f7-accordion-item
config:
opened: true
slots:
default:
- component: f7-accordion-toggle
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-wrap: wrap
flex-direction: row
justify-content: flex-start
align-items: center
--f7-grid-gap: 0px
padding: 0
margin: 0
background: lightgrey
border-radius: 12px
slots:
default:
- component: oh-icon
config:
icon: info
style:
height: 2.5em
- component: Label
config:
text: Status
style:
color: black
font-size: 2em
text-align: left
margin-left: 20px
- component: f7-accordion-content
config:
style:
margin: 0px
margin-top: 3px
margin-left: 5px
slots:
default:
- component: f7-accordion-item
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-direction: column
justify-content: flex-start
flex-wrap: wrap
align-items: flex-start
--f7-grid-gap: 0px
padding: 0px
margin: 0px
slots:
default:
- component: Label
config:
text: = items.world_Haus_OG_Studio_status_windoor_text.state
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
slots:
default:
- component: f7-accordion-item
config:
opened: true
slots:
default:
- component: f7-accordion-toggle
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-wrap: wrap
flex-direction: row
justify-content: flex-start
align-items: center
--f7-grid-gap: 0px
padding: 0
margin: 0
background: lightgrey
border-radius: 12px
slots:
default:
- component: oh-icon
config:
icon: lightbulb_on
style:
height: 2.5em
- component: Label
config:
text: Beleuchtung
style:
color: black
font-size: 2em
text-align: left
margin-left: 20px
- component: f7-accordion-content
config:
style:
margin: 0px
margin-top: 3px
margin-left: 5px
slots:
default:
- component: f7-accordion-item
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-direction: row
justify-content: flex-start
flex-wrap: wrap
align-items: flex-start
--f7-grid-gap: 0px
padding: 0px
padding-top: 13px
margin: 0px
slots:
default:
- component: f7-card
config:
title: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__title"]'
style:
display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__visible"] == "True") ? "" : "None"'
box-shadow: 0px 6px 6px hsl(0,0%,90%)
border-radius: 12px
margin: 2px
slots:
default:
- component: f7-block
config:
style:
padding: 0px
margin: 0px
display: flex
justify-content: flex-start
align-items: center
slots:
default:
- component: f7-block
config:
style:
display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_visible"] == "True") ? "flex" : "None"'
flex-direction: row
justify-slide: space-between
align-items: center
--f7-grid-gap: 0px
padding: 0
margin: 0
slots:
default:
- component: oh-icon
config:
icon: '="" + JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_iconname"]'
iconUseState: true
style:
opacity: '= (["NULL", "None", "VISIBLE"].includes(JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_displaymode"]) ? "100" : "0")'
display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_displaymode"] == "INVISIBLE_NOOCCUPY") ? "None" : ""'
filter: '= JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_icon_filter"]'
height: 20px
width: 20px
- component: Label
config:
text: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_value"]'
style:
display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_visible"] == "True") ? "flex" : "None"'
color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_color"]'
font-size: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_label_fontsize"]'
text-align: left
- component: oh-toggle
config:
item: beleuchtung_schalten_schaltbefehl_og_studio_deckenleuchten
style:
margin: 9px
--f7-toggle-handle-color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_handle_color"]'
--f7-toggle-inactive-color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_inactive_color"]'
--f7-toggle-active-color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__toggle_active_color"]'
- component: f7-block
config:
style:
margin-left: 12px
margin-right: 12px
width: 100px
padding: 0px
display: flex
justify-content: center
align-items: stretch
slots:
default:
- component: oh-slider
config:
item: beleuchtung_schalten_schaltbefehl_og_studio_deckenleuchten
label: true
min: 0
max: 100
step: 1
style:
display: '= (JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__slider_visible"] == "True") ? "flex" : "None"'
width: 100%
z-index: 0
color: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__slider_color"]'
font-size: '=JSON.parse(items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.Deckenleuchte_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_detail_edit__slider_fontsize"]'
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
slots:
default:
- component: f7-accordion-item
config:
opened: true
slots:
default:
- component: f7-accordion-toggle
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
slots:
default:
- component: f7-block
config:
style:
display: flex
flex-wrap: wrap
flex-direction: row
justify-content: space-between
align-items: center
--f7-grid-gap: 0px
padding: 0
margin: 0
background: lightgrey
border-radius: 12px
slots:
default:
- component: f7-block
config:
style:
flex-grow: 2
display: flex
flex-wrap: wrap
flex-direction: row
justify-content: flex-start
align-items: center
--f7-grid-gap: 0px
padding: 0
margin: 0
slots:
default:
- component: oh-icon
config:
icon: blinds
style:
height: 2.5em
- component: Label
config:
text: Beschattung
style:
color: black
font-size: 2em
text-align: left
margin-left: 20px
- component: f7-block
config:
style:
style:
flex-shrink: 2
slots:
default:
- component: oh-icon
config:
icon: '="" + JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__iconname"]'
iconUseState: true
style:
opacity: '= (["NULL", "None", "VISIBLE"].includes(JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__displaymode"]) ? "100" : "0")'
display: '= (JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__displaymode"] == "INVISIBLE_NOOCCUPY") ? "None" : ""'
filter: '= JSON.parse(items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("-") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state.trim().startsWith("NULL") ? "{}" : items.is_shademanagerActiveIn_world_Haus_OG_Studio_in_world_Haus_OG_Studio_ui_widget_controller.state)["room_overview__filter"]'
height: 20px
width: 20px
margin-right: 10px
- component: f7-accordion-content
config:
style:
margin: 0px
margin-top: 3px
margin-left: 5px
width: 100%
slots:
default:
- component: f7-accordion-item
config:
style:
display: flex
flex-direction: row
justify-content: space-between
margin-right: 5px
flex-wrap: wrap
slots:
default:
- component: widget:shutter-lamella-v3
config:
title: alle
itemShutter: Studio_AllShades_shutter
itemLamella: Studio_AllShades_lamella
- component: widget:shutter-lamella-v3
config:
title: links
itemShutter: beschattung_verfahren_fahrt_raffstore_og_studio_links_shutter
itemLamella: beschattung_verfahren_fahrt_raffstore_og_studio_links_lamella
- component: widget:shutter-lamella-v3
config:
title: rechts
itemShutter: beschattung_verfahren_fahrt_raffstore_og_studio_rechts_shutter
itemLamella: beschattung_verfahren_fahrt_raffstore_og_studio_rechts_lamella
- component: widget:shademanger_select
config:
title: Shademanager
set_shademanager: set_shademanagerActiveIn_world_Haus_OG_Studio
is_shademanager: is_shademanagerActiveIn_world_Haus_OG_Studio
#-------------removed some code-lines here---------
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
margin-top: 5px
height: 200px
In the “overview” - page I open the room-page with a button and a custom-popup class (you need a new popupclass for every button):
- component: oh-button
config:
action: popup
actionPageTransition: f7-parallax
popupOpen: .myPopupOpen_prod_world_Haus_OG_Studio_detail
style:
background: orange
bottom: 0
display: '=props.page_link == "" || props.hierarchy_link == "undefined"
|| props.page_link == Null ? "none" : ""'
filter: opacity(0%)
grid-column-end: 3
grid-column-start: 2
grid-row-end: 5
grid-row-start: 1
height: 100%
left: 0
position: absolute
width: 100%
z-index: 3
slots:
default:
- component: f7-popup
config:
backdrop: true
class: myPopupOpen_prod_world_Haus_OG_Studio_detail
closeButton: true
closeByBackdropClick: true
closeOnEscape: true
style:
--f7-popup-tablet-height: 100%
--f7-popup-tablet-width: 100%
height: 100%
left: 0px
margin-bottom: 0px
margin-left: 0px
margin-right: 0px
margin-top: 0px
position: absolute
top: 0px
width: 100%
swipeToClose: false
slots:
default:
- component: widget:prod_world_Haus_OG_Studio_detail
galexey
(Alexey Grubauer)
March 1, 2022, 11:22am
6
important correction!
UI used to be superfast on any browser on ios when running on openhab version 3.1.0
now, on 3.2.0, I realize that the UI is extremely slow also on ios (all browsers).
galexey
(Alexey Grubauer)
March 1, 2023, 11:41am
7
Not sure since when, but now on 3.4.2. its again fast on iOS and still extremely slow on Android. I bought a quite fast Lenovo Tab and Openhab UI is still unusably slow (10 to 14 seconds to move from one page to another).
Its a pity that the nice UI is so slow which forces me to use the old basicUI. Also tried cometVisu which is super fast.