Push button(s) widget

Setup, Configuration and Use Beginners
1

Hi!

I can’t find a PushButton class, like there is a Switch class. Am I missing something?

I made a custom widget, to trigger an AllLightsOff point, but I can’t find a way to have it used in the automatically built UI based on Semantic Model… Is there a way to do that?

Thanks,

Fred

2

Hi, I simply use switches for my Free@Home Scenes-Buttons or ALL OFF - Buttons. Works Fine. But when there are other possibilities - I‘m interested too.

3

How do you manage the status, so it always return to the previous state?

4

Same problem for blinds with louvres: we need 2x2 push buttons to go up/down and step orientation; what Semantic class to use, in this case?

5

I take a normal switch item with an expiration timer of 1 sec. Timer is part of the metadata. So the switch returns to „home position“ after 1 second.

Depiction of a KNX impulse switch
6

That is exactly what I do…! :slight_smile:

7

image
image1536×2048 97 KB

Or you use a widget with positions ( lower example), setting the item to 1 if moving left, 2 if moving right. A rule (or exp. Timer) centers the push button after 1 second by setting the item to 0

8

Metadatas are in fact much more than metadatas! I have to dig them, as they seems to do a lot of powerful things ;o) Thanks for the tip!

PS : on your last example, I guess it only works on custom pages, not on the UI generated from Semantic Model?

9

The widget works on the overview page as well as on custom pages.
You may also take a look at the metadata „standalone widget“ or „ list item widgets“ etc. as they will modify your standard page look from modell

10

Great, the “List Item Widgets” metadata overwrites the widget in the lists generated by the Semantic Model, which is exactly what I wanted!

So, I just have to write a widget which looks like the switch widget, but with 1, 2 or more push buttons.

Thanks!

11

you may try the widget code

uid: Karte - Schieber 3x
tags: []
props:
  parameters:
    - label: Headline
      name: headline
      required: false
      type: TEXT
    - label: Headline Color
      name: headlinecolor
      required: false
      type: TEXT
    - label: Headline Weight
      name: headlineweight
      required: false
      type: TEXT
    - label: Left Button
      name: leftButton
      required: false
      type: TEXT
    - label: Mid Button
      name: midButton
      required: false
      type: TEXT
    - label: Right Button
      name: rightButton
      required: false
      type: TEXT
    - context: item
      label: Item
      name: item
      required: false
      type: TEXT
    - label: Background
      name: background
      required: false
      type: TEXT
timestamp: Dec 10, 2022, 6:01:58 PM
component: f7-card
config:
  style:
    background: '=(props.background) ? props.background : ""'
slots:
  default:
    - component: Label
      config:
        style:
          color: '=(props.headlinecolor) ? props.headlinecolor : "white"'
          font-weight: '=(props.headlineweight) ? props.headlineweight : "normal"'
          margin-left: 25px
          margin-top: 0px
          padding-bottom: 0px
          padding-top: 15px
        text: '=(props.headline) ? props.headline : "Headline"'
    - component: f7-card-content
      slots:
        default:
          - component: f7-segmented
            config:
              raised: true
              round: true
              strong: true
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: 1
                    actionItem: =(props.item)
                    active: =(items[props.item].state === "1")
                    text: '=(props.leftButton) ? props.leftButton : "1"'
                - component: oh-button
                  config:
                    action: command
                    actionCommand: 0
                    actionItem: =(props.item)
                    active: =(items[props.item].state === '0')
                    text: '=(props.midButton) ? props.midButton : "2"'
                - component: oh-button
                  config:
                    action: command
                    actionCommand: 2
                    actionItem: =(props.item)
                    active: =(items[props.item].state === '2')
                    text: '=(props.rightButton) ? props.rightButton : "3"'
12

Thanks, I was just in the process of writing my own widget! This will help a lot.

By the way, what does mean ‘===’?

13

Have a look in javascript doc. == just compares the value and === compares value and datatype

14

Ok, I see.

15

I would like to make a widget very similar to the switch one; where can I find its YAML definition? If there is one…

Thanks,

Fred

16

I had the same question, having the three points vertical. I don‘t know

17

What part of this display a custom widget will replace? The complete line, from the label to the switch, or only the switch?

widget

18

I mean, when using the Metadata ‘Default List Item Widget’…

19

image
image1536×2048 170 KB

image
image1536×2048 123 KB

You can modify every thing. No matter whether it‘s been a normal item or a group item.

  1. Options in stateDescription changes the expression of the state
  2. selection of widget change the whole design ( here Default(oh-label-item). You can choose what ever widget is available, see also widget market.
  3. for title etc just put in a word like „powerplug“ or an expression starting with „=„ like I did in the subtitle.
  4. when highlighting „show advanced“ another input field becomes available „after“. This can be used to show anything else then the item value

So the whole system became so complex, that you will discover new stuff every time you modify any input field

20

image
image1536×2048 94.6 KB

and that‘s how it looks like in the „equipment“ view , segment poweroutlet. Every group has a different layout.