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

168 views

apps-tips--trickstips--tricks---nifty-ways-to-make-your-apps-better

Skip to first unread message

TimAI2

unread,

Mar 12, 2018, 8:00:07 PM3/12/18

to mitappinv...@googlegroups.com

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.

Here are the blocks:

Here is the 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>