Custom SVG for existing component

Ignition
1

Is it possible to use a custom SVG for an existing component?
For example if I want to use all the functionality of valve component but different SVG just because, can I do that? Or would I have to build a custom component as explained here: Creating custom Perspective Components

2

You can not supply your own SVG for a component.

What functionality are you wanting to re-use? I'm sure there is probably a far less intensive solution than creating your own component.

3

Well I want to make simple colour change animation for the SVG tied to Icon component. I can simply add this to the binding to the color prop.

switch({[BIP_Tag_Provider]testingTag},
0,1,2,
color(115,85,85),color(125,85,85),color(15,185,85),color(15,85,75))

However I want to use the custom colour theme I have defined. But the binding errors out if I do the following.

switch({[BIP_Tag_Provider]testingTag},
0,1,2,
color(var(--GU_genLabel)),color(125,85,85),color(15,185,85),color(15,85,75))
4
  1. Don't use an Icon component, just embed the SVG.
  2. The color() expression is not compatible with perspective, as it returns a java.awt.color type object, and not a CSS compatible color.

Your expression would be something like (I prefer the case expression to switch):

case(
    {[BIP_Tag_Provider]testingTag},
    0, "var(--GU_genLabel)",
    1, "rgb(125,85,85)",
    2, "rgb(15,185,85)",
    "rgb(15,85,75)"
)

You may also be able to just style the valve component as well.

5

Thank you! I will give this a whirl.

(I was just giving valve as example and modified already to my needs using stylesheet.css.)

6

Thanks, this works like you said Irose. But not the most convenient method. If I have multiple instances then I have to update each embedded SVG instance manually.

If I point to the SVG within a component, say Icon from my custom library then only updating that SVG would be required. But Icon does not seem to work.

7

Oh, I could use embedded view. (still learning)

1 Like
8

I think anyone who finds the case function after only knowing about the switch function would agree. switch is there for backwards compatibility imo and is a poor choice when both are known choices.

Regarding setting your SVG colour, I would highly recommend you create style classes for each of your colours so that they're defined in one place. You would set the shape->fill in the CSS props to affect the SVG's fill colour. Then instead of setting the fill colour of the SVG, bind to and set the SVG's style.classes prop instead.

If this is a device status or something you will use across multiple things, then I normally create a dataset tag as a value-to-class lookup e.g. I have one for device statuses and one for modes. I also use expression tags to convert most of my discrete-state integers into their descriptive states (e.g. 0 => 'Stopped', 1 => 'Running', etc) and use this tag in all of my graphics; this abstracts the integer value away, as some devices may have different integer value descriptions for the same values
E.g. Device Status to Style Class lookup dataset:

Value StyleClass
Stopped Devices/Status/Fill/Stopped
Off Devices/Status/Fill/Stopped
Closed Devices/Status/Fill/Stopped
Running Devices/Status/Fill/Running
On Devices/Status/Fill/Running
Opened Devices/Status/Fill/Running
Faulted Devices/Status/Fill/Faulted

Then you can use an expression to get the style class:

lookup({System/Datasets/Lookups/StyleClasses/DeviceStatus}, {tag/path/to/device/status}, '', 'Value', 'StyleClass')
9

I got a lot to learn. Thanks nminchin.

Yeah I used an old Ignition project as a reference when I started my first ignition project. Switch was used throughout instead of Case. I would most prefer to use case as well. Switch simply stuck with me simply because of the initial exposure.

10

They had said something about using a custom theme which was why I didn’t say anything about the magic colors.

Are you using this across projects? Just curious for the use case of this type of method, I tend to just use CSS variables.

11

CSS variables to me are also similarly magic, as you don't know them without looking them up, or after having so much experience with the project that you've memorised them, neither of which to me are ideal.

I use css variables from my theme within style classes, and then use the style classes in views since they're available from the classes drop down. It reduces the hurdle for others unfamiliar with the project (and in particular with Perspective and its advanced features like custom themes which most don't even know exist), and also future me.

On the topic, I also never create and use css selectors purely inside of CSS either that I would apply as style classes. I would create a perspective style to go along with it so that it's selectable from the classes dropdown, otherwise it's use is magic especially to those who wouldn't know where to find its definition. Then you can add the selector to your css theme or adv stylesheet which can actually define the content of the selector for more advanced functionality

3 Likes