Need help with creating a Jigsaw Puzzle / READ_MEDIA_IMAGES → Companion App

[x-tom-x]

Hello Community,

Some time ago, I bought a jigsaw puzzle app from the Play Store. The app is great. Unfortunately, despite the initial payment, you have to pay for additional images. Based on this post., I had the idea to try creating such an app myself.

The example (see link above) uses a JavaScript library. I found an alternative on GitHub. The code used there is independent, doesn't offer as many features as ZIM's, but is perfectly adequate for my needs.

The idea is to copy prepared images (resolution, etc.) from my PC (e.g., every few weeks) into folders on my tablet. The tablet directory should be easily accessible. I decided for “Legacy" scope with folder “Pictures”. Not very happy with that (legacy means - should not be used - is out dated). Shared Scope with folder “Documents” does not work.

These folders are the albums. Now, these albums should be displayed. Clicking on an album should display a real-time preview of the individual images (without creating a copy of the image in a smaller resolution).

When clicking on an image, the data (presumably via Base62) should be passed to JavaScript so that the piece generation and the puzzle process can take place in the web viewer.

The puzzle-solving itself works in JavaScript. I've adapted the mouse events to touch events (a lot of reading involved, but I managed it). But how do I get the image data into the JavaScript? Could I perhaps simply pass the image path on the tablet to the JavaScript and then load the image directly from there? I haven't tried it yet. Sorry about that. Perhaps one of you knows if it's worth a try.

In App Inventor, I managed to create X buttons (for the albums) using the Dynamic Component Extensions. But I don't know how to react to a click.

Is using this extension even a promising approach, or do I need completely different approaches? Why do I want to use App Inventor at all and not develop everything directly in JavaScript? Because I'm hoping to use AI2's database functions to, for example, save which images I've puzzled and which ones I haven't.

Any hints, recommendations from you for me? At the moment I can not say what is the most important topic to solve… is it how to bring the selected image to javascript to integrate in the logic there or is it how to handle and get folders data, picture files readed and how to present it on the screen for selection und in which way (components used).

[SteveJG]

@x-tom-x

completely different approaches

this might way might get you started using a different process with App Inventor:

Build a HTML5 jigsaw puzzle game with ZIM framework | Emanuele Feronato

[x-tom-x]

Thanks for your answer. Unfortunately it is what I already know and tried out. I mentioned the link in my initial question.

@x-tom-x

Based on this post

I have already some progress in the JavaScript part. My question is how to interect with AI2 regarding the files, folders, pictures and interaction between AI2 and JavaScript.

[Kevinkun]

one idea to split the big image to small pieces:

in app inventor, it's hard to make perfect jigsaw pieces (with input and output socket), but we can make it easier: just split the big image to small squares (this can be done with one of taifun's extensions ).

to tell Which square is at edge or corner, before the split, we can add a red square outline around the big image, thus after split, the small squares will have two or one or none red bar at its edges.

[x-tom-x]

I will think about it. I understand your post in the way to skip the JS part as a whole and develop all directly in AI2. Could be a possibility. But some problems will still be present for me (my experience in AI2). How to read folders and files with the newest limitations on permissions and file scoping issues, how to present it on screen dynamically and so on.

@Kevinkun

to tell Which square is at edge or corner, before the split, we can add a red square outline around the big image, thus after split, the small squares will have two or one or none red bar at its edges.

All in all it sound interesting and could be a first attempt. So the big project would become a little bit smaller for beginning. Which extension from Taifun do you mean?

[Kevinkun]

TaifunImage

[Taifun]

@x-tom-x

Which extension from Taifun do you mean?

App Inventor Extensions: Image | Pura Vida Apps

Taifun

[davidefa]

Not sure to understand your problem, but if you want to communicate with the webviewer you can do it using the webviewstring ( for example to select the image to use )

braveMirror.aia (883.8 KB)

[x-tom-x]

Thanks for your answer and your example. I had a look at it (try it out later in leasure time). I don’ t use the ZIM library (because want to be independent) and also can not store the pictures in assets. The pictures must come from a folder on tablet device .I dont want to create apk every few weeks. The apk size is also limited i guess.

So… the problemes are:

• access a specific folder on my device
• read all directories (the albums); display them dynamically
• react on a click event of an album
• read all pictures in the subfolder dynamically (album = subfolder)
• display all pictures as a realtim preview (without creating a new preview file on device)
• react on an click event of the picture
• tell javascript what the picture is selected
  • read the picture file in javascript directly to access imagedata for algorithm to build the puzzlepices
  • here i have to check if i can select / read a file with javascirpt from android device (access limitations and so on)
• or transfer picture data to javascript (e.g. base64)
  • i need the picture data in a way as i would have it with <img src=”img.jpg” …)
  • var img = document.getElementById('original-image');
  • transfert to javascript this.img = obj.image;
    • the point is… on level ai2 i have no picture data; only a preview of a image file
    • i mean… i have not concrete html line in the way as shown above in the example with img.jpg (the picture is only virtual known by selecting a preview)

Despite building some apps for my android projects i do not have lot of experience with ai2. i do not know all features, possibilites and also limitations and for that reason I do not know if it is possibile to build such an app in the described way nor can be sure if it would be efficient, best practice and so on

at the latest by the weekend i will go deeper in this topic again and maybe have some more questions in best case find a way and / or solution.

[x-tom-x]

Found this Link. A lot of things look very interesting. Will study it and maybe get inspired.

[davidefa]

Ok, for the images you can also upload on a server and access them from there.

P.S.

If you have both html and images on the same server you will not have “CORS problems”.

The attached example works because, on my server, I have allowed access from any domain

p169G2_rompecabezas01.aia (81.4 KB)

[x-tom-x]

So… I found a solution. Not all I want but the main functionality seams to work. I skiped the part with the dynamic extension and file access.Till now I am too stupid to realize it. As in my screenshot above can be seen I was able to load 2 subfolders (Kanada and Album 2) from the /Picture folder and display it dynamically as Buttons. Then I wanted to read the pictures within one of these subfolders with file.listDirectory but it results in nothing. I dont know why. The same method on level of the main folder gave me back the two subfolders.

But the rest works. I use the imagepicker. Select an image convert it to base64, give it via set webviewer1.webviewstring to javascript and can there use the adjusted library to puzzle the picture (adjustments made: touchevents instead of mouse on pc, larger picture in the middle, distribute all pieces all over and not only on left and right side, and so on).

Thanks for this post, and the KIO4 extension from here and the javascript library found somewere on github.

[TIMAI2]

The full ZIM framework works locally just fine ( I have not done any refinements, just tested functionality, only edited the js paths and the image path in the html, no edits for touch required)

jigsaw1.aia (527.5 KB)

Edited the variables, here is an 80 piece jigsaw

[x-tom-x]

Thank you for this informatino. I tried exactly that. Download the js files. Change the path for import. In my case it does not work. I must made a mistake.

But however… with the alternative library I am very happy so far. The ZIM framework is more flexible but also more complicated. In the library I use I understand every line of code and be able to make more adjustments. This lib is sufficient for my needs.

If you want you can help me with the file and folder problem.I found that linkfrom anke with this nice picture and was sure to understand and solv my access problem. But it does not work. Unfortunately I deleted my blocks yesterday in a fit of sadness and annoyance. I can build it again but I described it with words above.

The structure on device is… (tried both… internal storage and also on sd storage with this structure)

Android Version 13

/Pictures/Jigsaw

/Pictures/Jigsaw/Kanada

/Pictures/Jigsaw/Album 2

With file scope “legacy” I could read the two subfolders and create the dynamical buttons. Then I added the previous path with the album name when clicking a album button. I used the same method listDirectory to read the pictures. But that does not work. The return was empty. I tried all possibilities. Dealing with another scope (then step 1 does not work anymore). with “/” at the end. without.

But it is not that important anymore. I would just like to understand it. I will use the imagepicker. There is a preview. All pictures I puzzled i transfer manually with the filebrowser in a “done” folder. it is sufficient for my personal use / requirement.

[Kevinkun]

this is my work so far:

no js used, only extensions (mainly @TIMAI2 ‘s ImageConvert, and PDEV2) needed.

[x-tom-x]

@Kevinkun

ImageConver

It looks nice and interesting. Maybe you can share your solution later if you want. I think that I will use my solution so far due to the amount of time I invested.

But maybe your solution will become a reference project for the possibilities of AI2. As I said… I did not find any compareable in PlayStore for own pictures, without advertisement and without abo. I would have gladly paid a fixed price but that I also could not find an app with this characteristics. So… there might be some potential to earn little money.

[x-tom-x]

@Kevinkun

and PDEV2) needed.

Did not know about that. Seams to be new since 2025. So… the trick is to use Java (or similar) instead of JavaScript

[TIMAI2]

PorterDuffMode has been available on Android since the beginning! (API Level 1)

@x-tom-x

I found an alternative on GitHub

Can you provide the github link to the js framework you are using?

[x-tom-x]

Unfortunately not an answer to my file handling problem.

There are diffent ways to realize such an requirement. But I think it would become hard with native AI2 possibilities.

The Github link for that what i use and extended for my needs pleas see link.

[Anke]

@x-tom-x

Android Version 13

/Pictures/Jigsaw

/Pictures/Jigsaw/Kanada

/Pictures/Jigsaw/Album 2

@x-tom-x

Unfortunately not an answer to my file handling problem.

It should work with all of them. Post the relevant blocks.

(Maybe you used the first path with Companion beforehand. Then it will not work with the APK, because Companion is another app. If so, remove the file(s) manually from this path.)