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:

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>

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

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


<style>

h1 {font-size: 20px;}

h3 {font-size: 15px;}

p  {font-size: 11px;}


</style>

</head>


<body>


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


<script>


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>\

    </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>

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

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


<style>

h1 {font-size: 20px;}

h3 {font-size: 15px;}

p  {font-size: 11px;}


</style>

</head>

<body>


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


<script>


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>\

     </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

Credits: