Tim Carter's Images Listview

Min Sullivan

unread,

Mar 6, 2017, 4:13:54 PM3/6/17

to MIT App Inventor Forum

Tim Carter shared the code for a listview on this thread. His solution is the 3rd to last post on there.

Does you need Internet connection to use the listview? Once the app is packaged, I mean?

Min Sullivan

unread,

Mar 6, 2017, 4:42:35 PM3/6/17

to MIT App Inventor Forum

I don't get it! I looked at the html file, and it's blank! I tried putting the code from the 3rd post on this thread into the file and uploading the file to the project. Then the images wouldn't show.

I need to edit myextn = ".png"; because I'd like to show images from the Internet, and images that are picked from the device with the activity starter.

I would like it to be able to display the pictures in a horizontal strip that you can scroll horizontally.

Are these things possible? And if so, how do I do them?

Tim Carter

unread,

Mar 7, 2017, 12:33:09 PM3/7/17

to mitappinv...@googlegroups.com

My solution was for local use, so the html file expects to find the images in the same directory as itself.

You will need to include the full path / url in the html file in order to pull down images from the internet.

Suggest you include an internet check as well, for when it is not there!

You could try the php version I put up in my original post, which was used to pull in the html file and images from a web server

Tim

Min Sullivan

unread,

Mar 11, 2017, 3:45:35 PM3/11/17

to MIT App Inventor Forum

Well, I did it.

Sorta.

I haven't tried putting an image file path through the Web Viewer. (Would that work?) I have edited your HTML code, though, so that it will display images from the web. It works real nice.

The only thing is that there's this huge white space at the top of the Web Viewer. How do I get rid of this?

And also, the WebViewString isn't being changed when an image is clicked. How come?

This is the code I used:

<!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:50px;
}
</style>

</head>

<body>

<script>
$(document).ready(function() {

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

</script>

</body>

</html>

Thanks so much!

Tim Carter

unread,

Mar 11, 2017, 7:18:38 PM3/11/17

to MIT App Inventor Forum

Suggest you revisit my original code and put the url to the folder with the images in it into the html page rather than feeding it to the script:

Might take a little bit of fiddling with the code here to get the syntax right.

And then make sure you recheck the blocks to ensure the list of images is just the filename without the extension [apple,bike,bed]

Am guessing the big white space is failed images? I only see a white webviewer before I click on the Home button to load the html page? There is nothing in the html to create the white space so it must be coming from the script?

Min Sullivan

unread,

Mar 11, 2017, 8:03:09 PM3/11/17

to MIT App Inventor Forum

Thanks!

Good idea!

Failed images sounds about right! There's even a broken image icon.

One pondering: Mightn't it be simpler just to enter the whole file names? Especially if they have different extensions...

Tim Carter

unread,

Mar 12, 2017, 5:53:11 AM3/12/17

to mitappinv...@googlegroups.com

Get it working first, then we can look at different file types, although for simplicity some commonality of file type would be easier to manage!

Use imagemagick: mogrify -format png *.jpg

Min Sullivan

unread,

Mar 13, 2017, 3:14:34 PM3/13/17

to MIT App Inventor Forum

I would do that (the second part, about commonality of file type), but this program lets the user upload their own files.

So, I've been fiddling.

I don't have an online URL to a folder of images because the user is allowed to add and remove images. I tried setting the src to the file's name. The screen was blank. So I still have it pulling images straight from the web.

I used styling in the HTML to take care of the spaces. Well, I'm working on that, but I have the basic concept, even if I don't have the exact numbers of pixels.

The only thing that isn't working in the onClick function setting the webViewString, which is an essential part of the program. I did the code at bottom to see if the onClick function is being called (it is). The code sets the text of the paragraph with the id "my-paragraph" to "Hello!" when an image is clicked.

But webViewString isn't being changed. At least, I don't think it is. The code I have for the setting of Label1 is attached.

I have another question. I want the user of my program to be able to set the width or height of the images in the viewer. Could that be done? I'd have to set the html file's styling text, and I don't think that would work because of something I accidentally found out earlier.

Anyways, the code I promised is below:

<!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;
    margin:-2px;
    padding:0px;
}
body {
    margin:0px;
    margin-top:-22px;
    padding:0px;
}
</style>

</head>

<body>

<p id="my-paragraph"></p>

<script>
$(document).ready(function() {
var webString = appInventorText.split(",");

$.each( webString, function( index, val ) {

$("body").append($( '<a href="javascript:;"><img src='+ val +' onClick="document.getElementById(\'my-paragraph\').innerHTML=\'Hello!\'"></a>' ));

Screen shot 2017-03-13 at 3.02.47 PM.png

Tim Carter

unread,

Mar 13, 2017, 3:35:34 PM3/13/17

to MIT App Inventor Forum

Took me two days of iterating changes until I found my original solution, so suggest you focus on the syntax in the javascript until it starts producing output

Min Sullivan

unread,

Mar 13, 2017, 3:55:59 PM3/13/17

to MIT App Inventor Forum

Alright, I'll try. Do you mean by syntax I'm using the wrong function or I didn't type something right? I looked up the word and got more confused.

Tim Carter

unread,

Mar 13, 2017, 7:13:23 PM3/13/17

to mitappinv...@googlegroups.com

Build bit by bit. For example, this works:

<!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;

margin:0px;

    padding:0px;
}
body {
    margin:0px;

    margin-top:0px;
    padding:10px;

}
</style>
 
</head>

<body>

<p id="my-paragraph"></p>

<a href="javascript:;"><img src='dolphin.jpg' onClick=document.getElementById('my-paragraph').innerHTML='Hello!'></a>

</body>

</html>

but you want the setwebviewstring so build from here?

EDIT

Just seen your other post:

https://groups.google.com/forum/#!category-topic/mitappinventortest/kxrdu8tEzgA

There is either an issue with your blocks (e.g. in my example the clock only fires its code when there is a match) or with the html. Are your blocks very different to my example? If so post and image so others can see what is going on. Where is the "user" uploading their files to? how are you getting a url for those files? You have posted your html, but just in case it may be worth posting what you think should work, then we can take it from there. I can't test your html as i do not know how you have the urls set up for the images.

dolphin.jpg

Min Sullivan

unread,

Mar 14, 2017, 5:18:52 PM3/14/17

to MIT App Inventor Forum

Yes, my blocks are different from your example, but the concepts are still the same: Set WebViewString to the images we want. Yours gives the names of the image without their ".png" extension. But mine sets the WebViewString to the full URL or full filepath. Also, mine does not clear the cash, but having it doesn't fix anything.
The image isn't really being uploaded. The user selects an image using ActivityStarter, which fires up the file manager. When the user selects an image, the URI is returned in the AfterActivity handler. The user gives the image an original name, via the notifier's ShowTextDialog. Then the app adds the image's filepath to a variable that stores all the filepaths/URLs. Also, the app adds the image's name to a variable that stores all the names.
About how I set up the URLs: I have (as an asset) a file of names and (online) image URLs. The user selects the names of the images to display. Every time an image is added or removed from the images currently shown, the WebViewer is refreshed.

And for anyone who's wondering what I've tried: I have tried a different jQuery method of creating the image elements (var myElement = $("<img>")) and settings their attributes (myElement.attr("src", val)). I have also tried using HTML instead of jQuery, since I eventually want to get away from jQuery (that didn't work at all).

Thank you for all your help!

blocks.png

ImageView.aia

Min Sullivan

unread,

Mar 18, 2017, 3:52:02 PM3/18/17

to MIT App Inventor Forum

I had a thought today.

What if our problemo isn't the code, but the jQuery file? What does the code in the jQuery file allow? Can you do all jQuery methods etc with that one file, or do you have to download the full file? Is it the full file that's you already have in the project?

Tim Carter

unread,

Mar 18, 2017, 6:24:50 PM3/18/17

to mitappinv...@googlegroups.com

Hi Min

It is not the jQuery file.

But try this:

<!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;
    margin:0px;
    padding:0px;
}
body {
    margin:0px;
    margin-top:0px;
    padding:10px;
}

</style>
</head>

<body>

<p id="my-paragraph"></p>

<div>
<img id='image_id' src='dolphin.jpg'>
<img id='image_id' src='bear.jpg'>
<img id='image_id' src='tiger.jpg'>
</div>
<script>
$('img').click(function(){ 
	document.getElementById('my-paragraph').innerHTML=$(this).attr('src'); 
	});
</script>

</body>

</html>

with the attached image files.

On clicking an image, the src of the the image is returned to "my-paragraph". (you will only get the file name as they are local). With a bit of work, i don't see why the setwebviewstring won't pick this up ?

Note; the script has to be below everything else on the html page

REF: https://api.jquery.com/click/

bear.jpg

tiger.jpg

dolphin.jpg

Min Sullivan

unread,

Mar 19, 2017, 4:40:21 PM3/19/17

to mitappinv...@googlegroups.com

Thanks!

I'm trying to try it.

I downloaded your original aia file and opened it in app inventor.
I deleted the Web1 component, and deleted the ClearCache block, since I don't see those doing anything.
Then I edited the program to work with the file. (I also pasted your code into a text block in the code since that'll make it easier to edit the code.)
I viewed it with the companion app. The images aren't showing. I took a screenshot (attached). I'm also including a screenshot of the blocks and designer.

I probably did something really silly and can't see it. Do you my mistake?

Thanks again!

Edited

P.S. I tried adding ClearCache back in, and brought back the Web1 component. Nada.

Screenshot_2017-03-19-16-34-58.png

Screen shot 2017-03-19 at 4.31.39 PM.png

Screen shot 2017-03-19 at 4.35.59 PM.png

Tim Carter

unread,

Mar 19, 2017, 8:50:17 PM3/19/17

to MIT App Inventor Forum

This simple example shows the javascript being fed back to the webviewstring property. Seems you need a "get" to make the "set" work!

<!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:75px;

    margin:0px;
    padding:0px;
}
body {
    margin:0px;
    margin-top:0px;
    padding:10px;
}

</style>
</head>

<body>

<p id="mylabel"></p>


<div>
<img id='image_id' src='dolphin.jpg'>
<img id='image_id' src='bear.jpg'>
<img id='image_id' src='tiger.jpg'>
</div>
<script>
$('img').click(function(){

	document.getElementById('mylabel').innerHTML=$(this).attr('src');
	window.AppInventor.getWebViewString();
          window.AppInventor.setWebViewString($(this).attr('src'));
	});
</script>


</body>

</html>

testurlimageview.aia

Abida Life Tips

unread,

Mar 20, 2017, 3:33:20 PM3/20/17

to mitappinv...@googlegroups.com

Hi Tim

How are you.

i found your post https://groups.google.com/forum/#!topic/mitappinventortest/V_ppvsQkWNU and this what i was looking since long time.

That post is closed for replies so i am asking you here. I want to make user data collection app.

Like.

Name"

email :

Nic#:

Cell Number

Address :

and some more text fields. So when user will fill the google from via app and click submit it should collected via response sheet as you did in that post.

I have created response sheet and google form and that is working fine on web. But i want to add that form fields in the app.

Can you help me with this?

I really need this.

Thank you in advance.

Abida.

Tim Carter

unread,

Mar 20, 2017, 6:01:19 PM3/20/17

to MIT App Inventor Forum

@Adiba

Please don't cross post like this, get's very confusing!

I have, and will again respond to your query here:

https://groups.google.com/forum/#!topicsearchin/mitappinventortest/after$3Ayesterday/mitappinventortest/AhxtHOqyP0A

Reply all

Reply to author

Forward