# Pipe water pump animation

**URL:** <https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 27, 2024, 5:40pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966 "2024-05-27T17:40:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 27, 2024, 5:40pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/1 "2024-05-27T17:40:28Z")

</div>

Someone can tell me how can do `water pump animation` ?  
I would like change state of segment when valve is open or closed

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/6/96672dd8eec4c0dbb517fa80900f38ce8702d3d5.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 27, 2024, 5:44pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/2 "2024-05-27T17:44:42Z")

</div>

It might be time to read up on [High Performance HMI Techniques | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/vision/common-tasks-in-vision/high-performance-hmitechniques).

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 27, 2024, 5:49pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/3 "2024-05-27T17:49:57Z")

</div>

thank you, I will read it

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 27, 2024, 5:57pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/4 "2024-05-27T17:57:22Z")

</div>

Don't forget this forum has a good search engine, here's a topic I responded to with an example. It might not be exactly as you need, but should be a good start.

> [@Ignition Perspective Pipe line water flow animation](https://forum.inductiveautomation.com/t/ignition-perspective-pipe-line-water-flow-animation/64212/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.737v…

I also recommend a peek at high performance. Your example gives me hives. Your use of color doesn't make any sense and IMO offers nothing positive for the end user.

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 27, 2024, 6:09pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/5 "2024-05-27T18:09:24Z")

</div>

Thank you,  
import this json on ignition ?

I created a file Line\_1.json and I copy json then , and what is the next step ?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 27, 2024, 6:12pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/6 "2024-05-27T18:12:48Z")

</div>

Read the entire topic, you'll need to edit your stylesheet.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [May 27, 2024, 6:24pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/7 "2024-05-27T18:24:52Z")

</div>

I just checked out the high performance link. I'm familiar with this design scheme but wanted to see what they said about it.

I've only seen a handful of customers that want UIs like this. Ultimately, I think it's important to give customers the UI they want. It could get ugly if you force a scheme on people that they don't want.

The ideas behind high performance make sense but I think you can make abnormal conditions stand out without making an HMI look bland and cheap. Our standard model at work uses color codes to communicate all overrides and states but alarm conditions are made to stand out. We do both models though. Most of the time I have seen customers choose our standard model over a high performance model. On upgrades a lot of customers prefer to stick with whatever model they had in their old technology to avoid re-training operators.

Also, pipe animations are viewed as unnecessary by a lot of people and a huge hassle for most people. A lot of industries consider them very important because they show the flow path visually which I've seen a lot of operators use to troubleshoot problems. I personally prefer to avoid doing pipe animations but I always make sure I can with any pipe model I use in case the customer tells me they want them.

We did a large process SCADA project in food production that was mostly built on the high performance scheme. They wanted pipe animations for their operators even though the symbols were generally "high performance" styles. Ultimately, they were pleased with the end product. I'm sure a high performance evangelist would have screamed bloody murder though.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 27, 2024, 6:30pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/8 "2024-05-27T18:30:02Z")

</div>

A very short point of high performance, no unnecessary animations and use of color should be used to help bring attention to the important things. Example on color, do not use colors associated with alarms, red being one such color.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [May 27, 2024, 6:59pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/9 "2024-05-27T18:59:08Z")

</div>

You will probably not get rid of "Red == Stop" in my lifetime. Mainly because it is required by code in the U.S. for emergency stop pushbuttons. Since red **must** be associated with "stop" for this case, simple consistency associates it with "stop" for other control purposes.

Humans are remarkably adept at applying context to information supplied graphically. They can handle red for stop and red for alarm and red for danger.

Red for alarm arose because alarms are historically associated with conditions that stop a machine (imagine that). Red for danger on signage must be understood in the context that it is a static command to people, not a reflection of machine state (in that form).

Using red in controls only for "danger", especially for "energized", comes from the power industry, which **does not have to follow the code mentioned above**. In the U.S., the power industry is regulated separately from manufacturing and other industries, and has requirements that contradict those in other environments.

The high performance HMI standard's drive to declutter user interfaces is valuable, but the harsh prohibition on the intuitive use of color is simply wrong. IMNSHO.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 27, 2024, 11:05pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/10 "2024-05-27T23:05:26Z")

</div>

As far as I know you won't get thrown in jail for not following High Performance. As with most standards, people tend to pick and choose what they follow. If you only partially follow a standard, does that count as following the standard? I bet you'll get a varying degree of answers and opinions.

On the topic of color, it should be noted that color alone should not be the sole differentiating/visual factor.

> **[How to Maximize Operator Effectiveness with a High-Performance HMI](https://blog.isa.org/the-high-performance-hmi)**
>
> HMI information needs to be displayed in meaningful and actionable ways rather than as "raw data."

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [May 28, 2024, 12:38am UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/11 "2024-05-28T00:38:36Z")

</div>

> [@jlandwerlen](#):
>
> color alone should not be the sole differentiating/visual factor

Concur, and there are other regulations about accommodating disabilities, like color-blindness.

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 28, 2024, 9:34am UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/12 "2024-05-28T09:34:45Z")

</div>

> [@jlandwerlen](#):
>
> Read the entire topic, you'll need to edit your stylesheet.

Hello, I read the topic  
I modified stylesheet

```python
@keyframes rotateTurbineWind {    
 0%{
   }
100%{
    transform: rotate(360deg);
    transform-origin: 0% 0%
   }
} transform: rotate(0deg);
    transform-origin: 50% 50%

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

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

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/9/99c6665e5de0b1a680f19af7d5699024283d45fb.png)

I use the same Json component, but nothing is happened. Maybe I forgot something 🙃

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 28, 2024, 12:00pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/13 "2024-05-28T12:00:15Z")

</div>

If that is your actual stylesheet then you are missing closing brackets from the turbine stuff.

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 28, 2024, 12:03pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/14 "2024-05-28T12:03:50Z")

</div>

merci, I have changed it , but I forgot modify what I posted on forum. But I still get somme result (nothing is happened).

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 28, 2024, 12:05pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/15 "2024-05-28T12:05:31Z")

</div>

You saved? If you added things exactly, and you saved, then I can't help you. Sorry.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [May 28, 2024, 12:25pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/16 "2024-05-28T12:25:24Z")

</div>

You have your animation call in your keyframes. You need a style that applies the animation calling the keyframes.

Something like this. Note the ".psc" prefix. When you apply this you will just type "dash" into the style property on the element you are animating. The .psc prefix is required for styles declared in the advanced style sheet.

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

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

```

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 28, 2024, 12:29pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/17 "2024-05-28T12:29:13Z")

</div>

> [@Steve\_Laubach](#):
>
> ```python
> .psc-dash{
> stroke-dasharray: 10;
> stroke-dashoffset: 10;
> animation: dash 20s linear infinite;
> }
> 
> @keyframes dash {
> from {
> stroke-dashoffset: 0;
> }
> to {
> stroke-dashoffset: 1000;
> }
> }
> 
> ```

Thank, you. I put `dash` on style--\>classes it work now.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0bc687f0e08af0522b890bd7c17c325999269e8e.png)

---

<div class="post-metadata">

**Author:** ![sebastien\_ng](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sebastien_ng/32/55297_2.png) [@sebastien\_ng](https://forum.inductiveautomation.com/u/sebastien_ng)\
**Post date:** [May 28, 2024, 12:30pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/18 "2024-05-28T12:30:36Z")

</div>

> [@jlandwerlen](#):
>
> You saved? If you added things exactly, and you saved, then I can't help you. Sorry.

tahnk you, I replace `lineMove` to `dash` it work

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [May 28, 2024, 12:38pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/19 "2024-05-28T12:38:06Z")

</div>

Great catch Steve. I didn't even look that close since I assumed he would have copied and pasted the example verbatim instead of hand jamming.

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [May 28, 2024, 12:47pm UTC](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966/20 "2024-05-28T12:47:58Z")

</div>

I knew you know how that works. It took me a few looks at that to notice what was wrong too 🙂

[Next page](https://forum.inductiveautomation.com/t/pipe-water-pump-animation/90966.md?page=2)