Behind Ignition Perspective are traditional web technologies such as HTML and CSS. Ignition Perspective abstracts away some of the traditional web development from developers using Ignition to develop Ignition Applications. Developers get a streamlined development platform that makes it easier to stand up applications quickly and more easily interface with more of Ignition’s built-in backend functionality.

That being said, Ignition Perspective essentially offers complete access to all the standard CSS properties within the web development world. For the majority of development, styling can be attached to perspective components with Ignition’s styling GUI. Every perspective component has a ‘style’ property where CSS properties can be attached.

Ignition also lets developers create style classes that contain reusable groupings of styles. Perspective components can then reference a single style class or multiple style classes. Additional basics on style classes can be found in the Ignition User Guide.

The Ignition designer style GUI does an excellent job of organizing and easily exposing common CSS properties; however, The GUI is limited and doesn’t expose all possible CSS properties. The ‘properties’ dropdown under styles is more comprehensive. Any CSS property can also be added by manually adding a value.

It’s important to note that the added styles have their keys in camelCase rather than kebab-case. Kebab-case is the formatting for generic CSS; however, Ignition uses React and Javascript, which require the camelCase formatting.

So, what functionality and styling are we missing out on if Ignition Developers only use the CSS properties presented through the Style GUI in the designer? The styling possibilities are limitless, but I’ll showcase a couple powerful styling properties we can add to any Ignition Perspective Component.

The Transform Property

The transform CSS property allows developers to change the position, orientation, scale, and viewing perspective of components on screen in a multitude of ways. The full capabilities on the transform property can be read about in other resources. We’ll keep it fairly simple for now.

For this demo, I’ve added a Flex Row to the center of my view. I’ve changed the ‘justify’ property to space-evenly so that it keeps some room in between the buttons. I also added a background color solely for the demo to give some context for where the flex row is. An important property I did change was the overflow, which I set to visible. In this case, these transforms extend past the bounding box of the flex row. Changing the overflow to visible keeps the buttons from being cut off.

The demo has 5 buttons added inside the flex row. The first button has no transform applied to it but the other four do. To add the transform property, select the button and go to its style. Click the plus icon and then select value from the dropdown. Change the key of the value to ‘transform.’ The value can be any transform you want to add, following the transform property’s styling requirements.

The transformed buttons have the following transform properties:

• rotate(30deg)
• translateY(60px)
• scale(1.5)
• skew(10deg, 20deg)

Multiple transforms can be applied at the same time. For instance, the following transform property value will both scale and rotate the component.

Transforms don’t just need to be static either. You can leverage Ignition’s expression bindings. In another example, we can add a check box to a view and give it the style transform property with a binding.

The binding can map the selection of the checkbox to a scale transform applied to the checkbox itself. So, when the checkbox is checked, it scales to 1.5 and, when it is not checked, it scales to normal size.

The end result is a checkbox that instantly grows and shrinks as it is selected/unselected. This changing transform can create more dynamic displays that allows designers to be more creative with our HMI’s. The transform is instantaneous and quite a shocking change to happen immediately, but there’s a remedy for that with the transition CSS property.

The Transition Property

The transition property allows the animation of changing CSS properties. Full details and formatting of this property can be read about in other sources. For these demonstrations, let’s add the transition property to the scaling checkbox.

1. Select the checkbox and add the transition key to the style.
2. Set the value of transition to ‘transform 1s.’ This is telling the transition to only apply to the transform property and to animate for 1 second.

That’s all that it needs to animate the transition. The new result is a growing and shrinking checkbox upon selection. The transition feels more natural and creates a pretty cool effect.

We applied a transition to the transform property, but we also can apply transitions to a large number of other CSS properties. For instance, let’s try with a background color. First I’ll add a dynamic background color that changes from red to green based on whether the check box is selected.

I start by adding the ‘backgroundColor’ property to the style of the checkbox and then adding a binding that switches between red and green based on the ‘props.selected’ property.

Now I’m ready to add a second transition to the checkbox. All I need to do is adjust the transition property to include the background-color changing over the course of 1 second. Separate multiple transitions with commas. Now the checkbox will also start to transition its background over the course of a second rather than instantaneously.

Transition doesn’t work with every CSS property, but it works with a large amount of them. You can determine which properties it works with through some simple searching online. Transitions can also include delays at their start as well as different animation timing functions. There are countless resources online to learn more about the transition property.

In Conclusion

The Transform and Transition CSS properties are powerful on their own, but the real power of CSS styling comes with unique and creative combination of all sorts of CSS styling together. Ignition exposes any possible CSS property to developers, but developers should still consider the full extent of CSS that we can use on the web. This blog is only scratching the surface on some of the more advanced CSS that can be added to your Ignition Perspective Projects. Ignition also allows direct CSS code to be written and used throughout Perspective projects either through importing your own theme or with the stylesheet introduced in Ignition 8.1.22.

Learn more about DMC’s Ignition programming expertise, and contact us today for your next project.

The post Custom CSS in Ignition Perspective: Adding Transforms and Transitions appeared first on DMC, Inc..

The styling for every button, text field, or image found on Perspective screens is the same styling language that powers the entire internet. Ignition has default styling for buttons, labels, etc; however, every style is configurable. Developers change colors, font sizes, padding, and many other CSS properties for all of the different types of components on Ignition Perspective views.

Ignition Perspective introduces a Style Graphical User Interface (GUI) that displays a large amount of commonly used style properties in a single easy to use GUI. The Style GUI lets developers intuitively adjust all sorts of styles for components without having to learn any nitty-gritty CSS. Even experienced CSS developers can benefit from how seamlessly this GUI is built into Ignition Perspective’s development environment.

Ignition also has a concept of ‘style classes’ that creates a grouping of style properties that can be applied to a component or several components across an entire Ignition Perspective project.

There are some limitations to Ignition’s Style GUI. The largest limitation is that it simply doesn’t encompass every CSS property possible on the web. Powerful properties like ‘Transform’ and ‘Transition’ are absent from the Style GUI. The Style GUI does allow for animations and CSS selectors (Hover, Active, etc.), but the Style GUI animations and selectors are more limited in their capabilities than with pure CSS.

Adding your own CSS in Ignition has been possible for a long time through adding your own custom theme. Using your own custom theme requires a little bit of development overhead. Editing the CSS of your theme wasn’t really possible from the Designer. However, with the release of 8.1.22 Ignition adding custom CSS has never been easier.

Introducing the Stylesheet

The Stylesheet is a plain CSS file easily accessible from the Ignition Designer. To access the Stylesheet, you must be running Ignition 8.1.22 or later version. The Stylesheet must also be enabled in the project browser by right-clicking the Styles folder and enabling the Advanced Stylesheet.

Enabling the Stylesheet will add a stylesheet.css file to the styles folder. This file is where CSS can be directly added to your Ignition Project. It is important to note that CSS written here is only local to the current project where this stylesheet exists. The CSS written here will not exist across the entire gateway and only applies to the current project. Creating your own custom theme may be better suited for CSS applied across the entire gateway.

For now, let’s try making a CSS class that we can use in our Ignition project. For this example, we’ll make a class that rounds its corners of a button and makes the background and border green.

We’ll create a CSS class by beginning with a period(.) to signify that is a class. The CSS class here is called ‘psc-roundedButton’, but throughout our Ignition project it will just be called ‘roundedButton’. We have to prepend all custom classes in the stylesheet with ‘psc-’ because Ignition automatically prepends any custom classes added to components with ‘psc-’. If we want to add give a button this ‘roundedButton’ class we can drop a button on a view and then give the button the ‘roundedButton’ class.

The button should now use the style specified by the ‘roundedButton’ class in the stylesheet. We can make more adjustments to the class in the style sheet as we want. For instance, let’s make the button a little more dynamic by reducing its opacity when hovered over.

We can add the hover selector to the class that will reduce the opacity. Now the button provides some feedback to users when they hover over it.

So far, the class we’ve made doesn’t do anything that Style Classes and the Style GUI can’t already do. Now, let’s jump into something that can’t be done with just Style Classes and the Style GUI. Let’s integrate some properties not found in the Style GUI and discussed in our blog, Custom CSS in Ignition Perspective: Adding Transforms and Transitions.

Let’s add both a transition and a transform to this CSS style class. Let’s have the button scale larger and translate upwards when we hover over it, and then let’s have it return to normal when we stop hovering. We can do this with just two more lines of CSS.

We added a transition to the general class to transition the opacity and transform properties of the button. Then, in the hover selector, we added a transform that both scales the button bigger and moves it upward in the y-direction 10 pixels. This is only one of an infinite number of ways we could style a button with CSS classes, and the limit is really just your imagination.

Let’s provide one more example of making a custom CSS class using some properties that aren’t built into Ignition’s Style GUI. Let’s make a class that will gray scale and blur an image until we hover over it. Once we’re hovering over it, we will show the original image.

Start by making a ‘specialImage’ class and adding the filter property. The filter property can do a variety of things, but here we are adding a Gaussian blur and grayscale. We’ll also add a transition to the filter property. Then, we need to add a hover selector that sets the filter to none. You can see all of the CSS code below.

The result is an image that doesn’t show any detail or draw attention until the user hovers over it, and then they can see the full details of the image.

The ‘filter’ CSS property is a property that isn’t accessible from the Ignition Style GUI, so this is another example of functionality that’s currently only possible with pure CSS.

CSS has pretty endless possibilities to experiment with and integrate into your Ignition projects. The internet has a plethora of CSS guides, examples, and inspiration to use for trying new CSS effects.

Learn more about DMC’s Ignition programming expertise and contact us today for your next project.

The post Custom CSS in Ignition Perspective: Getting Started with the Stylesheets appeared first on DMC, Inc..