# Perspective Equivalent Vision Level Indicator? **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [August 17, 2020, 2:45am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786 "2020-08-17T02:45:23Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 17, 2020, 2:45am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/1 "2020-08-17T02:45:23Z")
v8.0.15 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). ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/23cdc4d178b57c12b7ad746483eb83d7fa3d1c5b.png) ---
**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\ **Post date:** [August 17, 2020, 6:27am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/2 "2020-08-17T06:27:07Z")
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: [Paths - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)) 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. ```auto ``` - 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” ![afbeelding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/199d8f4d6a9d58e4d4b2aea39429731f9446f1d7.png) - 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. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [September 15, 2020, 12:03am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/3 "2020-09-15T00:03:32Z")
Thanks Sander, I only just jumped back onto this but yep this works cheers. ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [September 16, 2020, 1:44am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/4 "2020-09-16T01:44:29Z")
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 ![fill animation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a788d52f1136546bc8c8de578db52bc5518ca82.gif) 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](https://css-playground.com/view/65/clipping-paths-with-clip-path)’ to the style so I could bind the inset clipping to the scroll bar value. Bound it like this: ```auto 'inset('+toStr(100-{../Slider.props.value})+'% 0px 0px 0px)' ``` I bound the text value to the scroll value too. Here’s my svg: ![fillindicator_opt](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c046c7860fd5e22746f8220c1079d35a210ad713.svg) ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [September 16, 2020, 5:20am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/5 "2020-09-16T05:20:35Z")
Very cool, thanks for the info! ---
**Author:** ![Sanderd17](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sanderd17/32/8735_2.png) [@Sanderd17](https://forum.inductiveautomation.com/u/Sanderd17)\ **Post date:** [September 16, 2020, 6:09am UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/6 "2020-09-16T06:09:58Z")
> [@dkylep](#): > > ...create an svg drawing and clip... Ah yes, I didn't think about clipping. It's much easier than calculating a path! Great work! ---
**Author:** ![hannah.godofsky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hannah.godofsky/32/20483_2.png) [@hannah.godofsky](https://forum.inductiveautomation.com/u/hannah.godofsky)\ **Post date:** [January 12, 2021, 3:12pm UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/7 "2021-01-12T15:12:46Z")
Hi - I’ve tried to work through these 2 examples and it works exactly until I get to the point where I would add the styles to the gradient fill. Then it just errors out. How did you do that part without breaking it? This is still really useful though, gradients / animations and SVG + Perspective is a tricky combination. Still figuring it out. Thanks for sharing this. ![Screen Shot 2021-01-12 at 10.10.57 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/8872015bf99f260675ecce147c3614d2ba9c12af.png) ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [January 12, 2021, 7:08pm UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/8 "2021-01-12T19:08:36Z")
It looks like you created the ‘style’ prop as an array instead of an object. Add the ‘style’ prop as an object to the element. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/e/6ee0532aa45b6aa43e7ed24edfa9643e31e2bcd6.png) Once you have a style object in element[0] you can add a value in the style called ‘clip-path’ ---
**Author:** ![hannah.godofsky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hannah.godofsky/32/20483_2.png) [@hannah.godofsky](https://forum.inductiveautomation.com/u/hannah.godofsky)\ **Post date:** [January 12, 2021, 7:10pm UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/9 "2021-01-12T19:10:09Z")
Ah, I actually figured this out - though it doesn’t work for me with the gradient, only with a solid color :-/ Is there a trick to that part of it? ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [January 12, 2021, 9:30pm UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/10 "2021-01-12T21:30:24Z")
I have had trouble in the past getting gradients from an svg to show up in perspective but if it is saved properly it should work > [@Recommendations for svg editor](http://forum.inductiveautomation.com/t/recommendations-for-svg-editor/29303/8): > > I’ve been using “Optimized SVG” in Inkscape to preserve gradients, then use @heybales advice to resize and embed the image. [image] [image] I am able to simply drag and drop (as an embedded image) this tank svg directly into a perspective view and the gradient works ![fillindicator_opt](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c046c7860fd5e22746f8220c1079d35a210ad713.svg) Here's a screen shot of the element props that I see when I drop it on the view ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/70b797dc2d3212fce2358bcf07ff263991cbaa0f.png) I'm using 8.1.1 (8.0.16 worked too) ---
**Author:** ![hannah.godofsky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hannah.godofsky/32/20483_2.png) [@hannah.godofsky](https://forum.inductiveautomation.com/u/hannah.godofsky)\ **Post date:** [January 12, 2021, 9:31pm UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/11 "2021-01-12T21:31:41Z")
That part works and shows the gradient as a static image, the animation with the slider only works with a solid color though. Sorry for being unclear. ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [January 12, 2021, 10:02pm UTC](https://forum.inductiveautomation.com/t/perspective-equivalent-vision-level-indicator/37786/12 "2021-01-12T22:02:44Z")
what does your binding look like? what if you just use an explicit statement instead of binding the value? Something like this… ```auto clip-path: inset(50% 0px 0px 0px) ```