Dynamic Scrolling Image List in Webviewer

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:

https://youtu.be/YkYJKxrszh4

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

<DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=0">

<title>mobile | img and txt</title>

<link rel="stylesheet" href="w3mobile.css">

<link id="theme_css" rel="stylesheet" href="w3-theme-blue.css">


</head>

<body>

<header class="w3-top w3-bar w3-theme">

<h1 class="w3-bar-item" id="header">Header</h1>

</header>

<div class="w3-container" style="margin-top:90px">

<hr>

<div id="carddisplay"></div>

</div>

<br><br><br>

<footer class="w3-container w3-bottom w3-theme w3-margin-top">

<h3 id="footer">Footer</h3>

</footer>

<script type="text/javascript">

makePage();

function makePage() {

var raw = window.AppInventor.getWebViewString().split(',');

var data1 = raw.slice(2,5);

var data2 = raw.slice(0,1);

var data3 = raw.slice(1,2);

var data4 = raw.slice(5);

var data5 = [], size = 3;

while (data4.length > 0)

data5.push(data4.splice(0, size));

var myLength = data5.length;

//get header and footer

var newHeader = data1[0];

var header = document.getElementById('header');

header.innerHTML = newHeader;

var newFooter = data1[1];

var footer = document.getElementById('footer');

footer.innerHTML = newFooter;

//get colour theme

document.getElementById('theme_css').href = data1[2]; ;

var htmlTemplate =

'<div class="w3-cell-row">\

<div class="w3-cell" style="width:30%">\

<img src="{W}{X}.png" style="width:100%" class="{V} w3-hover-opacity" onclick="onClick(this)">\

</div>\

<div class="w3-cell w3-container" style="display:flex;align-items:center">\

<div>\

<h1>{Y}</h1>\

<h4>{U}</h4>\

</div>\

</div>\

</div>\

<hr>\

';

var newHtml = '';

var xcontainer;

var tempContainer;

for (var i = 0; i < myLength; i++) {

// image shape image path image name (without extn) title subtitle

newHtml = htmlTemplate.replace('{V}', data3[0]).replace('{W}', data2[0]).replace('{X}', data5[i][0]).replace('{Y}', data5[i][1]).replace('{U}', data5[i][2]);

tempContainer = document.createElement('div');

tempContainer.innerHTML = newHtml;

xcontainer = document.getElementById('carddisplay');

xcontainer.appendChild(tempContainer);

}

}

function onClick(element) {

window.AppInventor.setWebViewString(element.src);

}

</script>

</body>

</html>


AIA

ImagePicker2