Some image sprites not showing on build - Help!!

[SueyL]

Hello,

My app is so nearly there!  I just have a problem with some image sprites not appearing when viewed on tablets and some phones.  I have attached the aia file on GoogleDrive... https://drive.google.com/file/d/1odq-vpyV6f46hLb8UTnv1ggfPRE_CZGE/view?usp=sharing (the forum won't let me attach it.)

If you click a picture in the Memory Owl Menu, the next page should have a list of image sprites down the right hand side (Tabs 2-12 in the blocks on Screen Vid2x) should be shown below the Menu button.  The Menu button should be right aligned too and isn't!

Any help would be much appreciated!  Thank you so much in advance.  (And please don't laugh too much at my coding!)

Susan

[SteveJG]

Please post your aia file here in the Forum.  Thanks.     Until then, the following might help ...   http://www.appinventor.org/content/howDoYou/UIModules/LLTC  

Regards,

Steve

[SueyL]

Hi Steve,

Unfortunately I can't upload here - I get an error message - so have put the aia file on my Google drive instead.  Link in original message.

Kind regards,

Susan

[SteveJG]

You have done some great work with both the graphics and programming.  

Here is what I see on my Tablet  (7" Samsung )

.. so x10 and x 11 are missing?    Perhaps the problem is here

no x10 and x11 miscoded?

You also have another potential issue that unnecessarily complicates you code:  you used 47 Player components.  ONE would do, you change the file the single Player object points to.

Regards,

Steve

[SueyL]

Hi Steve,

Thank you so much for your kind words. :)

10 and 11 are intentionally missing, and you can see the 'tabs' which is what I couldn't see on my tablet.  Strangely I could see them in the emulator but not when I tried running the apk file... have you tried putting it on as an apk rather than emulator?

Also, are the player files working OK for you?

I shall definitely look at the player components. :)

Thanks again.

Susan

[SteveJG]

The apk build on both a 7" and 10" tablet MENU is evidently behind the tree because it it does not display in Texas either.  On the 7" display, I see the blue Menu but not the selections, on the 10" I see only the tree.

Regarding the sounds,  I hear the same hoot owl ?  regardless of the image pressed. Touching more than 5  objects ends up crashing the app.  When restarted, amazingly the correct menu column displays.  I'll look at this later when I have some time.   I expect this might be an issue of the app determining screen size and has something to do with timing of events or sequence of events.

Wow, when it runs it is beautiful ... at least compared to the stuff I produce.

[SteveJG]

When you open a screen, you are not properly closing the screen you are on when you leave it.  That means it stays in memory; eventually this will gobble up all your Android's system memory and crash your app.

Use different screens wisely
Before starting to create another screen, first you should think about is it really necessary? See also Building apps with many screens and SteveJG's post about advantages/disadvantages, because in only one screen you also can use vertical arrangements to simulate different screens, just set the arrangements to visible = true/false as needed... See also Martyn_HK's example about how to use Tabs in App Inventor and another example from Cyd. 

If you decided to use different screens, then you should switch them correctly, else you will run out of memory after a while...      
The recommended method of switching screens in App Inventor

I ran again on the 7" tablet ... which displayed the option tabs beautifully and continued to run probably as you expect through all the tabs, then it crashed and the full MENU never returned unfortunately.  Reloaded the app and still could not achieve a full screen.   I was never successfully getting a MENU to display on the 10" I did establish that pages are not being released from memory on exiting them...that is a serious issue.

Got to run now.

[SueyL]

Steve, you are saving my sanity!

I will make sure that the screens are closed properly.

The Players play sound files that narrate the stories on each of the pictures.  I'm half way through removing all the Player components and replacing them with just the one.

The full screen thins is strange, but hopefully we can get it sorted..

Thank you!!

[SueyL]

I have uploaded the latest version into Google Docs... 

https://drive.google.com/file/d/1velRpB52GLlp0RokUpC0m2xDim3Ul-PZ/view?usp=sharing

The simplified code and screen closing has solved the crashing problem (hurray!) so I am left with two issues:

1) Buttons not showing up on RHS on certain devices..

Should look like this...

But looks like this...

I can recreate both scenarios on my Samsung S8, but on a tablet there is no option but to see the second picture, so the user cannot navigate.

2) Pictures being blurry on smaller devices.

All advice welcome!

[Chris Ward]

Hi SueyL

Nice looking GUI you have made.

I suggest that the best answer would be to have the buttons on the LHS instead. RHS will be an issue with some new phones having a software taskbar instead of a hardware taskbar - AI doesn't allow for that.

Very strange that the pictures are blurry on smaller devices, but much depends on their (device) resolution and the app's image format.

Tips:

1) Ideally, the images should be exactly the size required. If this does not work well across Phones, then make the image slightly larger than full size - AI will scale them down accordingly - but if you make them too large, AI and ot the device may not be able to cope and the app (possibly the device too) will crash.

2) Think about having a seperate tablet version of the app, with images to suit, so that images are not scaled up. Tablets generally have more memory and their processors more 'grunt'.

3) All images should be PNG format - scales far better than JPG.

4) All images should be zero compression = faster app startup.

[SueyL]

Hi Chris,

Thanks so much for your tips.  I'll play around with the buttons and put them anywhere but on the right!

I'll also have a play around with the images.  It is strange that the one on the first static screen is exactly the same format as the others, but is not blurry.

Thanks again!

Kind regards,

Susan

[SteveJG]

A guess to what is happening.  You are using LARGE images and continually using an overworked cpu in you device to 'reduce' the images in size to display them.

For example the MENU is a LARGE image 4000 x 2250 and your app reduces it in size to 320 x 600   possbily for a phone or  600 x 1024 pixles on a 7" tablet or 800 X 1280 .  The transition takes extra time.  This image should not be much larger than the screen size on the largest tablet you will support.

and

are all much larger   pixel x pixel than displayed

and

Also true of your MENU icons.

You display your Canvas Height as Fill Parent and Width as Fill Parent.     Have you tried using instead H and W  of  90 percent of screen?

-- Steve :(

[SueyL]

Thanks so much Steve and Chris.  I've now completed the app and am wiser about what I can do in AppInventor.  Thank you!

All the best,

Susan