Hello,
I like the visualization of the locations on the overview page very much. Is there a way to use specific location-cards in own pages (e.g. layer pages), e.g. to split the locations to different pages.
I tried to copy the oh-location-card-component from the Overview YAML configuration to my own page but it’s not working.
Is there a way to reuse this awesome visualization?
Thanks!
Hello Community, I have also wondered about this, but unfortunately could not find anything. Does anyone have any idea what we are doing wrong?
Just to make sure that I got you right:
You would like to use a location (e.g. Living room) on the custom overview page?
It’s not possible to link to a location card, they can only be displayed in the Location tabs of the home page.
Thank you.
That’s so sad 
I really love the new things and the new UI in OH3.
And specifically the location look is awesome.
Because the MainUI seems to be much more reponsive than Habpanel, I think about migrating everything.
It’s a lot of work though, so starting with copying the locations would have been a great accelerator.
Is it somehow possible to display the location tab as default instead of the overview tab?
Also interested on how I can set the location tab as default.
Or get a direct link to this view like http://192.168.1.2:8080/location?
Me too 
I’ve created an issue for this:
If you have anything to add, feel free to comment this issue
@ysc for the ignorant of us who have no idea of the effort required - is this something that would be possible in the future?
Also wondering if its not possible for reasons mortals may not understand, could it be possible to expose the YAML of the card “at this time” we could copy to a personal widget - this would speed up statically creating personal widgets based on locations ENORMOUSLY, obviously as the location changes this would need to be redone if we were to keep the location card and the personal widget “the same”
I believe ther’s not YAML represewntation of the location card and it has a bit of more complexity than the other default widgets:
So i’m not sure if you’re able to recreate this. But Yannick is definitely the best person to answer this
Yeah I’m sure there is more to it than meets the eye just thought it would be a way to get location widgets up and running quick - I was thinking more of a “convert contents to yaml” than reading the source of the actual card. The way I have my old school site map is quick access items at the top with every room below - without basically recreating the location card on a page I can’t see how to do this quickly -
Other alternative could be to allow masonry on the location page?
Some other random musings - what about URLs directly to the Location page, even better a URL directly to each location card?
Could then have a “dummy” listcard with each location that when clicked goes to that specific location card?
That would be awesome!
i have a related question, would it be possible to add the tab´s of the overview page on every of my own created pages? I want to be more consistent and increase the usability. If i am now in a created page ( like Wohnzimmer ) i need to open the left navigation, click on the openhab logo to go back to the overview page first be able to use the bottom tabs again to eventually go to the location overview.
I have made 2 widgets like the location widget that you can use.
The first:
The tittle have a prop to open another page.
The image have a link to my Sonos widget and shows the current album cover or radio station.
The glance icons are replaced by 4 buttons and have props that can be linked to open the groupdetails of lights, temperatures, heating and cooling.
uid: Location_card_extended
tags:
- location
- extended
props:
parameters:
- description: Set the location name
label: Location name
name: Location_Name
required: false
type: TEXT
groupName: general
- description: Set the subname
label: Sub tittle
name: Sub_Tittle
required: false
type: TEXT
groupName: general
- context: page
label: Page to navigate to
name: targetPage
required: false
type: TEXT
groupName: general
- description: Set the Sonos player prefix
label: Sonos player
name: sonos_Prefix
required: false
type: TEXT
groupName: media
- context: item
description: Album Cover-art or other image
label: Cover-art
name: coverArt
required: false
type: TEXT
groupName: media
- description: Select a background card color eg.'rgb(57,60,76)' or 'lime'
label: Background color
name: Background_Color
required: false
type: TEXT
groupName: color
- context: item
description: Select group lights
label: Lights group
name: activeLights
required: false
type: TEXT
groupName: group
- context: item
description: Select group temperatures
label: Temperatures group
name: groupTemperatures
required: false
type: TEXT
groupName: group
- context: item
description: Select actual room temperature
label: Temperature item
name: RoomTemperature
required: false
type: TEXT
groupName: state
- context: item
description: Select the heating setpoint temperature for the room
label: Heating setpoint item
name: HeatSetpoint
required: false
type: TEXT
groupName: state
- description: Select icon color heating valve state
label: Heating valve icon color
name: heatingValve
required: false
type: TEXT
groupName: color
- context: item
description: Select the cooling setpoint temperature for the room
label: Cooling setpoint item
name: CoolingSetpoint
required: false
type: TEXT
groupName: state
parameterGroups:
- name: general
label: General settings
- name: color
label: Color settings
- name: group
label: Buttons group settings
- name: state
label: Items state settings
- name: media
label: Sonos settings
- name: actionHeating
context: action
label: Action Heating button
- name: actionCooling
context: action
label: Action Cooling button
timestamp: Feb 27, 2021, 8:53:46 PM
component: f7-card
config:
padding: true
style:
position: relative
border-radius: 15px
border-color: lime
height: 200px
background-color: =(props.Background_Color)
slots:
default:
- component: f7-card-content
config:
padding: true
slots:
default:
- component: oh-link
config:
visible: true
color: white
action: popup
actionModal: =props.targetPage
class:
- no-padding
- no-margin
style:
width: 65%
height: 60%
position: absolute
top: 0
left: 0
z-index: 98
- component: Label
config:
text: =(props.Location_Name)
style:
height: 45px
position: relative
left: 0px
top: -5px
letter-spacing: .75px
font-size: min(max(28px, 4vw), 30px)
font-weight: 600
color: white
- component: Label
config:
text: =(props.Sub_Tittle)
style:
height: 35px
position: relative
left: 0px
top: -12px
width: 100%
letter-spacing: .75px
font-size: min(max(20px, 4vw), 25px)
color: rgba(255,255,255,.9)
- component: oh-image
config:
item: =props.coverArt
visible: "=props.coverArt ? true : false"
action: popup
actionModal: widget:Sonos_Player
actionModalConfig:
itemTitle: =props.sonos_Prefix + "_MediaTitle"
itemCover: =props.sonos_Prefix + "_CurrentAlbumCoverArt"
propWidgetTitle: = "Sonos " + (props.Location_Name)
itemArtist: =props.sonos_Prefix + "_MediaArtist"
itemPlayer: =props.sonos_Prefix + "_MediaControl"
itemVolume: =props.sonos_Prefix + "_Volume"
itemShuffle: =props.sonos_Prefix + "_Shuffle"
itemRepeat: =props.sonos_Prefix + "_Repeat"
propZoneName: =(props.Location_Name)
style:
position: absolute
right: 15px
top: 20px
height: 100px
width: 100px
- component: oh-button
config:
action: group
actionGroupPopupItem: =props.activeLights
raised: true
round: true
text: =items[props.activeLights].state.split(".")[0]
visible: "=props.activeLights ? true : false"
color: white
iconMaterial: lightbulb
iconSize: 18px
iconColor: white
style:
position: relative
width: 106px
font-size: 16px
top: 0px
left: -13px
text-align: left
- component: f7-row
config:
style:
position: absolute
top: 125px
height: 25px
left: 5px
slots:
default:
- component: oh-button
config:
action: group
actionGroupPopupItem: =props.groupTemperatures
raised: true
round: true
text: =items[props.RoomTemperature].state
visible: "=props.RoomTemperature ? true : false"
color: white
iconF7: thermometer
iconSize: 18px
iconColor: white
style:
position: relative
width: 106px
font-size: 16px
left: -1px
text-align: left
- component: oh-button
config:
actionPropsParameterGroup: actionHeating
outline: false
raised: true
round: true
text: =items[props.HeatSetpoint].state
visible: "=props.HeatSetpoint ? true : false"
color: white
iconF7: flame
iconSize: 18px
iconColor: =props.heatingValve
style:
position: relative
Top: 200px
width: 105px
font-size: 16px
text-align: left
- component: oh-button
config:
actionPropsParameterGroup: actionCooling
outline: false
raised: true
round: true
text: =items[props.CoolingSetpoint].state
visible: "=props.CoolingSetpoint ? true : false"
color: white
iconMaterial: ac_unit
iconSize: 19px
iconColor: white
style:
position: relative
Top: 200px
width: 106px
font-size: 16px
text-align: left
The second is the same but have 9 buttons that you can completely set by props, what you want
These works easily on a smartphone
uid: card_expandable
tags:
- extended
- card
- buttons
props:
parameters:
- description: Header text of the card
label: Header
name: header
required: false
type: TEXT
groupName: general
- description: Sub-header text of the card
label: Sub header
name: sub_header
required: false
type: TEXT
groupName: general
- context: page
label: Page to navigate to
name: targetPage
required: false
type: TEXT
groupName: general
- description: Select a background card color eg.'rgb(57,60,76)' or 'lime'
label: Background color
name: background_color
required: false
type: TEXT
groupName: general
- description: Material base icon of the card eg. 'reorder, home ...'
label: Base icon
name: base_icon
required: false
type: TEXT
groupName: general
- description: Button material icon eg. 'lightbulb ...'
label: Button 1 icon
name: b1_icon
required: false
type: TEXT
groupName: b1
- context: item
label: Button 1 item
name: b1_item
required: false
type: TEXT
groupName: b1
- description: Button material icon eg. 'local_fire_department ...'
label: Button 2 icon
name: b2_icon
required: false
type: TEXT
groupName: b2
- context: item
label: Button 2 item
name: b2_item
required: false
type: TEXT
groupName: b2
- description: Button material icon eg. 'ac_unit ...'
label: Button 3 icon
name: b3_icon
required: false
type: TEXT
groupName: b3
- context: item
label: Button 3 item
name: b3_item
required: false
type: TEXT
groupName: b3
- description: Button f7 icon eg. 'temperauture ...'
label: Button 4 icon
name: b4_icon
required: false
type: TEXT
groupName: b4
- context: item
label: Button 4 item
name: b4_item
required: false
type: TEXT
groupName: b4
- description: Button f7 icon eg. 'speaker ...'
label: Button 5 icon
name: b5_icon
required: false
type: TEXT
groupName: b5
- context: item
label: Button 5 item
name: b5_item
required: false
type: TEXT
groupName: b5
- description: Button material icon eg. 'tv ...'
label: Button 6 icon
name: b6_icon
required: false
type: TEXT
groupName: b6
- context: item
label: Button 6 item
name: b6_item
required: false
type: TEXT
groupName: b6
- description: Button material icon eg. 'ac_unit ...'
label: Button 7 icon
name: b7_icon
required: false
type: TEXT
groupName: b7
- context: item
label: Button 7 item
name: b7_item
required: false
type: TEXT
groupName: b7
- description: Button material icon eg. 'camera_indoor, videocam ...'
label: Button 8 icon
name: b8_icon
required: false
type: TEXT
groupName: b8
- context: item
label: Button 8 item
name: b8_item
required: false
type: TEXT
groupName: b8
- description: Button material icon eg. 'camera_outdoor ...'
label: Button 9 icon
name: b9_icon
required: false
type: TEXT
groupName: b9
- context: item
label: Button 9 item
name: b9_item
required: false
type: TEXT
groupName: b9
parameterGroups:
- name: general
label: General settings
- name: b1
context: action
label: Button 1
- name: b2
context: action
label: Button 2
- name: b3
context: action
label: Button 3
- name: b4
context: action
label: Button 4
- name: b5
context: action
label: Button 5
- name: b6
context: action
label: Button 6
- name: b7
context: action
label: Button 7
- name: b8
context: action
label: Button 8
- name: b9
context: action
label: Button 9
timestamp: Feb 20, 2021, 1:53:29 PM
component: f7-card
config:
style:
min-width: 300px
height: 200px
border-radius: 15px
background-color: =props.background_color
slots:
default:
- component: f7-card-content
config:
padding: false
slots:
default:
- component: oh-link
config:
text: =(props.header)
action: popup
actionModal: =props.targetPage
style:
height: 45px
position: relative
left: 15px
top: 10px
letter-spacing: .75px
font-size: min(max(28px, 4vw), 30px)
font-weight: 600
color: white
- component: Label
config:
text: =(props.sub_header)
style:
height: 35px
position: relative
left: 15px
top: 0px
width: 100%
letter-spacing: .75px
font-size: min(max(20px, 4vw), 25px)
color: rgba(255,255,255,.9)
- component: oh-link
config:
action: popup
actionModal: =props.targetPage
iconMaterial: =props.base_icon
iconOnly: true
iconColor: white
iconSize: 60px
style:
position: absolute
top: 15px
right: 15px
- component: f7-col
slots:
default:
- component: oh-button
config:
round: true
raised: true
text: =items[props.b1_item].state
textColor: white
iconMaterial: =props.b1_icon
actionPropsParameterGroup: b1
visible: "=props.b1_icon ? true : false"
style:
position: absolute
width: 33%
top: 90px
left: 0%
font-size: 15px
text-align: left
- component: oh-button
config:
round: true
raised: true
text: =items[props.b4_item].state
textColor: white
iconF7: =props.b4_icon
actionPropsParameterGroup: b4
visible: "=props.b4_icon ? true : false"
style:
position: absolute
width: 33%
top: 90px
left: 33%
font-size: 15px
text-align: left
- component: oh-button
config:
round: true
raised: true
text: =items[props.b7_item].state
textColor: white
iconMaterial: =props.b7_icon
actionPropsParameterGroup: b7
visible: "=props.b7_icon ? true : false"
style:
position: absolute
width: 33%
top: 90px
right: 0px
font-size: 15px
text-align: left
- component: f7-col
- component: oh-button
config:
round: true
raised: true
text: =items[props.b2_item].state
textColor: white
iconMaterial: =props.b2_icon
actionPropsParameterGroup: b2
visible: "=props.b2_icon ? true : false"
style:
position: absolute
width: 33%
top: 125px
left: 0px
font-size: 15px
text-align: left
- component: oh-button
config:
round: true
raised: true
text: =items[props.b5_item].state
textColor: white
iconF7: =props.b5_icon
actionPropsParameterGroup: b5
visible: "=props.b5_icon ? true : false"
style:
position: absolute
width: 33%
top: 125px
left: 33%
font-size: 15px
text-align: left
- component: oh-button
config:
round: true
raised: true
text: =items[props.b8_item].state
textColor: white
iconMaterial: =props.b8_icon
actionPropsParameterGroup: b8
visible: "=props.b8_icon ? true : false"
style:
position: absolute
width: 33%
top: 125px
right: 0px
font-size: 15px
text-align: left
- component: f7-col
- component: oh-button
config:
round: true
raised: true
text: =items[props.b3_item].state
textColor: white
iconMaterial: =props.b3_icon
actionPropsParameterGroup: b3
visible: "=props.b3_icon ? true : false"
style:
position: absolute
width: 33%
top: 160px
left: 0px
font-size: 15px
text-align: left
- component: oh-button
config:
round: true
raised: true
text: =items[props.b6_item].state
textColor: white
iconMaterial: =props.b6_icon
actionPropsParameterGroup: b6
visible: "=props.b6_icon ? true : false"
style:
position: absolute
width: 33%
top: 160px
left: 33%
font-size: 15px
text-align: left
- component: oh-button
config:
round: true
raised: true
text: =items[props.b9_item].state
textColor: white
iconMaterial: =props.b9_icon
actionPropsParameterGroup: b9
visible: "=props.b9_icon ? true : false"
style:
position: absolute
width: 33%
top: 160px
right: 0px
font-size: 15px
text-align: left
very nice widgets, Philippe. I will come back to them for some use cases on my overview page. I am not sure if this was in reply to my question.
Let me re-phrase my question: Simply speeking my desire is wherever i am in my different pages selected from the left menu i want to keep the same bottom navigation visible like in the overview page. Is this possible or not and if yes how and if no is it related to the above discussion?
Hi Jan,
I have searched like you to have the same bottom navigation on my pages but I don’t think this is possible.
I open my pages as a popup then you have a “back” link on the top of the popup.
Otherwise you can add a close page button or link on your page, these are the only options I have found.
I recreate the location widgets to use on my overview and all my other pages, and if you want I have create other ones.
Feel free to ask.
Philippe
Hey Philippe
I really like your widgets, thanks! As I never worked with widgets before, I have some questions.
What I was wondering is how can I disable the color of the text and the background. I would like them to follow the general layout/colorscheme, because of dark/light mode on macOS/iOS…
Thanks in advance!
Bruno
Hello Philippe,
These widget seem to comply with my need.
I also have some Sonos, lights and room temperature and setpoint.
I will investigate soon how to use them and configure to adapt to my configuration.
As this post is already old, in case you would have a more recent update of this nice widget, thank you to share it.