Hello! I am currently doing one of my first few perspective projects and I really like the mimic style of the vessel symbol, however I do not need to show the agitator and when I hide it in the props the side of the tank closes up leaving very little room to see the water level. Is there a simple solution to hide the agitator while still keeping the side of the tank open or do I need to dive into SVGs and HTML to accomplish this?
Hi Chase, welcome!
If you’re up to adding custom CSS, there’s a simple way to accomplish this. Here are the steps:
-
Add a style class of
remove-agitatorto the Vessel component.
-
Go to your Ignition installation location, into the themes directory. If you’re on Windows, this will likely be
C:/Program Files/Inductive Automation/Ignition/data/modules/com.inductiveautomation.perspective/themes/. -
Create a folder in
/themescalledcustomor whatever you want to call it. Add a file calledstyle.cssinto/themes/custom. -
Open up
style.cssand add these lines:
.psc-remove-agitator .vessel_cylindricalTank_agitator_rotor {
display: none;
}
.psc-remove-agitator .vessel_cylindricalTank_agitator {
display: none;
}
-
Save the file. This might require administrative privileges.
-
Go back into
/themes, the root directory for Perspective themes and styles. Open uplight.css(if you’re using thelighttheme, which is the default option). -
Add this line to the end of the file (as the last line):
@import "./custom/style.css";
-
Save all of the files you made changes to.
-
Merge changes (the little box with the down arrow next to the save button in the Designer).
-
Refresh your browser and you should see the changes:
1 Like
That seems easy enough @YF129701 ! My next question is how did you come up with step number 4? I would like to learn more about the nuts and bolts of perspective but I have no clue how to figure out something like step number 4. Can you point me towards some resources about learning CSS and how it interacts with Perspective?
The good thing is, this is standard CSS, which has tons of resources online, both in video form on YouTube and text form on sites like MDN.
The most important concept to understand in CSS (imo) is selectors. That is the bulk of what I’m doing.
Let’s take a look at this example:
.psc-remove-agitator .vessel_cylindricalTank_agitator_rotor {
display: none;
}
Concepts to understand
Class Selectors
When you see a phrase or a word that has a . prepended to it, that indicates it is a class selector. So, in our case, we added the style class remove-agitator to the Vessel Perspective component, so that is where .psc-remove-agitator comes from (the .psc- gets prepended to all style classes by Ignition - if you were to just use .remove-agitator, you wouldn’t be selecting any elements).
Our second class selector is .vessel_cylindricalTank_agitator_rotor, which I found by going to the browser dev tools and hovering over the component I want to style and seeing which classes are unique to that element. This might need some trial and error.
Nesting Selectors
Why do .psc-remove-agitator .vessel_cylindricalTank_agitator_rotor appear right after each other, separated only by a space? This has a special meaning as well: this means that only those elements that have the second class that are child elements of an element that has the first class will be selected. I don’t know if that makes sense, it would be much easier to show you.
Here is an Ignition-specific resource that has some information on CSS that you might find useful.
2 Likes
A really valuable tool for understanding Perspective is browser’s dev tools. Because Perspective elements are true HTML elements, you can also open any Perspective page in the browser and see the full component hierarchy, the style tree, etc.
Is there a simple way to move the agitator so that it’s coming up from the bottom of the tank? I have an application where the actual equipment has an agitator that’s mounted on the bottom of the tank, and I’d like to make my screen emulate that more closely.