Dashboards with dynamic text overlay on SVG images

Suvrutt_Gurjar · 02-02-2023 04:25 AM

This effort is fully inspired by various pioneering techie tips shared by @Jonathon in on SVGs and then those further enhanced by @GreenFlux , @Kirk_Masden , @Fabian_Weller and @SkrOYC with their excellent, informative tips and recent practical use of those by @jyothis_m

Have tried to create dynamic dashboards using SVGs, wherein the background images stay stationary but the overlay text ( various KPI or SLA numbers or project names etc) is dynamic and changes as per selection by user.

The rough steps are

1. The background images in the dashboard card views are SVGs encoded as Bas 64 strings through the process described by @Kirk_Masden and @SkrOYC in the following tips

Using SVG "interface" images - Google Cloud Community

Re: Easy Icon/Background/Launch image generation w... - Google Cloud Community

Then referred the Base 64 long text column titled [Attribute B64] that contains Base64 encoded SVG string in the virtual image type column's expression as mentioned in the following code with Xlink:href; parameters.

Initially, tried a lot to access cloud hosted PNG/JPG images through URL in SVG code and at least I could not access those . Finally Base 64 encoded SVG image string was successfully displayed through Xlink:href parameters inside other SVG code.

I learned Xlink:href here: External content in SVG · WebPlatform Docs

Additionally [Attribute] text type column in the following code provides various changing parameters such as project name, start end dates, number of tasks etc. that overlay on the Base 64 encoded referred background SVG image.

CONCATENATE("data&colon;image/svg+xml;utf8,<svg version=""1.1""
     xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""
     width=""435"" height=""253"">
  
     <image x=""0"" y="" 0 "" width=""435"" height=""253""
      xlink:href=""",[Attribute B64],"""/>
     
    <text font-family=""Verdana"" font-size=""25""  x=""170"" y=""140"" 
               fill=""rgb(46, 139, 87)"">",[Attribute],"</text>
 </svg>")

The dynamic dashboard looks like below and changes when the referred records are changed.

On android mobile device the dashboard looks like below

The 4 icons in the sample dashboard images ( used in Project Name, Open Tasks, Delayed Tasks and Open Defects cards are from https://www.flaticon.com/free-icons)

The above is tested in a test app. The image layout changes if one changes the size of view in dashboards. However these need not be used in dashboard view. They can be simply used in the card views. For demonstrating changing parameters with changing project, I needed to use dashboard view.

Kirk_Masden

Wow! Very cool! I need to study this in order to learn how to do it myself but it looks extremely promising -- and I'm extremely honored to be mentioned in connection with this.

One point: In regard to Base64, I learned from @SkrOYC so his name should come first.
Also, if you have time and it's not too much trouble, a sample / template would be very useful, I think.
But, regardless of whether you can share a sample, thanks for this big contribution!!!

On a personal note, it has taken me a while but I've gradually come to see SVG as something that can significantly augment the AppSheet platform. You've shown one more way in which that's true!

Suvrutt_Gurjar

Thank you @Kirk_Masden . I will try to make a sample app.

However, I think it is essentially a combination of

A. a long text column containing base 64 encoded string of SVG that acts as background image

and

B. Another text type column that provides overlay text

into a single SVG code in an image type VC column.

Yes, I believe the possibilities are substantial because we can have multiple lines of text with different fonts etc. as overlay in a single image.

Kirk_Masden

@Suvrutt_Gurjar wrote:

Yes, I believe the possibilities are substantial because we can have multiple lines of text with different fonts etc. as overlay in a single image.

One thing I have learned about SVG is that not all devices use the same set of fonts. So, something that looks one way on a computer might look different on a particular mobile device. That's something to be careful about.

Suvrutt_Gurjar

Yes, true. That caveat is always there with SVGs. We need to ensure that for an app it is visible for all the intended user base , meaning the devices they will use.

I think in business mobile apps that is more controllable as user base and as a result device base is typically limited, as against consumer or public apps where the users base can be large and so is the device base.

Kirk_Masden

By the way, as I have written in other posts, I have been using Inkscape to prepare SVG images. In Inkscape, you can use a special font (one that might not be common to all devices) and then convert that to an image that will always display the same way in any device:

It works well if you know in advance what word or words you want to display. But, if one wants to use your technique, one must choose a font that will display well in any device.

jyothis_m

This is just amazing. Thank you @Suvrutt_Gurjar 😊

Fabian_Weller

Thank you very much @Suvrutt_Gurjar for this tip.

With the <image> element, you can include JPG / PNG in a SVG.
https://jenkov.com/tutorials/svg/image-element.html
But as you said they will not work in AppSheet.

I'm wondering why you convert the SVG into Base64? Why don't you just use the SVG and combine it with text?

Suvrutt_Gurjar

Hi @Fabian_Weller ,

That is a good point.

I think I could not get the .svg images to work with <image> element and hence another step of Base64 encode.

However now that you mention it, I will try again to see if .svg images can be directly used.

Fabian_Weller

Yes this should work without the <image> element.
https://stuffandnonsense.co.uk/blog/combining-svg-graphics-with-text

Bligh

Just for anyone who wants to try implementing this without using Base64 (as I had trouble with this) here is an example you could use to recreate the image below with dynamic values:

Create a table with columns Title, Subtitle 1, Subtitle 2, Attribute 1, Attribute 2.

Title	Subtitle 1	Subtitle 2	Attribute 1	Attribute 2	Virtual Img Column
P R O J E C T S . U P D A T E D	Current week	Last week	45	33	Concatenate code

Add a virtual column of type "Image" after loading your table into Appsheet as a database, and paste in this Concatenate code:

CONCATENATE("data&colon;image/svg+xml;utf8,
<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 400 200"">
    <rect x=""0"" y=""0"" width=""400"" height=""200"" rx=""15"" ry=""15"" fill=""%23494949"" />
    <text font-size=""18px"" x=""50"" y=""40"" font-family=""Arial, sans-serif"" fill=""white"">",[Title],"</text>
    <text font-size=""18px"" x=""50"" y=""80"" font-family=""Arial, sans-serif"" fill=""white"">",[Subtitle 1],"</text>
    <text font-size=""28px"" x=""50"" y=""110"" font-family=""Arial, sans-serif"" fill=""white"">",[Attribute],"</text>
    <text font-size=""16px"" x=""50"" y=""150"" font-family=""Arial, sans-serif"" fill=""lightgray"">",[Subtitle 2],"</text>
    <text font-size=""22px"" x=""50"" y=""175"" font-family=""Arial, sans-serif"" fill=""lightgray"">",[Attribute 2],"</text>
</svg>
")

For me I have found the "Card" view type works best, and I click backdrop as my layout, and contain to make my image fit correctly.

Hopefully this gives a template others can use and modify quickly

Kirk_Masden

@Suvrutt_Gurjar wrote:

I think I could not get the .svg images to work with <image> element and hence another step of Base64 encode.

At the risk of telling you something you already know, I found the following tool built by @GreenFlux to be extremely useful:

https://www.appsheet.com/templates/Converts-SVGs-to-AppSheet-format?appGuidString=2a1c3780-f615-4b3b...

P.S. I wish AppSheet would make it easier for us to find outstanding user-constructed apps like this one. That is way I made the following proposal:

Improved integration between user- and AppSheet-generated templates

Suvrutt_Gurjar

Thank you @Kirk_Masden . Yes, I have seen the great tip on that useful tool from @GreenFlux . I have not yet practically used the tool though.

Your suggestion on user /AppSheet template integration is deserving for new AppSheet creators. I have upvoted it.

I had also requested the Google help documentation team (@lizlynch) to collate the erstwhile sample apps available on erstwhile AppSheet support page to be available in new help documentation. @lizlynch has created a document, referring most of those apps.

Get started by using the feature samples - AppSheet Help

dohuuduy1985

Please share temp

jaichith

@Suvrutt_Gurjar , is it stationary ? or it goes inside to some other view by clicking it ?

jaichith

It is possible to create dashboard using SVG ? if any box is clicked it should take to specific view. is it possible ?

Fabian_Weller

Yes but the specific view would open up in a separate tab, not in the app itself. AFAIK.

CaroC

I need to do exactly that, but instead of placing the icon, I need to display another SVG image. That is, I need to show an SVG image within another SVG image. But when I try to insert it, the main image breaks. I'm trying with the following code:

CONCATENATE(
"data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'>

<text x='10' y='50' font-family='Arial' font-size='30' fill='black' font-weight='bold'>Hello</text>

</svg>"
)
The column [Local Shield SVG] contains the logo in Base64 SVG. In reality, it contains a concatenation of other 3 columns where the complete SVG code of the logo is located. The column [Local Shield SVG] is displayed correctly, but when I insert it into the other SVG, it breaks.