Weird background colour on buttons, images, and other transparency things

Ignition
1

i am building a lamp board, using SVGs with obvious transparency because lamp -> round, not lamp-square. but when i do, i get an odd blue background filling in the bounds of the component. witness:

Screenshot 2023-12-20 133255

aesthetic trauma and future psychological counselling aside, where is this coming from and how to i stop it? looks like goat vomit.

i grew up on a farm. i know goat vomit when i see it.
2

Vision or Perspective? Add the tag into your question title.

3

it's tagged Perspective, but OK. adding now.

4

Sorry, did I not see the tag? If the tag is there then there's no need for Perspective in the title. I've removed it for you. Thanks!

Where are you seeing this? In Designer or in the browser?

How are you generating the SVGs?

5

Can you upload one of these SVGs here on the forum?

6

both. and it comes and goes. sometimes, it's just fine, although there is still that 1px frame around it. other times: (no emoji for goat vomit...)

here you go. made in Illustrator (trying to kype my assets, eh Paul? :smiley: jk. ):
BlueLamp

FWIW, it also shows up with the other colours: Red, Yellow, Grey, Green, &c.

7

Are you using "save and link" or "embed" to add the lamp images?

EDIT: The color and border rounding looks suspiciously like the default Perspective (primary) button style, not sure if that's relevant to the issue or not.

8

I noticed that too. I embedded it on my gateway and I did not get this behavior (8.1.32). Maybe something to do with stylesheet.css?

:goat: :face_vomiting:

3 Likes
9

if it helps, this is the process i go through working with images:

  1. i build as many assets as i can, from scratch, in Illustrator. these were a 5min whip-up because i've built literally hundreds of these before.
  2. i drag-n-drop the images into their respective folder in Image Manager and the copy the path to the image once they've finished uploading
  3. i then paste the image path on the button/image/thingy

most times, i sit back and pat myself on the back for making such visual wonder. today, i hear bleating... :scream: the curious part is that it is intermittent. and i've tried it in various browsers, not just my go-to: Firefox. Chrome, Edge, even Opera: same odd behaviour.

if we're not finding a solution, i know i can (oddly enough) at least override the colour by adding a background-color property to the component. usually, doing this, and then removing it, will mop up the vomit, as it were. :slight_smile:

10

so. beautiful. :heart_eyes:

11

My mom grew up on a farm, too. She even had a pet goat. Just how old are you? (My mom is 86.) :laughing:

12

This is undoubtedly the root of your issue.

If these are lamps, do they also need user interaction? Why not just embed the SVG?

13

how so? the images show when the signal quality is Good, so it isn't a pathing issue. i will be back at my desk in an hour and will test the other suggestions. but i don't think the path is the problem simply because it works. just not offline/bad signal. :poop:

14

i'm from Northern Canada. we still have farms there that haven't been swallowed by the Industrial Juggernaut of Commerce. :smiley: there's a lot of us farm kids in tech. it was the best way out of all the goat vomit. :laughing:

1 Like
15

Because you are using a button which has a default background color in the C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\common\button.css file (for windows)

.ia_button--primary {
    background-color: var(--callToAction);
    border: var(--containerBorder);
    color: var(--neutral-10);
}
4 Likes
16

well that is something i never thought to ever check... thank you very much. this would have driven me batty (more batty??). :smiley:

1 Like