2017년 4월 18일 화요일

Canvas/ImageSprite Grid inside an Arrangement with Resizing!


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: 

Of special interest is the use of a single canvas with a single imagesprite image set out in a grid, within a vertical arrangement. 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 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!


--
Tim, you didn't share the Gallery url.



How to get it:








-- 
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.

-- 
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 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.

-- 
Thanks for trying it out. Wasn't meant to cause all these problems!

Quite possibly timing issues between devices,as you will see I have had to add clocks to allow the arrangement, the canvas and the image time to reshape themselves.

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:

-- 
That video didn't look so good. Let's see if this one is better.

-- 
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.

-- 

댓글 없음:

댓글 쓰기