Good afternoon! I'm working on a SVG to indicate machine running speeds and need some help. I've done a little with CSS in the past but completely lost on using it with Ignition.
Basically, I'm working on creating an indicator that will change color and either point forward or backward depending on machine cycle time. I know this seems a little wonky but we're hopeful to recreate an existing HMI screen. Here's an example of my SVG:
What I'd like to accomplish is to flip the triangles to pointing forward if speed is increasing or backward if speed is decreasing. I downloaded the excellent tutorial from Ignition Exchange here:
Exchange CSS Tutorial
After spending a good while trying to recreate the techniques demonstrated I cannot make this work correctly. Specifically, I can get a single item to rotate but it appears to rotate around the entire graphic rather that itself. Here's how I have the properties set up:
The item rotates right off the screen! I did notice Mike Bordyukov's example also had 'rotate' properties set up but I couldn't get Ignition the accept them (trying in both Vision and Perspective). Here's a screenshot of Mike's example:
What the heck am I doing wrong? Any help is greatly appreciated!
manipulating sub elements of an embedded SVG can be a little tricky. Can you include your SVG in a code block? This would allow me to embed it on a test screen and try to find a resolution.
Try transform:scaleX(-1) to flip.
I'm not sure what you mean by 'include as a codeblock', but I'm happy to attach the Inkscape file if that helps!
Ok, I tried to use transform: scaleX(-1) on elements[1].elements[9] and it rotated it out of the view frame.
I added a "transform-origin" of 98.3% and it rotated it in a way that looked kind of right.
You may be able to just plug in numbers for transform-origin to get these to flip relative to their location. It's probably a trial and error kind of thing to do that.
Sometimes it's easier to just have 1 triangle in your SVG and embed that in a template. Then you can use a template repeater (edit: It's called a "Flex Repeater") to make instances of it and have things flip in place.
1 Like
That's fine.
I was able to download the SVG and embed it on a test screen to make sure I'm working with the same thing you are. I just wanted to make sure I was giving you instructions that actually work with your drawing. SVGs can be represented differently based on how they were drawn so I could draw the same thing and have different results. I wanted to make sure I was working with the same base SVG as you were.
Interesting... I haven't used a Flex Repeater before so now might be an excellent opportunity to learn something new. Thanks, and I'll give it a shot.
If I'm dealing with just one triangle and then repeating, would I just rotate that component?
Yes.
You would have a view that is just a single triangle and animations that flip it according to whatever condition flips it.
The Flex repeater would be pointed to the view that has your triangle in it and pass in whatever condition you use to animate it. If you're passing in a lot of stuff into the view it can be optimal to make a UDT that stores all the properties you need and simply pass a partial tag path into the view so it can do indirect bindings to get all the data points.
It's even cooler than that though. You can populate a flex repeater dynamically by putting a binding on the flex repeater's container and building the json for all elements in the container using a script transform. That probably isn't applicable to this situation but it's a good thing to know about because you can really simplify a design with that capability. You can see what the JSON has to look like by making a few static elements and copy/pasting them into a text editor. Then you simply build that structure and return it as output from your transform.
