METRIC RAT AI2 - WebViewer CardViews

WebViewer CardViews

Re-inventing the wheel a bit here, given that there are several card view type extensions out there, and other derivatives of AI2 include a card "view" as standard. But not available in AI2 yet, so I have created a non-extension version using a webviewer and some pure javascript. I also use the w3.css framework for layout and styling in the html.

In simple terms:

Create lists for the images, titles, subtitles and content
Convert these lists as javascript "ready" and feed this to the html page using the webviewstring
Display the cards using an html file that generates the cards on the fly
Images in the cards are clickable, and return the same card information to the app, and display it (for this demo)

If one has the time and the energy; the html, javascript and blocks can be customised to your own needs

BLOCKS

provides the switching between two identical html pages to ensure a fresh start on each view (See HERE)

sets the procedure with the html file and path, and all the list elements required for each card. Intended to emulate the approach I have seen on many of the cardview extensions

the procedure which pulls in all the variables and lists. Creates a single list which is then modified into csv string for passing as a webviewstring to the html page. Then calls the html page for display. A clock time is used to ovecome some blinking of images as they load in the webviewer.

when an image is selected on a card in the webviewer, that image path and file is passed back to the app using the webviewstring. Using the list of lists generated earlier, the same information is presented in the app (this is for demo purposes - you can of course do what you want!)

simply provides button touch feedback when using Device Default themes. See HERE

HTML

Landscape View

<!DOCTYPE html>

<html>

<title>Cardview</title>

<head>

<style>

h1 {font-size: 20px;}

h3 {font-size: 15px;}

p {font-size: 11px;}

</style>

</head>

<body>

makePage();

function makePage() {

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

var myLength = raw.length;

var htmlTemplate =

'<div class="w3-card w3-cell-row w3-round-large w3-light-gray w3-margin" style="width:90%">\

<div class="w3-container w3-cell w3-cell-middle" style="width:40%">\

<img src="{W}{X}" style="width:85%" class="w3-round-large w3-margin w3-hover-opacity" onclick="onClick(this)">\

</div>\

<div class="w3-container w3-cell w3-cell-middle">\

<h1>{Y}</h1>\

<h3>{V}</h3>\

<p>{U}</p>\

</div>\

';

var newHtml = '';

var xcontainer;

var tempContainer;

var content = "";

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

var imglist = raw[i].split(',');

var ilLength = imglist.length;

if ( (ilLength - 4) > 1 ) {

for (var j = 4; j < (ilLength); j++) {

content += imglist[j] + ",";

}

content = content.replace(/,\s*$/, "");

} else {

content = imglist[4];

}

// image path image name title subtitle content

newHtml = htmlTemplate.replace('{W}', imglist[0]).replace('{X}', imglist[1]).replace('{Y}', imglist[2]).replace('{V}', imglist[3]).replace('{U}', content);

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>

HTML

Portrait View

<!DOCTYPE html>

<html>

<title>Cardview</title>

<head>

<style>

h1 {font-size: 20px;}

h3 {font-size: 15px;}

p {font-size: 11px;}

</style>

</head>

<body>

makePage();

function makePage() {

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

var myLength = raw.length;

var htmlTemplate =

'<div class="w3-card-2 w3-center w3-round-large w3-padding w3-margin w3-light-gray" style="width:90%">\

<img src="{W}{X}" style="width:80%" class="w3-round-large w3-hover-opacity" onclick="onClick(this)">\

<div class="w3-container">\

<h1 class="w3-left-align">{Y}</h1>\

<h3 class="w3-left-align">{V}</h3>\

<p class="w3-left-align">{U}</p>\

</div>\

';

var newHtml = '';

var xcontainer;

var tempContainer;

var content = "";

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

var imglist = raw[i].split(',');

var ilLength = imglist.length;

if ( (ilLength - 4) > 1 ) {

for (var j = 4; j < (ilLength); j++) {

content += imglist[j] + ",";

}

content = content.replace(/,\s*$/, "");

} else {

content = imglist[4];

}

// image path image name title subtitle content

newHtml = htmlTemplate.replace('{W}', imglist[0]).replace('{X}', imglist[1]).replace('{Y}', imglist[2]).replace('{V}', imglist[3]).replace('{U}', content);

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>

VIDEO

AIA

Cardview Landscape

Cardview Portrait

Credits:

Taifun for the TaifunTools extension which provides the PathToAssets block