AppInventor: HOWTO: Dynamic Scrolling Image List with Titles using webviewer (with select)

Been working on this for a while, time to share the fruits of my labours!
There are many different ways to achieve much the same thing, but I wanted to have a go at building things up from scratch, just use pure javascript, and provide some user functionality in the process.
Youtube video to start things off:
How it works:
The Ai2 blocks feed the html file with all the data: image files, file locations, titles and subtitles, shape of image (square/circle), colour scheme.
The html file pulls all this information in through the webviewstring, and then by creating arrays from the webviewstring, dynamically builds a “card” for each image.
Note the use of classes from the w3.css and w3mobile.css to assist with the cards layout
A click on the image returns the file to the AI2 app and displays it.
Developers can choose to set all the variables to their liking, or can also provide a settings area for the user to do likewise (further demo hopefully coming on this!)
A couple of Taifun’s wonderful extensions used.
BLOCKS
HTML

aia attached :)  ImagePicker2

Leave a Reply

Your email address will not be published. Required fields are marked *