Tank Volume Inventory Dashboard

Reading back my earlier reply, I realize I went a bit heavy on the design theory . At the end of the day, the real question is: how do we make PI Vision screens actually help operators?

For this demo, I used Figma mainly for the mockups, with PI AF handling the backend. I’d love any comments on the implementation — or examples of what’s worked (or not worked) in your own PI Vision screens.

Abel, your Pi Vision graphics look incredibly crisp—it's like they were born straight from the Pi itself! The clarity and detail are next-level. Was that another visualization tool you used, or all done within Pi Vision?

Hi Mathew,

A visual design like the one in this post is mainly based on techniques that help visual perception: Use of contrast (in addition to just color), alignment, form (i.e. tank bars), some gestalt principles (proximity, closure, connection), and reducing visual noise as much as possible. In the backend, it's standard PI Tags and AF analytics to support the design.

It's a "design-first" approach; and then PI has the backend necessary to support the design

Please, let me know any more comments/questions

Thanks, Abel — that makes sense. I’ve actually been wanting richer graphics in PI Vision for a while now, just haven’t seen anything quite like this. Using Figma to recreate the visuals is a smart move. Appreciate the thoughtful explanation! 

On the backend, if there is something different that you do with sharing be happy to learn more.

Hi [Mention:0051I000007IPW9QAO]​, 

Thanks for your thoughtful comment.

This dashboard was originally built in production using PI AF Analytics and PI Vision. For the purpose of this post, I recreated the visuals in Figma using the same layout and colors. All values shown are simulated.

Please let me know any other questions or if notes on the backend implementation are needed