Hello everyone,
I've been looking at Ignition demo projects and different visualization designs online. I'm really impressed by these designs and curious about how they're made. Could you recommend software that can be used to create visuals like the ones attached? Plus I need them to adapt to different the screen sizes and give me control of adding popups and data monitoring system.
Download the project and see how they're built! If those drawings are SVGs, they're likely created using the software Inkscape.
You can use style classes to do basic shapes and things like that. For example, you can do something like this with style classes
I would recommend learning how to use Inkscape to draw custom SVGs if you need anything more advanced. I believe they are adding drawing tools to Perspective in the next major Ignition release but you're probably looking build things in the interim.
You can drag/drop SVGs into your project. It gives you 2 options. The default option is to add it to your image library. The other option is to embed it.
I recommend embedding it because then you can manipulate aspects of the SVG using bindings. This lets you do things like animate color or even move things around.
The biggest limitation is your imagination once you figure out the CSS and SVG stuff. Here's an animated screw conveyor I did in Perspective.
There's a learning curve but it's not too difficult to pick up. Just pick it up a little at a time.
3 Likes
Good evening Steve,
I saw your animation, it's awesome!
Could you please share how you managed to do it?
I'm trying to animate a screw conveyor, but without success.
I installed Inkscape to create SVGs, but I don't know how to draw a "screw" and how to animate it.
It would be very useful for the project I'm creating and above all, to convince my bosses to switch to ignition as the new scada.
Thanks a lot.
That's an older model of what I do now. Basically, I drew a screw in inkscape, embedded it in Perspective and used a CSS animation to move it back and forth smoothly inside a coordinate container that's set to hide overflow.
I plan to eventually build an even better model but the current model has fantastic performance. It's just awkward to get it working smoothly.
The new model is all CSS.
I drew one screw thread as an optimized SVG and then converted that to a background embed in CSS set to repeat on the X axis. This makes it draw screw threads for the whole length of the label without having a large SVG (optimization). The label doesn't have any text on it. It's just a container to repeat the SVG across.
From there I can put a label inside a coordinate container that's set to clip overflow and apply my style to the label. The label is bigger than the coordinate container so that you never see the whole label (for animation reasons).
I use a binding to apply a CSS animation to make it go back and forth when the screw is running. You kind of have to play around with it to get it to run smoothly but the general code looks like this:
/*
Usage:
* Create a coordinate container where you want to use this.
* Set "overflow" to "hidden"
* Set the width of the coordinate container to 246.25. Other widths work and you can find them by adjusting width while it's running to find a sweet spot.
* Put a label inside the coordinate container
* Set "width" to 200%
* Set "height" to 100%
* apply the "inline-screw" style to the label
* use either an expression binding or a property binding with a map transform to apply just "inline-screw" when the screw is not running and apply "inline-screw screw-run-infinity" when it's running
*/
.psc-inline-screw{
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg width="40.993mm" height="62.361mm" version="1.1" viewBox="0 0 40.993 62.361" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient17" x1="-12.215" x2="-12.215" y1="-24.503" y2="-2.5413" gradientTransform="matrix(.15928 0 0 1 -39.267 -36.623)" gradientUnits="userSpaceOnUse"><stop stop-color="%23e6e6e6" offset="0"/><stop stop-color="%23646464" offset=".22801"/><stop offset=".29316"/><stop stop-color="%238c8c8c" offset=".42345"/><stop offset=".54723"/><stop stop-color="%23141414" offset=".82085"/><stop stop-color="%23646464" offset="1"/></linearGradient><linearGradient id="linearGradient34" x1="60.219" x2="79.976" y1="82.016" y2="82.016" gradientTransform="translate(89.541 -148.31)" gradientUnits="userSpaceOnUse"><stop stop-color="%23dcdcdc" offset="0"/><stop stop-color="%23323232" offset="1"/></linearGradient><linearGradient id="linearGradient35" x1="85.556" x2="102.33" y1="128.66" y2="99.614" gradientTransform="translate(45.809 -148.43)" gradientUnits="userSpaceOnUse"><stop stop-color="%23323232" offset="0"/><stop stop-color="%23e6e6e6" offset="1"/></linearGradient><linearGradient id="linearGradient36" x1="150.48" x2="150.59" y1="128.88" y2="66.517" gradientTransform="translate(1.4226 -148.31)" gradientUnits="userSpaceOnUse"><stop stop-color="%23b4b4b4" stop-opacity=".5" offset="0"/><stop stop-color="%23747474" stop-opacity=".73333" offset=".070033"/><stop stop-color="%230a0a0a" offset=".22476"/><stop stop-color="%231e1e1e" offset=".38274"/><stop stop-color="%23545454" offset=".52443"/><stop stop-color="%230a0a0a" offset=".57329"/><stop stop-color="%23a0a0a0" offset=".66287"/><stop stop-color="%231e1e1e" offset=".73127"/><stop stop-color="%23dcdcdc" offset="1"/></linearGradient></defs><g transform="translate(65.947 81.176)"><path d="m-65.947-39.052h40.993v-21.819h-40.993z" fill="url(%23linearGradient17)" stroke-linecap="round" stroke-linejoin="round" stroke-width=".15506"/><g id="Screw" transform="translate(-21.026 .25148)"><g transform="translate(-173.5 .2728)" stroke-linecap="round" stroke-linejoin="round" stroke-width=".4"><path d="m158.93-81.412c-2.9442 2.2794-4.995 6.9587-6.4458 11.605-1.6846 5.3954-3.0827 9.855-2.6403 18.927 2.5579-4.4186 3.8809-6.531 9.9803-10.434 4.899-0.31353 6.7688-0.04256 9.6588 0.0089 0.32389-4.4408-1.686-9.7666-3.8102-14.265-2.2283-4.7193-5.2793-6.9747-6.7429-5.8416z" fill="url(%23linearGradient34)"/><path d="m128.6-40.182c-0.0198 4.7605 2.2463 11.827 4.8249 16.286 3.2015 5.6592 5.939 4.3081 7.0182 3.0268 1.3514-1.6044 4.2066-6.5543 5.9091-12.324 1.7204-5.8306 1.8211-11.471 2.1633-17.345 0.0529-0.90754-0.68963 1.5281-1.9038 3.0201-2.1345 2.623-3.6478 5.4232-7.6683 6.8559-3.5583 1.2681-5.9205 0.65964-10.344 0.48012z" fill="url(%23linearGradient35)"/><path d="m140.03-19.342c4.5069-2.9097 5.3822-6.5348 7.1626-11.207 2.8942-6.8767 2.926-18.057 2.7945-24.115-0.10691-4.9258 1.0002-8.629 2.7027-14.399 1.7204-5.8306 3.9502-10.012 7.2933-12.349 0.51486-0.35986-1.7892-0.21269-2.4726 0.16726-2.7449 1.5261-5.4045 7.9538-6.5346 11.924-0.81176 2.8516-2.2222 7.2462-2.5327 14.388-0.0655 1.5067-0.1649 6.1727-0.41782 9.042-0.28188 3.1979-0.40695 5.6078-0.71712 7.6874-0.7312 4.9024-3.7669 12.774-5.7162 15.672-0.95666 1.6027-1.5255 2.3109-2.7519 2.7099 0.0761 0.35823 1.0255 0.48604 1.19 0.47844z" fill="url(%23linearGradient36)"/></g></g></g></svg>');
background-repeat: repeat-x;
background-size: contain;
}
.psc-screw-run-infinity{
animation: screwRunInfinity 2s linear infinite;
}
@keyframes screwRunInfinity{
from{margin-left: -100%;}
to{margin-left: 0%;}
}
It will look like it's stuttering if the px distance in the animation is not optimized for the size of the screw. The reason the performance is really good is that it's just repeating a <3k SVG instead of drawing a 70k+ SVG.
2 Likes
wow,
thanks for the quick response!
The code seems quite complicated.
I'll try and see what I can do with your suggestions.
That big block of "code" is just an SVG. When you take an SVG and turn it into CSS it's basically a URL encoded SVG so it's a big mess of text.
The background repeat and background size properties tell the screw to repeat that image across the X axis until it reaches the end of the background.
The "screw-run-infinity" style is just executing the screwRunInfinity animation to simply slide it back and forth. You would apply that style conditionally based on whether it's running or not.
I forgot to mention. This code goes in your advanced style sheet. All advanced style sheet styles have to start with ".psc-" but you don't type that part when you use them.
If you have that code in your advanced style sheet you can apply the style "inline-screw" to a label and you will see a screw. You can resize it to adjust the size and length of the screw.
I can't import your code into Inkscape, I mean, I tried copying/pasting the graphic part into a text file and then renaming it to *.svg, but when I open it with Inkscape it doesn't work. Ok, I'll try again tomorrow. Thanks for your suggestions so far.
it works!
thanks again for your suggestions, they were really helpful.
bye
1 Like