Project screenshots - share yours

Had a client that wanted piping and stopped healthy motors to be in bright red colours, was painful doing it as was very difficult to tell difference between a fault or just normal stopping.

I feel like more places should start thinking more about this design philosophy.

A lot of places I've done work have different colors (not bright ones, just different ones) that tell you whether a device is in manual or auto and whether it's running or not. Those colors are distinct from a fault color which is typically red.

I don't like red for stop but I've certainly seen that done a lot. I've also seen red for running which is kind of funny but I'm told red is for "lucky" in China or something. I don't know.

Ultimately, I think it's good for animations to show you as much information as they can but I think it's also good to avoid using super harsh colors because they can look ugly.

In the power industry and the pulp and paper, in the US usually, the graphical color represents the "safety" aspect of the device. IE green = device safe = not powered/active etc... Red = Device NOT safe = powered/active. Breakers in the on position = red, off = green. It will break your brain when going between different industrial segments.

6 Likes

I thought that was how Canada did it, red for on and green off.

I saw red for on and black for off mostly in US for power when I was working for a system vendor in the mid Atlantic region.
I know I had to put the power connection on my drawings really detailed, as everyone had something different from delta 480vac.



How did he get so many things into the area where the pagination is?
Are components stacked in a container? Or is the page select custom made?

2 Likes

I put the table into a Coordinate Container. You can then place other elements in that container that will appear on top of the table. You just have to be careful that those elements don't overlap interactive parts of the table, like the pagination links.

image

This works best you set the container mode to "percent."

3 Likes

I do something similar to add some controls to a table:

  • put the table in a coordinate container
  • make its height and width 100% (doesn't even need to be in percent mode)
  • add controls on top of the table. Let's say you want a button like this one (note that the page jump thing is a built-in feature but it was moved with css):
    image
    to make sure it stays in place when the container size changes, you can use something like x: calc(100% - 38px) and the same thing for its y position.
11 Likes

Is there a spot where more of the tables and data gathering techniques are shared?

@Geraldine_DOLERA Hi I read further and noticed that the software of this access control writes all data to Postgre SQL DB. I haven't explored more in DB structure, but I think this method might be used.

Trying to add charts for details.

6 Likes

Hi @jcjc74836, It looks great, just maybe some remarks:

  • The gauge on the top right can get a little bit more attention to the design. It looks like a component from the 00's :sweat_smile:
  • The chart should have a space between them. now it's hard to differentiated where the second chart start.
  • In the top header, the pamolsa text should be align with the rest
  • I would put more space between the refresh icon and the themes icons. Same spacing between the menu icon and the back icon.
  • On the icon side, i would use one type of icon everywhere. Filled or not filled that's the question :wink:

Those feedback are not to criticize they're for improvement :slight_smile: They're also personal maybe someone else will not agree

All the best
Regards
Arnaud

9 Likes

thank you definitely you right and my project need more improvements, i'll do your advices, thank you very much fo the feedback.

2 Likes

You can use gap: 3px on your containers to space their contents by 3 pixels.
Obviously works with other values, and even other units.

This should help separate the cards and make them easier to read.

6 Likes

Excited to share a project I've completed using Ignition: a comprehensive interactive report dashboard that brings data to life in meetings.
Watch as we explore how this dashboard transforms intricate data into clear, actionable visuals. Ideal for teams looking to analyze performance, identify trends, and make data-driven decisions.

28 Likes

Very impressive! Can you provide any insight on the calendar component? Also is this 8.1?

1 Like

Thank you for your kind words! Yes, this is indeed using Ignition 8.1. The calendar component, along with all the other components you see, are from my own custom module that I've developed. I've tailored it specifically to fit the needs of the project and ensure seamless integration.

1 Like

Will you be able to share this project ? A lot of learnings! Great work !

1 Like

Thank you so much for your kind words and interest in the project! Currently, the project is not open for sharing as it's tailored specifically for my own professional use. I'm not sure if it will be available in the future, but I truly appreciate your understanding and support.

1 Like

No problem, i completely understand. What modules did you use to build this? Is there any custom module of charts?

I've crafted two modules for this project. The first one, which is the most extensively used for common chart types, isn't currently available for public release. The second module I developed is for creating Sankey charts, which I have shared for free and posted previously.

This looks fantastic!
If you could share some insight, how did you get the printing to line up so well. We have been struggling to print our perspective views properly and then into a pdf.

1 Like