[Question] [FEATURE-13209] Image management in perspective

ignition80
#1

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.

0 Likes

#2

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/

1 Like

Perspective Map
[Question] Perspective Image Locations
#3

:grinning: :raised_hand: 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.

0 Likes

#4

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.

2 Likes

#5

3 Likes

#6

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?

0 Likes

#7

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}

1 Like

#8

Whay about use animated icons? ?

0 Likes

#9

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?

0 Likes

#10

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.

1 Like

#11

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??

0 Likes

#12

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'

1 Like

#13

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)

0 Likes