Colour animation on symbol factory elements in perspective
Currently perspective does not have the ability to create basic shapes e.g rectange and animate them
I am trying to use the symbol factory to accomplish this instead
From the symbol factory, I dragged and dropped a pump from “ISA symbols”
My goal is to change the pump body to blue colour
I click on style
And then change the fill and stroke to blue
There is no change on the animation(remains gray)
I can change the background colour(black) and that works fine.
I right clicked on the element and performed a “flatten” and this created another pump. I tried to animate this is in a similar way but this did not work either.
My ultimate goal is to link the pump body to a tag. What other options are available?
Perspective does not support building of basic shapes e.t.c and this is the only way I can think of to build the pump.
See attatchment for screenshots
ignition perspective symbol factory.pdf (242.6 KB)
Here are the screenshots for the above issue
It is simple, unlike other object the svg object include several element as it shown in props of svg.
Browse the element tree and find the part you want to animate and select fill.paint and change its color. For other animation select the style part of your element. For example add visibility key under style to hide and show that part.
I know it is really hard to find the part of object you want specially in symbol with a lot of object.
My advise is draw your symbol in other drawing software and make the part you want to animate a meaningful name and import to perspective. So finding them is much easier.
For rotation, scaling and movements you should import the part separately in Perspective and bind tag to X y width height rotation key of that svg.
Thanks that worked. I used gravit designer to create and import a file. Do you know if there is a good library of .SVG files somewhere that I can use. I am looking for standard pumps, motors and valve.
In vision, I could draw out my graphic like a piping and instrumentation diagram(P&ID). I used lines for the pipes which connected different shape templates (valves, pumps, motors). In perspective, it appears I cannot draw a simple line in the views. The symbol factory has a few line symbols. Is there a simple solution for this. I think I am overlooking something
You’re not alone.
I’m trying to embrace Ignition, specifically Perspective, and I’m struggling with where to get or build graphics that aren’t built-in. Sometimes you just want to draw a simple line or box. I get the feeling that it may be common practice to build graphics in an external SVG program then import them in.
I’m going with Draw.IO (free) to draw things that align nicely then export SVG. Another free SVG option is InkScape, but it feels a bit freeform to me, haven’t used it much.
I’d much rather build simple shapes for Perspective inside Ignition as you would for Vision. I’d be surprised if that’s not somewhere on their road map.
Personally I believe there is no good library out there so I use P&ID and try to mimic symbol form it to get my own library.
Take a look a following post to see what I mean of drawing.
If you use my workflow the perspective will be create.
Use inkscape it is easy and professional.
I haven't tried yet to use Perspective for P&IDs (haven't used it for a real project yet), but if you can't even draw lines, then I can't see it being viable yet for projects that use P&IDs? Unless you draw these in Inkscape and import in, but that would be a nightmare. What if you need to move lines/pipes around??
I use simple lines for all my pipework in Vision as the pipe components have issues when resized in the client and becoming misaligned with each other.
@kgamble, what're your thoughts?
Perspective is primarily designed for mobile first applications as of now. Hence its focus is on responsive and progressive client interface based on popular DOM based client frameworks so that it can display SCADA results on any screen size from mobile to tablet to desktops. ReactJS was chosen by IA after their evaluations. DOM interface is for HTML elements which is primarily text/font based not graphics based using pixel graphics like SVG and CANVAS elements. In order to draw graphical elements you need to embed a canvas element in DOM. Where as vision was fully based on graphical coordinated system using Java Swing library. But this was not suitable for mobile devices as smart phones came later than when Ignition was developed first. So now with perspective you have a good mobile interface but a poor coordinated graphical tool for drawing P&ID and stuff like that. So right now its a trade off between rich graphical display for desktop and a responsive mobile interface while choosing vision v/s perspective.
But I guess its a matter of time when a rich coordinated graphics interface will be available on perspective so that you could design vision like (or better) graphic screens as well as responsive mobile screen in Ignition.
This is just my observation and opinion, subject to comments and corrections.
BTW we have tried to develop some SVG based graphical tool called mSCADA which allows drawing and storing graphical objects, however it is in suspended state due to lack of motivation and priority shifting to other things. But we develop it further if people think that we are on right track and such a tool will be useful! If not then perhaps it may be of some academic interest to you.
You can create some lines as embedded view and use them like component.
Or import simple line in perspective and resize and rotate as you needed.
Typically if I need to do a P&ID than I just use a label without no text and a black background as my line. In General I use a label with no text almost anytime I need a blank rectangle at all. Definitely not optimal, but it’s what we have today
Hey) look at these (see the picture below)!!
Thanx guys for these incredibly beautiful symbols for pump, valve and so on!
They are very very stylish.
But… 
Why can’t we change the running state color?
In our company we use green to define if the motor running or not…
so… I hope this feature well be presented in near future 
just look how beautiful they are)) mmm 
You can change the colour of them, but you need to override the symbol variables in the light theme.
The colours are defined in variables.css at the bottom:
...
/* Symbols */
--symbolFill--default: var(--neutral-20);
--symbolFillAnimation--default: var(--neutral-50);
--symbolStroke--default: var(--neutral-70);
--symbolFill--running: var(--white);
--symbolFillAnimation--running: var(--neutral-50);
--symbolStroke--running: var(--neutral-70);
--symbolFill--stopped: var(--neutral-40);
--symbolStroke--stopped: var(--neutral-70);
--symbolFill--faulted: #FAB6B6;
--symbolStroke--faulted: #B80D0D;
}
Windows path is:
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\variables.css
However, if you edit them here and upgrade Ignition, you’ll lose your changes. I have tried to override these in a custom theme but it doesn’t work 
Oh thatnx! 
I will try this trick, but I hope we will not going to do this in the future... I hope to have this in designer as the property... It's much comfortable...
You really should look into using a custom theme and css variables for all of your standard colours, as it provides far better standardisation than any other method (or than simply using magic colours).
You can reference css variables and use them as component property values using:
var(--VARIABLE_NAME)
This is an example of my custom style variable.css below. Mostly I reference these within Perspective Styles, however I also do reference some of the directly in component property values when Styles can’t be used.
:root {
/* Views */
--page-background: #E8E6E3;
/* Device Statuses */
--dev-sym-foi: #2FCCEB;
--dev-sym-faulted: #F05142; /* pastel red */
--dev-sym-faulted-flash: #8e160b; /* pastel red */
--dev-txt-faulted: #FFF;
--dev-txtbg-faulted: var(--dev-sym-faulted); /* pastel red */
--dev-txtbg-faulted-flash: var(--dev-sym-faulted-flash); /* pastel red */
--dev-sym-running: #42F042;
--dev-sym-running-flash: #0b8e0b;
--dev-txt-running: #2b2b2b;
--dev-txtbg-running: var(--dev-sym-running); /* pastel red */
--dev-txtbg-running-flash: var(--dev-sym-running-flash); /* pastel green dark*/
--dev-txt-stopped: #2b2b2b;
--dev-sym-stopped: #f7f7f7; /* grey-medium */
--dev-sym-stopped-flash: #d8d8d8; /* grey-dark */
--dev-txtbg-stopped: #dedede; /* grey-medium */
--dev-txtbg-stopped-flash: #c3c3c3; /* grey-dark */
--dev-sym-invalid: magenta; /* magenta */
--dev-txt-invalid: #2b2b2b;
--dev-txtbg-invalid: var(--dev-sym-invalid); /* magenta */
--dev-sym-abnormal: #FFAC47;
--dev-txt-abnormal: #2b2b2b;
--dev-txtbg-abnormal: var(--dev-sym-abnormal); /* orange*/
/* Device Modes */
--dev-txt-auto: #2b2b2b;
--dev-auto: #AAAAAA;
--dev-txt-manual: #2b2b2b;
--dev-manual: #FFAC47;
--dev-txt-maintenance: #2b2b2b;
--dev-maintenance: #F0F042;
/* Pipework Contents Fill Colours */
--pipe-cip-off: #D3BCC9;
--pipe-cip-on: #E38ABB;
--pipe-water-off: #BBC8D3;
--pipe-water-on: #B8DDF9;
--pipe-oil-off: #c6b4a7;
--pipe-oil-on: #795236;
}
For example, you can set a component’s props.style.color value to var(--pip-cip-on)
wow! It worked for me!) thanx!
I like the idea of using the new 8.1 symbols but I don’t like the idea of having future updates break any custom color animations I implement because then I have to train anyone who might touch the system on how to override the colors which has a high likelihood of causing systems to break down the road in ways that make customers really upset.
There are options (kludges) for drawing things in Perspective without using custom graphics. Eventually I expect Perspective to have native controls as robust as Vision but that is probably down the road a bit.
Need a box? Draw a label, delete the label text and give it a border, bg color, gradient, etc.
Need a line? Do the same but only give it a border on only one side.
Need a triangle?
border-left:50px solid transparent
border-right:50px solid transparent
border-bottom:50px solid #808080
Need a circle?
borderTopLeftRadius:100%
borderTopRightRadius:100%
borderBottomLeftRadius:100%
borderBottomRightRadius:100%
I recognize it’s kludgey but you can draw a pump with styled labels. You can even give it gradient styles to make it look nice. Here’s one I made as a proof of concept.
The best way I’ve found to animate something like that is to draw the device with attractive gradients and then copy those objects to make an “overlay” which you animate with translucent color animations. So you see the gradient from the underlying “drawing” but you see the color animation from the translucent color overlay.
Putting it all together… You can make a view that is just a generic device that takes a custom parameter for the state. Then you can draw your device with labels using that custom state parameter. Then you can embed instances of the view on your screens to display your devices on P&ID screens. I haven’t tested performance of this with a lot of devices on a screen but I don’t anticipate a significant performance hit. I’ve you’re planning to do this on a larger scale I would recommend creating a bunch of instances of your view on a screen and make sure it has reasonable performance.
I’m just throwing that out there as a way you can get a better appearance if the current out of the box functionality isn’t meeting your needs. I think the symbol stuff is going to get a lot better at some point. Really if you could just change the state colors it would be great.
If you need graphics, Igntion usually isn’t the best answer as it’s not designed as a drawing tool, that goes for Vision as well. Especially for Perspective, the best approach is to use a proper drawing package such as Inkscape to draw your graphics, then embed them into your project. That way you have full control of them. I’m pretty sure the performance and load times of SVGs are significantly better as well. So much so that I’m considering doing away with my device templates that use a similar approach of stacking perspective components together to build my symbols, and instead putting all of that into an SVG which includes the device symbol itself, any icons such as manual, interlock, etc. and possibly even any text such as motor speeds, valve position, etc. The biggest drawback obviously is then any future additions to these graphics heavily relies on the original SVG and additions become more difficult… But if clients then stop complaining about slow load times, it’s probably worth it. I’m hoping this will be resolved
That makes sense.
I just hope that we eventually have the ability to pick a custom number of states for devices. Just having states for running, stopped and alarm doesn’t work for me. Our model has these states
Manual Off
Manual On
Auto Off
Auto On
Alarm
I realize that information can be represented in another way but we have company-wide standards and my employer won’t want to diverge from that due to a limitation in the state selection for the out of the box devices.
Symbols are absolutely not “finished” yet - looking through open backlog items, it looks like the two highlight features still pending are:
- Custom states, allowing for color customization (and overriding defaults)
- One-way conversion from a ‘symbol’ object to a plain SVG for detailed customization.