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
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]
New topic started here
I would like to share with you the my collection of widgets. I created the first version 1 year ago, and in the last year I added some improvements and a consistent flat look to the widget.
The widgets are existing two different versions for mobile and for tablet grid views
If you would like to use, just take and integrate on your dashboard
Examples
Source Code
Could you share how you achieved this?
Sorry for the delayed reply, below rule if it helps and still required
rule "Michael Last Seen"
when
Time cron "0 0/1 * * * ?"
then
var DateTimeType prevOnState = (MichaellastSeen.state as DateTimeType).getZonedDateTime()
var DateTimeType newTime = (currentTime.state as DateTimeType).getZonedDateTime()
var execDuration = Duration.between(prevOnState, ZonedDateTime.now()).toSeconds()
var Number lastSeen = execDuration / 60
postUpdate(Michael_update, lastSeen)
end
thx - for your reply! love it.
Hi Guys,
that issue with the example Widgets is still existing, if I want to use the topics in the Fixed Grid Layout.
In the widget Editor it looks fine, in the Responsive layout it works fine, only in Fixed Grid layout not.
Has anybody an Idea? Is it not possible to share a widgets between the different layouts?
Regards,
Jens
Hi,
I have a question on how to make these buttons bigger.
Here is my yaml code:
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: Dec 8, 2022, 7:21:19 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: Label
config:
class:
- margin-bottom
label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
style:
color: "#777"
font-size: 20px
text-align: center
text: ""
- 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
closePopup: =props.closePopup
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
I deleted the prev. post. Got it done
Hi there,
I have a question about the room card. What I did:
- I created a âfunctionalâ non-semantic light group for each room (to avoid to destroy the semantic model).
- I added the lights from the room to this group
- Members Base Type = Dimmer
- Aggregation Function is AVG
After that the group Item state was displayed with several decimal numbers after the value. I assume this happens because the average is calculated.
Therefore I added some metadata to the item unter âState descriptionâ
The decimal points are gone. Nevertheless they are still displayed in the widget:
If I use one Dimmer item directly instead of the group, the decimal numbers are not displayed.
Any Idea how to get rid of it? Has the modification to be done directly in the YAML Code of the Widget?
Thanks.
Hey @Gufti
Try to change this line
text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''"
with this one:
text: "=(Number(items[props.status].state) > 0) ? (items[props.status].displayState ? items[props.status].displayState: items[props.status].state) : '' "
let me know, if it is working now.
Hi,
works perfectly!
Thanks a lot for your help!