avoid button deformation

[fko2]

The other half!

Even if i couldn't make it so soon after my last one. So, i had to wait a little bit!

Regards,
fko

[fko2]

Hi Bernd,

I saw the two examples, and i think now i have one clear idea of what i should do! I will see if i will manage.
So i will arrange the width, the location and the left of the objects!
so i will use

Code: Select all

on resizeStack newWidth,newHeight,oldWidth,oldHeight
   
   send "adjust newWidth,newHeight,oldWidth,oldHeight" to me in 10 milliseconds

end resizeStack

So with the newWidth,newHeight,oldWidth,oldHeight i can know if the orientation changed from 1024x768 (landscape) to 768x1024 (portrait).
and then i will make one handler 'adjust' to arrange all what i have to arrange there.

But before to begin to make the code, i have one question that i would like to know, as the app should work also for iPhone! And i would like to code it 'well' from the beginning!
Before i saw the buttons deformed i was using the fullScreenMode thinking that it will work automatically for landscape, portrait and also in iPad and iPhone.
Now to avoid the deformation i deleted the line of fullScreenMode in my code.
So to pass from iPad size to iPhone size and control the portrait and landscape orientation i have to do all this with the resizeStack too? So not only the pass from 1024x768 to 768x1024, but also from the designed original size to the iPhone size??? Or the pass from iPad size to iPhone size is done 'automatically'???
Or maybe i have to use anyway the fullScreenMode to allow to pass from iPad size to iPhone size and then control the landscape or portrait orientation with the resizeStack?
Sorry if my questions seem 'stupid'! But the part belonging to change orientation or sizes of screen is the most difficult one for me to understand, and i don't know which is controlled automatically and which not.

Thanks in advance!

Regards,
fko

[bn]

Hi fko,

I would suggest to make a small stack with just a few objects and try all the resizing stuff and iPad/iPhone stuff on it.

I think that is a lot easier to experiment with than your one "real" stack. Then you apply what you found out to your "real" stack.

I would have to do the same to see what happens when going to iPhone size.

Those small stacks are easy to make and if anything goes wrong it does not matter much.

Kind regards

Bernd

[fko2]

Hi Bernd,

Waiting for your answer i already made one little test with one card in 1024x768 and i had two buttons that are moving correctly depending on the orientation.
I this i could test it in the iPad.
So now i can do it from landscape to portrait in one iPad!
But i can't test it in one iPhone...I have one android phone...My couple has one but, is far away in this moment till the end of next week! So i can't use the iPhone!:-(

So i tried to do it in the test option with the simulator but directly is showing me as and iPad simulator. So, i am not able to change it for one iPhone simulator.
Before this i controlled in the standalone settings that this example was made only for iPod and iPhone, and not for iPad!!!

So, as i am not managing to test it in one iPhone and / or iPhone simulator, i wanted to know the theory about this!!! And for this i asked you if i have to control also the device changing or if this is done automatically.

So one advice about it should work in one iPhone when the app was designed in 1024x768, or how to test it like and iPhone simulator, to see how it should work there, it would be nice to avoid to wait 10 days more to know if i have to make more changes in the code and also in design...

regards,
fko

[fko2]

Hi,

finally i could make the iPhone simulator work!
But the result of this, is not very optimistic for me!
As i can't see that that the pass from the design card ( in my case 1024x768) is automatically done!

So, if i am not wrong, it means that i have to develop everything also for 480 x 320! This is like this???

And in this case, how i can know which one i have to show? for landscape or portrait i know but for iPad or iPhone i don't know how i should make this work.

Do i have to make one card of 1024x768 ("cardListeIpad") and another one of 480x320 ("cardListeIPhone")? And if it is like this how to call to one or other??? Any help about this, please?

Regards,
fko

[jacque]

I think you could avoid a lot of problems if you just require landscape orientation. You can set that with the mobileSetAllowedOrientations in a preOpenStack handler. For now that may be the easiest solution, at least until you get the basics working.

Usually developers create the stack for the smallest screen they support (iPhone in this case) and use fullscreenMode to resize it larger. If you don't want to use fullscreenMode, you can set the pixelScale of the stack to a larger size, but that requires more work and calculations. I think what I would do for this stack is restrict the layout to landscape, create the stack at iPhone size (small) and use the "showAll" fullscreenMode.

Another option would be to create a stack in landscape orientation at iPhone size and position the controls in the stack so that there is some amount of empty space that act like "margins" all around every side. Set the fullscreenMode to noBorder. A user on an iPhone will see the stack normally. Users on other screens will see a scaled version that retains the proportions of the stack. If the ratio of their screen doesn't match the iPhone ratio, some of the stack edges will be cut off. But since you have left empty space around the edges, it shouldn't matter because only the empty "margins" will not be visible. You'll have to experiment to find out how much empty space you need to provide at the edges of the card.

Once you get landscape working you can experiment with portrait if you want. That will require moving/repositioning objects to fit into the new viewing area. But it is very common to lock apps to one orientation.

[fko2]

Hi Jacque,

Thanks for your answer! I only saw it now.
I think it is a good council to make it only for one orientation!
Since my last post i was changing some cards i have for iPhone (and also controlling the objects for portrait and landscape for iPhone), and for this i didn't see your answer first.
I think that if i don't manage to make it everything as i already imagined in both orientation for phone and tablet, then i will avoid one of both orientations.

Regards,
fko

[fko2]

Hi,

Finally i did what Jacque told me. Even if this meant to begin again my app creating the main stack and the different cards.

So i locked the app for only one orientation, and i also did my design from the smaller card. So i designed everything for the iPhone model.
And i let the margins in the different sides of my card. And finally i used the fullScreenMode with the option "noBorder".

And i tried this card for iPhone and iPad simulators and it is ok for the margins.
The only problem i have is that the images of my buttons in the iPad simulator are "pixeled". So the image is not 'clear' like in the small size.

There is any way to resolve this inconvenience with the scales and the quality image?

Regards,
fko

[Simon]

Hi fko,
Here it is;
http://lessons.runrev.com/m/15262/l/156 ... -densities

Simon

[fko2]

Hi Simon,

Thanks for your quick answer!

I looked at the lesson you suggested me!
So, if i understood well i have only to take make the image in different resolutions with the photoshop and then put the name as the convention.
That is 'all'??? I ask this, because it seems that the density scaling is already enabled...Or there is something more to do more than the 'photoshop' work???

Regards.
fko

[Simon]

Hi fko,
You'll still need to reference the images, just like the lesson says.
But sure, that is all.

Simon

[fko2]

Hi Simon,

I finished to ameliorate the resolution of one of the images for my buttons.
So, now i have it in three different resolutions.

So to test it, i put them the names as the lessons says:

TestImage@medium.png
TestImage@high.png
TestImage@extra-high.png

But till now, what i was doing was to import the image from the menu "file" > "import as a control" > "image file".

and then, for example, i was making this:

I have many buttons with the symbol "do not enter", so i made one repeat to put the same image in all these buttons with the next line

Code: Select all

set the icon of the btn btnNameDoNot of card "cardL" to the id of image "DoNotEnterImage" of card "cardL"

So, my question is if it is enough to import them, as i was doing till now, and let them invisible in the card or if i have to put them in one folder.

Regards,
fko

[Klaus]

...So, my question is if it is enough to import them, as i was doing till now, and let them invisible in the card or if i have to put them in one folder.

Simon already answered this, "referenced" means NOT imported!

You'll still need to reference the images, just like the lesson says.

[fko2]

Hi Klaus,

So it is this what i don't know how to do!
How should i do this???

Regards,
fko

[jacque]

Set the filename of the image to the path on disk. Make sure to include the image folder in the Copy Files pane of the standalone settings. That is the preferred method.

If you do want to continue using an imported control, import the largest size and scale it manually to fit. Set its lockLoc to true so it won't revert. When the engine scales the stack, the resolution should still be okay.