DIM (Dynamic Indicator Maker) SVG Images

,

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.

image

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! :slight_smile:

*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.

24 Likes

Cool tool! Super useful :slight_smile:
@Grant_Stead @Suvrutt_Gurjar @Fabian @Rich

Thumbnails

One thing you might consider adding is dynamic svg thumbnails as a substitute for the native THUMBNAIL() function which relies on external thumbnail services. A simple thumbnail could be:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<rect width="100%" height="100%" fill="rgb(67, 135, 191)"/>
<text font-family="Sans-Serif" font-size="35px" text-anchor="middle" fill="white" x="50%" y="65%">JS</text>
</svg>

Which would render as:
image

You could also get creative to create more rich dynamic thumbnails, such as highway placards: image

Dynamic Form Elements

One limitation of AppSheet that can be solved with SVG’s is the creation of dynamic form headers/text or animations within forms. AppSheets format rules are applied upon initiating the form view - they DO NOT recalculate upon changing values in a form until after the form is saved.

For example, you might want text to show up as “Everythings Good!” in green, and then change to “Warning!” as red depending on specified values. Currently, the text will change, but the format rules which dictate its color will not. To get the desired behaviour without SVG’s appsheet requires two virtual columns that are preformatted, and SHOW() rulesets to hide one or the other.

I have also used SVG’s in applications to display dynamic images in forms. One example is modifying an excavator to appear to be digging further down / deeper as a user adjusts a numerical range column indicating depth. Another example is highlighting portions of serialized text as users input it:

image

Pie Charts

You can read about how to create SVG pie charts here:

5 Likes

This is an awesome helpful tool. Thank you very much @Rich
Here are some Ideas:

  • When you choose “Circle” the [textColor] takes effect only for the “%” sign, not for the Number value. That’s because in your expression the Color value is static: fill=""rgb(88,89,91)""
  • You could add an Enum to choose the text font-family according to the fonts AppSheet offers under UX --> OPTIONS --> FONTS
  • For what do you use the columns [width] and [high] ?
3 Likes

This is amazing! Thank you.

Ok, I’m curious.
There was a massive thread in which @Jonathon and @Fabian really went back and forth on this, they even started a community based app with another member. This is how I learned about it…

One of the reasons I don’t use SVG is because it didn’t seem stable on different devices. Has appsheet fixed that, and SVG is better supported now?

2 Likes

This is awesome and makes creating the code for these indicators wicked easy!!

For colors, the app could include @Fabian color mixer found here:

4 Likes

Thank you @Rich. The DIM app is very neat with various settings that user can make to create an indicator of one’s chosen type , color choice and few other options. These indicators will make the app user experience much richer and certainly have numerous use cases wherever progress, status needs to be shown in the app.

Would appreciate further insights by you all - @Rich, @Jonathon and @Fabian on the points mentioned by @Grant_Stead as to how these SVG based indicators will render on various devcies.

1 Like

Unless something has changed recently, the current limitations of SVG’s in AS are:

  • They do not render properly in every browser, specifically older versions of internet explorer which plague most PC’s
  • The SVGs always use the browsers default serif or sans-serif fonts, which are different across devices and browsers.
    • This is sometimes undesirable as the kerning and character widths vary which can cause text to run out of the viewport if you aren’t careful.
    • It also introduces some inconsistency between other in-app fonts.
  • When SVG’s reach a certain level of complexity, they may cause the application to run slowly. For example, undraw.co images if inserted as SVG code will result in a noticeable pause when switching between views containing them.
  • SVG images do not work with workflow templates. They will not show up in printed PDF’s or work with the SNAPSHOT() function.
  • SVG’s that include RASTERED images as part of the graphic will not work in AppSheet
  • SVG’s can be used in the application branding backgrounds and logo. However, creating desktop or home screen shortcuts of applications with SVG logos will NOT work. Only use SVG logos for applications that will be accessed indirectly/via app launchers.

I will edit this as I think of more.


You could work around some of these limitations with a user setting (display enhanced graphics option, and then include a warning about not working on older browsers…)

@Grant_Stead @Suvrutt_Gurjar @Fabian @Rich @morgan

7 Likes

Super cool thanks

Thank you @Jonathon. Your insights are very useful as usual.

1 Like

Thanks @Fabian for the feedback. Good catch Ill be sure to update to app!

These were left in the app for future development, I wanted to give the option for folks to define the dimensions of the image instead of being static. For example you may want a horizontal bar that is thinner or thicker

@Grant_Stead You are right it was a pain to test these, iOS was very finicky. However, I have tested all the SVG options with apps iOS, PC, Mac, Android and in Chrome and Safari browsers. That said, if anyone sees an issue with other browsers Ill be sure to take a look at it.

1 Like

That’s awesome…
So then you’re kinda posting the “official” Appsheet has tested and approves these specific SVG expressions to be used? “But, disclaimer SVG is still garbage town in internet explorer/Edge. But Appsheet doesn’t “really” support these anyway…”

One way AppSheet could help eliminate internet explorer use (sorry MSFT) is by making it easier for app developers to deploy progressive webapp installers for Chrome.

1 Like

Thanks for sending me to my google machine…

1 Like

Yep. If a browser supports SVG then I will see if I can fix any compatibility issues.

3 Likes

I was so excited about this App that I thought it should be possible to built an own Color Picker.
I already made this Color Picker for RGB, but I thought that’s not very handy.

So here you go :slight_smile:

9 Likes

@Fabian That is awesome! You guys are so creative!

Dude, this is insanely creative!

1 Like

@Fabian that is awesome! Amazing idea. When you have it ready to go, DM me and ill update the sample app.

Keep the ideas coming!

Hi @Rich Please feel free to grab the Color Picker from my App:
appName=DynamicIndicatorMaker-549987