Changing pattern of stepper card

Setup, Configuration and Use Beginners
, ,
1

I’m currently migrate to OH3. First of all, I’m really excited, it’s a huge step forward!

Now I have a question regarding the stepper-card.
I have a number item that stores the time in minutes when the irrigation should start.

In the sitemap it looks like this:

Setpoint item=WateringAutomatic_Start label="Start der Bewässerung [JS(numberToClock.js):%s]" icon="myclock" minValue=0 maxValue=1425 step=2

image

I’ve tried the same in OH3:

image
image728×616 16.1 KB

How can I show the transformed string inside the stepper?

State description looks like this:

image
image739×257 7.22 KB

numberToClock.js:

(function(i) {
    var hours = Math.floor(i / 60);
    var minutes = i % 60;

    hours = (hours < 10) ? "0" + hours : hours;
    minutes = (minutes < 10) ? "0" + minutes : minutes;

    return hours + ":" + minutes + " Uhr";
})(input)

Javascript transformation is working, because when I use the label-card, it looks correct:

image
image730×274 6.15 KB

Thank you very much for your help!

1 Like
2

What’s the default standalone widget configuration?

3

Ah sorry, I forgot. It’s a simple stepper-card:

value: oh-stepper-card
config:
  step: 15
  min: 0
  max: 1425
4

Is there any option in UI form to change the label or something like that? I’ve never used a stepper card but I would expect there to be an option to set how the middle number is displayed. In that field you’d want to enter something like =items.MyItemName.displayState.

5

@Integer Did you even succeed? I need kind of the same approach

6

Unfortunately, this does not seem to work. I tried changing it to a f7-stepper and then I was able to modify values to displayState (although I used the option-field in the meta state descriptor, same effect though). However, then my buttons didn’t work anymore…

7

It would be great if this was supported.
I have the exact same issue.

8

Hi, did you managed to solve this please ?

9

Yes, I made a new widget which looks like this:

image

Here is the widget code:

uid: Time_Stepper_Item
tags: []
props:
  parameters:
    - description: A text prop
      label: Title
      name: title
      required: false
      type: TEXT
    - description: A text prop
      label: Subtitle
      name: subtitle
      required: false
      type: TEXT
    - description: "only f7, without f7:"
      label: icon
      name: icon
      required: false
      type: TEXT
    - description: MAX Value must be devidable by STEP value
      label: STEP Value in minutes
      name: steper
      required: true
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 1, 2021, 9:44:58 PM
component: f7-list-item
config:
  mediaItem: true
  mediaList: true
  f7-icon: =props.icon
slots:
  inner:
    - component: f7-block
      config:
        style:
          flex-direction: row
          display: flex
          padding: 0px
          margin: 0px
        class:
          - align-items-center
      slots:
        default:
          - component: f7-icon
            config:
              f7: clock
              size: 32px
          - component: Label
            config:
              text: =props.title
              style:
                padding-left: 10px
          - component: f7-block
            config:
              style:
                flex-direction: row
                display: flex
                padding: 0px
                margin: 0px
                right: 0px
                position: absolute
              class:
                - align-items-center
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.item].displayState || items[props.item].state
                    style:
                      padding-right: 15px
                      color: gray
                      font-size: 13px
                - component: oh-stepper
                  config:
                    min: 0
                    max: 1440
                    step: =Number(props.steper)
                    buttonsOnly: true
                    autorepeat: true
                    autorepeatDynamic: true
                    small: true
                    item: =props.item
10

Thank you :slight_smile: although when I use it, it still shows number instead of time, but will try to figure it out.
many thanks !

11

Have you also made the state description described in my first post? with the javascript transformation?

12

That’s what I missed ! thanks very much :slight_smile: