Hobbled/crippled/ SVG import and implementation?

The HMI’s that I work on are pretty much pure SVG and when I saw that Ignition was all about SVG, it became a large part of why I decided to give it a go. After a few weeks though I really need someone to explain to me why importing a SVG strips out all CSS data including any class or ID names. To make matters more annoying the whole adding “psc-” prefix to the beginning of any any styles attributed to elements using the perspective gui… come on. The amount of messing around that I’ve had to do with inspector/console is pretty silly and frankly off putting. A simple alternating animation sequence using CSS isn’t really all that simple requiring what feels like hacks to get it going. Now I’m worried that my work around of adding a custom theme and then putting “psc-*” on all of my UI styles will eventually break since it feels pretty much unsupported. I thought the whole point of using a standardized platform like this is so that someone that isn’t me can do work on this thing in the future if need be and that built-in hooks for things like simple animations would be easy. Look I get it, it’s a pretty powerful framework and if you “get it” you can “make it work”, but as it is I’m finding myself writing a damn best practices manual for the “next guy”. What’s up folks?

IA is targeting a market that, for the most part, barely knows what JS and CSS are. To ensure the React front end plays well with the Designer, you can’t just bring in your own classes and scripts. You must work with what Ignition supplies in its components. For that, IA will support your results.

Short of creating an entire server-side architecture to pair with the web framework of the day, I don’t think you’ll find better.

1 Like

That’s all well and good, but they are using JS and CSS so why obfuscate them? Also if you’re expecting the “average” HMI user to be happy with 1 type of pump graphic and no ability to easily draw a PID or flow diagram… that’s a joke, right? Joe avantech or automation direct is going to be like “wait… where’s the line tool…” These folks are coming from WYSIWYG slide-based systems and perspective, in that respect, is basically another planet. Crippling/obfuscating SVG integration essentially puts IA at odds with the hundreds of toutorials on the web for making semantically correct, scaleable, and future forward interfaces. And honestly, I’m not asking any more than “hey, please don’t strip out all of the classes out of my SVG’s so that I have to annoyingly put them all back in by hand with the cumbersome user interface. Also, please don’t add a pre-fix to every single class, just tell folks that class conflicts exist and that names are important.”

2 Likes