Welcome to the club . It’s indentation problem , that’s how the code works .
Some lines must start at same column. First Config must be inline with component above and slots below . Default is indented few columns (usually hitting tab ). Second config is already in line with above component you dont have to move it…etc . Use space and backspace to organize it
As you indent it properly red underline will be removed .
component: oh-toggle-item
config:
action: toggle
actionModal: widget: your_time_widget
actionModalConfig:
item: tea
timeFormat: "24"
icon: your_icon
iconUseState: true
item: your_item_for_state_display
title:
actionItem: your_item_for_toggle_action
slots: null
My code was from wigdets dev tool. Appears UI needs a bit diff code . Try instead this code with UI blocks . And also “create list card” , + , "add list item " ← instead choose “toogle list item” to get a switch inside .
Im still new to this and still experimenting.
Thank you very much for the Widget. I got it working with a DateTime Item as mentioned above. The goal would be to run a rule every day on the time adjusted with the widget. Usually this is done with a cron job. However, only constants can be used to my knowledge. Has anybody got that working?
HI,
I use a cron job that runs every minute and compares the current time with the item value set by the widget. If they match I execute the logic. This approach survives even OH restart compared to the future jobs…
BR
hello everyone, i’m using this widget,but since the OH 4.0 has been released, and it uses jdk 17, this widget has stopped to work because nashorn binding doesn’t support jdk 17 the line to manipulate hours and minutes, is not working anymore.
is there a way to do the same thing using another scripting language?
in particular i would like to edit this one:
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
@JustinG, i’ve seen you have helped another user about the dayjs some years ago, so i tagged you in this request.
@hmerk, have you already solved this on your rollershutter of main widget?
i’ve thought to treat the item like a setpoint item, but the time needs to be splitted and then joined again…in this is out of my little knowledge.
can anyone help me please?
There is no openHAB 4 release and please don‘t expect everything working on early SNAPSHOTS.
We have not looked into oh4 for the main widget and this will take more time.
Yes i meant oh4 snapshot release,and yes i know that could be “risky”…
As you are brave enough to install 4.0 snapshot, you might want to try to install the NASHORN addon:
see /settings/addons/marketplace:134770
It may give you some compatibility…
at your own risk 
I had already installed but the time picker seems to ignore it…
Any idea of a widget that can do the something like time picker?
Edit: mmm not sure i have that version…but i can’t find the one of your screen…
MainUI is running separately from the OH core. The OH core java version with its embedded JavaScript should have no impact on the MainUI which is a web app that is running in the JavaScript engine of your browser…
I haven’t moved to the 4.0 snapshot yet, but if MainUI is running at all then it has compiled properly and that means that the dayjs library has been successfully included with all its prerequisites. So, most likely something else is going on here to cause the issue you are seeing.
You’ll have to give us more info about the problem: how do you know it’s not working? Are there any errors in the logs? Are there any errors in the browser console? What config parameters are you using for the widget? Etc.
yes you’re right, sorry.
ok, following there is the complete widget. it’s a rollershutter widget that has the option to manage the automatic open/close time, based on the time picker of this topic.
it was working perfectly, then i had an issue (maybe related to a binding) that “forced” me to do an upgrade. i completely forgot that pending there was the OH4, so it has been installed automatically.
on next boot, i’ve seen that the widget, the time picker part, was not working, or better, numbers when clicking “up arrow” or “down arrow” were not changing.
hours and minutes are based on 2 DateTime items. if i update the status of those items by api explorer, automatic open/close works, but i’m not able to manage hours/minutes from the widget.
i’ve checked in log, but nothing happens.
i deduce tha issue come from JS because i’ve seen another error in logs related to a script that determine the OH running time.
looking into the widget code, i’ve seen that points to JS, so i think that everything it’s related to Java version 17.
hope i’ve fully explained the issue, but if i can help in a better way, i will do.
thanks a lot to all guys|
uid: Universal_Rollershutter_Card
tags: []
props:
parameters:
- context: Text
description: Title of the card
label: Title
name: rollerTitle
required: false
type: TEXT
- context: item
description: Rollershutter Item
label: Rollershutter Item
name: groupItem
required: true
type: TEXT
- context: item
description: Enable Opening Schedule
label: Enable Schedule Opening Item
name: EnableScheduledOpening
required: false
type: TEXT
- context: item
description: Enable Closure Schedule
label: Enable Schedule Closure Item
name: EnableScheduledClosure
required: false
type: TEXT
- context: item
description: Opening Time
label: Opening Time Item
name: OpeningTimeItem
required: false
type: TEXT
- context: item
description: Closure Time
label: Closure Time Item
name: ClosureTimeItem
required: false
type: TEXT
timestamp: Dec 20, 2022, 7:16:22 PM
component: f7-card
config:
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.3)
margin-left: 5px
margin-right: 5px
slots:
default:
- component: f7-card-content
config:
style:
position: relative
z-index: 3
slots:
default:
- component: f7-row
config:
style:
margin-bottom: -10px
margin-left: 0px
margin-right: 0px
slots:
default:
- component: f7-col
config:
style:
margin-left: 0px
margin-right: 0px
width: 60px
slots:
default:
- component: oh-icon
config:
height: 50px
icon: iconify:ic:twotone-roller-shades
style:
color: orange
- component: f7-col
config:
style:
margin-left: 60px
margin-right: 0px
position: absolute
width: 80%
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
style:
color: '=themeOptions.dark === "dark" ? "white" : "black"'
font-size: 15px
font-weight: 500
text: =props.rollerTitle
- component: f7-row
config:
style:
align-items: right
display: flex
flex-direction: row
slots:
default:
- component: f7-chip
config:
style:
background: orange
color: black
font-weight: 500
text: '=items[props.groupItem].state == "100" || items[props.groupItem].displayState == "100" ? "Closed" : items[props.groupItem].state == "0" || items[props.groupItem].displayState == "0" ? "Open" : items[props.groupItem].state + "% closed" || items[props.groupItem].displayState + "% closed"'
- component: f7-col
config:
style:
margin-left: 0px
margin-right: 0px
width: 26px
slots:
default:
- component: oh-link
config:
action: command
actionCommand: UP
actionItem: =props.groupItem
iconColor: orange
iconF7: arrow_up_circle
iconSize: 28
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
z-index: 98
- component: oh-link
config:
action: command
actionCommand: STOP
actionItem: =props.groupItem
iconF7: stop_circle
iconSize: 28
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
z-index: 98
- component: oh-link
config:
action: command
actionCommand: DOWN
actionItem: =props.groupItem
iconColor: orange
iconF7: arrow_down_circle
iconSize: 28
style:
background: '=themeOptions.dark === "dark" ? "rgb(40, 40, 40)" : "rgb(240, 240, 240)"'
z-index: 98
- component: f7-card-content
config:
class: align-items-center alignt-text-center justify-content-center
style:
margin-left: 15px
margin-right: 15px
position: relative
z-index: 2
visible: =(vars.PresetVisible) == true
slots:
default:
- component: f7-row
slots:
default:
- component: oh-slider
config:
color: orange
item: =props.groupItem
max: 100
min: 0
step: "1"
style:
background: trasparent
color: black
font-size: 13px
- component: f7-row
config:
style:
margin-top: 15px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: 25
actionItem: =props.groupItem
round: true
style:
background: '=items[props.groupItem].state >= "20" && items[props.groupItem].state <= "30" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 25
- component: oh-button
config:
action: command
actionCommand: 40
actionItem: =props.groupItem
round: true
style:
background: '=items[props.groupItem].state >= "35" && items[props.groupItem].state <= "45" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 40
- component: oh-button
config:
action: command
actionCommand: 50
actionItem: =props.groupItem
round: true
style:
background: '=items[props.groupItem].state >= "45" && items[props.groupItem].state <= "55" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 50
- component: oh-button
config:
action: command
actionCommand: 75
actionItem: =props.groupItem
round: true
style:
background: '=items[props.groupItem].state >= "70" && items[props.groupItem].state <= "80" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 75
- component: oh-button
config:
action: command
actionCommand: 90
actionItem: =props.groupItem
round: true
style:
background: '=items[props.groupItem].state >= "85" && items[props.groupItem].state <= "95" ? "orange" : "rgb(210, 210, 210)"'
color: black
z-index: 98
text: 90
- component: f7-card-content
config:
class: display-flex align-items-center alignt-text-center justify-content-center
style:
margin-left: 0px
margin-right: 0px
margin-top: -10px
position: relative
z-index: 1
visible: =(vars.ScheduleVisible) == true
slots:
default:
- component: f7-row
config:
style:
width: 300px
slots:
default:
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
text-decoration: underline
text-underline-offset: 4px
text: Opening Time
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.OpeningTimeItem].state === 'NULL') || !props.OpeningTimeItem) ? '?': props.timeFormat == '12h' ? dayjs(items[props.OpeningTimeItem].state).format('hh'): dayjs(items[props.OpeningTimeItem].state).format('HH'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(-1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-col
config:
style:
width: 20px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ":"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.OpeningTimeItem].state === 'NULL') || !props.OpeningTimeItem) ? '?': dayjs(items[props.OpeningTimeItem].state).format('mm'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.OpeningTimeItem].state).add(-1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.OpeningTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 100px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
text-decoration: underline
text-underline-offset: 4px
text: Closure Time
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.ClosureTimeItem].state === 'NULL') || !props.ClosureTimeItem) ? '?': props.timeFormat == '12h' ? dayjs(items[props.ClosureTimeItem].state).format('hh'): dayjs(items[props.ClosureTimeItem].state).format('HH'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(-1, 'hour').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-col
config:
style:
width: 20px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ":"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 20px
text: ""
- component: f7-col
config:
style:
width: 40px
slots:
default:
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▲
- component: f7-row
config:
style:
height: 30px
slots:
default:
- component: Label
config:
style:
font-size: 15px
text-align: center
width: 40px
text: "=(((items[props.ClosureTimeItem].state === 'NULL') || !props.ClosureTimeItem) ? '?': dayjs(items[props.ClosureTimeItem].state).format('mm'))"
- component: f7-row
config:
style:
height: 30px
text-align: center
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =(dayjs(items[props.ClosureTimeItem].state).add(-1, 'minute').format('YYYY-MM-DDTHH:mm:ss.ZZ'))
actionItem: =(props.ClosureTimeItem)
style:
--f7-button-text-color: orange
font-family: u2400
font-size: 100%
width: 40px
text: ▼
- component: f7-card-content
config:
class: align-items-center alignt-text-center justify-content-center
style:
margin-bottom: -50px
margin-left: 15px
margin-right: 15px
margin-top: -50px
position: relative
z-index: 0
visible: =(vars.ChartVisible) == true
slots:
default:
- component: oh-chart
config:
chartType: day
options:
backgroundColor: transparent
periodVisible: false
slots:
grid:
- component: oh-chart-grid
config:
containLabel: false
series:
- component: oh-time-series
config:
barWidth: 1
color: orange
gridIndex: 0
item: =props.groupItem
type: bar
xAxisIndex: 0
yAxisIndex: 0
xAxis:
- component: oh-time-axis
config:
axisPointer:
show: false
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
min: 0
name: " % closed"
- component: f7-card-footer
config:
style:
background: rgb(245, 218, 137)
border-radius: 0 0 10px 10px
height: auto
slots:
default:
- component: f7-block
config:
style:
bottom: 3px
display: flex
left: 0
position: absolute
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: PresetVisible
actionVariableValue: =! (vars.PresetVisible)
slots:
default:
- component: oh-icon
config:
icon: iconify:mdi:window-shutter-auto
style:
color: "=(vars.PresetVisible ? 'rgb(255, 128, 0)' : 'rgb(106, 106, 106)')"
width: 25px
- component: oh-button
config:
action: variable
actionVariable: ScheduleVisible
actionVariableValue: =! (vars.ScheduleVisible)
slots:
default:
- component: oh-icon
config:
icon: iconify:akar-icons:clock
style:
color: "=(vars.ScheduleVisible ? 'rgb(255, 128, 0)' : 'rgb(106, 106, 106)')"
width: 25px
- component: oh-icon
config:
icon: iconify:mdi:sort-clock-descending-outline
style:
color: green
visible: =(vars.ScheduleVisible) == true
width: 25px
- component: oh-toggle
config:
color: green
item: =props.EnableScheduledOpening
style:
--f7-toggle-height: 20px
--f7-toggle-inactive-color: red
--f7-toggle-width: 40px
margin-left: 7px
margin-top: -2px
z-index: 98
visible: =(vars.ScheduleVisible) == true
- component: oh-icon
config:
icon: iconify:mdi:sort-clock-ascending-outline
style:
color: red
margin-left: 7px
visible: =(vars.ScheduleVisible) == true
width: 25px
- component: oh-toggle
config:
color: green
item: =props.EnableScheduledClosure
style:
--f7-toggle-height: 20px
--f7-toggle-inactive-color: red
--f7-toggle-width: 40px
margin-left: 7px
margin-top: -2px
z-index: 98
visible: =(vars.ScheduleVisible) == true
- component: oh-button
config:
action: variable
actionVariable: ChartVisible
actionVariableValue: =! (vars.ChartVisible)
slots:
default:
- component: oh-icon
config:
icon: iconify:ant-design:bar-chart-outlined
style:
color: "=(vars.ChartVisible ? 'rgb(255, 128, 0)' : 'rgb(106, 106, 106)')"
width: 25px
No, it is not, it is just one DateTime item to store the relevant information. Within the widget, this is separated into a part for the hours and one for the minutes.
yes, one for opening, and one for closing. am i wrong?
These are entirely different systems. The script JS error is simply unrelated to the widget issue.
Can you verify that after the upgrade your DateTime item is properly populated with a value? Can you verify that the widget version you are testing has the OpeningTimeItem property correctly set? Do you see any errors in the browser console (not the openhab log, the developer view console in the browser) when you trigger the button? Is the problem fixed if you use 'YYYY-MM-DDTHH:mm:ss.SSSZZ' as the format instead?
This is how our widget uses the timepicker, but thats not how it is working internally.
You need to be more precise on your description, otherwise it might lead into a wrong direction.
Thanks for the time you spend to try to help 
I’ve tried to delte and recreate the item “AperturaTapparellaBagnoSettimanale” (openingTimeItem of the widget) set again via api explorer the date and time,the state gets the. Ew value but it’s not manageable from the widget.
The strange thing is that when i’ve deleted the item and recreated it,the value has not been resetted to NULL but it kept the same value before the deletion.
I’ve rechecked the item and eidget properties and are properly set.
Actually i’m from mobile and i cannot check if the browser shows an error when i try to change values of the item via widget…
Ok got it. the issue was on time picker widget. It’s related to time/date pattern defined in the widget.
Replacing original pattern with
'YYYY-MM-DDTHH:mm:ss.SSSZZ'
It started to work again.
Thanks to all who pointed me on the right direction.
Unfortunately the time picker doesn’t work anymore on OH 4.0.1 Release. Even when I alter the DateTime parse string to
'YYYY-MM-DDTHH:mm:ss.SSSZZ'