Widgets resized?

alda1 · October 13, 2022, 4:20pm

I will try to check with browser. I think before posted code is still the same, but I’m sending again

uid: PV_widget_by_ALDA_v2
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
    - context: item
      label: Grid L2
      name: Grid_L2
      required: true
      type: TEXT
    - context: item
      label: Grid L3
      name: Grid_L3
      required: true
      type: TEXT
    - context: item
      label: Complete consumption L1
      name: complete_L1
      required: true
      type: TEXT
    - context: item
      label: PV Production
      name: pv_leistung
      required: true
      type: TEXT
    - context: item
      label: Battery Power
      name: batterieleistung
      required: true
      type: TEXT
    - context: item
      label: Batterie SOC
      name: batterylevel
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 9, 2022, 7:33:26 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 : ''"
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          --f7-theme-color: var(--f7-text-color)
          padding: 0
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_pv_2
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_grid_2
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_battery_2
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_consumption_2
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column

JustinG · October 13, 2022, 6:26pm

The block also has margins.

You need to add

margin: 0

to it.

alda1 · October 13, 2022, 7:02pm

ok, now step by step I reworked icons and texts and automatic resizing is working, but now I have a part of code which makes a animations :

- component: f7-block
                  config:
                    style:
                      display: flex
                      justify-content: center
                      margin: 0
                      padding: 0
                      width: 120px
                  slots:
                    default:
                      - component: f7-row
                        config:
                          preserveAspectRatio: xMidYMid slice
                          style:
                            height: auto
                            width: auto
                          tag: svg
                          viewBox: 0 0 100 100
                          xmlns: http://www.w3.org/2000/svg
                        slots:
                          default:
                            - component: f7-row
                              config:
                                d: M60 -5 v10 c0 30 10 35 30 35 h20
                                fill: none
                                id: path1
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                style:
                                  stroke-width: 4
                                tag: circle
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path1"
                            - component: f7-row
                              config:
                                d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
                                fill: none
                                id: path2
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path2"
                            - component: f7-row
                              config:
                                d: M50, 0 v100
                                fill: none
                                id: path3
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path3"
                            - component: f7-row
                              config:
                                d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
                                fill: none
                                id: path4
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path4"
                            - component: f7-row
                              config:
                                d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
                                fill: none
                                id: path5
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path5"

I tried to implement into new code, but no luck. I need to learn how to correct define.

My actual working code :

uid: PV_widget_by_ALDA_v2
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
    - context: item
      label: Grid L2
      name: Grid_L2
      required: true
      type: TEXT
    - context: item
      label: Grid L3
      name: Grid_L3
      required: true
      type: TEXT
    - context: item
      label: Complete consumption L1
      name: complete_L1
      required: true
      type: TEXT
    - context: item
      label: Backup loads L1
      name: backup_L1
      required: true
      type: TEXT
    - context: item
      label: PV Production
      name: pv_leistung
      required: true
      type: TEXT
    - context: item
      label: Battery Power
      name: batterieleistung
      required: true
      type: TEXT
    - context: item
      label: Batterie SOC
      name: batterylevel
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 13, 2022, 8:02:02 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 : ''"
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          --f7-theme-color: var(--f7-text-color)
          padding: 0
          margin: 0
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            text-align: center
                          text: =Math.round(items[props.pv_leistung].state) + ' ᵂ'
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_pv_2
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-link
                        config:
                          iconColor: red
                          iconF7: battery_0
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 35) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: orange
                          iconF7: battery_25
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 35 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: green
                          iconF7: battery_100
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_grid_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) >= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_battery_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) <= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])) + ' ᵂ'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L2].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L3].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_consumption_2
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.complete_L1].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.backup_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column

JustinG · October 13, 2022, 8:14pm

Surprisingly, this should actually be fairly easy. The animations are handled by an animate svg which is defined starting at the f7-row with the tag svg:

- component: f7-row
  config:
    preserveAspectRatio: xMidYMid slice
    style:
      height: auto
      width: auto
    tag: svg
    viewBox: 0 0 100 100
    xmlns: http://www.w3.org/2000/svg

This winds up being a self-contained image. So you can get close to full control of its scaling just by setting the size of the container it is in (the f7-block just above that f7-row). You shouldn’t have to change any of the other things about the animation at all unless you find that you don’t like how the line widths change with the automatic scaling.

alda1 · October 14, 2022, 7:40am

OK, I used a part of code and implement into new one, but not working

uid: PV_widget_by_ALDA_v2
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
    - context: item
      label: Grid L2
      name: Grid_L2
      required: true
      type: TEXT
    - context: item
      label: Grid L3
      name: Grid_L3
      required: true
      type: TEXT
    - context: item
      label: Complete consumption L1
      name: complete_L1
      required: true
      type: TEXT
    - context: item
      label: Backup loads L1
      name: backup_L1
      required: true
      type: TEXT
    - context: item
      label: PV Production
      name: pv_leistung
      required: true
      type: TEXT
    - context: item
      label: Battery Power
      name: batterieleistung
      required: true
      type: TEXT
    - context: item
      label: Batterie SOC
      name: batterylevel
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 14, 2022, 8:36:52 AM
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 : ''"
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          --f7-theme-color: var(--f7-text-color)
          padding: 0
          margin: 0
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            text-align: center
                          text: =Math.round(items[props.pv_leistung].state) + ' ᵂ'
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_pv_2
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-link
                        config:
                          iconColor: red
                          iconF7: battery_0
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 35) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: orange
                          iconF7: battery_25
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 35 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: green
                          iconF7: battery_100
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_grid_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) >= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    preserveAspectRatio: xMidYMid slice
                    style:
                      height: auto
                      width: auto
                      tag: svg
                      viewBox: 0 0 100 100
                      xmlns: http://www.w3.org/2000/svg
                  slots:
                    default:
                      - component: f7-row
                        config:
                          d: M60 -5 v10 c0 30 10 35 30 35 h20
                          fill: none
                          id: path1
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          stroke-width: 4
                          tag: circle
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                      - component: f7-row
                        config:
                          d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
                          fill: none
                          id: path2
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path2"
                      - component: f7-row
                        config:
                          d: M50, 0 v100
                          fill: none
                          id: path3
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path3"
                      - component: f7-row
                        config:
                          d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
                          fill: none
                          id: path4
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path4"
                      - component: f7-row
                        config:
                          d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
                          fill: none
                          id: path5
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path5"
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_battery_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) <= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])) + ' ᵂ'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L2].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L3].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_consumption_2
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.complete_L1].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.backup_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column

really don’t know what’s wrong and how to find

JustinG · October 14, 2022, 3:27pm

Two things:

The tag property that turns the f7-col into an svg has been moved under the style property. It it’s not a style but just a config.

alda1:

                - component: f7-col
                  config:
                    preserveAspectRatio: xMidYMid slice
                    style:
                      height: auto
                      width: auto
                      tag: svg
                      viewBox: 0 0 100 100
                      xmlns: http://www.w3.org/2000/svg

You put the svg directly into the the flex row. My comment above talks about making sure the svg is in its own container which will then control the size of the svg. It’s the same thing you’ve done with each of the icons:

                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_grid_2

It’ll be easier to get the svg to size properly if you have it as the child of another f7-col.

alda1 · October 14, 2022, 4:12pm

ok, point one I corrected:

 - component: f7-col
                  config:
                    preserveAspectRatio: xMidYMid slice
                    style:
                      height: auto
                      width: auto
                    tag: svg
                    viewBox: 0 0 100 100
                    xmlns: http://www.w3.org/2000/svg
                  slots:
                    default:
                      - component: f7-row
                        config:
                          d: M60 -5 v10 c0 30 10 35 30 35 h20
                          fill: none
                          id: path1
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)

Point two isn’t clear for me
Now the svg is part of f7-col or ?:

           text: = items[props.Grid_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    preserveAspectRatio: xMidYMid slice
                    style:
                      height: auto
                      width: auto
                    tag: svg
                    viewBox: 0 0 100 100
                    xmlns: http://www.w3.org/2000/svg
                  slots:
                    default:
                      - component: f7-row
                        config:
                          d: M60 -5 v10 c0 30 10 35 30 35 h20
                          fill: none
                          id: path1
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                      - component: f7-row

alda1 · October 14, 2022, 4:28pm

actuall full code:

uid: PV_widget_by_ALDA_v2
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
    - context: item
      label: Grid L2
      name: Grid_L2
      required: true
      type: TEXT
    - context: item
      label: Grid L3
      name: Grid_L3
      required: true
      type: TEXT
    - context: item
      label: Complete consumption L1
      name: complete_L1
      required: true
      type: TEXT
    - context: item
      label: Backup loads L1
      name: backup_L1
      required: true
      type: TEXT
    - context: item
      label: PV Production
      name: pv_leistung
      required: true
      type: TEXT
    - context: item
      label: Battery Power
      name: batterieleistung
      required: true
      type: TEXT
    - context: item
      label: Batterie SOC
      name: batterylevel
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 14, 2022, 5:25:44 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 : ''"
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          --f7-theme-color: var(--f7-text-color)
          padding: 0
          margin: 0
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            text-align: center
                          text: =Math.round(items[props.pv_leistung].state) + ' ᵂ'
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_pv_2
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-link
                        config:
                          iconColor: red
                          iconF7: battery_0
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 35) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: orange
                          iconF7: battery_25
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 35 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: green
                          iconF7: battery_100
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_grid_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) >= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    preserveAspectRatio: xMidYMid slice
                    style:
                      height: auto
                      width: auto
                    tag: svg
                    viewBox: 0 0 100 100
                    xmlns: http://www.w3.org/2000/svg
                  slots:
                    default:
                      - component: f7-row
                        config:
                          d: M60 -5 v10 c0 30 10 35 30 35 h20
                          fill: none
                          id: path1
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          style:
                            stroke-width: 4
                          tag: circle
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path1"
                      - component: f7-row
                        config:
                          d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
                          fill: none
                          id: path2
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path2"
                      - component: f7-row
                        config:
                          d: M50, 0 v100
                          fill: none
                          id: path3
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path3"
                      - component: f7-row
                        config:
                          d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
                          fill: none
                          id: path4
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path4"
                      - component: f7-row
                        config:
                          d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
                          fill: none
                          id: path5
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                          tag: path
                          vector-effect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                      - component: f7-row
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          strokeWidth: 10
                          tag: circle
                          vectorEffect: non-scaling-stroke
                          visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                        slots:
                          default:
                            - component: f7-row
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                                tag: animateMotion
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: mpath
                                      xlink:href: "#path5"
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_battery_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) <= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])) + ' ᵂ'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L2].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L3].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_consumption_2
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.complete_L1].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.backup_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column

and how it looks :

complete bad layout.

alda1 · October 14, 2022, 6:36pm

ok, I did next trial/error test and… it’s working. Here is a code:

uid: PV_widget_by_ALDA_v2
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
    - context: item
      label: Grid L2
      name: Grid_L2
      required: true
      type: TEXT
    - context: item
      label: Grid L3
      name: Grid_L3
      required: true
      type: TEXT
    - context: item
      label: Complete consumption L1
      name: complete_L1
      required: true
      type: TEXT
    - context: item
      label: Backup loads L1
      name: backup_L1
      required: true
      type: TEXT
    - context: item
      label: PV Production
      name: pv_leistung
      required: true
      type: TEXT
    - context: item
      label: Battery Power
      name: batterieleistung
      required: true
      type: TEXT
    - context: item
      label: Batterie SOC
      name: batterylevel
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Oct 14, 2022, 7:22:12 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 : ''"
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          --f7-theme-color: var(--f7-text-color)
          padding: 0
          margin: 0
      slots:
        default:
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            text-align: center
                          text: =Math.round(items[props.pv_leistung].state) + ' ᵂ'
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_pv_2
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-link
                        config:
                          iconColor: red
                          iconF7: battery_0
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 35) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: orange
                          iconF7: battery_25
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 35 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
                      - component: oh-link
                        config:
                          iconColor: green
                          iconF7: battery_100
                          iconSize: 2vw
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            white-space: nowrap
                          text: =items[props.batterylevel].state
                          visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75) ? true : false'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_grid_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) >= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: f7-col
                        config:
                          preserveAspectRatio: xMidYMid slice
                          style:
                            height: auto
                            width: auto
                          tag: svg
                          viewBox: 0 0 100 100
                          xmlns: http://www.w3.org/2000/svg
                        slots:
                          default:
                            - component: f7-row
                              config:
                                d: M60 -5 v10 c0 30 10 35 30 35 h20
                                fill: none
                                id: path1
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                stroke-width: 4
                                tag: circle
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) > 50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path1"
                            - component: f7-row
                              config:
                                d: M40 -5 v10 c0 40 -10 35 -30 35 h-20
                                fill: none
                                id: path2
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) < -50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path2"
                            - component: f7-row
                              config:
                                d: M50, 0 v100
                                fill: none
                                id: path3
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0 ) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path3"
                            - component: f7-row
                              config:
                                d: M-5 50 l10 0 c40 0 35 10 35 50 l 0 20
                                fill: none
                                id: path4
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.Grid_L1].state.split(" ")[0]) > 50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path4"
                            - component: f7-row
                              config:
                                d: M 105 50 l -10 0 c -40 0 -35 10 -35 50 l 0 20
                                fill: none
                                id: path5
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                tag: path
                                vector-effect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                            - component: f7-row
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                strokeWidth: 10
                                tag: circle
                                vectorEffect: non-scaling-stroke
                                visible: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) < -50) ? true : false'
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                      tag: animateMotion
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path5"
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_battery_2
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0]) <= 0) ? "red" : "green"'
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =Math.abs(Number.parseFloat(items[props.batterieleistung].state.split(" ")[0])) + ' ᵂ'
          - component: f7-row
            config:
              style:
                align-items: center
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L2].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: = items[props.Grid_L3].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 80%
                          icon: sma_consumption_2
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.complete_L1].state + ' ᵂ'
                      - component: Label
                        config:
                          style:
                            font-size: 1vw
                            font-weight: bold
                            margin-top: 0px
                            text-align: center
                          text: =items[props.backup_L1].state + ' ᵂ'
                - component: f7-col
                  config:
                    style:
                      width: 33%
                      display: flex
                      align-items: center
                      flex-direction: column

But problem is understand why.
I have this structure:

component: f7-card
    - component: f7-block //main block
          - component: f7-row //row1
                - component: f7-col //col1 in row1 - empty
                - component: f7-col //col2 in row1
                      - component: Label
                - component: f7-col //col3 in row1
                      - component: oh-link
                      - component: oh-link
                      - component: oh-link
          - component: f7-row //row2
                - component: f7-col //col1 in row2
                      - component: oh-icon
                      - component: Label
                - component: f7-col //col2 in row2
                      - component: f7-col // WHY THIS COL ???
                            - component: f7-row
                            - component: f7-row
                                  - component: f7-row
                            - component: f7-row
                            - component: f7-row
                                  - component: f7-row
                            - component: f7-row
                            - component: f7-row
                                  - component: f7-row
                            - component: f7-row
                            - component: f7-row
                                  - component: f7-row
                            - component: f7-row
                            - component: f7-row
                                  - component: f7-row
                - component: f7-col //col3 in row2
                      - component: oh-icon
                      - component: Label
          - component: f7-row //row3
                - component: f7-col //col1 in row3
                      - component: Label
                      - component: Label
                - component: f7-col //col2 in row3
                      - component: oh-icon
                      - component: Label
                      - component: Label
                - component: f7-col //col2 in row3 -empty

JustinG · October 14, 2022, 9:21pm

The short answer is: the f7-col you are asking about isn’t an f7-col at all.

All of this yaml code gets interpreted by the vue page rendering library to be converted into html. Many of the f7 components (including the f7-block, the f7-row, and the f7-col) get rendered in the final html page as <div> element that just get some extra styling based on whether it is a block, row or column. But sometimes you want a different element than a <div> and the f7-row and f7-col come with a special setting to change this: tag. When you set:

tag: svg

on the f7-col it is no longer rendered as a <div> element, but is now rendered as an <svg> element which is the required base element to make a svg graphic on a web page. You’ll note that every row that is a descendant of that svg tag also uses the tag property to change how it is rendered in order to build up the svg graphic with all its special tags.

If you were to upgrade to one of the most recent snapshot versions, you could actually make this more clear because the newest updates to the widget system allow putting html tags directly in the component definition and that part of your widget would look like this instead:

- component: f7-col //col2 in row2
  - component: svg // start of svg graphic

alda1 · October 15, 2022, 6:22am

Thank you for explanation.
During setup of my widget I found one small error with resizing
When I resizing a windows, widget is also resizing according to column option:

When I reach a limit windows size, wiget is resized

but not a fonts. My problem is, that font is all the time resized to windows size.

So it looks like I used a wrong instruction:

                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 1.5vw
                            font-weight: bold
                            text-align: center
                          text: =Math.round(items[props.pv_leistung].state) + ' ᵂ'

1.5vw is calculating from windows size, but I need calculation from block/card size.

Screenshot from my Cell phone:

JustinG · October 15, 2022, 4:41pm

The typical design philosophy behind web pages is that the text remains at a constant readable level even if the container that text is in changes size; the exact opposite of what you want here. This is why text size has different options (e.g., no % unit) than other size units in CSS.

The newest snapshot versions have some recently added code that includes a screen object in the item expressions that will tell you several things including the width of the OH window, but that still doesn’t get you to the width of the text’s container. In practice, scaling text exactly with container size can only be accomplished with something beyond css (usually, extra javascript code).

You can get close by using the device object that’s available to you in the expression code. You can check whether a widget is currently being displayed on a desktop browser or a mobile browser with device.desktop. This, at least, let’s you define two different text sizes, one for desktop and one for mobile:

font-size: =(device.desktop)?(1.5vw):(some different size for mobile).

Again, with the new widget improvements in the latest snapshots, you can achieve full, proper scaling of text, but to do so, you have to embed the text in it’s own svg element like you did with the animation:

uid: demo:svg_text_scale
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-card
config:
  title: Scaling svg text
slots:
  default:
    - component: svg
      config:
        style:
          height: 20%
          width: 100%
        viewBox: 0 0 100 20
        xmlns: http://www.w3.org/2000/svg
      slots:
        default:
          - component: text
            config:
              text-anchor: middle
              x: 50
              y: 15
              content: Text here

text-scale
(Note: This won’t work in older versions because of the content config parameter, which is new.)

alda1 · October 15, 2022, 5:08pm

I tried the first one :

font-size: =(device.desktop)?(0.1vw):(30vw)

On purpose I used so big difference to see if it’s working, but I think it isn’t accepted and is used any default value

to second possibility : So I must install 3.4 milstone or really latest snapshot ?

JustinG · October 15, 2022, 5:19pm

alda1:

I tried the first one :
font-size: =(device.desktop)?(0.1vw):(30vw)
On purpose I used so big difference to see if it’s working, but I think it isn’t accepted and is used any default value

Sorry, I missed some quotes in my quickly typed example. For the css styles, you always have to make sure that the expression returns strings. The following should work:

font-size: =(device.desktop)?('0.1vw'):('30vw')

Really the latest snapshot. The both the screen object and the html tag updates were added after the most recent milestone.

alda1 · October 15, 2022, 5:26pm

I think at the moment this way is ok for me. I’m able find two sizes. One for desktop and one for mobile.

Second solution is the best, but I’m not sure how stable snapshots are and how many bugs I can expect.