Help with creation of a custom widget

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:
grafik

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.
image

Would be great if anyone could help and support me at the first steps with my first custom widget.

Thanks in advance,
Alex

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

You can also find lots of examples to look through by sorting forum posts with the widget tag

https://community.openhab.org/tag/widget

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:

  1. How do i change the item color depending on the state of the defined icon?

  2. How can i avoind empty spaces in the state bar when the condition of "visible: … " isnt true?

  3. 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!

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

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:

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

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"'

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.