Toggle item with trend widget

Add-ons UIs
1

I’m trying to a widget that shows the value of Number item and toggles a Switch item. I accomplished mostly what I want, the only problem is that the value of the Number Item is behind the toggle. I’d like to move it to the bottom right corner of the card.

image
image871×163 4.76 KB

Code:

uid: Toggle_number
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Number Item
      name: number_item
      required: false
      type: TEXT
    - context: item
      label: Switch item
      name: switch_item
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jan 9, 2022, 4:45:55 AM
component: f7-card
config:
  title: =props.title
  background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
  content:
    - component: f7-row
      config:
        style:
          height: calc(2 * var(--f7-toggle-width))
        class: justify-content-center
      slots:
        default:
          - component: oh-toggle
            config:
              item: =props.switch_item
              class: large-vertical-toggle
          - component: oh-trend
            config:
              trendItem: =props.number_item
              style:
                filter: opacity(30%)
                height: calc(2 * var(--f7-toggle-width))
                width: 100%
                z-index: 1
                position: absolute
          - component: Label
            config:
              style:
                position: absolute
                align: right
              text: "=items[props.number_item].displayState ? items[props.number_item].displayState : items[props.number_item].state"

What can I do to solve this? Thanks.

2

I found the solution, for this:

uid: Toggle_number
tags: []
props:
 parameters:
   - description: Small title on top of the card
     label: Title
     name: title
     required: false
     type: TEXT
   - description: in rgba() or HEX or empty
     label: Background Color
     name: bgcolor
     required: false
     type: TEXT
   - context: item
     label: Number Item
     name: number_item
     required: false
     type: TEXT
   - context: item
     label: Switch item
     name: switch_item
     required: true
     type: TEXT
 parameterGroups: []
timestamp: Jan 9, 2022, 6:14:53 PM
component: f7-card
config:
 title: =props.title
 background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
 content:
   - component: f7-row
     config:
       style:
         padding: 0
       class: justify-content-center
     slots:
       default:
         - component: f7-block
           config:
             style:
               filter: opacity(30%)
               height: calc(2 * var(--f7-toggle-width))
               width: 100%
               padding: 0
           slots:
             default:
               - component: oh-trend
                 config:
                   trendItem: =props.number_item
                   actionAnalyzerCoordSystem: time
                   action: analyzer
                   actionAnalyzerItems:
                     - =props.number_item
                   style:
                     filter: opacity(30%)
                     height: 100%
                     z-index: 1
                     position: absolute
         - component: f7-block
           config:
             style:
               width: 100%
               position: absolute
           slots:
             default:
               - component: Label
                 config:
                   class: float-right
                   style:
                     align: right
                     z-index: 2
                   text: "=items[props.number_item].displayState ? items[props.number_item].displayState : items[props.number_item].state"
         - component: f7-block
           config:
             style:
               position: absolute
               padding-top: calc(var(--f7-toggle-width))
           slots:
             default:
               - component: oh-toggle
                 config:
                   item: =props.switch_item
                   class: large-vertical-toggle
                   z-index: 3

image
image949×192 4.34 KB

Now, I’d like to click on the trend graph, and open an AnalyzeItem window! Can it be done?

3

Any ideas?