OH3 - Custom Widget -> Button with countdown

Setup, Configuration and Use Beginners
1

Hi,

me again. I am trying to create a “widget” which can be used in widgets later on. Hopefully this can be achieved.
The control I am trying to create is a button with a count down. This will be used for irrigation purposes.
At least I could achieve this with habpanel in V2.5.

I’d like to define 2 items:

  • itemButtonToTurnOnIrrigationValve
  • virtualItemToSaveIrrigationDuration
  • virtualItemWithRemainingDuration

Basic layout:
PowerImage
[HiddenDurationTillOff]
Label

When I push the widget, then the power image should switch to green, the rule in the background creates 2 timers and sets the virtualItemWithRemainingDuration to virtualItemToSaveIrrigationDuration.
1st timer will run every minute reducing the virtualItemWithRemainingDuration by 1 minute
2nd timer will run after virtualItemToSaveIrrigationDuration time and turns off the 1st timer and turn the button item off.

=> This I can achieve by myself.

What I never ever will get to work - I am realizing that I will never ever be a designer - is the layout.
I started with f7-col, f7-row(button), f7-row(LabelDuration), f7-row(LabelButton)
Either I can not align the contents or even have a “nice” spacing between rows (or cols later on for vertical vs horizontal layout).

uid: widget_irrigation
tags: []
props:
parameters:
  - context: item
    description: An item to control
    label: itemFrontWater1
    name: itemFrontWater1
    required: false
    type: TEXT
  - context: item
    description: An item to control
    label: itemFrontWater2
    name: itemFrontWater2
    required: false
    type: TEXT
  - context: item
    description: An item to control
    label: itemFrontWater3
    name: itemFrontWater3
    required: false
    type: TEXT
parameterGroups: []
timestamp: Jun 3, 2021, 7:09:38 PM
component: f7-card
slots:
default:
  - component: f7-col
    slots:
      default:
        - component: f7-row
          class:
            - justify-content-center
            - text-align-center
          slots:
            default:
              - component: oh-button
                config:
                  actionItem: =props.itemFrontWater1
                  iconF7: power
                  large: true                            
        - component: f7-row
          slots:
            config:
              class:
                - justify-content-center
                - text-align-center
            default:
              - component: Label
                config:
                  class:
                    - justify-content-center
                    - text-align-center
                  text: 5
        - component: f7-row
          slots:
            config:
              class:
                - justify-content-center
                - text-align-center
            default:
              - component: Label
                config:
                  class:
                    - justify-content-center
                    - text-align-center
                  text: 5