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