HMI Screen design

Recommended Posts

Searching the web and previewing the screens on your site I may see very nice GUI HMI screens, and make me wander: HOW they made this?

So I wander is possible to make series of small tutorial's (from your guru) for us totally beginners, about tips and tricks making user screens. E.g. for me is very intersting how thay make this page:

How is make tank ingredients (brown liquid) to rise up and down?

This is just one question, I can make dozen of them. I believe you understand what is my point.


Link to comment
Share on other sites

A lot of this is described in the help. It would probably be best to simply post a number of queries for your questions and I can answer them in turn.

There are three ways to make a level rise up and down:

1) you can use one of the linear gauges, hide all the ticks (if you want) and labels and overlay it on the tank. The limitation on this is that you can't make the gauge wide.

2) you can create a symbol component, give it a fill color, then use the size parameter to resize based on a value. The hard part about this is that you need to invert the channel (because size is based on the top), and you need to manually scale it based on the overall pixel size.

3) you can use the fill option of the symbol component to fill a symbol based on a value, then use one of the cutaway symbols from the symbol library. This one works best by far. You can use a simple rectangle shape as well. This only works on vector graphics such as those from the symbol library, and won't work with GIF, JPEG or other bitmap images.

I've attached a sample showing all three.


Link to comment
Share on other sites


This topic is now archived and is closed to further replies.