e36Alex
(Alexander)
March 18, 2021, 7:38pm
1
Hello,
i could need some help with a litte custom widget for my dashboard. I already played around with the new possibilities, but haven’t been able to dig too deeply into the matter.
Currently i am using this list card to display the main states of my home:
But i would like to compress the states to just one line by just showing an icon for each state (similar to a state bar on a smartphone). So for each of the states an item and and icon have to be selected.
Would be great if anyone could help and support me at the first steps with my first custom widget.
Thanks in advance,
Alex
JustinG
(JustinG)
March 18, 2021, 8:32pm
2
It’s true that everything with OH3 is still fairly new, but there are already some great introductory materials to help you understand widgets and get you started building them - both in the official docs:
and here on the forum
I’m taking a cut at expanding the Getting Started tutorial for Pages. I’m going to insert them here for public comment before submitting them as a PR. I don’t think the existing three pages are sufficient for getting started so I’m largely rewriting them but will leave them inline at the end until I’m certain that all their contents are covered elsewhere.
As usually, this is a Wiki (for now) so please correct anything wrong and add any content you think is missing and add a reply describing wha…
You can also find lots of examples to look through by sorting forum posts with the widget
tag
https://community.openhab.org/tag/widget
e36Alex
(Alexander)
March 21, 2021, 7:32pm
3
Hello and thanks for that link.
I already did the first steps now, but have some specific question while work is in progress.
But at first a look at the actual state:
uid: HomeState
tags: []
props:
parameters:
- context: item
description: Item für Anwesenheitserkennung
label: Anwesenheitserkennung
name: anwesenheit
required: false
type: TEXT
- context: item
description: Item für offene Fenster
label: Fenster offen
name: fenster
required: false
type: TEXT
- context: item
description: Item für Tagesmodus
label: Tagesmodus (Tag/Nacht)
name: nachtmodus
required: false
type: TEXT
- context: item
description: Item für Urlaubsmodus
label: Urlaubsmodus
name: urlaubsmodus
required: false
type: TEXT
- context: item
description: Item für Videoaufzeichnung
label: Videoaufzeichnung
name: video
required: false
type: TEXT
- context: item
description: Item für Batterie schwach
label: Batterie schwach
name: battlow
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 21, 2021, 7:51:02 PM
component: f7-card
config:
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: person_2
item: =props.anwesenheit
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: app
item: =props.fenster
#visible: =items.Home_Fenster.state === 'ON'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: moon_zzz
item: =props.nachtmodus
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: airplane
item: =props.urlaubsmodus
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: videocam
item: =props.video
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: battery_25
item: =props.battlow
color: red
#visible: =items.Home_LowBattery.state === 'ON'
action: group
actionGroupPopupItem: Home_LowBattery
Here the questions:
How do i change the item color depending on the state of the defined icon?
How can i avoind empty spaces in the state bar when the condition of "visible: … " isnt true?
How can i add an action to the icons? The following code is working fine on cards but it doesnt work at my widget when i add it:
action: group
actionGroupPopupItem: Home_LowBattery
Thanks a lot for help!
e36Alex
(Alexander)
March 21, 2021, 8:26pm
4
Question 1 is already solved:
uid: HomeState
tags: []
props:
parameters:
- context: item
description: Item für Anwesenheitserkennung
label: Anwesenheitserkennung
name: anwesenheit
required: false
type: TEXT
- context: item
description: Item für offene Fenster
label: Fenster offen
name: fenster
required: false
type: TEXT
- context: item
description: Item für Tagesmodus
label: Tagesmodus (Tag/Nacht)
name: nachtmodus
required: false
type: TEXT
- context: item
description: Item für Urlaubsmodus
label: Urlaubsmodus
name: urlaubsmodus
required: false
type: TEXT
- context: item
description: Item für Videoaufzeichnung
label: Videoaufzeichnung
name: video
required: false
type: TEXT
- context: item
description: Item für Batterie schwach
label: Batterie schwach
name: battlow
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 21, 2021, 9:00:12 PM
component: f7-card
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: person_2_fill
item: =props.anwesenheit
color: '=(items[props.anwesenheit].state === "ON") ? "green" : "red"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: app
item: =props.fenster
color: '=(items[props.fenster].state === "ON") ? "red" : "green"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: moon_zzz_filled
item: =props.nachtmodus
color: '=(items[props.nachtmodus].state === "ON") ? "yellow" : "gray"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: airplane
item: =props.urlaubsmodus
color: '=(items[props.urlaubsmodus].state === "ON") ? "green" : "gray"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: videocam
item: =props.video
color: '=(items[props.urlaubsmodus].state === "ON") ? "red" : "gray"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: battery_25
item: =props.battlow
color: '=(items[props.fenster].state === "ON") ? "red" : "green"'
action: group
actionGroupPopupItem: Home_LowBattery
JustinG
(JustinG)
March 21, 2021, 9:47pm
5
When the visible
is false, the element still exists so it is taken into account by the flex spacing it just isn’t rendered. Someone else may have a better solution, but off the top of my head, the only way I can think of to filter out whether the item even exists or not, would be to produce these items via an oh-repeater
and then use the filter property on the repeater to only create the elements that you need at that time. Take a look at this topic for an example of how to use the oh-repeater
with complex objects that have multiple properties:
Jump to the latest working code :
Hi,
I have a requirement to test up to 45+ functions for the forthcoming TiVo binding. So I really need to replicate each of the buttons on the remote control. Unfortunately these functions are associated with different items, some need labels, some need icons etc.
I was hoping to develop something generic that can be re-used for any other relevant application (by me or anyone else). My idea was to use a unset for/loop with an array of the required proper…
You cannot add an action to the icon if you are using f7-icon elements. The raw f7 elements do not include the OH specific actions settings, those are only available in some of the OH specific components. For what you are doing, I’d recommend the oh-link
component which allows you to use the f7-icon as one of its properties and also includes all the actions function:
1 Like
e36Alex
(Alexander)
March 22, 2021, 8:09am
6
Thank you, again. With oh-link it works fine!
Here is the “final” result, if someone else is interested in:
uid: HomeState
tags: []
props:
parameters:
- context: item
description: Item für Anwesenheitserkennung
label: Anwesenheitserkennung
name: anwesenheit
required: false
type: TEXT
- context: item
description: Item für offene Fenster
label: Fenster offen
name: fenster
required: false
type: TEXT
- context: item
description: Item für Tagesmodus
label: Tagesmodus (Tag/Nacht)
name: nachtmodus
required: false
type: TEXT
- context: item
description: Item für Urlaubsmodus
label: Urlaubsmodus
name: urlaubsmodus
required: false
type: TEXT
- context: item
description: Item für Videoaufzeichnung
label: Videoaufzeichnung
name: video
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 21, 2021, 11:17:56 PM
component: f7-card
slots:
default:
- component: oh-link
config:
class:
- display-flex
- justify-content-space-between
- align-content-stretch
- align-items-center
action: group
actionGroupPopupItem: Home_Status
style:
padding: 10px
padding-left: 16px
padding-right: 16px
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: person_2_fill
item: =props.anwesenheit
color: '=(items[props.anwesenheit].state === "ON") ? "green" : "red"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: app
item: =props.fenster
color: '=(items[props.fenster].state === "ON") ? "red" : "green"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: moon_zzz_filled
item: =props.nachtmodus
color: '=(items[props.nachtmodus].state === "ON") ? "yellow" : "gray"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: airplane
item: =props.urlaubsmodus
color: '=(items[props.urlaubsmodus].state === "ON") ? "green" : "gray"'
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
slots:
default:
- component: f7-icon
config:
f7: videocam
item: =props.video
color: '=(items[props.urlaubsmodus].state === "ON") ? "red" : "gray"'
system
(system)
Closed
May 3, 2021, 12:10am
7
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.