Sorry, there was a small ambiguity in my quick write up. It appears that deskhall is the actual name of the item you are using, so there are two ways to reference the item data stored in the items object. If you have the exact name of the item then you can use a direct items.deskhall.state. The [] version can be used when the item name is stored in a variable or is a result of some other string operation, so it requires a string between the brackets: items["deskhall"].state.
1 Like
@JustinG thnx mate it works fine now plus i learned something very usefull
another thing i would like to ask is that i see everyone has nice background photos for their location tabs at mainui.Kitchen,livingroom,bathroom photos etc…Where can i find them and where to place the jpg so i can set them as a background?
thnx
You need to place the place the .jpg files in the HTML folder in the OPENHAB_CONF path
Then configure the Location Card to use those jpgs
I just use pictures taken with my phone…
1 Like
Hi modified the the “Cell_Light_Card” widget with a second slider, and for this i want to add a second header “Set Props” as shown int the image. But i failed with adding a second “- component: Label”. I can’t get it in the right place. Sorry but my coding skills are very low, can somebody help me.
uid: Cell_Light_Card_2
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
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: Item to control on/off
label: Item
name: item_schalter
required: false
type: TEXT
- context: item
description: Item to control brightness
label: Item
name: item_brightness
required: false
type: TEXT
- context: item
description: Item to control temperature
label: Item
name: item_temperature
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 12, 2022, 8:31:49 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 190px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
bottom: -15px
flex-direction: row
left: 16px
position: absolute
slots:
default:
- component: Label
config:
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
text: "=props.header ? props.header : 'Set Props'"
- component: oh-slider
config:
item: =props.item_brightness
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
bottom: -75px
left: 20px
position: absolute
width: calc(100% - 40px)
- component: oh-slider
config:
item: =props.item_temperature
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
bottom: -140px
left: 20px
position: absolute
width: calc(100% - 40px
- component: oh-toggle
config:
item: =props.item_schalter
style:
position: absolute
right: 20px
top: 15px
How did you get it to read the timeframe from now → now - 24 hrs? If I make a graph with a day element, it alsways displays from 00:00 - 23:59 for today…
Thanks
Hi @j67,
you can just add another component like the first label. You have to play with the style config “bottom” of this component so that it fits your expectations.
Maybe this helps as a start:
uid: Cell_Light_Card_2
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Header big sized (Slider 1)
label: Header
name: header
required: false
type: TEXT
- description: Header big sized (Slider 2)
label: Header
name: header2
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- context: item
description: Item to control on/off
label: Item
name: item_schalter
required: false
type: TEXT
- context: item
description: Item to control brightness
label: Item
name: item_brightness
required: false
type: TEXT
- context: item
description: Item to control temperature
label: Item
name: item_temperature
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 12, 2022, 8:31:49 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 190px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
bottom: -15px
flex-direction: row
left: 16px
position: absolute
slots:
default:
- component: Label
config:
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
text: "=props.header ? props.header : 'Set Props'"
- component: oh-slider
config:
item: =props.item_brightness
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
bottom: -75px
left: 20px
position: absolute
width: calc(100% - 40px)
- component: f7-block
config:
style:
bottom: -95px
flex-direction: row
left: 16px
position: absolute
slots:
default:
- component: Label
config:
style:
font-size: 17px
font-weight: 600
margin-left: 0px
margin-top: 0px
text: "=props.header2 ? props.header2 : 'Set Props Slider 2'"
- component: oh-slider
config:
item: =props.item_temperature
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 20px
bottom: -145px
left: 20px
position: absolute
width: calc(100% - 40px
- component: oh-toggle
config:
item: =props.item_schalter
style:
position: absolute
right: 20px
top: 15px
On my OH3 this looks like this:
Cheers
Jonathan
I love this and use it successfully for CPU load and MEM load (chart below):
But when I use this widget for my download / upload stats, I don’t see a chart.
I assume it must be related to the item itself (here download), but I don’t see a difference between the MEM item and the download item (both number an no semantic class).
However, the MEM from the systemInfo binding reports a percentage, which is not the case fot the download of course (pure number).
The item view in main-ui does not show a chart either (clicking analyze it does):
whereas the MEM does:
So what’s the difference and how to solve this?
Thanks in advance
does no one have an idea what might be different here?
Please help!
Thank you.
This is great! thanks man! I just added a line to show when I need to bring the trash out which is in fact a day before 
so I edited the component which shows the date in the yaml with a dayjs switch like this:
text: “=items[props.item_date].displayState == dayjs().add(1, ‘day’).format(‘DD.MM.YYYY’) ? items[props.item].state+’ heute raus stellen!’ : items[props.item].state”
@ kuczerek → very nice Dashboard.
I will definitely use your inputs to get my Dash working. Can you share the widgets also for:
“Livevisu Linkkarte mit Status Übersicht”, “Trenner” and “Livevisu Titel”.
thx.
Hey, I had the same issue and started investigating the item states.
It turned out that when the State Description’s pattern results the same string as the state, then the displayState is not initialized 
So I’ve just changed one line in the widget for the humidity label to this:
text: "=items[props.humidity_item].displayState ? items[props.humidity_item].displayState : items[props.humidity_item].state"
I tried to use some widgets but I have problem if I try to set fixed layout. Can you help me where can be the problem?
How did you build the shutter preset slider? I’m only at a selection popup so far, but of course such a slider looks very good. Does it have breakpoints for the individual values or are they not preset values at all, just a scale?
English please, this is an international community!
great ideas here.
im finding it difficult to convert to time to show how long since last seen.
could you share you rule and corresponfding items please
Many thanks
1 Like
its all good, after a few hours i managed to get it working 
I have an item named ‘Entered_Code’ that passes a code to my alarm rule, a night or away alarm arms based on the code, this all works fine when using the keypad widget on its own.
the issue i have is when i use the keypad as a popup, it doesnt work, HELP please. popup appears and functions but the entered code isnt passed to the ‘Entered_Code’ item after send if hit. also doesnt close on send
main widget
uid: Alarm_status
tags: []
props:
parameters:
- description: Alarm Status
name: label
required: false
type: TEXT
- context: item
description: Full Alarm Status Item
label: Item
name: full_alarm
required: false
type: TEXT
- context: item
description: Night Alarm Status Item
label: Item
name: night_alarm
required: false
type: TEXT
- context: item
description: Item to send the pincode to
label: Item
name: Entered_Code
required: true
type: TEXT
timestamp: Jun 27, 2022, 12:05:06 AM
component: oh-label-cell
config:
action: popup
actionModal: widget:keypad
actionModalConfig:
item: =props.Entered_Code
popoverClose: true
color: '= (items[props.full_alarm].state === "ON") ? "red" : (items[props.night_alarm].state === "ON") ? "orange" : "green"'
expandable: false
header: = props.label
icon: '= (items[props.full_alarm].state === "ON") ? "oh:siren-on" : (items[props.night_alarm].state === "ON") ? "oh:siren-on" : "oh:siren-off"'
label: '= (items[props.full_alarm].state === "ON") ? "Full Alarm is Armed" : (items[props.night_alarm].state === "ON") ? "Night Alarm is Armed" : "The Alarm is Disarmed"'
on: true
Keypad popup
uid: keypad
tags: []
props:
parameters:
- context: item
description: Item to send the pincode to
label: Item
name: item
required: false
type: TEXT
- description: Replace pincode characters with this string, leave blank to show it as-is
label: Mask character
name: mask
required: false
type: TEXT
- description: If this widget is shown in a popup, close it after pressing Send
label: Close Popup on Send
name: closePopup
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Jun 27, 2022, 2:26:16 PM
component: f7-block
config:
class:
- padding
label: Please Input Pin
style:
--f7-button-bg-color: var(--f7-card-bg-color)
--f7-button-text-color: var(--f7-text-color)
--f7-theme-color-rgb: var(--f7-color-blue-rgb)
slots:
default:
- component: oh-label-card
config:
class:
- margin-bottom
label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
outline: true
- component: f7-row
config:
class:
- margin
slots:
default:
- component: oh-repeater
config:
for: digit
fragment: true
in:
- "1"
- "2"
- "3"
- "4"
- "5"
- "6"
- "7"
- "8"
- "9"
- "*"
- "0"
- "#"
slots:
default:
- component: f7-col
config:
class:
- margin-vertical-half
width: "33"
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: pincode
actionVariableValue: "=(vars.pincode) ? vars.pincode + loop.digit : loop.digit"
large: true
raised: true
text: =loop.digit
- component: f7-row
config:
class:
- margin
style:
--f7-button-bg-color: transparent
--f7-theme-color: var(--f7-color-blue)
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: pincode
actionVariableValue: ""
large: true
text: Clear
- component: f7-col
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =vars.pincode
actionItem: =(props.item) || 'TestString'
class: "=(props.closePopup) ? ['popup-close'] : []"
clearVariable: pincode
popoverClose: true
disabled: =!vars.pincode
fill: true
large: true
style:
--f7-button-hover-bg-color: var(--f7-color-blue-tint)
--f7-button-pressed-bg-color: var(--f7-color-blue-tint)
text: Send
- component: f7-col
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: pincode
actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0, vars.pincode.length - 1) : ""'
large: true
text: Back
Hey @Christopher_Haas,
it took a while, but here are the widgets:
Livevisu Linkkarte mit Status Übersicht
uid: Livevisu Linkkarte mit Status Übersicht
tags:
- Live
- MainUI
props:
parameters:
- label: Title
name: title
required: false
type: TEXT
- label: f7 Icon Titel
name: icon_titel
required: false
type: TEXT
- label: f7 Icon normal
name: icon
required: false
type: TEXT
- label: Status Präfix
name: praefix
required: false
type: TEXT
- label: Status Suffix
name: suffix
required: false
type: TEXT
- context: item
label: Statusitem
name: status
required: false
type: TEXT
- description: rgba oder HEX
label: Hintergrundfarbe
name: bgcolor
required: false
type: TEXT
- description: rgba oder HEX
label: Hintergrundfarbe bei Statusitem > 0 oder ON
name: bgcolor_active
required: false
type: TEXT
- description: Popup Seite
label: Page ID
name: page
required: false
parameterGroups: []
timestamp: Dec 13, 2021, 2:27:25 PM
component: f7-card
config:
style:
noShadow: false
padding: 0px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=items[props.status].state > 0 ? (props.bgcolor_active ? props.bgcolor_active : '') : (items[props.status].state == 'ON' ? (props.bgcolor_active ? props.bgcolor_active : '') : (props.bgcolor ? props.bgcolor : ''))"
height: 150px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: "=props.icon_titel ? props.icon_titel : ''"
size: 18
style:
margin-right: 10px
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 12px
margin-top: 0px
- component: f7-block
config:
style:
position: absolute
bottom: -90px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: "=props.icon ? props.icon : ''"
size: 100
- component: f7-block
config:
style:
position: absolute
top: 128px
right: 0px
slots:
default:
- component: Label
config:
text: "=props.praefix ? (props.suffix ? props.praefix + items[props.status].displayState + props.suffix : props.praefix + items[props.status].displayState ) : (props.suffix ? items[props.status].displayState + props.suffix : items[props.status].displayState )"
style:
margin-right: 10px
- component: oh-link
config:
action: navigate
actionPageTransition: f7-dive
actionPage: ='page:' + props.page
style:
position: absolute
left: 0px
top: 0px
height: 150px
width: 100%
Livevisu Titel
uid: Livevisu Titel
tags:
- Live
- MainUI
props:
parameters:
- label: Titel
name: header
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 28, 2021, 5:43:20 PM
component: f7-card
config:
content: "=props.header ? props.header : 'Set Props'"
noBorder: true
noShadow: true
outline: false
padding: false
style:
--f7-card-bg-color: var(--f7-page-bg-color)
font-size: 20px
font-weight: 600
text-align: center
Livevisu Trenner
uid: Livevisu Trenner
tags:
- Live
- MainUI
props:
parameters:
- label: Titel
name: header
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 29, 2021, 8:32:55 AM
component: f7-card
config:
content: "=props.header ? props.header : 'Set Props'"
noBorder: true
noShadow: true
outline: false
padding: false
style:
--f7-card-bg-color: var(--f7-page-bg-color)
font-size: 30px
font-weight: 600
321 posts were merged into an existing topic: [OH3] Main UI - New „main_widget“ - development and testing [WIP]