DIM (Dynamic Indicator Maker) SVG Images

[Rich_E]

DIM (Dynamic Indicator Maker)

Hey everyone! I created a new tool that creates fancy SVG based indicators that dynamically update based on an assigned percent complete column in your app.

SVG stands for Scaleable Vector Graphics and these file types are special in that they are infinitely scaleable. Instead of being made of pixels like a regular image type, they are made from vectors, rays, circles, paths, etc so you can make the image as large (or small) as you need and the device will render these graphics on the fly in real-time without any quality loss.

Because SVG graphics are rendered in real-time we can create indicators that update dynamically as the value of another column changes. These images can be used as headers in “detail” views, inline images in your “table” views or an image in your “deck” view. Below are just a few examples:

I have made this tool available as a sample app that can be found at the link below:

DIM (Dynamic Indicator Maker)

Here are some quick tips to get started:

1. Enter the name of the “percent column type” you will be using in your app into the DIM tool.

2. Select whether you want a circle, horizontal bar or vertical indicator.

3. Adjust the corners of your indicator using the sliders provided.

4. Change the colors of the indicator based on your preferences (you need to use hex codes, click the pallet icon above this section to open up htmlcolorcodes.com. You can adjust the progress color, background color and the text color.

5. As you make these selections, you can view a realtime preview of the indicator you are making at the top of the screen*.

6. When you are happy with the look, simply copy the formula provided at the bottom (or right side of the screen if in full screen) and create an “image type virtual column” in your app with the formula provided.

There are many more opportunities with this idea. I would love to see if anyone from the community can take this idea and make it even better. Please copy!

*while the app will show that values are trying to sync, this has no effect on what you see on the screen. All calculations are handled via virtual columns so all results/changes are instant.

[hcquadros]

Have anyone found out a way to solve the problem with Firefox?

Using Firefox, SVG images works fine with show collumns, but not with image or thumbnail collumns.

[11129]

Rich:

Hey everyone! I created a new tool that creates fancy SVG based indicators that dynamically update based on an assigned percent complete column in your app.

Hello! I’d like to be able to link a background image inside of a circle indicator instead of percent, but for some reason it doesn’t work (I get a broken image icon). Could somebody help me, please?

[mujiono]

thanks @Rich_E  for DIM...

i want ta make defrent color every 20% in circle,  example:

0%-20% =red, 21%-40%=orange, 41%-60%=yellow, 61%-80%=green, 81%-100%=blue....can 1 make that with dim....?

thanks for your respons

[francesmendoza]

Hi, 

I want to use this feature on my app, however, I am receiving this error.

"Arithmetic expression '(1-[Pct Full])' has inputs of an invalid type 'Unknown'"

[Kirk_Masden]

Perhaps it would help if you shared your code.  I may not be able to help but hopefully someone else will.

[Kirk_Masden]

I'm looking at this after a long hiatus.  Very nice.  It reminds me, though, of why it is problematic that we are unable to adjust the vertical and horizontal sizes of our image containers; whatever SVG image we add to AppSheet, it has to fit in the same "frame."  I'd like to be able to able to accommodate horizontal graphics that are wide but only a few pixels tall.