Pipe water pump animation

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

It might be time to read up on High Performance HMI Techniques | Ignition User Manual.

3 Likes

thank you, I will read it

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.

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.

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 ?

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

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.

2 Likes

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.

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.

3 Likes

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.

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

1 Like

Hello, I read the topic
I modified stylesheet

@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;
  }
}

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

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

1 Like

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

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

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.

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

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

Thank, you. I put dash on style-->classes it work now.
image

1 Like

tahnk you, I replace lineMove to dash it work

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.

1 Like

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

1 Like