I am working up a much bigger app in order to use this method, thought I would post up a demo I have created as I have not seen this done, this way! Eventually I will have a row of seven buttons, with the ability to move an image at least 3 to the right or the left. The intention with the final app is that the user will slowly build a row of images, but may need, at any time, to change the order. Doesn't make much sense with just "fruit", but when action and activity images are present it will.
--
I found it hard to figure out what changed, before and after a move.
The app is intended for children with autism and learning difficulties, but their carers and teachers will also be involved in creating the rows of images (or jig)
For what appears to be a fairly trivial requirement it seems a bit block heavy to me, so would welcome any suggestions as to how to streamline things :)
Video of app in action:
Blocks
Aia if anyone is interested:
--
I found it hard to figure out what changed, before and after a move.
Maybe my short term memory is shot.
Consider adding some visual clues as to which two images are changing,
maybe using curved arrows or movement or temporary size change.
--
Yes, the video doesn't show things exactly as you see it in the app, even though I slowed down the video by 50% !!
One does a long click on the image one wants to move, this brings up the listpicker. But I agree it would be good to run a timer and show which two images have changed. I'll work on that :)
--
I looked at your .aia
It does not look like a scalable solution to me. Already the 7 buttons will make this hard to manage.
I will suggest a better solution. Stay tuned.
By the way, did you consider to use a canvas and sprites instead, so that you could drag the pictures, instead of this ugly listview?
--
Nice idea Tim. You might be able to accomplish your goal simplier using sprites and a Canvas as Ghica suggested.
Here is an app that does essentially what Ghica seems to be suggesting ... dragging image sprites to 'grid cells.' https://appinventorforfun.wordpress.com/2015/08/10/animal-canvas-a-childrens-educational-app-inventor-2-game-tutorial/. Place a grid with seven 'grid' cells on a Canvas and go on from there perhaps? I imagine there is some code in the tutorial you could adapt.
--
So far in my AI2 experience I have stayed away from the canvas, but it looks like I'll have to train myself up on it. :)
That said, I still have to allow the user to select from over 100 different images, contained in @ 6 categories. They will also need the ability to save the "jig" created and recall it from a list of saved "jigs". Also from previous experience with our kids, many of them struggled with the "drag & drop" concept, and are more amenable to the touch and response approach.
I'll have a go and see if it fits our needs.
I have got some visual feedback going when moving images around on buttons, using timers and the good old "blink" routine, having tried temporarily resizing where I got some artifacts?
Also note comments about the listview, could potentially replace this with hiding and showing arrangements with buttons?
Thanks for all the input and encouragement
--
Find attached a new version of the code of the app as you presented it in the .aia
I apologize for having completely rewritten it. That was the worst thing that could happen to me when I was a programmer, long ago.
The code as it is now is suitable to scale, you can just add another button in the list and it will work without further changes.
The code makes extensive use of lists and some any-blocks:
I also attached the .aia
I hope this helps. It is still very unclear what you want to do with the final app to me, but knowing some autistic people closely, I have sympathy with your cause.
--
Wow! and thank you Ghica.
If I am completely honest, I was being selfish about scalability, as my local target is only the Nexus 7 tablet. therefore I could pick absolute sizes with impunity, but your efforts have made me think otherwise ;)
It may be best if I work up my full app a bit more, then it becomes clear what the objective is, however I will describe a bit here.
Our children have severe autism and learning difficulties, in general they have no verbal communication, and we teach them to communicate (and communicate with them) using Makaton sign language and real world images (e.g. banana is a photo of a banana!). To help understand, they tend to have a developmental age of @ 18 months, and in most cases, this does not change, even up into adulthood (physical years). Our children find it difficult to move from one activity to another, and need to know what is coming next.
There are many apps out there that do this sort of thing, but nothing quite fitted the bill, so my head teacher tasked me instead! :)
If you search "Nooddl" on Google Play, you will find a couple of apps I have already created that are in use at the school.
This latest app is to recreate in digital form the communication book that they use. The front of the book has a strip of velcro, and inside the book are all the images they may need to get through the day (with the other part of velcro on the back), everything from brushing their teeth, having a snack or a drink, to going to a particular location or activity. With help from their support worker they set up their near time plan on the front of the book, using the pictures from within. Once a picture has been "used up" it is removed and placed back in the book. Things may change, hence the need to reorder or replace images.
I have been having another think about the listview, and can see I can replace the button arrangement at the bottom with another "move" button arrangement - select image, click "move one right", and so on. This can be done with symbols rather than words, so is a better solution.
--
I made a little example using 3 canvases instead of 3 buttons. You move the pictures by swiping. Somehow, the code is simpler than for the buttons and the canvas pictures move by flinging the canvas. The canvas does not really move, because it is fixed in a table arrangement. The table arrangement makes it also possible to make a larger grid and move the pictures according to fling gestures. For the rest, it looks very similar to the button solution, except that there is no listview.
This is the code:
And I also attached the .aia
--
