Custom widget how-to/assistance

powerpolly · January 10, 2022, 4:57pm

I’m doing hard on figuring out how to write customized widgets.
It took me a day to copy/paste together some snipset to get this “my Pool Widget”:

the card should be the same size of the default label cell next to it.
the trend item is not shown

yaml code

uid: Pool_Widget_new
tags:

props:
  parameters:
    - description: Widget title
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: Pool Temperatur
      label: select Item
      name: temp
      required: false
      type: TEXT
    - context: item
      description: Diff Temperatur
      label: select String item
      name: diff
      required: false
      type: TEXT
    - context: item
      description: Pool Pumpe
      label: select Item
      name: pump
      required: false
      type: TEXT
    - context: item
      description: Pool Beleuchtung
      label: select Item
      name: light
      required: false
      type: TEXT
    - context: item
      description: Pool Saison
      label: select Item
      name: season
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 10, 2022, 5:24:29 PM
component: f7-card
config:
  outline: false
  noBorder: false
  padding: true
  noShadow: false
  style:
    --f7-card-margin-horizontal: 5px
    --f7-card-content-padding-vertical: 0px
    --f7-card-content-padding-horizontal: 16px
    --f7-card-border-radius: 15px
    --f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
    --f7-card-header-font-size: 14px
    --f7-card-header-font-weight: 600
slots:
  content:
    - component: oh-label-card
      config:
        noShadow: true
        trendItem: =(props.temp)
        action: analyzer
        actionAnalyzerItems: =[props.temp]
        item: =(props.temp)
        title: =(props.Title)
        icon: f7:thermometer
        actionAnalyzerCoordSystem: time
        vertical: false
    - component: oh-label-card
      config:
        noShadow: true
        item: =(props.diff)
        fontSize: "10"
    - component: f7-row
      config:
        colorTheme: blue
        class:
          - padding-bottom
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Pumpe
                    color-theme: blue
                    action: command
                    actionItem: =props.pump
                    actionCommand: '=(items[props.pump].state == "ON") ? "OFF" : "ON"'
         
                    text: Pumpe
                    round: true
                    small: true
                    active: =(items[props.pump].state == "ON")
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Licht
                    color-theme: yellow
                    action: command
                    actionItem: =props.light
                    actionCommand: '=(items[props.light].state == "ON") ? "OFF" : "ON"'
                    
                    text: Beleuchtung
                    round: true
                    small: true
                    active: =(items[props.light].state == "ON")
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Saison
                    color-theme: green
                    action: command
                    actionItem: =props.season
                    actionCommand: '=(items[props.season].state == "ON") ? "OFF" : "ON"'
                    
                    text: Saison
                    round: true
                    small: true
                    active: =(items[props.season].state == "ON")

I guess I really need to understand the basic logic of components, config, styles, slots etc. but I can’t find a documentation about it… can someone assist pls?

Oliver2 · January 10, 2022, 7:12pm

First of all don’t use oh-label-cards for showing text or values. for that you can simply use Label.
If on the left hand side there is an oh-cell, why are you using here an f7-card?

Documentation is here and here

Oliver2 · January 10, 2022, 7:29pm

Here is a working example for an oh-cell (I didn’t care about formatting). Just to give you a general concept:

uid: Pool_Widget_new
tags:

props:
  parameters:
    - description: Widget title
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: Pool Temperatur
      label: select Item
      name: temp
      required: false
      type: TEXT
    - context: item
      description: Diff Temperatur
      label: select String item
      name: diff
      required: false
      type: TEXT
    - context: item
      description: Pool Pumpe
      label: select Item
      name: pump
      required: false
      type: TEXT
    - context: item
      description: Pool Beleuchtung
      label: select Item
      name: light
      required: false
      type: TEXT
    - context: item
      description: Pool Saison
      label: select Item
      name: season
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 10, 2022, 5:24:29 PM
component: oh-cell
config:
slots:
  header:
    - component: Label
      config:
        text: my Pool
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: oh:temperature
                    style:
                      width: 20px
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    text: "='Differenz: ' + items[props.diff].state"
          
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Pumpe
                    color-theme: blue
                    action: command
                    actionItem: =props.pump
                    actionCommand: '=(items[props.pump].state == "ON") ? "OFF" : "ON"'
         
                    text: Pumpe
                    round: true
                    small: true
                    active: =(items[props.pump].state == "ON")
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Licht
                    color-theme: yellow
                    action: command
                    actionItem: =props.light
                    actionCommand: '=(items[props.light].state == "ON") ? "OFF" : "ON"'
                    
                    text: Beleuchtung
                    round: true
                    small: true
                    active: =(items[props.light].state == "ON")
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    title: Saison
                    color-theme: green
                    action: command
                    actionItem: =props.season
                    actionCommand: '=(items[props.season].state == "ON") ? "OFF" : "ON"'
                    
                    text: Saison
                    round: true
                    small: true
                    active: =(items[props.season].state == "ON")

powerpolly · January 12, 2022, 7:31am

thanks, can you tell how to structure such a widget. I see headers, slots, components.
from your example you create a component “Label”. this label is not listed in the “OH component reference”, however it seems to create a text line inside the card at the very top.
then you create a row with two columns. one for an icon, the second one for a label again.
the next row creates two columns for the three buttons.
the whole thing looks like this:

where can I find the information for the formatting of those cards?

DrRSatzteil · January 12, 2022, 7:45am

You should have a look at the documentation of the underlying framework: Framework7 Documentation

You’ll quickly figure out how the examples in the documentation are „translated“ to your YAML file by looking at some examples here in the forums.

Oliver2 · January 12, 2022, 8:43am

But oh-cell is very special system widget which is based on oh-cards and has its own slots which you can see here.

Label is not yet documented. I just learned that from other examples. Thats basically your best documentation: this forum and its Q&A on personal widgets.

In terms of formatting you can use css attributes for every component as you already did.

config:
  style:
    attributes go in here

When your cursor is positioned under config and is indented, press ctrl space. That gives you a popup with all parameters available for this component. Some of them are formatting related. The rest needs to be done by style attributes.