Material Design

Our company is pushing good design for all apps and wants to conform to modern UI design and material design (https://material.google.com)

I started playing with some of the concepts in Ignition and a lot is possible, but I am running into difficulty for buttons. Some thing like change hover colors are simple, but some of the custom drop shadows, font, and sizing are more complicated. (https://material.google.com/components/buttons.html)

Do you think its possible to do some custom renders of the button to override the default? Here is some Java swing that starts to get there, but I have no clue where to start implementing it… https://github.com/leMaik/swing-material/blob/master/src/main/java/de/craften/ui/swingmaterial/MaterialButton.java

Any suggestions or ideas?

+1

I’m on the same road and I would also like to know this…

For the past few projects I’ve tried flat/material with High Performance HMI design.
But, like @ryanjmclaughlin said, without some custom renders, not only on the buttons, but on other components also, just doesn’t feel/look right…

I like the new web page in Ignition 7.9 very much. It looks flat and more modern. I think it’s time to implement that look in the designer and all components in Ignition.
Ignition is way better than any other SCADA/MES system out there in every way,… except on how it looks… :unamused:
In 2016 (almost 2017) I think it’s time to do something about this look… :thumb_left:

All major SCADA/HMI software on the market (except WinCC from Siemens :laughing: ) already has some kind of flat/material (with High Performance HMI components) design…

We agree that there is room to improve/modernize various visual aspects of Ignition and we have plans in the works. As announced at ICC, we’re planning a new visualization suite that should address many use cases where people want to create more ‘modern’ applications.

We’d also like to do some updating to our existing Java/Swing UI products (and platform). There are a number of “Look and Feel” libraries out there but from what I have seen, but all have faults of one form or another. I hadn’t seen the example Ryan linked, but will take a look.

As far as doing custom rendering – that is possible. Depending on how many components you want/need, adding them through a custom module is going to be the best route, but it wouldn’t be a trivial amount of work. Our component examples at Github might be a good place to start experimenting.

@PerryAJ Any updates on this?

Not much to update. In the years since this topic was brought up, we revamped the look and feel of the Designer/Vision in Ignition 8.0 toward a cleaner and more modern style. We also introduced Perspective, which is highly customizable and supports the creation and use of styled/themed components via CSS (which was the visualization system alluded to in the original response).

The creation and use of Exchange resources should make for a decent workflow of creating and using libraries of styled component classes in Perspective, letting you build a consistent/themed look to your project. We have more ideas for theming/styling, but nothing far enough along to be shared right now.

Vision is not something that can we can support themes for a whole host of reasons: some technical, others practical. If themed Vision is the goal, it’s technically doable via a custom module, but would require a solid Java/Swing and Ignition background, and a lot of time.

2 Likes