[Bug-12541] Perspective Button Component Image Positioning

In perspective is there a trick to centering an image on the button? This is an image set to center on the button but it is not quite centered and is off to the right almost like it’s aligning the left edge of the image in the center.

image

There shouldn’t be… All of my attempts at using (centered) images in buttons have worked as expected.

39%20AM

Even attempts at resizing to odd dimensions results in the expected placement. Is the image by any chance not centered (as in the house is literally on the right-side of the image file)? Could you post the image you’re using in this thread?

We have noticed some oddities with how different browsers render the images within buttons (Firefox seems to render a bit t the right for some reason) but within the Designer you would not see that.

Chrome:
ChromeImagePlacement
Firefox:
FirefoxImagePlacement

Here is the image file for the house. It does not appear to be off center in the image file itself but I could be mistaken. Tried quite a few other images and all of them appear to do the same thing.

home_small

I’m having a somewhat related problem with the docked window handle icon. When I try setting the handle icon path to one of the builtin or one of my own images it isn’t showing up in the session. I’ve tried different variants of the path. It is expecting an actual .ico file?

image

I’ll look into the image you supplied, but the handle icon is something different entirely…

The handle icon needs to be an actual icon - notice how the path you’re supplying is actually /system/images/Builtin/icons/48/about.png ?

The “icons” at that location are actually images, but for backwards-compatability purposes we can’t rename the directories in that path - otherwise existing 7.9 Vision projects which upgrade would fail to display “icons” they’ve used for years.

Anywhere in Perspective where you see the word “icon” it means an actual icon please see the material icon library we provide along with Perspective, or you can also import your own library. if you were to supply a path of “material/info”, you would probably see the icon you’re expecting.

Anywhere in Perspective you see the word “image” you need to supply a path to an actual image file (.jpeg, .png, I think we support a couple of others a well but don’t quote me) just as you’ve done in your screenshot.

1 Like

Ah, okay, I found the problem. It looks like when we center the image we’re positioning it based on the default size of 24px x 24px. Adjusting the size makes the image larger, but we’re still only offsetting the image to the left of center by 12px. I’ll write up a ticket right now.

2 Likes

This issue was fixed in the build that was uploaded today (3/7). Please let us know if you continue to see this behavior after upgrading.

Just updated to Version: 8.0.0-beta0 (b2019030802)

The text and images in the buttons are now offset in such a way that I cannot get them centered in the button.

Please close your Designer, locate the Perspective Theme files (Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes on Windows, ignition/data/modules/com.inductiveautomation.perspective/themes on macOS), delete the dark and light dark.css and light.css files, and then restart your Gateway. There were changes to those files which don’t seem to be correctly replacing the existing files. If you still see this issue after your Gateway has restarted, please reach out again.

1 Like