Perspective Equivalent Vision Level Indicator?


Is there an equivalent Level Indicator component from Vision for Perspective?

I want to fill this tank symbol below, just to the top of the rectangular part before the top slanted section (or maybe to the top if it’s not difficult).


It should be possible with SVG. If you import a rect, you should be able to bind the position and size to custom properties with formulas.

If you want to use a custom shape, you’ll probably have to calculate the path dynamically, which would require you to know how paths work (see the tutorial on MDN as example:

EDIT: to write it out completely

  • Create an SVG (just a text file with the *.svg suffix) with the following contents. This SVG has a 100x100 viewbox, and defines a 60x100 rect in it.
<?xml version="1.0" encoding="UTF-8"?>
   viewBox="0 0 100 100">
   id="fillRect" />
  • Import the SVG (drag the file into the designer) as “Embedded image”
  • Drill down into the SVG properties, and bind the y attribute to “100 - fill percentage”, and the height to “fill percentage”
  • You can alter the “PreserveAspectRatio”, or alter the width directly to get it to match your drawing

When creating such an SVG, it’s probably good to start with a drawing program (like inkscape or illustrator), and clean up the resulting SVG (a drawing program will ofen introduce unneccesary features like layers, namespaces, …).

Ultimately, you can also bundle the outline and the fill in one SVG object.


Thanks Sander, I only just jumped back onto this but yep this works cheers.

You could take it one step further…
If you create an svg drawing and clip one of the filled objects you can do something like this

I created an svg file in inkscape by drawing a shape and duplicating it. One shape is gradient filled and the other shape just has stroke defined (no fill) as the outline. Then added a text object too.

In perspective designer, afer dropping the svg onto a view (embedded), I added the ‘style’ property to the svg’s gradient filled object (element[0]). Then added the value ‘clip-path’ to the style so I could bind the inset clipping to the scroll bar value. Bound it like this:

'inset('+toStr(100-{../Slider.props.value})+'% 0px 0px 0px)'

I bound the text value to the scroll value too.

Here’s my svg:


Very cool, thanks for the info!

Ah yes, I didn’t think about clipping. It’s much easier than calculating a path! Great work!