DIM (Dynamic Indicator Maker) SVG Images

AppSheet Tips & Tricks
1

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.

2X_4_403b38038db71562bc70403eb2340eccdcdc7408.png
2X_4_403b38038db71562bc70403eb2340eccdcdc7408.png578×422 63.1 KB

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:

2X_e_e96db3fc508b8f9ad00f990b22c7a5c610ca035b.png
2X_e_e96db3fc508b8f9ad00f990b22c7a5c610ca035b.png525×990 39.7 KB

2X_e_ec3e55738560e81a23063e79afc9f10cb9a49a15.png
2X_e_ec3e55738560e81a23063e79afc9f10cb9a49a15.png528×992 46.4 KB

2X_4_432a5b07f7e4875b8b249ce42e4b9095a38d3472.png
2X_4_432a5b07f7e4875b8b249ce42e4b9095a38d3472.png525×986 64.9 KB

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.

39 Likes
2

Cool tool! Super useful
@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:

2X_3_33225aeff9db7405d2f3fac008caf3a474601028.png
2X_3_33225aeff9db7405d2f3fac008caf3a474601028.png101×101 1.08 KB

You could also get creative to create more rich dynamic thumbnails, such as highway placards:
2X_3_3f495097c161e654c38db9074d4f5d73121ea5ef.png

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:

2X_e_e0d80fe3d3a19d1b8628bf653ea9ec7ec7ccaeae.png
2X_e_e0d80fe3d3a19d1b8628bf653ea9ec7ec7ccaeae.png279×237 4.33 KB

Pie Charts

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

[Dynamic SVG graphics](https://community.appsheet.com/t/dynamic-svg-graphics/11758/89) Tips & Tricks ?

Hey Fabian, just did some experimenting with SVG donut charts: [image] I have included two code snippets at the bottom of this post, ‘simple’ and ‘complex’, although complex isn’t much more difficult. In any case, let me know if you have any issues - I haven’t actually tested this in my applications . Some background info: The circles are drawn with radius r=“15.915…”, which is the radius of a circle with circumference of 100. This will make your math easier in AppSheet …

8 Likes
3

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] ?
4 Likes
4

This is amazing! Thank you.

5

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
6

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

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

[Dynamic SVG graphics](https://community.appsheet.com/t/dynamic-svg-graphics/11758/85) Tips & Tricks ?

Color Mixer [Color2] This could be used in USERSETTINGS as well to generate the desired color. Then this RGB could be used all over the App.

5 Likes
7

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
8

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

8 Likes
9

Super cool thanks

10

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

1 Like
11

Fabian:

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)""

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

Fabian:

For what do you use the columns [width] and [high] ?

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:

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?

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

2 Likes
12

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…”

13

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
14

Jonathon:

progressive webapp installers for Chrome

Thanks for sending me to my google machine…

1 Like
15

Grant_Stead:

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…”

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

3 Likes
16

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.

[Convert RGB to Hex (decimal to hexadecimal)](https://community.appsheet.com/t/convert-rgb-to-hex-decimal-to-hexadecimal/16272) Tips & Tricks ?

Here is an expression to convert a RGB decimal number to a Hexadecimal. I used it in a color mixer. [Color2] The column [Hex #] is a TEXT column with the initial value: CONCATENATE( SWITCH(Floor([Red]/16),10,“A”,11,“B”,12,“C”,13,“D”,14,“E”,15,“F”,Floor([Red]/16)), SWITCH([Red]-Floor([Red]/16)*16,10,“A”,11,“B”,12,“C”,13,“D”,14,“E”,15,“F”,[Red]-Floor([Red]/16)*16), SWITCH(Floor([Green]/16),10,“A”,11,“B”,12,“C”,13,“D”,14,“E”,15,“F”,Floor([Green]/16)), SWITCH([Green]-Floor([Green]/16)*16,10,…

So here you go

13 Likes
17

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

1 Like
18

Dude, this is insanely creative!

2 Likes
19

@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!

1 Like
20

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