Ignition Perspective symbol factory animation

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.

2 Likes

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.

2 Likes

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

1 Like

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… :yum:
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 :pray:

just look how beautiful they are)) mmm :heart_eyes:

1 Like

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 :confused:

2 Likes

Oh thatnx! :hugs:
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)

3 Likes

wow! It worked for me!) thanx! :hugs:

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.
Pump From Labels

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.

1 Like

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:

  1. Custom states, allowing for color customization (and overriding defaults)
  2. One-way conversion from a ‘symbol’ object to a plain SVG for detailed customization.
2 Likes

So this would be apply to an embedded SVG to get it back out of igntion again? That would be super useful

Who has the budget to mess around with this method? The basic drawing tools in Vision could produce good results, and given the popularity “modern” themes of flat design and “High Performance” HMI design you don’t need a dedicated drawing package to make clean/modern looking screens. I get complimented all the time with my Vision projects. As @Steve_Laubach points out in Perspective you can turn the label component into shapes and get similar results as with Vision drawing tools. Vision makes it easer to do color gradients with it’s color picker and is easier to break apart symbol factory objects to remove the busy layers to clean them up with great results.

Personally I think the symbols included in Perspective Workstation are just marketing fluff. They aren’t useful on anything more than basic process. Food/Bev has so many different valve configurations I don’t see IA possibly covering them all. There has to be a built mechanism to draw shapes like with vision, Perspective Workstation is the beginning of the end of Vision so it can’t take a step backwards by not being able to do everything Vision does.

1 Like

I never said I had the budget, I just have the passion or maybe the stupidity to spend time out of hours :slight_smile:

HPHMI and the ASM standards are certainly the guidelines I use in my applications and graphics. I haven’t used gradients and complex graphics in years, but still I would never use the designer for graphics more complex than a rectangle, straight line, or circle, as the designer (in vision) lacks bezier and even basic vertex manipulation tools (you can drag vertices around, but good luck trying to get them aligned or in the right positions without being able to use the keyboard or axes constraints)

2 Likes

I’m checking out imported SVG like @nminchin is talking about and I agree that it’s definitely a superior way to go from an overhead standpoint. There’s a bit of a learning curve on Inkscape but it has good features.

So all that textbox/style stuff I did in that other example can be done by creating a custom SVG in inkscape, importing it into Ignition and animating it using tint/color. It’s not as nice as Ignition’s animated symbols but it’s good and it’s a lot less overhead than 5 textboxes per device. So I would say a tinted imported SVG would be a decent work around if you need more colors than the Perspective symbols currently support and you don’t want to worry about a future Ignition upgrade screwing up your app.

The imported SVG stuff has come a long way since I last looked at it. I’ve been doing a lot of Vision projects lately. I’m sure there’s more to this than I’m describing here considering I taught myself inkscape and figured out how to integrate that with perspective this morning. So I’m saying I haven’t dug that deeply into where the limits are with this approach.

One massive benefit that I can see is that as far as I can tell, SGVs are cached, whereas other components aren’t. This alone provides significant performance improvements.

SVG is a better way for graphic for me! I draw everything with its help!

see how it looks. It’s SVG only!)):

1 Like