# Help me create this cool hmi design

**URL:** <https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [October 14, 2025, 3:46pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441 "2025-10-14T15:46:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![raphaelcesar2108](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@raphaelcesar2108](https://forum.inductiveautomation.com/u/raphaelcesar2108)\
**Post date:** [October 14, 2025, 3:46pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441/1 "2025-10-14T15:46:34Z")

</div>

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:

 ![IMG-20251014-WA0021](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/3170c3bc4688c7242f37dbc65147640ef3d6d11d.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 14, 2025, 4:26pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441/2 "2025-10-14T16:26:06Z")

</div>

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:

> **[Learn Ignition at Your Own Pace](https://inductiveuniversity.com/)**
>
> Learn SCADA software (and get a credential!) for free with Inductive
> University’s online Ignition SCADA courses, taught by industrial automation experts.

Start there and be prepared to spend a week studying that, the [Welcome | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.3/intro), 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).

---

<div class="post-metadata">

**Author:** ![robertm](https://avatars.discourse-cdn.com/v4/letter/r/ea5d25/32.png) [@robertm](https://forum.inductiveautomation.com/u/robertm)\
**Post date:** [October 14, 2025, 5:32pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441/3 "2025-10-14T17:32:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![raphaelcesar2108](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@raphaelcesar2108](https://forum.inductiveautomation.com/u/raphaelcesar2108)\
**Post date:** [October 14, 2025, 5:47pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441/5 "2025-10-14T17:47:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![raphaelcesar2108](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@raphaelcesar2108](https://forum.inductiveautomation.com/u/raphaelcesar2108)\
**Post date:** [October 14, 2025, 5:49pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441/6 "2025-10-14T17:49:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 14, 2025, 6:44pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441/7 "2025-10-14T18:44:01Z")

</div>

> [@raphaelcesar2108](#):
>
> My question there was because I wanted to make a specific panel design application

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.

---

<div class="post-metadata">

**Author:** ![raphaelcesar2108](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@raphaelcesar2108](https://forum.inductiveautomation.com/u/raphaelcesar2108)\
**Post date:** [October 14, 2025, 6:57pm UTC](https://forum.inductiveautomation.com/t/help-me-create-this-cool-hmi-design/111441/8 "2025-10-14T18:57:56Z")

</div>

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