You might also look into using Vision as it will be a closer apples to apples comparison with your current HMI especially if web or mobile access isn't a requirement.
While Perspective is the most modern web based HMI interface, it also has a steeper learning curve than Vision especially for anyone not familiar with web development.
As always, go through the Inductive University videos as it will teach you a lot of the basics to get you going quicker than trying to learn it on your own. Once you get the basics down then you'll see how UDTs, templates, and parameterized views can simplify things.
The short answer of how to eliminate the scrollbars in your particular case is to add a CSS style to set overflow to visible on your instance of the embedded view. If that doesn't do it, add the same overflow visible to the container on the view definition for your embedded view, etc. You probably have something small going out of bounds.
Definitely check out Inductive University as several have suggested. It's very helpful.
Look at the @nminchin comment regarding % mode and aspect ratio . You can also use % as your units on elements inside a coordinate container to make them size based on the size of the container. You can set the height and width of your drawing to 100% and it will size with the container.
It's helpful to add temporary borders on elements to figure out what's going out of bounds. Sometimes the Ignition overlays that tell you that you lost comms to your device will cause scrollbars but overflow visible will eliminate those.
some general tips...
It's tempting to keep default names on elements on your screen. I strongly recommend descriptively naming instances of embedded views and elements on your embedded views so that you can navigate your app with the Project Browser. It will save you a ton of time troubleshooting things.
It's good to make an Ignition UDT that maps to tags in your PLC UDT. Your embedded view or template should take a parameter that is a partial tagpath to an instance of your UDT. The bindings in your embedded view definition or template should use indirect bindings to map to properties on the Ignition UDT. Indirect bindings and property bindings are very fast. You may be tempted to use the "tag" function in an expression. It's bad for performance. Instead, you want to add custom properties on your template and map them to your UDT using indirect bindings.
Regarding LLMs. I would generally recommend learning a technology without LLM before using an LLM on the technology. You need to be able to validate whatever the LLM did for you and you can't do that if you don't know the technology.
Yes, it's not that I want to open it on anything other than a screen.... maybe sometime in the future for a smaller installation (an inland waterway vessel or something, so they can do something on a tablet or phone), but these kinds of installations are set up on a 60-inch HDMI screen in a control room.
So I'm going to take a look at Vision as well. Maybe it will be easier for me then...
but even so, I can't stand it not working... and I always like to know why not.
But everything I'm doing right now is just to see how it works. So everything you see here is a bit of practice... and I've only spent a few hours with it so far. But before I actually start making something, I do want to understand most of it.
And I think that's really great, that you can just download it for free and get started with it.
However, and maybe that will come later, but in the videos I've watched so far, I see very little about how to animate with different images, but then again, I haven't seen everything yet.
I do find it annoying that those videos don't play automatically, and that you have to keep choosing the next one.
I just looked at your screenshots. You're using images stored in the "Image Management" area.
Note that you can also insert drawings using the perspective drawing tools. Which may be a better fit for what you're trying to do.
You can also embed SVGs that you draw in other programs. When you drag/drop an SVG onto a screen it pops up Image Management. By default it has "Save and link" Selected. You can change that to "Embed image" to embed the SVG as a drawing object which you can then manipulate with bindings, etc.
It looks like this.
You can do color animations on a Perspective drawing with bindings rather than swapping an image. If you do need to swap an image you can just put a binding on the image path and do a map transform to map to an image path for whatever image you're trying to show based on a condition.
You're changing the poprs.fit.mode on the image component. We are suggesting changing the props.mode on the Coordinate Container.
If you change the props.mode on the Corrdinate Container to percent, the props.fit.mode of the image component to fill and then change the x to 0, y to 0, width to 1 and height to 1 in the positoin settings of the image component, I suspect you'll see what you're expecting to see.
'm dyslexic. Reading in Dutch is already difficult for me, but in English it's even worse....
And I also still need to get used to all the terms and how the whole thing is structured. And I did watch those videos about the containers..., but suddenly it's all a lot that's new...
I don't know what you had working after about 4 a 5 hours with this package?
Hi watch the videos on bindings. On your valve you'll need a parameter named tagPath that you'll pass the base tag name in on and you'll them use indirect tag bindings to link your properties to tags.
I would personally use a UDT to break out your integer to individual tags as it will make life easier. Any binding you need for writing to the PLC will need to be bound bidirectional otherwise it will be read only.
so don't ask me why I did it this way. But you have to start somewhere..
and swapping images is also an idea from Claude.
but I have tried to explain before why it looks like this.
because in Vijeo Designer I have a valve object that works with one word , for the colors, the rotation angle, but also the red/yellow dotted line around the valve when it is in manual mode, and the touch back, it is all contained in that one word. And I am trying to recreate that.
because then I can make a screen, alongside an existing Vijeo screen. And If I have something that works, then can I show it to my boss and our customer.
but Claude couldn't manage it to draw a valve in 4 differents colors, with and without a dotted line. so I just did 8 images?
And I know Claude isn't the way to go.
I must say, though, that this package is very different from the average HMI packages.
So I think the beginning will be a bit difficult... but I think because of those bindings
that you can hang anywhere, I actually like it...
The images are SVG images, because according to Claude, these are the easiest to scale.
And first I colored the valve with a binding on the tint.. So then I had 1 image, and I let the valve change color from gray, green, yellow, and red.
And this worked well. But it only started getting difficult with the red/yellow dotted line. Because I just couldn't manage to keep that from NOT coloring along with the rest? (so the colors in the dotline (yellow, also turned green or orange?) )
Maybe you have tips on that too? I want a grey, yellow, green and red valve, with and without the dot line. But only the valve must colored, the dot line must go only on/off but no color changes.
As said a few times, when you drag on the SVG, choose embed, not the default option. I have never used the default option and would strongly suggest you do the same. The default option adds images to the image library where they become essentially static objects. The tinting available on them is not good ans produces a washed out result as well as applying to the whole image. I think it was an "oh this might be cool" thought that didn't get removed once everyone realised it wasn't
When I started in 2016ish, perspective wasn't a thing. It was only vision. After a day of working with Ignition I had a few windows "working", but they were definately janky, and didn't follow what I (we) now consider best practices.
I also have a background in web development, so when perspective came out I was already versed in CSS, Javascript, and HTML. Not having those and also not knowing the basic's of the designer is what makes the learning curve for new users in perspective so high.
I am dyslexic too, and though English is my native language, I understand the battle. The manual is always open on a tab in my browser if I am working in Ignition.
They are, but because you have chosen not to embedd them, you can't effect things like line colors. Embedding the SVG allows you to add bindings to all of the SVG elements. Which will allow you to achieve coloring the red/yellow dotted line seprately from the rest of the image.
Everybody starts somewhere. You're in the right place to get questions answered. There are a lot of very experienced people here that tend to point people in the right direction.
Vision is a lot like other HMI packages. It's way better but the general workflow is similar.
Perspective is more of a web design workflow. Or at least that's what my colleagues tell me. I don't come from a web developer background so I learned things out of necessity as I went.
For symbol drawings you may find it easier to use the drawing tools in 8.3. There are built in binding options and all that. I usually draw my SVGs in Inkscape and embed them into my perspective screens to apply animations but there's a significant learning curve to doing that so it's not really what I'd recommend to beginners unless they're a little obsessive like I am.
I agree with the advice @michael.flagler gave you. You just gotta get in there and try stuff. Once it clicks you will be able to do a lot.
