OH-Slider not correctly shown

Add-ons UIs
1

I’ve built a custom slider-widget for my lights. Now I’ve a problem with my oh-slider component which looks like this:

image
image923×258 23.6 KB

When I go over edit layout and then “Run mode” it looks correct:

image
image924×260 24.8 KB

Same problem, when I open this page as a popup:

image
image923×692 78.3 KB

When I add an empty cell-card, then it works :thinking:

image
image945×192 23.4 KB

Does anyone have the same problem? Or is something wrong in my widget design?

Thank you for your help!

Here Is my widget code:

uid: Cell_Light_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 10, 2021, 8:00:57 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-slider
      config:
        item: =props.item_brightness
        min: 0
        max: 100
        style:
          position: absolute
          bottom: -75px
          left: 20px
          width: calc(100% - 40px)
          --f7-range-bar-size: 8px
          --f7-range-bar-border-radius: 8px
          --f7-range-knob-size: 20px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          top: 15px
          right: 20px
2

I had already had the same problem with the OH-Silder Card. But I could not always reproduce it.

I currently have the issue that the slider transmits the correct value but the Slider then jumps to 0 or 100 percent. Auto-Update is disabled.

3

This seems to be a oh-cell specific problem / bug.

The slider component (and maybe other components?!) sets its width depending on the number of visible cell components in the row they resides in (asuming that each of the components will take up the same amount of the page-width - which would work in the row / column layout).

So if e.g. 2 cells are in one row the slider will take up 50% of the avilable width of that page (even if only parts of it are filled with cells because of their fixed width) - This is also the reason why it works fine if you fill the remaining row-space with cells.

Theres no quick solution for that problem besides fixing the component itself, I assume.

I would recommend you using the row / column grid instead for now, in which it would work just fine.

I opened a issue for that here

1 Like
4

Thanks Rainer! I will go with the row/column solution, this works for me!

5

tried another approach using the background slot instead:

uid: Cell_Light_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 22, 2021, 7:27:35 PM
component: oh-cell
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  background:
    - component: f7-block
      config:
        style:
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-slider
      config:
        item: =props.item_brightness
        min: 0
        max: 100
        style:
          margin: 2rem
          width: calc(100% - 4rem)
          --f7-range-bar-size: 8px
          --f7-range-bar-border-radius: 8px
          --f7-range-knob-size: 20px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          top: 15px
          right: 20px

It mostly works, but not initially - if you resize the page width even by 1 pixel though, the actual size gets recomputed and it’s back in order. We’re all experimenting I guess :laughing:

2 Likes
6

@Integer

Hi Mike, your heating widget looks nice as well. Would it be possible that you share the code with us?

Thank you very much

7

@Logos Of course here we go:

image

uid: Cell_Temp_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Current Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Set Temperature
      name: set_temp_item
      required: false
      type: TEXT
    - context: item
      label: Current Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      description: on/off item
      label: Heating control item
      name: heating_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 7, 2021, 5:14:53 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -20px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: =items[props.temp_item].state
              style:
                font-size: 22px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -40px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: drop
              size: 18
          - component: Label
            config:
              text: =items[props.humidity_item].displayState
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: flame
              size: 18
          - component: Label
            config:
              text: =items[props.heating_item].state
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: Label
      config:
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 15px
          left: 15px
          width: calc(100% - 55px)
          height: 120px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.temp_item
              trendGradient:
                - "#aa2b1d"
                - "#cc561e"
                - "#ef8d32"
                - "#beca5c"
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                filter: opacity(30%)
                position: absolute
                width: 100%
                height: 100%
                top: 0px
                left: 0px
                z-index: 1

if you have any suggestions for improvement, let me know!

1 Like