hmmm. strange. For my setup the GitHub version did a reordering in the order I defined with defaultWidgetOrderIndex.
We should think about the ordering - but perhaps not at this state.
Never mind, nearly finished fixing ordering and coloring….
Will then combine it with latest changes/additions and upload new version to marketplace.
If everything works well, should be available tonight….
Hmm, still not having the buttons down the lower end of the screen.
Did I miss a change, what is the setting for that ?
Nevermind, I have found it.
At all, new version is available in marketplace.
@rubenfuser still have to check the widgets/chnges you have sent via PM…
No problem 
last marketplace version is already with new layout covering all the screen for iphone? Buttons have all new alignments to bottom of the screen?
Yes, should have, unless I missed something.
Added the margin top and bottom setings, so should fit now.
Looking at your screenshot, did you make changes to the bottom menu ?
looks different than the version we are working on.
I second that.
We might run into issues when we start to extend the bottom-tabs with additional info badges/chips for alarms or numbers of something.
Yes i was testing graphical colors and visual, and,as suggested, added Energy button at the bottom menu. Nothing particular.
In main widget yaml,have you added also rollershutter automatic label?
No, missed the rollershutter on…
Will add it tomorrow when I am back in my office…
Can you post this changes, really like it.
1 Like
Ok but with this one, you’d better check block margins (mine are bigger then last yours), this includes rollershutter automatic label, and energy button.
uid: main_widget_evil
tags: []
props:
parameters:
- default: black
description: Set default color for Text
label: Text color
name: textColor
required: false
type: TEXT
- default: Somewhere
description: Name for your weather location
label: Weather Location
name: locationTitle
required: false
type: TEXT
- context: item
description: Name of scenes group item
label: Scenes Group
name: scenesGroup
required: false
type: TEXT
- context: item
description: Name of security group item
label: Security Group
name: securityGroup
required: false
type: TEXT
- context: item
description: Security Mode Item
label: Security Mode
name: securityMode
required: true
type: TEXT
parameterGroups: []
timestamp: Sep 22, 2022, 8:56:05 AM
component: f7-block
config:
style:
display: flex
flex-direction: column
height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-safe-area-top))
justify-content: space-between
margin: 0
padding: 0
slots:
default:
- 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-repeater
config:
for: baseMenu
fragment: true
in:
- name: Home
- name: Floors
- name: Rooms
map: loop.baseMenu.name
sourceType: array
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: ="SECTION" + loop.baseMenu_idx
large: true
style:
color: '=vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx ? textColor : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.baseMenu
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: space-between
width: 100%
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION0") ? true : false : false'
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: buttonIndexHome
actionVariableValue: =(vars.buttonIndexHome || 0) - 1
iconF7: chevron_left
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: oh-repeater
config:
for: menuArray
fragment: true
sourceType: itemsWithTags
itemTags: Home
fetchMetadata: widgetOrder
map: loop.menuArray_source
slots:
default:
- component: f7-row
config:
style:
display: flex
height: 2em
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
for: menuButtonHome
fragment: true
in: =loop.menuArray
filter: loop.menuArray_idx == 0
map: ((loop.menuButtonHome.metadata && loop.menuButtonHome.metadata.widgetOrder && loop.menuButtonHome.metadata.widgetOrder.value) || 0).toString().padStart(3,'0') + '&' + loop.menuButtonHome_idx
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: floor
actionVariableValue: =loop.menuArray[loop.menuButtonHome_source.sort()[loop.menuButtonHome_idx].split('&')[1]].name
style:
flex: 0 0 auto
height: 2em
order: =(((vars.buttonIndexHome || 0) % loop.menuButtonHome_source.length) + loop.menuButtonHome_source.length + loop.menuButtonHome_idx) % loop.menuButtonHome_source.length
text: =loop.menuArray[loop.menuButtonHome_source.sort()[loop.menuButtonHome_idx].split('&')[1]].label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexHome
actionVariableValue: =(vars.buttonIndexHome || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: space-between
width: 100%
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION1") ? true : false : false'
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: buttonIndexFloor
actionVariableValue: =(vars.buttonIndexFloor || 0) - 1
iconF7: chevron_left
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: f7-row
config:
style:
display: flex
height: 2em
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,uiSemantics
for: menuButtonFloor
fragment: true
itemTags: Floor
map: loop.menuButtonFloor_source[(((vars.buttonIndexFloor || 0) % loop.menuButtonFloor_source.length) + loop.menuButtonFloor_source.length + loop.menuButtonFloor_idx) % loop.menuButtonFloor_source.length]
sourceType: itemsWithTags
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: floor
actionVariableValue: =loop.menuButtonFloor.name
style:
color: '=vars.floor ==loop.menuButtonFloor.name ? textColor : "#8C8C8C"'
flex: 0 0 auto
height: 2em
text-decoration: underline
text-decoration-color: '=vars.floor ==loop.menuButtonFloor.name ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.menuButtonFloor.label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexFloor
actionVariableValue: =(vars.buttonIndexFloor || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: space-between
width: 100%
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION2") ? true : false : false'
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: buttonIndexRoom
actionVariableValue: =(vars.buttonIndexRoom || 0) - 1
iconF7: chevron_left
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: f7-row
config:
style:
display: flex
height: 2em
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,uiSemantics
for: menuButtonRoom
fragment: true
itemTags: =vars.floor
map: loop.menuButtonRoom_source[(((vars.buttonIndexRoom || 0) % loop.menuButtonRoom_source.length) + loop.menuButtonRoom_source.length + loop.menuButtonRoom_idx) % loop.menuButtonRoom_source.length]
sourceType: itemsWithTags
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: room
actionVariableValue: =loop.menuButtonRoom.name
style:
color: '=vars.room ==loop.menuButtonRoom.name ? textColor : "#8C8C8C"'
flex: 0 0 auto
height: 2em
text-decoration: underline
text-decoration-color: '=vars.room ==loop.menuButtonRoom.name ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.menuButtonRoom.label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexRoom
actionVariableValue: =(vars.buttonIndexRoom || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: f7-block
config:
style:
flex: 1 1 auto
overflow: scroll
margin-top: -10px
slots:
default:
- component: widget:main_widget_Weather_Card
config:
bigCard: true
dateFormat: true
itemPrefix: OneCallAPIweatherandforecast_
locationTitle: =props.locationTitle
sunIndicator: true
visible: '=(!vars.objVar || ((vars.objVar.selectSection=="SECTION0") && !vars.objVar.selectThing)) ? true : false'
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: sceneItem
groupItem: =props.scenesGroup
sourceType: itemsInGroup
slots:
default:
- component: widget:main_widget_Scene_Card
config:
scene: =loop.sceneItem.name
sceneName: =loop.sceneItem.label
visible: '=vars.objVar ? ((vars.objVar.selectSection + vars.objVar.selectThing)=="SECTION0Scenes") ? true : false : false'
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: loop.equipmentItem.metadata.semantics.config.hasLocation == vars.room
for: equipmentItem
itemTags: Blinds
sourceType: itemsWithTags
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: '(loop.shutterItem.type=="Rollershutter") ? true : false'
for: shutterItem
groupItem: =loop.equipmentItem.name
sourceType: itemsInGroup
slots:
default:
- component: widget:main_widget_Rollershutter_Card
config:
RollerItem: =loop.shutterItem.name
RollerTitle: =loop.shutterItem.label
visible: '=vars.objVar.selectThing=="Rollers" ? true : false'
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: loop.equipmentItem.metadata.semantics.config.hasLocation == vars.room
for: equipmentItem
itemTags: Lightbulb
sourceType: itemsWithTags
slots:
default:
- component: widget:test:Light_Card_Type
config:
equipmentItem: =loop.equipmentItem.name
visible: '=vars.objVar.selectThing=="Lights" ? true : false'
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: loop.equipmentItem.metadata.semantics.config.hasLocation == vars.room
for: equipmentItem
itemTags: RadiatorControl
sourceType: itemsWithTags
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: tempItem
groupItem: =loop.equipmentItem.name
sourceType: itemsInGroup
slots:
default:
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: '=vars.objVar.selectThing=="Climate" ? true : false'
widgettrend: =loop.tempItem.name
- component: widget:main_widget_Security_Card
config:
securityGroup: =props.securityGroup
securityMode: =props.securityMode
visible: '=vars.objVar ? ((vars.objVar.selectSection + vars.objVar.selectThing)=="SECTION0Security") ? true : false : false'
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.objVar.selectSection + vars.floor
visible: "=vars.objVar ? true : false"
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION0") ? true : false : false'
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
style:
--f7-segmented-strong-between-buttons: 0px
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 300
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.15)
--f7-segmented-strong-padding: 0px
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Security
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Security" ? true : false'
icon-f7: shield_fill
iconColor: green
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Security" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Security" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Security" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Security
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Scenes
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Scenes" ? true : false'
icon-f7: rectangle_on_rectangle_angled
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Scenes" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Scenes" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Scenes" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Scenes
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Weather
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Weather" ? true : false'
icon-f7: cloud
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Weather" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Weather" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Weather" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Weather
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: HVAC
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="HVAC" ? true : false'
icon-f7: flame
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="HVAC" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="HVAC" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="HVAC" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: HVAC
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
margin-top: -20px
margin-bottom: -80px
margin-left: 5px
margin-right: 5px
background: linear-gradient(to bottom, rgb(50, 50, 50, 1.0) 30%, rgb(255, 255, 255, 0.5) 100%)
border-radius: 0px 0px 10px 10px
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION0") ? false : true : false'
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
style:
--f7-segmented-strong-between-buttons: 0px
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 300
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.15)
--f7-segmented-strong-padding: 0px
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Lights
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Lights" ? true : false'
icon-f7: lightbulb
iconColor: '=vars.objVar.selectThing=="Lights" ? "white" : "black"'
iconSize: 20
style:
--f7-button-bg-color: transparent
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Lights" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Lights" ? "white" : "black"'
font-size: 12px
height: auto
text: Lights
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Climate
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Climate" ? true : false'
icon-f7: snow
iconColor: '=vars.objVar.selectThing=="Climate" ? "white" : "black"'
iconSize: 20
style:
--f7-button-bg-color: transparent
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Climate" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Climate" ? "white" : "black"'
font-size: 12px
height: auto
text: Climate
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Rollers
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Rollers" ? true : false'
icon-f7: archivebox
iconColor: '=vars.objVar.selectThing=="Rollers" ? "white" : "black"'
iconSize: 20
style:
--f7-button-bg-color: transparent
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Rollers" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Rollers" ? "white" : "black"'
font-size: 12px
height: auto
text: Rollers
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Energy
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Energy" ? true : false'
icon-f7: bolt
iconColor: '=vars.objVar.selectThing=="Energy" ? "white" : "black"'
iconSize: 20
style:
--f7-button-bg-color: transparent
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Energy" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Energy" ? "white" : "black"'
font-size: 12px
height: auto
text: Energy
I have a question, what do you think if central block move behind bottom menu?
Bottom menu in this version is already faded to transparent…
@Nic0205 @Dimitris @rubenfuser
I was just starting to think if we should make the middle part of the main_widget somehow more modular by moving it into a separate floor and room widget.
From my perspective, this might make maintanance and code reading easier.
WDYT?
Sorry,i’m too noob to understand this 
Thanks!
Sounds good to me.
ATM, we have all code for information shown for the rooms in rge main widget code.
I was thinking to „cut“ this out and transfere it to a separate main_widget_Room_Card, and at a further step introduce a floor card as well.
So if a floor is selected, the floor card with its information is shown, if a room is selected, the room card is shown.
Does this explain it better?
Yes! For me no problem! About code structure i leave all to you guys,i just study it to increase my knowledge.
Just to be sure what you mean:
The central block should overlay the bottom menu, correct?
sounds pretty cool. It seems to me that the main problem will be to loop the variables trough the widgets - or do you have an other approach?
If you have a poc of this approach would be nice if you could share it…