Suggestions for simulating a scrolling ad banner?

[WillowMobileSys]

I have had the idea of creating an event app for a local festival. It would be a public app and to generate revenue, I thought I could somehow present ads to users much like scrolling ad banners.

I understand that AppSheet is not really designed for this kind of feature. But I was wondering if anyone might have ideas on how to go about it? Or better yet, have you done something like this in one of your apps and can provide an example?

[Jonathon]

You could create a scrolling banner dynamically with SVG’s, or if the content was static it could simply be a GIF image.

[WillowMobileSys]

Can you elaborate on how the banner could work with SVG’s?

With GIF’s, I assume you mean with animated GIF’s?

[Jonathon]

SVG’s have an animate attribute; one thing you can do with this is have text or shapes follow a path. Here is an example:

CodePen

SVG animate along path

...

---

We have tested animations and they do work in AppSheet; you would simply follow the same principles as outlined in the svg topic on these forums: Dynamic SVG graphics

[WillowMobileSys]

@Jonathon Thanks! This gives me a bit of hope. I’ll play with it to see what I can come with.

[WillowMobileSys]

I finally took some time to play with this today. I have some good news and some bad news.

I was able to use the example @Jonathon provided above and after understanding a bit how SVG animation works, I was able to simplify the example (mainly to get rid of the # which I am still not clear on how to work around).

The Good News
I took the simplified code, inserted as the App Formula for a Image type column and double-quoted the appropriate areas and Viola! I was able create an animated SVG in my AppSheet app. See the video below. Code snippet is beneath that.

The Bad News
I wasn’t able to get a static image to display using the SVG HTML functions.

The reason I am playing with this animation functionality is in an attempt to create a scrolling banner with ad images provided by clients. Its something that would run for the entire time a user is using the application and needs to be able to scroll through potentially hundreds of static images. I don’t think GIF’s will help with this.

I WAS able to get an image from my Google drive to scroll within the SVG functions ON AN HTML PAGE. But it wouldn’t work within AppSheet. I am using the images directly from Google, thinking that within the column function, I wouldn’t be able to reference the image through AppSheet columns. No biggy, I could (if it worked) capture the Google ID of the image into the sheet and concatenate that into the AppFormula in the AppSheet column.

BUT, alas, I couldn’t get it to work. Even after narrowing down the code to bare bones to simply display the image. Maybe I’m missing something?

While it works on an HTML page, the image will not display in an image field in AppSheet. Maybe one of you guys will have a suggestion? Code snippet is below.

drive.google.com

svg_animation.MOV (video)

Google Drive file.

Code animating a Blue circle over an s-curve path. Have some fun!!

"data:image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"" width=""1000"" height=""400"" viewBox=""-10 -30 1000 400"">
  <circle cx="""" cy="""" r=""25"" fill=""blue"">
    <animateMotion path=""M-1,1.499h83c0,0,10.5,1,10.5,11.25s-10.25,12.25-10.25,12.25h-43.5c0,0-10.75,0.75-11.75,11.5s9.75,12.25,9.75,12.25H343.5"" dur=""2s"" repeatCount=""indefinite"" fill=""freeze"" />
  </circle>
</svg>"

Code attempting to display an Image directly from Google Drive in an AppSheet column

The image has been made public so I THINK you can access it.

While I can run the portion of the code in an HTML page, it does not seem to run properly in an Image column in AppSheet.

"data:image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"">
  <image xlink:href=""https://drive.google.com/uc?export=view&id=1gxvUziCU3zqYpi2B3IiS4OZqcoPp8-NK"" width=""50%"" height=""50%""/>
</svg>"