Finer-grain control over local image caching

[khuslid]

We have apps using images as icons for opening different menues and views. Also images in header of some views. Often these images won’t load or it takes too long. A grey triangle then shows.

Woulden’t it be great to have an option for each table or column to save image locally, so one don’t need to wait for the image to load every time, and some times not load at all.
Great for views and icons to be used a lot.

[Kirk_Masden]

Having this kind of fine grain control would improve my app significantly.  As I point out in the following thread, I have a case where a single image with a very long URL (which I cannot shorten) jams up the image loading process:

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Image-loading-gets-stuck/m-p/460685/highlight/t...

This problem seems to lead to overheating on iPhones (at least in my case):

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/App-makes-my-iPhone-hot/m-p/447320

Currently, my only solution is turn "Store content for offline use" off.

I'm not sure how difficult the programing would be but in terms of the editing interface, I think that the kind of control that @khuslid is requesting could be added fairly
unobtrusively, as follows:

Each table has the control interface you see above.  If we could also have the option to exclude the images in certain tables I think it would give us the kind of control that Khuslid is requesting and it would greatly improve my app.  In addition, I think it might have the further advantage of reducing demand on AppSheet servers without adding much complexity to the AppSheet interface.

[khuslid]

Yes this would solve a lot, @Kirk_Masden 

For now, we add icons as Base64 from SVG directly to the db. It works of course, but is a bit hassle to add every time.... And it do not work for photos added from the app itself.

[Kirk_Masden]

Thanks!  I just noticed that I don't seem to be able to "like" other comments or respond directly to them.  I wonder why conversations and discussion are inhibited here in a way that differs from other parts of the community. 😞

[Kirk_Masden]

I've come up with a workaround for this problem that uses SVG images, the code for which is put in your spreadsheet:

https://www.googlecloudcommunity.com/gc/Tips-Tricks/Using-SVG-quot-interface-quot-images/td-p/504387

[Rifad]

---

@Grant_Stead wrote:

Interesting… I currently have a google cloud function that catches and image, and converts it to grayscale… at some point, I’ll force that to output .png instead of jpeg… I’ll try and remember to report back…

---

@Grant_SteadI have set up a Node.js server on Google Cloud's App Engine. This server dynamically generates and modifies SVG files in response to specific URL parameters.

For instance, consider this URL: https://svgtourl.nw.r.appspot.com/svg/Tender/Tender-Status/Tender-Status-Closed?Tender-Status=Closed... 

This setup allows parameters to be passed through the URL, which helps in reducing the need for lengthy text inputs.

<svg width='923' height='174' fill='none' xmlns='http://www.w3.org/2000/svg'>

   <rect x='0' y='0' width='923' height='174' rx='10' ry='10' stroke-width='2' fill='rgb(253, 238, 238)' />


   <rect x='0' y='0' width='8' height='174' rx='10' ry='10' stroke-width='2' fill='rgb(235, 87, 87)' />


   <text x='175' y='75' font-family='Helvetica Neue' font-size='35' fill='black'>{{Tender-Status}}</text>

   <text x='175' y='120' font-family='Helvetica Neue' font-size='22' fill='black'>Reason: {{Tender-Status-Closing-Reason}}</text>

   <text x='70' y='110' font-family='gillsans' font-size='65' fill='rgb(235, 87, 87)'>X</text>
   
</svg>

It seems like the URL works correctly when accessed through a web browser, but there are issues when trying to use it in AppSheet.

Specifically, an error occurs when you navigate to the data tab in AppSheet.

Unsupported image mime type image/svg+xml; charset=utf-8

Here is more details: 

I attempted to convert the URL into a DataURI format. The conversion seemed successful, as the output appeared correct as shown below. However, despite this, the image still did not display in AppSheet.

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOTIzJyBoZWlnaHQ9JzE3NCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KCiAgIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5MjMnIGhlaWdodD0nMTc0JyByeD0nMTAnIHJ5PScxMCcgc3Ryb2tlLXdpZHRoPScyJyBmaWxsPSdyZ2IoMjUzLCAyMzgsIDIzOCknIC8+CgoKICAgPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzgnIGhlaWdodD0nMTc0JyByeD0nMTAnIHJ5PScxMCcgc3Ryb2tlLXdpZHRoPScyJyBmaWxsPSdyZ2IoMjM1LCA4NywgODcpJyAvPgoKCiAgIDx0ZXh0IHg9JzE3NScgeT0nNzUnIGZvbnQtZmFtaWx5PSdIZWx2ZXRpY2EgTmV1ZScgZm9udC1zaXplPSczNScgZmlsbD0nYmxhY2snPkNsb3NlZDwvdGV4dD4KCiAgIDx0ZXh0IHg9JzE3NScgeT0nMTIwJyBmb250LWZhbWlseT0nSGVsdmV0aWNhIE5ldWUnIGZvbnQtc2l6ZT0nMjInIGZpbGw9J2JsYWNrJz5SZWFzb246IEJ1ZGdldCBJbmFkZXF1YWN5PC90ZXh0PgoKICAgPHRleHQgeD0nNzAnIHk9JzExMCcgZm9udC1mYW1pbHk9J2dpbGxzYW5zJyBmb250LXNpemU9JzY1JyBmaWxsPSdyZ2IoMjM1LCA4NywgODcpJz5YPC90ZXh0PgogICAKPC9zdmc+CgoK

I would really appreciate any help.

[Rifad]

I tried converting to PNG but appsheet forces to resize it to width 600px. Display images and documents - AppSheet Help