Best option for Perspective Dashboard widget views

Ignition
1

I’m starting to explore the Dashboard component for use as a manufacturing plant overview.
I’ve tried Flex Container and a Coordinate Container using % settings for x, y, widths, heights, fontSize, etc., but neither adapts well to the resizing - particularly at small sizes which just get cropped.

What’s the best way to create widgets that will scale proportionally with the user’s choice of widget size, screen resolution and even screen orientation?

2

I guess this would be a rare case to consider using breakpoint (or maybe even column containers) altho i really dislike using them.

1 Like
3

Hi @Transistor, this is one we’ve been grappling with for a while. Essentially, it is a lot of trial and error, as the result is very contextual to your viewport, the Widget instance(s) and your end goal.

As well as the things you have listed, I would also consider setting minWidth for the Dashboard component. This would then give scrollbars for the dashboard rather than the individual Widgets.

A few tricks we’ve also used:

  • Mainly sticking to Flex Containers for the Widgets.
  • Exposing the height and width parameters to the widget, where the height and width are the number of tiles that the widget uses on the Dashboard.
  • Using vw or vh for font sizing as a ratio with the previously defined tile height/width.
  • Using the tile height/width to determine the orientation of the widget itself to then rearrange/hide the components within the Widget, or use the embedded view component to display different versions.
  • Setting min and max tile height/widths that can be used by the widget.
  • You can derive orientation from the viewport dimensions which are exposed in Ignition v8.1.7+ (I think). Pre this version there is a free module from BIJC that provides the same functionality. We have this as a session parameter.
  • Using the orientation parameter we create a separate editor for portrait and landscape, so essentially there are 2 separate dashboards depending on orientation.

I’m sure there’s more, I will update further if they come back to me…

1 Like
4

Thanks, @matthew. That confirms many of my suspicions and gives me a bit more confidence in choosing a design strategy.

1 Like
5

No worries @Transistor. The Dashboards Components we use in projects are reviewed the most, and often take the most time to get right.

By no means am I an expert (I’m certain there are infinitely better ways of doing some of the things we’ve implemented), but the list is what we have found so far.

If you find any good tricks, please post them back here if you can. I’m eager to learn some better ways to handle the component :slight_smile: