Animations in the Widget

[alda1 (Alex Needle)]

I have a animation :

How I can do, that both lines are connected (means no gap between) ?
My code :

                - component: f7-col
                  config:
                    style:
                      background: yellow
                      align-items: center
                      border: 0px solid grey
                      border-radius: 0px
                      display: flex
                      flex-direction: column
                      width: 33%
                      height: =(device.desktop)?('12vw'):('35vw')
                  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"   

[JustinG]

I’m afraid I don’t fully understand what you are trying to do. The code you have posted is only for the curved line with it’s animated dot. There is no vertical line.

Are you trying to extend the curved line path? In that case you don’t link two different paths together, you just change the d property of the path to draw a longer vertical or horizontal segment:

d - SVG: Scalable Vector Graphics | MDN

As a side note: this is very old code you are starting from. As long as you are on any OH4 version (or most of the later OH3 versions) you don’t need to use f7-row and tag. You can just put the tag name directly in the component declaration. So instead of:

- component: f7-row
  config:
    tag: path
    ...

you just need:

- component: path
  config:
    ...

[alda1 (Alex Needle)]

sorry for my bad explanation
I want add this line (red ):

But I’m not sure if line can go over two f7-col

[alda1 (Alex Needle)]

My goal was make this connections

[JustinG]

@alda1

I want add this line (red ):

But I’m not sure if line can go over two f7-col

With the correct css settings elements can extend beyond their containers so you could, theoretically, draw that line extension (you would need to control the containers overflow style and the size and path of the svg). My recommendation would be not to, however, because I think you will find this is a very brittle solution.

@alda1

My goal was make this connections

Given the example image, there are really 2 reasonable ways you could render this: 1) you could make the entire thing 1 large svg image or 2) you could have 3 smaller svgs (1 between the first and second column of boxes, 1 between the second and third column of boxes, and 1 small one between the two boxes in the middle column.

Option 1 would require getting more familiar with using the widget yaml to construct svgs (and integrating the small icons would be a pretty advanced step), but would give you significantly more control over things like the way the whole things scales.

Option 2 would take some of the complexity out of the svgs, they would look very much like the example you are working from, but applying all the css styles to get the boxes to look the way you want might be a little difficult.

[alda1 (Alex Needle)]

ok, I made a raw layout

uid: PV_widget_by_ALDA_v2025
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 10, 2025, 10:14:15 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    comment: Definice podkladniho listu
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          --f7-theme-color: var(--f7-text-color)
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: xxxxxxxx
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: xxxxxxxx
          - component: f7-col
            config:
              style:
                width: 50px
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px                      
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: xxxxxxxx
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px                    
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: xxxxxxxx
          - component: f7-col
            config:
              style:
                width: 50px
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px                    
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 90px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: xxxxxxxx
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px                    
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 120px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: xxxxxxxx
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px                    
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 100px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: xxxxxxxx
                        

But now I need small help with first first SVG definition

[JustinG]

@alda1

But now I need small help with first first SVG definition

You’ve got a lot of the pieces that you need even in the small svg snippet you posted above.

1. You need to start with an svg tag: since you wan this image to fill the whole column you’re going to give it width and height 100%. However, to make your life easier as you build the paths, you want to set the view box to something that matches the aspect ratio of your column. It looks like the space you’ve created is 50 x 350 pixels so a viewbox of 0 0 50 350 will mean that the svg coordinates match the pixel coordinates:

- component: svg
  config:
    style:
      height: 100%
      width: 100%
    viewBox: 0 0 50 350
    xmlns: http://www.w3.org/2000/svg

2. You’ll want 1 path in that svg for each of the 3 lines that you’re going to draw. Here you’ll need to use the link I posted above to understand the draw commands that go into d property of the path. For example, the line connecting the two top boxes should be pretty easy because you want the path to start at (0, 75) and move horizontally all the way across :

- component: path
  config:
    id: pathGridToCharger
    d: M0,75 h 50
    stroke: rgba(100, 150, 200, 0.8)
    stroke-width: 2

3. You’ll also want one circle for each path, and the circle will need an animateMotion child component and that animateMotion component will need its own mpath component that links to the id of the path you want the circle to follow:

- component: circle
  config:
    fill: rgba(100, 150, 200, 0.8)
    r: 6
    stroke-width: 4
  slots:
    default:
      - component: animateMotion
        config:
          calcMode: linear
          dur: 4s
          repeatCount: indefinite
        slots:
          default:
            - component: mpath
              config:
                xlink:href: "#pathGridToCharger" 

[alda1 (Alex Needle)]

I’m doing somethink wrong, line isn’t there

uid: PV_widget_by_ALDA_v2025
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 10, 2025, 10:25:51 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    comment: Definice podkladniho listu
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          --f7-theme-color: var(--f7-text-color)
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C1R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C1R3
          - component: f7-col
            config:
              style:
                width: 50px
            slots:
              default:                
                - component: svg
                  config:
                    style:
                      height: 100%
                      width: 100%
                    viewBox: 0 0 50 350
                    xmlns: http://www.w3.org/2000/svg                
                - component: path
                  config:
                    id: pathGridToCharger
                    d: M0,75 h 50
                    stroke: rgba(100, 150, 200, 0.8)
                    stroke-width: 2                
                - component: circle
                  config:
                    fill: rgba(100, 150, 200, 0.8)
                    r: 6
                    stroke-width: 4
                  slots:
                    default:
                      - component: animateMotion
                        config:
                          calcMode: linear
                          dur: 4s
                          repeatCount: indefinite
                        slots:
                          default:
                            - component: mpath
                              config:
                                xlink:href: "#pathGridToCharger"                 
                
                
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C3R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C3R3
          - component: f7-col
            config:
              style:
                width: 50px
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 90px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 120px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R3
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 100px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R5

[alda1 (Alex Needle)]

ok, found my error, now it works :

uid: PV_widget_by_ALDA_v2025
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 12, 2025, 9:22:15 AM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    comment: Definice podkladniho listu
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          --f7-theme-color: var(--f7-text-color)
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C1R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C1R3
          - component: f7-col
            config:
              style:
                width: 50px
            slots:
              default:
                - component: svg
                  config:
                    style:
                      height: 100%
                      width: 100%
                    viewBox: 0 0 50 350
                    xmlns: http://www.w3.org/2000/svg
                  slots:
                    default:                    
                    
                      - component: path
                        config:
                          id: pathGridToCharger
                          d: M0,75 h 50
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                      - component: circle
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          stroke-width: 4
                        slots:
                          default:
                            - component: animateMotion
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                              slots:
                                default:
                                  - component: mpath
                                    config:
                                      xlink:href: "#pathGridToCharger"
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C3R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C3R3
          - component: f7-col
            config:
              style:
                width: 50px
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 90px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 120px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R3
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 100px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R5

[alda1 (Alex Needle)]

so I implemented next curves:
Question is why there is this black area ?

uid: PV_widget_by_ALDA_v2025
tags: []
props:
  parameters:
    - context: item
      label: Grid L1
      name: Grid_L1
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 12, 2025, 9:22:15 AM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
    comment: Definice podkladniho listu
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          --f7-theme-color: var(--f7-text-color)
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C1R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C1R3
          - component: f7-col
            config:
              style:
                width: 50px
            slots:
              default:
                - component: svg
                  config:
                    style:
                      height: 100%
                      width: 100%
                    viewBox: 0 0 50 350
                    xmlns: http://www.w3.org/2000/svg
                  slots:
                    default:                    
                    
                      - component: path
                        config:
                          id: pathGridToCharger
                          d: M0,75 h 50
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                      - component: circle
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          stroke-width: 4
                        slots:
                          default:
                            - component: animateMotion
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                              slots:
                                default:
                                  - component: mpath
                                    config:
                                      xlink:href: "#pathGridToCharger"
                                      
                                      
                      - component: path
                        config:
                          id: pathSolarToBatt
                          d: M0,275 h 50
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                      - component: circle
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          stroke-width: 4
                        slots:
                          default:
                            - component: animateMotion
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                              slots:
                                default:
                                  - component: mpath
                                    config:
                                      xlink:href: "#pathSolarToBatt"         
                                      

                      - component: path
                        config:
                          id: pathSolarToCharger
                          d: M0,275 c 40,0 10,-200 50,-200  
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                      - component: circle
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          stroke-width: 4
                        slots:
                          default:
                            - component: animateMotion
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                              slots:
                                default:
                                  - component: mpath
                                    config:
                                      xlink:href: "#pathSolarToCharger"  



                                      
                                      
                                      
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C3R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 50px
                  slots:
                    default:
                      - component: svg
                        config:
                          style:
                            height: 100%
                            width: 100%
                          viewBox: 0 0 150 50
                          xmlns: http://www.w3.org/2000/svg
                        slots:
                          default:                    
                    
                            - component: path
                              config:
                                id: pathCargerToBatt
                                d: M75,0 v 50
                                stroke: rgba(100, 150, 200, 0.8)
                                stroke-width: 2
                                
                                
                                
                                
                            - component: circle
                              config:
                                fill: rgba(100, 150, 200, 0.8)
                                r: 6
                                stroke-width: 4
                              slots:
                                default:
                                  - component: animateMotion
                                    config:
                                      calcMode: linear
                                      dur: 4s
                                      repeatCount: indefinite
                                    slots:
                                      default:
                                        - component: mpath
                                          config:
                                            xlink:href: "#pathCargerToBatt"  
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 150px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C3R3
          - component: f7-col
            config:
              style:
                width: 50px
                
            slots:
              default:
                - component: svg
                  config:
                    style:
                      height: 100%
                      width: 100%
                    viewBox: 0 0 50 350
                    xmlns: http://www.w3.org/2000/svg
                  slots:
                    default:                    
                    
                      - component: path
                        config:
                          id: pathCargerToAC
                          d: M0,40 h 50
                          stroke: rgba(100, 150, 200, 0.8)
                          stroke-width: 2
                      - component: circle
                        config:
                          fill: rgba(100, 150, 200, 0.8)
                          r: 6
                          stroke-width: 4
                        slots:
                          default:
                            - component: animateMotion
                              config:
                                calcMode: linear
                                dur: 4s
                                repeatCount: indefinite
                              slots:
                                default:
                                  - component: mpath
                                    config:
                                      xlink:href: "#pathCargerToAC"                
                
                
                
                
                
                
                
          - component: f7-col
            config:
              style:
                width: 150px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 90px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R1
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 120px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R3
                - component: f7-col
                  config:
                    style:
                      background: red
                      display: flex
                      flex-direction: column
                      height: 20px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: space
                - component: f7-col
                  config:
                    style:
                      border: 2px solid darkgreen
                      border-radius: 20px
                      background: yellow
                      display: flex
                      flex-direction: column
                      height: 100px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: =(device.desktop)?('1.2vw'):('4.0vw')
                            font-weight: bold
                          text: C5R5

[JustinG]

@alda1

Question is why there is this black area ?

On the straight lines, there is 0 area to the shape so it is not necessary to worry about the fill color. On the curved lines, there is exposed area that will be filled in with the fill color which defaults to black. You just have to add fill: none to those paths.

[alda1 (Alex Needle)]

yes, now it’s ok. Is also any chance to have more than one circle on the path ?

[alda1 (Alex Needle)]

really not clear how to draw this :

I tried use a “c” and also “a” but still no luck

[JustinG]

@alda1

Is also any chance to have more than one circle on the path ?

Yes. If you duplicate one of the circles you are already drawing then there will be two circles that follow the same path. The only problem is they will be animated with the same timing. To offset the timing, you just need to add a begin value to the animateMotion of the second circle. In this case, if your animations are 4s long then you want begin: 2s so that the second circle starts half-way through the first circles animation.

@alda1

really not clear how to draw this :

That path looks to me like it’s a curve to start then a vertical section and a curve to end, so something like this: d: M50,45 c -15 0 -25 10 -25 25 v 75 c 0 15 10 25 25 25 or with arcs d: M50,45 a 25 25 90 0 0 -25 25 v 75 a 25 25 90 0 0 25 25

[alda1 (Alex Needle)]

@JustinG

That path looks to me like it’s a curve to start then a vertical section and a curve to end, so something like this: d: M50,45 c -15 0 -25 10 -25 25 v 75 c 0 15 10 25 25 25 or with arcs d: M50,45 a 25 25 90 0 0 -25 25 v 75 a 25 25 90 0 0 25 25

My problem is understand this code. I also checked other pages about SVG and still not clear.
I can’t see a angle 90° , so I must test your code.

[alda1 (Alex Needle)]

so now basic layout is done.

Now is question how to handle resizing because when I will change a screen size, box hight is much bigger :

Is it possible use this :

                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      width: 25%

or I can use somethink like this :

width: =(device.desktop)?(‘9vw’):(‘4.0vw’)

but how to keep correct aspect ratio ?

And how to handle a SVG to bein correct position ?

[JustinG]

Scaling is complex. SVGs scale very easily if you are preserving the aspect ratio. You have a lot of control over exactly how that scaling occurs by using the preserveAspectRatio property:

preserveAspectRatio - SVG: Scalable Vector Graphics | MDN

However, what you have shown is just stretching one axis so you are not preserving the aspect ratio. That makes things much more difficult. If you just set preserveAspectRatio to none then your svg will stretch to fit that space and it will maintain the correct connections, but you will see that is no longer drawing circles but ellipses and (and the lines will look like different widths) because it’s still drawing these things at the original viewBox ratio. Changing that drawing ratio would require widget expressions for the viewBox and every one of the path d properties. You are much better off actually making sure that the widget doesn’t change aspect ratio even on larger screens. Expanding for a larger screen is fine (and this is where SVGs actually excel), but you want the expansion to scale both dimensions.

[alda1 (Alex Needle)]

This was my question. How to keep same aspect ratio for whole widget, not only for SVG

[SRX (Uwe Schmitz)]

Hi
this is Gui-V2 from the victron venusOS
Is it not much easier to implement the webside with a oh-webframe-card.
Then you have the full controll including interaction

[alda1 (Alex Needle)]

I’m not implementing oh-webframe-card