Skip to first unread message

Tim at Loddon

unread,
Apr 13, 2016, 8:06:20 AM4/13/16
to MIT App Inventor Forum

Been working around with the webstring property, generating a web page of images and setting the onclick property of each image with the webstring response e.g. onclick="javascript:window.AppInventor.setWebViewString( 'my response')

Have had success doing this with php:

$files = glob("signs/*.png");

for ($i=0; $i<count($files); $i++) {
//path to image
    $image = $files[$i];
    //strips path
    $fname =  substr($image, 6);
    //strips extension
    $sname = substr($fname, 0, -4);
    //for onclick
    $xname = "'" . $sname . "'";
    //displays all files and creates clickable link to video of the same name
    echo '<a href=# ><img src="'.$image .'" onclick="javascript:window.AppInventor.setWebViewString('.$xname .');" alt="sign image" /></a>'. "&nbsp;&nbsp;&nbsp;&nbsp;"; //."<br /><br />"
}

 so if the image is called apple.png, when I click the image it returns "apple" to the appinventor app.

Now this is all good if my user has a web connection, but if they are out of range using php won't work.

Therefore I looked for a javascript solution which i could run locally on the device as a part of the app's assets.

This piece of code seems to do the trick, as long as the images (signs) folder is browseable:

<script type="text/javascript" language="javascript">
var folder = "signs/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<a href=# ><img src='"+ folder + val +"'>" );
            } 
        });
    }
});
</script>

But I have been unable to get the body append section to take the webstring "response" code in the same way as the php example, like so:

<script type="text/javascript" language="javascript">
var folder = "signs/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<a href=# ><img src='"+ folder + val +"' onclick="javascript:window.AppInventor.setWebViewString( + val +);"></a>" );
            } 
        });
    }
});
</script>

telling me I have a missing ) after the arguments list

I'm going wrong somewhere, can anyone help?

Tim

April Schroader

unread,
Apr 13, 2016, 3:42:49 PM4/13/16
to MIT App Inventor Forum
I apologize that I am not writing to help, but to ask how you have access to code? I have been trying to figure out if I can use App Inventor 2 and have access to write my own code, not be restricted to the blocks. 

Tim at Loddon

unread,
Apr 13, 2016, 4:14:26 PM4/13/16
to MIT App Inventor Forum
April

The code I have posted is part of html or php pages accessed through the Webviewer component. The webviewer>webstring block allows interaction between the web page (local on device or on distant server) and the appinventor app/device.

Because I can't run php on the device, I need to use javascript.

Tim

Tim Carter

unread,
Apr 16, 2016, 6:05:31 PM4/16/16
to MIT App Inventor Forum
Is there no-one with javascript guru-ness who can help with this?  Pleeaase :)

Taifun

unread,
Apr 16, 2016, 7:55:18 PM4/16/16
to MIT App Inventor Forum
probably my tips how to test your html file outside of App Inventor can help? 
see here https://puravidaapps.com/listview.php#q
and in case you get this running, then you will be our JavaScript Guru...
Taifun

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun. 

Tim Carter

unread,
Apr 17, 2016, 8:26:45 AM4/17/16
to mitappinv...@googlegroups.com
Thanks for the encouragement Taifun ;)

After a heavy day on the keys yesterday (on AppInventor!), I awoke refreshed and decided to have another crack at resolving this.

If you refer to the example in the OP there is a line that is appended as html by the javascript. this is the one giving all the problems

$("body").append( "<a href=# ><img src='"+ folder + val +"' onclick="javascript:window.AppInventor.setWebViewString( + val +);"></a>" );


I know that this works (the original find on Stack Overflow:

$("body").append( "<img src='"+ folder + val +"'>" );

I also know that this works, including the <a> section:

$("body").append( "<a href=# ><img src='"+ folder + val +"'></a>" );

but  couldn't figure out why the onclick part refused to work. Had to break it down and iterate until I got there, hitting hard on the Stack Overflow servers, the answer is usually there somewhere, even if you have to interpret it!

The solution comes from the webViewString needing to be a "string", simply providing it with the variable 'val' was not enough, the output of 'val' needed to be in quotes.

So for this I created another variable with a collection of quotes and slashes:

myval = "\'"+val+"\'"

This then outputted the contents of 'val' with quotes around it.

Eventually, after a few other changes to single and double quotes here and there this is what I came up with:

myval = "\'"+val+"\'"
$("body").append($( '<a href="#"><img src='+ folder + val +' onclick="window.AppInventor.setWebViewString('+myval+')"></a>' ));

With trepidation I loaded up Genymotion emulator and started up my simple test app, clicked on an image and "Hey Presto!" the name of the image in question appeared in the text box. (this is just for testing, I can now take this string and do things with it!)

I can't label myself as a javascript guru, but I did do a little dance :) Credit must go to the folks on Stack Overflow, steeped in knowledge and information. I didn't have to ask, just searches and browsing

Halfway there now, as I have to test this out locally on a tablet, to be sure the javascript will run without needing to be connected to the interweb, also to sort out the href so it stops jumping back to the top of the page.

This is looking like a useful solution for unknown numbers of images/items, cuts down the load on an app (no buttons or images required as assets) and should speed develop in other ways. I know there are some more sexy solution with jquery mobile but this works for me :)

Also made a little video of the thing in action on the emulator


Cheers

Tim

Tim Carter

unread,
Apr 17, 2016, 11:57:16 AM4/17/16
to MIT App Inventor Forum
Quick update

Fixed the href issue with

<ahref"javascript:;">

Bigger problem trying to run locally on device, though.   If I try to run locally on my linux pc my browser gets quite up set about security issues and cross site conflicts from jquery. On my tablet/emulator I just get a blank screen, either because of the same issue or because the images folder has to be "browseable" ? (had to create .htaccess file with options +indexes on my web server to get all this to run properly) Pretty certain my links and references are correct and i have the jquery-latest.min.js in the same folder as the html file.

Guessing that this won't work on a local device unless I run a web server on it. Oh well ;) 

Taifun

unread,
Apr 17, 2016, 1:24:04 PM4/17/16
to MIT App Inventor Forum
generating a web page of images and setting the onclick property of each image with the webstring response
this should work, if you store the images in the assets of your app or alternatively in the internet. I don't think, you can access the file system from within the webviewer.
Also I'm not sure about the ajax part

Taifun

Tim Carter

unread,
Apr 17, 2016, 2:51:26 PM4/17/16
to MIT App Inventor Forum
I tried it with the html (js too) and image files as assets but the same blank page.

Also had a look in the jquery mobile stuff you sold me a while back, but no real clues in the html there either.

What about not allowing the webviewer to clear the cache unless there is an internet connection, would that allow use when there is not net connection?

Clutching at straws now, having spent the morning fishing in the dark :)

Taifun

unread,
Apr 17, 2016, 3:53:37 PM4/17/16
to MIT App Inventor Forum
I now added an image listview example here https://puravidaapps.com/listview.php and also sent the project directly to you by email

What about not allowing the webviewer to clear the cache unless there is an internet connection, would that allow use when there is not net connection?
you always can use the webviewer, but there are some restrictions, for example as already mentioned, you can't access the file system

Taifun


Tim Carter

unread,
Apr 19, 2016, 1:18:57 PM4/19/16
to mitappinv...@googlegroups.com
Good news, I believe I have a solution. Taifuns ListView stuff was very useful, but took me round the houses a bit, until i broke it all down and saw for a very basic working example I hardly needed any of it ;)

Once I had figured out I didn't need to do any uri encoding and decoding, and how to setup the "csv list" to move across as the webviewstring property, it all fell into place.

My examples use images and html file (along with the jquery file) installed as assets on the app for sharing purposes, the eventual aim is to load these separately on the sdcard. I also have some work to do on the css ;)

Here is the code for the webpage (ImageView.html):

<!DOCTYPE html>
<html>

<head>
 <meta name="author" content="puravidaapps.com">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <script src="jquery-1.8.3.min.js"></script>
 <title>ImageView</title>

<style>
img {
width:100px;
height:100px;
}
</style>
 
</head>

<body>

  <script>
  $(document).ready(function() {
    
    var webString = window.AppInventor.getWebViewString().split(",");
    $.each( webString, function( index, val ) {
myextn = ".png";
myval = "\'"+val+"\'";
$("body").append($( '<a href="javascript:;"><img src='+ val + myextn +' onclick="window.AppInventor.setWebViewString('+ myval +')"></a>' ));
});
    });

  </script>

</body>

</html>

Yes, that is all ;)

Here are the blocks:

You will have to change the file path to the html file if you what to make an apk (sorry I didn't do a development toggle :( )

A view of the designer window



I'll just explain what is going on:

  • In Appinventor I create a list of filenames (without the file extension, which gets added later)
  • I then take this list, make into a csv row and create a string, stripping away all the "
  • This resultant string is then fed to the WebViewString block

  • At this point the WebView is blank
  • Clicking on the Home button in the app calls the ImageView,html page
  • The javascript picks up the webviewstring and splits it at the commas (,) thereby turning the variable into an array
  • This array is then fed into the remainder of the script, with a simple jquery for loop ($.each)
  • This takes each item in the array in turn, adds an extension, and creates a return webviewstring value
  • The web page is rendered and all the images from the list are displayed, they are <a href> clickable (so they blink) and on clicking an image the name of the image is returned to the app
I'm a cheerful rabbit, a jolly badger, and a dancing ferret all rolled into one :)

Tim

See also attached aia for anyone who is interested  
ImageView.aia

Taifun

unread,
Apr 19, 2016, 3:04:38 PM4/19/16
to MIT App Inventor Forum
congratulations! keep up the good work!
Taifun

ScottFerguson

unread,
Apr 19, 2016, 7:03:08 PM4/19/16
to MIT App Inventor Forum
Nice work, Tim!

Reply all
Reply to author
Forward
0 new messages