Following on from this topic I raised a while ago
I have realised the fruits of my labours and now present a sample app on the Gallery
Note: designed only for use on 7" tablets and above
Of special interest is the use of a single canvas with a single imagesprite image set out in a grid, within a vertical arrangement. This app demonstrates that by clicking on part of an image, co-ordinates are returned, converted to a number, then the canvas, image and vertical arrangement are resized to show just one tile of that one image. I am somewhat at the behest of the quality of many of the original images, will work on improving this for the future. Text to Speech recogniser used to speak the image. It doesn't have to be any more complicated that this for our students, in fact for some it can be a bit of a stretch having to choose from so many options!
EDIT
Now a relative sizing version that should work on most devices:
--
Tim, you didn't share the Gallery url.
This is the right URL: ai2.appinventor.mit.edu/?galleryId=6654430605475840
How to get it:
--
Was fixing while you were writing Italo :)
--
I tried it. Unfortunately you are using absolute dimensions on your canvas (pixels) instead of relative (percentage) The canvas in my phone looks too big and is mostly out of the screen.
When I touched the canvas, the app force closed.
I suggest you to use relative sizing instead, so it will show the right way in any device.
--
Yup, should only be run on 7" + tablets, have amended description
Will have to see if it will work with relative sizing, due to the need for getting the co-ordinates etc.
Alternative would be to create a second image and blocks for smaller screens.
--
If you would like to run it in any device, you can use FILL PARENT on width and height.
Then knowing how many squares your image has, you can determine which square was touched by dividing the canvas width and height, that will give you a set of coordinates.
Just an idea.
--
Sorry Tim, this interesting app crashes my Samsung Tab II ... whenever I
1) attempt to change the volume with the tablet's hard keys
2) immediately after selecting an icon..it speaks then crashes..indicating Companion has stopped.
This is using Companion. I expected to get a different result on compiling but no it still has issues.
Edit: the problem is the BigPicture routine...disabled it and no more crashes.
--
Thanks for trying it out. Wasn't meant to cause all these problems!
This app runs faultlessly on my Google Nexus 7 2013 (what it was designed for).
Have been working on a responsive sizing but this just seems to introduce more timing issues, and the co-ordinates are not coming through correctly, not sure why? All sizes are based upon the screen width. Testing on my Nexus 7 emulator where I know the screen width is 960 (well 961 actually), should render things the same as the fixed size app, which it appears to, but the co-ordinates are returning the wrong tile number. Seems somewhere along the line the tile size is being rotated (instead of 100 w x 125 h it swaps to 125 h x 100 w !!). The x/y number procedure is working correctly, something to do with the canvas.... I'll have a bit more of a play.
--
I hope this can help:
I simplified your coding a little bit by using a list of lists.
Then calculation that returns which column was touched depending on the canvas width and the amount of columns your picture has.
I duplicated that formula to do the same vertically.
Also I used the canvas to detect the touch without needing a sprite.
Then you can make the TextToSpeech component to say what's in the top label. It works in my phone, but I can't use TextToSpeech in my emulator to show it here.
Please watch the video:
--
Got my responsive version working on my tablet and my phone (HTC One M8s) through the Companion. Might still be a bit crashy, but how many timers can I put in?
Possible it won't pick up the screen orientation on first run ?
Images look worse on the phone ;)
Give it a go.
--
What do you need timers for?
--
When resizing the vertical arrangement, the canvas inside that, and then the imagesprite inside the canvas. Won't work without a small delay (50-100 ms) on each action.
--
OP updated to include gallery link to relative sizing app
--
Just curious: In what event the screen needs to be resized? And why you use a sprite instead of just using the canvas background to show the image?
Not trying to be annoying, believe me, but I think you are doing it too complicated (not the interface, but the coding). Have you seen how easy it is in the video I posted yesterday? I attached the aia if you want to give it a try.
Maybe the app has more functions that I didn't see, but if it only needs to detect what square was touched on the screen, I strongly advice you to simplify your coding, it will be way easier to maintain in the future, in case you need to add, change or remove words.
--
Oh, I see now. I tested your dynamic one now.
It works perfectly.
Although the board looks a little too small. Is that how you want it?
--
And I just made you a video to help explain!
It is a bit more complicated as you can see, and a bit of proof of concept at the same time, developing on from Scott and Steve JG's work on the 36 grid.
Not had a chance to test compiled yet, but seems I need to add a bit of code to stop the app picking up the screen width in portrait mode.
If you start the app with the device in landscape, it should fill the screen better
Also changed the image to one of higher resolution so "zoomed" images should look better.
--
That is a very smart way to crop the images, Tim. Really good.
Have you tried Taifun's extension to separate images in chunks? https://puravidaapps.com/image.php
--
댓글 없음:
댓글 쓰기