store and retrieve from tinydb and images in ColinTreeListView

[Nics Aliotta]

Hi in the attacched aia file i want to store in a tinydb datas that i get from a website! 

now i'm able to get the data from the website (a name and a pic)  and i'm also able to store them  in tinydb! i save and reload them in a listpicker but i can see only the urls of the images and not the images! now my question is can i do something like that? to view all the pics close to the names?

Is there anyway to do that? If you want to test the app search for any instagram user... for example mauroicardi

[Nics Aliotta]

is there something like this:

https://community.thunkable.com/t/free-custom-listview-colintreelistview/11964

for appinventor2?

[TimAI2]

Please give an example of an image url...

Can this be viewed/seen from any device, regardless of Instagram/login ?

[Nics Aliotta]

yes i can see the image also in the app in image1.picture

for example this is a link I store in tinydb: 

https://scontent-lhr3-1.cdninstagram.com/vp/15abbe91d3e6f1161e5a1f17259a9538/5D9B2510/t51.2885-19/s320x320/60442987_2671487269532362_4551490076088991744_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com

[TimAI2]

OK, I understand now :)

Yes you need to use something like the colintree custom listview to display images, the default listview/listpicker in AI2 cannot display images

[Nics Aliotta]

colintree custom listview can be used on appinventor2?

i imported it but i cannot see the tool that uses in the tutorial

[TimAI2]

Yes it works on Ai2

Look for the imported extension, bottom left of the designer window, and drag this onto the screen

[Nics Aliotta]

Yes! i did it

but i cannot see this  and 

i cannot see in my ai2 collintreelistview1.initialize and collintreelistview1.set

[TimAI2]

Re-read Colin Tree's example to make sure you have everything loaded correctly

[Nics Aliotta]

i didn't drag both extensions in the screen

Now i added this blocks but i can see image:

i see the tree lines

[TimAI2]

You didn't follow the instructions:

"Before do anything like add a element, initialize it first:

Choose only one of the initialize method"

These blocks generate a list view with the image you provided above, you can then customise on from there

[Nics Aliotta]

GREAT TimAI2

now i can see the image from a static list! 

is it possible now to add images and text dinamically saving datas from web on tinydb and loading that list from db?

[TimAI2]

Yes !! :)

Have a go and ask if you get stuck

[Nics Aliotta]

i was able to store list  on listpichker while i cannot do on colintreelistview!

this are my blocks: i changed Listpicker1.Elements with Colintreelistview.Elements but now  i recieve an error

With button search i recieve data from the webpage and is fine!

with button save i try to store on tinydb and add in colintreelistview

i recieve this error:

[TimAI2]

Hopefully, this little example will help.

You need to build your data into a list, and then save that list to the tinydb, calling the list back from the tinydb for the CTListview.Set

You may need to be patient and wait a little while for the listview to appear...

aia will be attached

[Nics Aliotta]

thank you so much for the example!

do you think that is better if i store the list on tinydb and will be faster? So i load only the image from the web via link!

why on btnFetchPeople do you use that join? the url is too long?

[TimAI2]

I use the join so it is possible to use a variable for the FileID instead of the actual FileID. It also helps to see all of the url used when in the blocks editor.

[Nics Aliotta]

i'm new to ai2 and i think i'm making a mess

i tryed to use part of your blocks in my project!

what i want to do is :

1) enter a name in textbox.. (for example inter) then clicking on search button i want to recieve datas from the website and show them as a picture in image1picture and the name from website in label2.text 

And until now all is FINE

2) i want that when i click on button save it creates a list to store in tinydb with 3 datas: a) the url of webpage, b) the name stored in label2.text and c) the name that i entered in textbox!

3) then i want that all the user stored in list can be seen in colintreelistview with the relative image!

i attach my aia file! i think i've to change my getglobal lista in get item! but i don't know how!

[TimAI2]

I am having a look at it :)

[TimAI2]

This seems to work.

I have changed the workflow, the data captured and the error checking (you get a runtime error if a name is not found)

you will need to change this if it is not want you want.

You will also probably want to be able to delete an individual item from the created list. Go back and read through the post on Colin Tree ListView

You probably need to read up on how lists work!

aia will be attached

BLOCKS

[Nics Aliotta]

Great!

you did more  than I asked! lol!

yes i want to study the list! i was searching  for tutorials on youtube about lists! and reading snipset..

do you know if the items of colintreeview can be used as "button" to do something? when you click on the user on colintreelistview... do something!

[TimAI2]

I thought you might ask that :)

Have a read through Colin Tree's website here:

https://aix.colintree.cn/en/extensions/ColinTreeListView.html

A couple of examples of blocks you can add to the example I provided

The click event will show the image and title of the item

The long click event will delete (without prompt) the selected list item then refresh the list and the tinydb

As I say read through Colin's website then try things out, it is a fantastic extension

BLOCKS