OH3 Rollershutter Time Widget

Hi,

I am trying to design a widget to configure my rollershutters.
The items are simple every rollershutter has following config items:

  • TimerUpSwitch: a simple switch to control if you want to rollershutter to go up or down on a timer
  • TimerUp: a string item which has a time value
  • TimerDownSwitch: a simple switch to control if you want to rollershutter to go up or down on a timer
  • TimerDown: a string item which has a time value

I need a widget where I can control these timer switches and the timer itself. Already played a bit but I still have a learning gap to create a good widget. With oh-list and oh-input I created this:
image

It does its job to control for example the timers of going down, however I would like something like this:
image

With some info:

Anyone more experienced with widgets and could help me ? A good next step would be to seperate my row items in columns so I could put different components in it.
If it helps this is my current widget code

uid: blinds_timers
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Aug 7, 2022, 11:11:43 AM
component: f7-card
config: {}
slots:
  default:
    - component: oh-input-card
      config:
        title: Blinds
        outline: false
        clearButton: false
        inputmode: text
        type: time
        sendButton: true
        item: testtimer
        useDisplayState: true
    - component: oh-list
      slots:
        default:
          - component: oh-repeater
            config:
              fragement: true
              for: item
              sourceType: itemsInGroup
              groupItem: testtimer
            slots:
              default:
                - component: oh-input-item
                  config:
                    outline: false
                    clearButton: false
                    inputmode: text
                    type: time
                    sendButton: true
                    item: =loop.item.name
                    useDisplayState: true
                    before: test
                    title: =loop.item.label
```:

When you start moving into more thoroughly customized widgets like that you probably want to consider directly using the f7 components that the oh widgets are based on, at least for the structure of the widget (you’ll still want the oh widgets for the parts that actually interact with items etc.). You can learn about the f7 components here: Framework7 Vue.

So, in this case, I’d start with an f7-list-item (or a f7-list-item-row for even more flexibility) and put basic OH widgets inside of that (i.e., oh-input instead of oh-input-item and an oh-toggle or oh-link for the on/off).

The alignment of the components inside each item will be based on css in addition to the different slots available to you. The f7-list item will allow you to use flexbox alignment which may be sufficient for your arrangement here: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks.

1 Like

Hi Willem,

in case your task is to control your shutter time based, you will find here a finished solution timeline picker. For my own use cases I use it exclusive with the basic UI but you will find a widget here in the forum.