Flood limit tripped, starting 5000ms cooldown on my gateway when calculate using current time change

[Lina_Su]

I want to implement a flowing water animation in Ignition Perspective using an arrow icon by changing the X and Y positions. My script looks something like this:

if(this.custom.stop,this.custom.start,round(this.custom.start+(dateExtract(now(10), "ms") + dateExtract(now(1000), "seconds") * 1000) % this.custom.move / this.custom.move * this.custom.dis, 0))

There are approximately 20 similar animated components on the page. However, I am encountering an error message on my Gateway saying "Flood limit tripped, starting 5000ms cooldown." I suspect it is related to this issue. Can someone please suggest a solution to eliminate this error or a better way to achieve the animation effect?

[Transistor]

Animation should be handled at the browser, if possible.
Javascript would be the default method in most web applications but that is difficult in Perspective. We can use CSS animation.

1. Create a coordinate view.
2. In Advanced Stylesheet (Project Browser → Perspective → Styles → right-click) paste in the following CSS.

CSS

.psc-moveLeft {
  animation: moveLeft 2s linear infinite;
  position: relative;
}
@keyframes moveLeft {
	0% {transform: translateX(0);}
	100% {transform: translateX(-100px);}
}

.psc-moveRight {
  animation: moveRight 2s linear infinite;
  position: relative;
}
@keyframes moveRight {
	0% {transform: translateX(0);}
	100% {transform: translateX(100px);}
}

.psc-moveUp {
  animation: moveUp 2s linear infinite;
  position: relative;
}
@keyframes moveUp {
	0% {transform: translateY(0);}
	100% {transform: translateY(-100px);}
}

.psc-moveDown {
  animation: moveDown 2s linear infinite;
  position: relative;
}
@keyframes moveDown {
	0% {transform: translateY(0);}
	100% {transform: translateY(100px);}
}

3. Project Browser → select your view → Shift-right-click → Paste JSON.

Sample view

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 395,
      "width": 565
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "height": 201,
          "rotate": {
            "anchor": "25% 100%"
          },
          "width": 202,
          "x": 102,
          "y": 98
        },
        "props": {
          "style": {
            "borderBottomLeftRadius": 15,
            "borderBottomRightRadius": 15,
            "borderColor": "#BCBEC1",
            "borderStyle": "solid",
            "borderTopLeftRadius": 15,
            "borderTopRightRadius": 15,
            "borderWidth": 40
          }
        },
        "type": "ia.display.label"
      },
      {
        "custom": {
          "animationEnable": true
        },
        "meta": {
          "name": "IconR"
        },
        "position": {
          "height": 40,
          "rotate": {
            "anchor": "0% 50%"
          },
          "width": 40,
          "x": 130,
          "y": 100
        },
        "propConfig": {
          "props.style.animationPlayState": {
            "binding": {
              "config": {
                "expression": "if({this.custom.animationEnable}, \"running\", \"paused\")\r\n// can use \"initial\" rather than \"paused\"."
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "color": "#11AC26",
          "path": "material/east",
          "style": {
            "classes": "moveRight"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "custom": {
          "animationEnable": true
        },
        "meta": {
          "name": "IconD"
        },
        "position": {
          "height": 40,
          "rotate": {
            "anchor": "75% -47%",
            "angle": "9deg"
          },
          "width": 40,
          "x": 260,
          "y": 120
        },
        "propConfig": {
          "props.style.animationPlayState": {
            "binding": {
              "config": {
                "expression": "if({this.custom.animationEnable}, \"running\", \"paused\")\r\n// can use \"initial\" rather than \"paused\"."
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "color": "#11AC26",
          "path": "material/south",
          "style": {
            "classes": "moveDown"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "custom": {
          "animationEnable": true
        },
        "meta": {
          "name": "IconU"
        },
        "position": {
          "height": 40,
          "rotate": {
            "angle": "321deg"
          },
          "width": 40,
          "x": 100,
          "y": 220
        },
        "propConfig": {
          "props.style.animationPlayState": {
            "binding": {
              "config": {
                "expression": "if({this.custom.animationEnable}, \"running\", \"paused\")\r\n// can use \"initial\" rather than \"paused\"."
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "color": "#11AC26",
          "path": "material/north",
          "style": {
            "classes": "moveUp"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "custom": {
          "animationEnable": true
        },
        "meta": {
          "name": "IconL"
        },
        "position": {
          "height": 40,
          "rotate": {
            "angle": "338deg"
          },
          "width": 40,
          "x": 220,
          "y": 260
        },
        "propConfig": {
          "props.style.animationPlayState": {
            "binding": {
              "config": {
                "expression": "if({this.custom.animationEnable}, \"running\", \"paused\")\r\n// can use \"initial\" rather than \"paused\"."
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "color": "#11AC26",
          "path": "material/west",
          "style": {
            "classes": "moveLeft"
          }
        },
        "type": "ia.display.icon"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

Note that I've given each arrow custom.animateEnable to turn the animation on and off.

It's a bit fiddly but it might get you going. There are some tricks where you could add the transform into the component and use an expression binding to change the length of the animation, etc.

[victordcq]

Yeah dont do these kinda animations in perspective, best to use css and keep things simple.
Dont create to much conditions or variables with it. It should be clear how the water is going even if the arrows dont move.

[Transistor]

@victordcq, thanks for the like.
I was trying to make a generic flow arrow with a parameter to set the direction (up, down, left, right) and rotate based on that. For some reason the icon won't rotate when I've applied the styleclass.
Have you any idea why?

If I did get that to work we'd then have to use CSS injection with an expression to move it the right way.

[pturmel]

@Lina_Su

now(10)

Especially don't try to run any but the simplest expressions at ten milliseconds. Oy!

[victordcq]

While im all for generic stuff, but by putting to much variables on animatios in perspective, its going to get abused with bindings which will cause issues. becuase those run on the gateway