PhantomAppDevelopment / pizza-app

An Adobe AIR mobile app that uses the Yelp Fusion & Firebase V3 API to create a small social network for pizza lovers.
https://play.google.com/store/apps/details?id=air.im.phantom.pizza
MIT License
15 stars 2 forks source link

Blank screen in rotation #2

Closed benkhachouch closed 7 years ago

benkhachouch commented 7 years ago

Hello.Congratulations for your application. We have thé same idéa for a social network . It réalised my app with firebase ane s.

In image details During the rotation of the mobile there is à blank screen and image make long time to display.why?

Ôther thing

For displaying correcty thé imâge and text without jumping (image upload) I register ratio in firebase and make à quad with image dimensions

agentphantom commented 7 years ago

When you rotate your device a Context Loss is triggered. This means the image texture is lost and needs to be recreated.

If the image is too large it will take longer for it to be recreated. I suggest to keep images in a resolution no larger than 2000x2000 px.

I don't understand your second question, can you explain it with more detail or provide an screenshot of what are you having issues with?

benkhachouch commented 7 years ago

screenshot_20170201-000357 screenshot_20170201-000432

To avoid the text jumping While waiting for the loading of the image, I suggest to do that.(like facebook)

var bigImage:ImageLoader = new ImageLoader(); var group:LayoutGroup=new LayoutGroup; group.layoutData = new VerticalLayoutData(0, NaN); var quad:Quad=new Quad(stage.stageWidth,stage.stageWidth/_data.selectedImage.containerRatio,0xCCCCCC); group.addChild(quad); //bigImage.layoutData = new VerticalLayoutData(100, NaN); bigImage.width=stage.stageWidth bigImage.minWidth = bigImage.minHeight = 50; bigImage.source = Constants.FIREBASE_STORAGE_URL + formatUrl(_data.selectedImage.url) + "?alt=media"; var cache:TextureCache = new TextureCache(); bigImage.textureCache=cache group.addChild(bigImage); addChild(group)

Here are the 2 screens: Before loading the image and then after

This is ok but i have a problem with the rotation the image no fill the stage (width)

2017-01-31 21:25 GMT+01:00 Mr. Phantom notifications@github.com:

When you rotate your device a Context Loss is triggered. This means the image texture is lost and needs to be recreated.

If the image is too large it will take longer for it to be recreated. I suggest to keep images in a resolution no larger than 2000x2000 px.

I don't understand your second question, can you explain it with more detail or provide an screenshot of what are you having issues with?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/PhantomAppDevelopment/pizza-app/issues/2#issuecomment-276481287, or mute the thread https://github.com/notifications/unsubscribe-auth/AMYpy-O4lOh_Gz9rcHCbFrKFqbJFgSJSks5rX5ijgaJpZM4LzGj- .

benkhachouch commented 7 years ago

![Uploading unnamed.png…]() hello, Have you a reply for my questions.

Also i recommended adopt this order of displayed objets like in this image for the same reason

2017-02-01 0:10 GMT+01:00 mourad benkhachouch <mourad.benkhachouch@gmail.com

:

To avoid the text jumping While waiting for the loading of the image, I suggest to do that.(like facebook)

var bigImage:ImageLoader = new ImageLoader(); var group:LayoutGroup=new LayoutGroup; group.layoutData = new VerticalLayoutData(0, NaN); var quad:Quad=new Quad(stage.stageWidth,stage.stageWidth/_data. selectedImage.containerRatio,0xCCCCCC); group.addChild(quad); //bigImage.layoutData = new VerticalLayoutData(100, NaN); bigImage.width=stage.stageWidth bigImage.minWidth = bigImage.minHeight = 50; bigImage.source = Constants.FIREBASE_STORAGE_URL + formatUrl(_data.selectedImage.url) + "?alt=media"; var cache:TextureCache = new TextureCache(); bigImage.textureCache=cache group.addChild(bigImage); addChild(group)

Here are the 2 screens: Before loading the image and then after

This is ok but i have a problem with the rotation the image no fill the stage (width)

2017-01-31 21:25 GMT+01:00 Mr. Phantom notifications@github.com:

When you rotate your device a Context Loss is triggered. This means the image texture is lost and needs to be recreated.

If the image is too large it will take longer for it to be recreated. I suggest to keep images in a resolution no larger than 2000x2000 px.

I don't understand your second question, can you explain it with more detail or provide an screenshot of what are you having issues with?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/PhantomAppDevelopment/pizza-app/issues/2#issuecomment-276481287, or mute the thread https://github.com/notifications/unsubscribe-auth/AMYpy-O4lOh_Gz9rcHCbFrKFqbJFgSJSks5rX5ijgaJpZM4LzGj- .

agentphantom commented 7 years ago

None of your pictures got sent to the GitHub thread.

Can you log in to GitHub and manually attach them?

benkhachouch commented 7 years ago

i have uploaded my pictures.

agentphantom commented 7 years ago

I think I got what you mean.

When you enter the screen the text shifts down after the image has been completely downloaded.

This can be avoided by presetting a min height as you have suggested in your code. I was aware of this issue while I was designing the app. My idea was to always show the full height of the image but since we don't know it we let the layout to automatically adjust itself.

I have a couple of ideas to fix this behavior, I will update this post and the code later today with a fix.

agentphantom commented 7 years ago

I have pushed some changes that have fixed this issue.

I have implemented your idea and enhanced it a bit:

When you upload an image, it will also save its width and height.

Once you want to see a picture a ratio will be calculated for the initial shown height.

When the picture is loading, a background image is shown (instead of a Quad), since this background image is embedded into the app it will show instantly. You can find this image on assets/icons/loading.png

This background image is also shown during a context loss, it gives the impression to the user that the image is loading again (which actually happens).

I also added a TextureCache, I noticed the texture gets restored a bit faster with it.

benkhachouch commented 7 years ago

Exactly what il made (without quad). Ôther issue in Chatscreen the input would is set to wordwrap.the user dont see all his text.

Other thing can you implément déléte option For sélected messages? A delete button then is added.

Le 7 févr. 2017 06:27, "Mr. Phantom" notifications@github.com a écrit :

I have pushed some changes that have fixed this issue.

I have implemented your idea and enhanced it a bit:

When you upload an image, it will also save its width and height.

Once you want to see a picture a ratio will be calculated for the initial shown height.

When the picture is loading, a background image is shown (instead of a Quad), since this background image is embedded into the app it will show instantly. You can find this image on assets/icons/loading.png

This background image is also shown during a context loss, it gives the impression to the user that the image is loading again (which actually happens).

I also added a TextureCache, I noticed the texture gets restored a bit faster with it.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/PhantomAppDevelopment/pizza-app/issues/2#issuecomment-277905269, or mute the thread https://github.com/notifications/unsubscribe-auth/AMYpy6WQpWTtkdunAyaJx7QldyeJQCWEks5raACngaJpZM4LzGj- .

benkhachouch commented 7 years ago

I tested your solution. There is a size offset between the background image and the loaded image. I keep my solution who working

I have a good new. I solved the problem of rotation and reaction time for loading.

The idea is not to use an imageLoader but an Image. We load the file. Once finished, we retrieve the bitmapData and we create the Image with Texture.fromBitmapData

The differences are enormous. No reloading after a rotation for example. I will put my code quickly

benkhachouch commented 7 years ago

essentially..

var loader:Loader=new Loader; loader.load(new URLRequest(Constants.FIREBASE_STORAGE_URL + formatUrl(_data.selectedImage.url) + "?alt=media")); loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE,function(e:flash.events.Event):void{ var loader:Loader=(e.currentTarget as LoaderInfo).loader var bitmap:Bitmap=loader.content as Bitmap; donnees=bitmap.bitmapData; bigImage = new Image(Texture.fromBitmapData(donnees)) bigImage.width=bigImageGroup.width bigImage.height=bigImageGroup.height bigImageGroup.addChild(bigImage) })

donnees is a private variable who dispose() when leaving screen

agentphantom commented 7 years ago

Thank you!

I will implement it and commit the changes later today.