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.


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?


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.


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


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):
    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.

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.


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


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


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.