Ignition Perspective Pipe line water flow animation

Ignition
,
1

Hi i want to animate Perspective Pipe lines look like water flowing, based on Boolean and Int tags. Please share your ideas Thanks.

2

What exactly are you looking for? Something like this,

2 Likes
3

Yes Exactly like this, In ignition perspective. can you share the procedure.

4

Iā€™m not the best to ask on this, perhaps @victordcq has a better approach. But here is an example (not quite like the one above), paste this into a View.

[
  {
    "type": "ia.shapes.svg",
    "version": 0,
    "props": {
      "viewBox": "0 0 149.36 96.872",
      "elements": [
        {
          "elements": [
            {
              "d": "m21.458 92.737v93.996l48.249 0.3574v-57.542h44.675v30.736c51.823 0.3574 51.466 0 51.466 0",
              "fill": {
                "paint": "#C0C0C000"
              },
              "name": "path1193",
              "stroke": {
                "paint": "#4ECD57",
                "width": 5
              },
              "type": "path"
            }
          ],
          "name": "layer1",
          "transform": "translate(-18.958 -92.737)",
          "type": "group"
        }
      ],
      "style": {
        "classes": "lineMove"
      }
    },
    "meta": {
      "name": "Line_1"
    },
    "position": {
      "x": 140,
      "y": 436,
      "height": 220,
      "width": 386
    },
    "custom": {}
  }
]

Here is the CSS

.psc-lineMove {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}
1 Like
5

@jlandwerlen Thanks for your support, Could please give me the brief idea about this.

6

Seems good, i dont really do much with animations, but this is probably the way to go.

7
8

Hi, I was trying to paste the json script to a new using Shift + right click + paste jason, but looks like the format is incorrect with additional square bracket, but after removing the square bracket and import, it show blank screen.

9

Sorry, not sure why I did it that way, but just paste into an opened view.

Here is the JSON

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "Line_1"
        },
        "position": {
          "height": 220,
          "width": 386,
          "x": 156,
          "y": 208
        },
        "props": {
          "elements": [
            {
              "elements": [
                {
                  "d": "m21.458 92.737v93.996l48.249 0.3574v-57.542h44.675v30.736c51.823 0.3574 51.466 0 51.466 0",
                  "fill": {
                    "paint": "#C0C0C000"
                  },
                  "name": "path1193",
                  "stroke": {
                    "paint": "#4ECD57",
                    "width": 5
                  },
                  "type": "path"
                }
              ],
              "name": "layer1",
              "transform": "translate(-18.958 -92.737)",
              "type": "group"
            }
          ],
          "style": {
            "classes": "lineMove"
          },
          "viewBox": "0 0 149.36 96.872"
        },
        "type": "ia.shapes.svg"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}