# Perspective graphic outline color darker than fill **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [May 23, 2022, 1:14pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905 "2022-05-23T13:14:35Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [May 23, 2022, 1:14pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/1 "2022-05-23T13:14:35Z")
If I have a graphic, example a simple valve, and I do a fill color dynamically, how would I set the stroke to a color a little darker than the fill color? I’m not really seeing a way to bind this. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [May 23, 2022, 2:14pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/2 "2022-05-23T14:14:07Z")
I assume you mean the Valve Symbol component. You can change the fill and stroke by adding them to the style, though if you are also using the animation then those may possibly be overwritten. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/56af896684b5cc9ad65942de06719e6ebd201259.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/df13e1480c141cd33676ed92c0196dd25283e49a.png) Of course you can add bindings there as needed. Alternatively you can target them using CSS. You can then bind to the style.clasess property and change the class as needed. There is more on that here: > [@\[FEATURE-384\] Change color of vessel running, stop, etc](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/5): > > Idk what props it all has, but you can always target it with css. .ia\_symbolComponent--stopped.ia\_vesselSymbolComponent \> .vessel\_cylindricalTank\_tank\_conical { fill: red } .ia\_symbolComponent--running.ia\_vesselSymbolComponent \> .vessel\_cylindricalTank\_tank\_conical { fill: green } –default and --faulted work too, faulted already has a fill animation on the tank tho so might want to use somethign else there (i tried some of the props to color, but i only seemed to color the water, id… Not sure what the status of the feature request is. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [May 23, 2022, 2:32pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/3 "2022-05-23T14:32:15Z")
Sorry, my bad for being vague. The graphic is irrelevant, but for example take a simple SVG, a circle. If the fill color is green I want the stroke color to be a few shades darker and I want this dynamic. The fill color may come from a theme or a style, it just depends. How can we set stroke based on another color, in this case fill or background? I can’t always use a style as I may want to target only one element. I don’t see a way to bind something in an element to the fill color from a style. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [May 23, 2022, 3:48pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/4 "2022-05-23T15:48:52Z")
Well you could bind to the fill color and then use the `java.awt.Color` class in a script transform. Something like: ```auto from java.awt import Color ret = Color.decode(value).darker() return "#{:0<6X}".format(abs(ret.getRGB()) ``` The string conversion is needed because CSS will not recognize a Java Color If you want more control you could do something like this: ```auto from java.awt import Color org = Color.dcode(value) hsbvals = [0.0] * 3 hsb = Color.RGBtoHSB(org.getRed(),org.getGreen(),org.getBlue(),hsbvals) hsbvals[2] -= 15 ret = Color.HSBtoRGB(hsbvals[0],hsbvals[1],hsbvals[2]) return "#{:0<6X}".format(abs(ret)) ``` Though if I’m being honest, I don’t know all that much about the HSB Color Model and I’m not entirely sure this will yield what you are looking for. I know that in my testing it didn’t yield what I would have expected. Though from my understanding these should return a color which is “darker” than what it was given. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [May 23, 2022, 4:43pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/5 "2022-05-23T16:43:45Z")
I feel like there should be a way to do that with css, but I can’t figure it out… Can’t target the stroke specifically to use `filter` on, and couldn’t find a way to use `fill`'s color with `rgba` or `hsl` without having to use dirty tricks. Damn. @victordcq ? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [May 23, 2022, 4:44pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/6 "2022-05-23T16:44:36Z")
Define your starter colors in a theme? ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [May 23, 2022, 4:49pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/7 "2022-05-23T16:49:12Z")
For most graphics the starter colors will come from a theme. @lrose got me in the right direction, I will try and see if that gets me anywhere. So far, the script didn’t work, perhaps because ‘value’ is a color from a theme?? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [May 23, 2022, 4:49pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/8 "2022-05-23T16:49:35Z")
That’s cheating though. (clearly this is what should be done. I was just trying to go from `#0000FF` to let’s say `#000099`) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [May 23, 2022, 5:04pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/9 "2022-05-23T17:04:41Z")
> [@jlandwerlen](#): > > ‘value’ is a color from a theme Yeah, the script assumes a `#000000` format. So anything like `var(--color)` wouldn't work. There isn't a way to get the actual color values from a theme file, because that all happens on the browser end. In that case you would have to target the stroke with CSS. EDIT: Note, if you are using standard color names (e.g. red,black,blue,etc) for you CSS variable names, it would be theoretically possible to use the script. Prerequisites for that would include: 1. The name used would have to be included in the `java.awt.Color` static fields 2. You would need to slice or otherwise pull the color name out of the color For instance if your fill color was set to something like `var(--Red)` then you could use: ```auto clr = Color.getColor(value[6:-1]) ``` ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [May 23, 2022, 5:30pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/10 "2022-05-23T17:30:20Z")
> [@Code review: Modifying RGB by Manipulating HSV colors](https://forum.inductiveautomation.com/t/code-review-modifying-rgb-by-manipulating-hsv-colors/58295/4): > > That’s fair. I would expect better performance out of a more Java-based solution, but it’s very likely not going to be enough to actually matter. For posterity, a reimplementation of your method: def mulColorV(rgbHex, factV): from com.inductiveautomation.ignition.common import TypeUtilities from java.awt import Color javaColor = TypeUtilities.getColorFromString(rgbHex) hsl = Color.RGBtoHSB(javaColor.red, javaColor.green, javaColor.blue, None) hsl[2] = max(0.0, min(hsl[2] \* factV, 1.0)) h… ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [May 23, 2022, 5:41pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/11 "2022-05-23T17:41:09Z")
Thanks all, looks like I will cheat as @pascal.fragnoud put it 🙂 ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [May 23, 2022, 5:41pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/12 "2022-05-23T17:41:35Z")
That code is definitely cleaner than mine, I would only caution against interchanging HSB and HSL as they are not the same. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [May 23, 2022, 8:42pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/13 "2022-05-23T20:42:36Z")
Here’s my whacky attempt using _Expression Language_. - On the valve create a custom property called _darkness_. Its value can be between 0 and 1. Set it to 0.5 to test it. - Create an expression binding on the stroke property. Add in the expression: ```auto '#' + right("000000" + // Ensure leading zeros. toHex( floor(fromHex(substring({this.props.style.fill}, 1, 3)) * {this.custom.darkness}) * 0x10000 // Red + floor(fromHex(substring({this.props.style.fill}, 3, 5)) * {this.custom.darkness}) * 0x100 // Green + floor(fromHex(substring({this.props.style.fill}, 5, 7)) * {this.custom.darkness}) // Blue ), 6 // 6 rightmost characters. ) ``` ![Valve darkness](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/40361496c7954600491b2e106d24fcebb2658873.gif) _The result._ The expression just takes each of the RGB values and scales it by the _darkness_ setting before recombining them into the hex color string. (The wonky color wheel is due to GIF’s limit of 256 colors.) ![Valve darkness fader](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/0559cf357a65b8fb7555fb336db6ec6a41ee49a0.gif) _The effect with a fixed fill color and variable darkness._ ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [May 23, 2022, 10:20pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/14 "2022-05-23T22:20:54Z")
@Transistor look at you go! Thanks, I will try this later. From what I see, it works well. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [May 23, 2022, 10:25pm UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/15 "2022-05-23T22:25:18Z")
Oh, I forgot, I’m using themes, so that expression won’t work, but I will keep that in my arsenal for future use. Thanks for sharing @Transistor ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [May 24, 2022, 6:19am UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/16 "2022-05-24T06:19:43Z")
css does not know what colors the other elements use, so it would not be possible to let it decide its stroke color itself… However you could try reworking the svg to use some sort of shadow only on the edges with a transparent color. That would make it look like a darker stroke. I think the solutions mentioned before me are better. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [May 24, 2022, 6:23am UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/17 "2022-05-24T06:23:45Z")
Is it possible to create a gateway script to read the theme files in and extract the theme colors into a dictionary? This could then be written to a session variable for use by components such as SVGs and charts which don’t understand the CSS variables. Does Ignition have access to its own files on the various systems? It should at least be able to gain access by HTTPS. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [May 24, 2022, 6:42am UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/18 "2022-05-24T06:42:10Z")
theme files are located here C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes im sure you can read them tho idk if there is an easy way to parse these. you will probably need a library of sorts. you can acces them in the inspector tho: > **Summary** > > ```auto > --white: #FFFFFF; > --black: #000000; > --neutral-10: #FAFAFA; > --neutral-20: #F4F4F4; > --neutral-30: #D8D8D8; > --neutral-40: #BDBDBD; > --neutral-50: #A1A1A1; > --neutral-60: #767676; > --neutral-70: #5E5E5E; > --neutral-80: #515151; > --neutral-90: #323232; > --neutral-100: #161616; > --seq-1: #AE74E8; > --seq-2: #9659D6; > --seq-3: #7D3CBD; > --seq-4: #642B9E; > --seq-5: #4B2175; > --seq-6: #371C52; > --div-1: #642B9E; > --div-2: #7D3CBD; > --div-3: #9656D6; > --div-4: #AE74E8; > --div-5: #C79BF2; > --div-6: #DABCF7; > --div-7: #EAD9FA; > --div-8: #F5F0FA; > --div-9: #D7FAF8; > --div-10: #83F2EB; > --div-11: #43DED3; > --div-12: #21C2B7; > --div-13: #0EA197; > --div-14: #08827A; > --div-15: #086962; > --div-16: #09524D; > --qual-1: #7D3CBD; > --qual-2: #229AD6; > --qual-3: #086962; > --qual-4: #B01355; > --qual-5: #F55353; > --qual-6: #661414; > --qual-7: #038537; > --qual-8: #114599; > --qual-9: #ED5393; > --qual-10: #CF7911; > --containerRoot: var(--neutral-10); > --container: var(--neutral-20); > --containerNested: var(--neutral-30); > --input: var(--white); > --input--disabled: var(--neutral-40); > --icon: var(--neutral-70); > --icon--hover: var(--neutral-60); > --icon--disabled: var(--neutral-40); > --icon--selected: var(--neutral-10); > --label: var(--neutral-90); > --label--disabled: var(--neutral-60); > --border: var(--neutral-50); > --border--disabled: var(--neutral-50); > --containerBorder: 1px solid var(--border); > --boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); > --boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); > --boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); > --boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); > --boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); > --boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4); > --callToAction: #0C7BB3; > --callToActionHighlight: #E8F4FA; > --callToAction--hover: #229AD6; > --callToAction--active: #066391; > --callToAction--disabled: var(--neutral-50); > --error: #DE1B1B; > --info: #3272D9; > --infoSecondary: #ACCBFC; > --warning: #AD5F00; > --warningSecondary: #F5BC76; > --success: #038537; > --borderRadius: 4px; > --borderRadiusInput: 2px; > --opacity-25: rgba(0, 0, 0, 0.25); > --opacity-50: rgba(0, 0, 0, 0.50); > --opacity-85: rgba(0, 0, 0, 0.85); > --font-NotoSans: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; > --indicator: #1EC963; > --indicatorOff: #0A2E18; > --checkbox--checked: var(--callToAction); > --checkbox--unchecked: var(--border); > --checkbox--indeterminate: var(--callToAction); > --checkbox--disabled: var(--input--disabled); > --progressLinearTrack--determinate: var(--neutral-10); > --progressLinearTrack--indeterminate: var(--neutral-10); > --progressLinearBar--determinate: var(--infoSecondary); > --progressLinearBar--indeterminate: var(--border); > --toggleSwitch--selected: var(--callToAction); > --toggleSwitch--unselected: var(--neutral-10); > --radio--selected: var(--callToAction); > --radio--unselected: var(--border); > --radio--disabled: var(--input--disabled); > --pipePrimaryFill: var(--neutral-20); > --pipeSecondaryFill: #cccccc; > --pipeStroke: var(--neutral-70); > --pipeSelectStroke: var(--callToAction); > --symbolFill--default: var(--neutral-40); > --symbolFillAnimation--default: var(--neutral-50); > --symbolStroke--default: var(--neutral-70); > --symbolFill--running: var(--white); > --symbolFillAnimation--running: var(--neutral-50); > --symbolStroke--running: var(--neutral-70); > --symbolFill--stopped: var(--neutral-40); > --symbolStroke--stopped: var(--neutral-70); > --symbolFill--faulted: #FAB6B6; > --symbolStroke--faulted: #B80D0D; > > ``` ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [May 24, 2022, 7:32am UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/19 "2022-05-24T07:32:51Z")
> [@victordcq](#): > > css does not know what colors the other elements use, so it would not be possible to let it decide its stroke color itself… I was thinking of binding the fill's color to the stroke property and using this in some sort of css function, in which case it doesn't need to know the color of other element, we're providing it. I'm kind of surprised there isn't already something like `darken(color, x%)`. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [May 24, 2022, 7:48am UTC](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905/20 "2022-05-24T07:48:52Z")
There is `filter: brightness(50%)` (and you can go \> 100% too) but it applies to both the fill and the stroke. I can’t see a way to restrict it to the stroke. [Next page](https://forum.inductiveautomation.com/t/perspective-graphic-outline-color-darker-than-fill/59905.md?page=2)