I assume this will be documented later, also so forgive me if this is something that I have just overlooked. Is there a way to upload images and icons or browse to select them in Perspective? I see the “source” in the image component and “path” in the icon component but don’t understand how to browse or upload images etc. I tried vision image paths but that didn’t work for me.
Thanks.
You can upload images in the Designer by going to Tools -> Image Management
Once you upload the image, you can right click the image in the Image Manager and click “Copy Path”
In the perspective image component’s source prop, enter “/system/images/{path you copied}” (for example: “/system/images/image.png”)
Icon paths are different. Icon paths are formatted like so: {icon library name}/{icon name} (for example: “material/insert_emoticon”)
The only icon library we have right now is “material” - you can find the icon names for this library here: https://material.io/tools/icons/
Fontawesome please! We roll our own icon library via WebDev and a shared script to generate the icon path, but built in icon support is awesome.
It’s not obvious, but you can drop your own icon libraries right into perspective’s icons folder data\modules\com.inductiveautomation.perspective\icons and they’ll be available for use in perspective. Material just the only library we’re shipping with. Just copy the file format as material, and you should be all set. The filename (minus the .svg) is the icon library name.
We’re happy to ship perspective with any font library that allows it. Doesn’t look like fontawesome is in that category. But if you have a license for it, you can add it to your projects.
In the perspective image component's source prop, enter "/system/images/{path you copied}" (for example: "/system/images/image.png")
Would this image path structure be the same format used in PROPS > STYLE > backgroundImage?
For props.style.backgroundImage, you have to wrap the image URL with url(’’) like so: url(’/system/images/{path you copied}’)
You’ll notice that this is the same syntax as CSS background-image properties. That is because under the hood, we are mostly using css to realize styles.
Edit: looks like you do not have to wrap the url in url(’’) - still works for me when I set props.style.backgroundImage to /system/images/{path you copied}
Whay about use animated icons? ?
The Image Management window doesn't allow me to upload SVG files, only PNG/JPG/GIF. The tooltip for the image component tells me I can use an SVG file, but if I can't add it to the Image Management window, how can I use it?
edit: just remembered that I can drag and drop an SVG file directly into my view from a windows folder, so that's all good. Still have the question, should I be able to add SVG's to the image management window? Or is drag-and-drop the only method of adding in SVG's?
Still have the question, should I be able to add SVG’s to the image management window?
Yes - there is already a feature ticket for this in our backlog. I'll link it to this thread.
Regarding the Images and svg files. Is it possible to have a folder in my server with Ignition perspective pointing to it and display the images without dragging them to the perspective folder?
I want to make a folder with some images and display them in Ignition Perspective (This is not a problem). But I also want that every time that I made a small change to that images (for example blueprints displaying in Ignition Perspective), I want that images update automatically to my project in Ignition. Is this possible configuring the path or something like this??
You can place photos in
C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main
and then reference them as an image source with
Image.props.source = '/path_within_main/image_name.extension'
Update: Users here on the forum keep coming back to this post, but this approach is unsupported and could stop working at any time. The fully-supported future-proof approach is to use the WebDev module and supply your images as resources there.
We’ve added basic support for SVGs in the image manager. This feature is available in the 8.0.4 nightly build that was uploaded today (8/16)
It worked! Thanks.
Now i need to show this image (saved in C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main\folder) in vision.
How can i do this?
If you have an image you need to use in both Vision AND Perspective, then the image should probably be stored through the Designer’s Image Management. Vision and Perspective use different methods to locate supplied files, and while Perspective can look in the internal database or in the webapps folder, Vision might only be able to look in the internal database or a relative location on a local machine.
But I need to upload the image file in a persective application then get it from perspective and vision. Can i do that?
Thanks
You can vote on the feature request for it here
https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/css-animated-icons
Carl, I was hoping you could expand on how you can add Fontawesome icons to projects, can these be perspective projects? If so, how would I enter my Fontawesome Kit Code script?
Thank you for this this elegant solution, it works great!
Once I bind these images to the Image Component's source I can't seem to delete the files using os.remove() even though the image is not displayed anymore. Is there a step that I am missing?
Java keeps the file locked, while the gateway is running.
I made something that should unlock and delete it (for windows):