Help me create this cool hmi design

Hello, I need help on trying to create this hmi application, I'm a begginer into SCADA development, and where I work there's a hmi that has a lateral panel that I want to replicate in Ignition, because I found it really cool design.

There's a video showing the screen working:

But I'll also explain in text, if you look at the static image with the colored squares:

This is how it works:

In red, there's the device buttons, so if you click any of those texts (QB-002, TO-22, TO-021-M1...) it's name is going to appear in the right upper panel, those are all the devices in the process (Motors, valves...).

In yellow, there's the commanding buttons, so you can assign any commands to the device you selected (Turn on, Turn off, Reset, anything...)

In blue there's the navigation tab, if you select any option from the list, the corresponding screen is going to appear in the green square (Errors in the selected device, parameters, there's a lot of options to visualize...).

But the key for this is when you select a device, every information displayed in that right window changes according to the device you selected, and I'm having a hard time trying to figure it out how to replicate all of this in Ignition (What resources do I use? Docked windows, UDT parameters, scripting? Using Vision module.

I’d be very happy if someone could give me orientation on how to make it!

Welcome to the forum.

You have tagged the question as both Vision and Perspective. I suggest that for a machine HMI you should be using Vision.

IA has online training:

Start there and be prepared to spend a week studying that, the Welcome | Ignition User Manual, and testing on your project. In particular, learn about templated windows.

Version 8.3 is recommended for any new projects.

When you get stuck search the docs, then the forum and, if you don't find an answer, ask a specific, focused question (rather than a "Please teach me how to design a HMI" type of question).

What you’ve described is not too difficult. What you should focus on is UDT and tag folder architecture. Then for each of the widgets in your view panes, you’ll simply use indirects and form the tag paths to those widgets based on your initial drop down selector. You can use memory tags within the UDTs to store configuration data like command names for each button of each tag UDT instance. As for the green view pane, you could look at containers, stacked on top of each other for each type of view style, and use visibility to enable/disable them based on the view selected. Those are just some ideas off the tip of my head to get you thinking about the possibilities.

I appreciate your attention! Reading the manual and understanding what each component does is one thing, but putting all of that together to actually create an application is a completely different challenge for me.

My question there was because I wanted to make a specific panel design application, and I’m struggling to bridge that gap, but I hope people here will come up with some nice ideas.

Thanks for answering, I’ll try to gather as much ideas as possible from the comments.

Even if you are to get some help with this (I wouldn't hold my breath), it will be hard for us to provide any good information without knowing what visulation module you're planning to use.

Thus @Transistor's question. Which module are you using, because, the methods for potentially constructing your proposed display will be fairly different.

You'll find much more success getting help, if you attempt to do this yourself and then come back with questions where you get stuck.

1 Like

I edited the post to be only vision module, it makes more sense because it’s a machine application