Perspective Level Indicator

Ignition Early Access
1

I need to animate a level. The level is not in a tank so I cannot use the cylindrical tank object. For ease of discussion, let’s call it a rectangle (900x X 300y) . I need to connect it to a tag that is 0-10ft and show an animated level. What are others using, or how do I do this?
1.) Progress bar component will not work, I can’t figure out how to change the color of the progress bar itself.
2.) I used the linear scale component elsewhere and added an indicator(range, length=350, value=0, extent=level tag) and it works fine. The problem is that if I widen the linear scale component, it auto rotates the scaling to the bottom and turns it all sideways so that is now unusable.
Help please.

3

Abstract solution I came across a couple of months ago:
Parent Container in percent mode
Child Container One displays desired color and fills the parent 100% at all times.
Child Container Two displays background color at a fill rate of 1.0-(value_as_percent/100)
AbstractLevelIndicator.json (3.2 KB)

1 Like
4

Thank you. This works for now. I assume a “real” level indicator is coming in a future release?

5

I know that we’re planning on making multiple changes to the Progress Bar which might allow it to do what you are looking for, but I have no knowledge of any new component that would function as a level indicator.

6

How do I import this into my project?

7

First Way:

  1. Download the .json file.
  2. Open the file in your preferred text editor.
  3. Copy the entire contents of the text onto your clipboard.
  4. Create a View which you will not need to keep somewhere in your existing project.
  5. Hold Shift down and then right-click the named View node (not the root node, but the actual node which displays the name of the View).
  6. Select Paste JSON.

Second Way:

  1. Download the file.
  2. Place the file within your gateway’s file system, somewhere within your project.
  3. Open a Designer.
  4. The file should be visible in the Project Browser in the Perspective > Views context, with a path matching the location you placed the file within the project.
8

Hi Everyone!

I have one more solution of displaying Level:
If You add new value named 'background' to the style object of container:

linear-gradient(0deg, rgba(43,87,135,1) 50%, rgba(255,255,255,1) 0%)

and change value (50%) then Your Container will fill for 50% (for example).
Here's the link for linear-color online-constructor: Linear-scale

Hope it will help someone :kissing_closed_eyes:

9

@Sanderd17 had a good solution as well with a simple SVG here