avoid button deformation

[Simon]

Hi fko,
Have you looked at this lesson?
http://lessons.runrev.com/m/4069/l/1564 ... ll-devices

Simon

[fko2]

Hi Simon,

Yes, i already looked at this lesson and also in the dictionary about the fullscreenmode.

And as i said to Jacque, i tried with many options ("exactift, letterbox, noborder, etc") in my app, but i didn't manage that my buttons can keep the same appearance when i change from landscape to portrait.
Once it will work this, then i will see if it is working in the iPhone too, as till now i am trying it in the iPad to verify if it will work in the different devices.

Regards.
fko

[fko2]

I tried again with all the options of the fullScreenMode and the only one that is showing in the screen all what i want to show ( in the portrait orientation ) is with the 'exactFit'...But like this the buttons are deformed...

And with all the other options the result is undesirable as sometimes the button are not deformed in the portrait orientation but the space filled on the screen is smaller than the screen size, or the contrary: So, i have no black parts in the screen, but it is not possible to see all the buttons, images, fields, etc i have in the card...

So for this i was trying to detect when the orientation is changing ( or the stack resizes ) to portrait to can set the location and size of the buttons as i was trying to explain to Dixie in the post of the other day...
But the problem is that i am not able to know the size of the buttons in the portrait orientation...

In fact i am not able even to see the result of one 'answer' in the on resizeStack...

Code: Select all

on resizeStack
   if environment() = "mobile" then
      put mobileDeviceOrientation() into tOrientation
      if the short name of this card is "cardL" then
         if tOrientation is "portrait" or tOrientation is "portrait upside down" then
            answer  "portrait " & the width of btn "btnFrd1" of card "CardL"
            answer "portrait " & the height of btn "btnFrd1" of card "CardL"
         end if
      end if
   end if
end resizeStack

I don't know if this code, that i have it in my stack script, is correct or not...????

So my first problem is to know this, and the second and principal problem is how to make that in the portrait orientation i can see all what i am seeing in the landscape orientation and without any deformation...

Regards.
fko

[Dixie]

Hi... I think this will work for you..

[fko2]

Hi Dixie,

Thanks for your example!
Now the buttons are not deformed also in my iPad when i change from landscape to portrait!

So, i made one 'resizeStack' similar to yours, and i put of the line of the 'fullScreenMode' that i had in my code, as you are not using it.
And as i told you, the buttons are not deformed and the group is appearing, in the portrait orientation, in the same location as the landscape orientation.
But now the problem is that in the portrait mode i can't see all what i have in my card ( the same i can see in the landscape mode ).

So my question is: There is one way to can see all what i have in the landscape view, also in the portrait view but without deforming the buttons?

In the attached images, you can see how in the portrait view the buttons are not deformed...So this is solved!!!
But also that the buttons "ADD, SHARE, DELETE" (That they have not one icon for the moment) are not visible in this view, but yes in the landscape one.

Regads,
fko

[fko2]

Hello,

During i am waiting if someone have one answer for my last question, i tried to do some things. As to control myself the location and size of each element in my card when the orientation is changing in my card.
But i am not advancing a lot...I don't know if is that i am wrong in my concepts or if there is something more!!!:-(

First of all i had to consider that, in the moment of the design of my app, i created everything in one card of 1024x768.
So i have one variable IniWidth that is 1024
So i have one variable IniHeight that is 768
Then i put a a few lines of code in the orientationChanged in my card script, analyzing if my current orientation is 'portrait' or 'landscape'
So if it is 'Landscape' i will have this:
So i have one variable CurrentWidth that is 1024
So i have one variable CurrentHeight that is 768

and if it is 'portrait' i will have this:

So i have one variable CurrentWidth that is 768
So i have one variable CurrentHeight that is 1024

And once i will have the current height and width of my screen, i will calculate the ratio in function of the initial height and width:

so:

put CurrentHeight / IniHeight into theHeightRatio
put CurrentWidth / IniWidth into theWidthRatio


I also stored the size of my elements the first time i am running the app.

So then i thought to multiply the height and width of each element per the height ratio and width ratio. To can have the same proportion of my elements with the real size screen.
And after this also change the location of the elements with the same idea as before. So looking where was in the original position in my card of 1024x768 and then change the location when the orientation will change to 'portrait' (768x1024)

But i didn't manage to do it!
And, the worst thing, is that once it was changing the orientation of the iPad, then it was no more changing the orientation!

So, i am wondering if what i am doing is 'conceptually not correct'...
Do i have to control something from the on resizestack in my stack script or only from the orientationChanged in my card script?

Any help about this from the LiveCode's gurus??? I imagine that you had already my same problem, the 'big' difference is that you already resolved it and me i am still blocked there...

Thanks in advance!

Regards.
fko

[Dixie]

It is not a question of having to calculate heights or ratios, you can just place the objects where you want them to be depending if your stack is in portrait or landscape, in the resizeStack handler... Now you should be able to see how the groups (buttons) on the right hand side are moved, depending on the orientation... they are kept 20 pixels in from the width of the card...

[fko2]

Hi Dixie,

Thanks for the example. I will have a look and test it when i will arrive at home!
Anyway, without seeing what is doing, i am wondering when you say that i have not to calculate ratios, heights, widths, etc...
Because when i designed my card was in one card 1024 x 768 ( so, "landscape ready" we can say ), i and button is the location 900, 512.
so, if i change only the position, then this will make me that the button will be quite over the group i have ( the one i showed in one of the images i attached in this topic ).
So to preserve the gap ( or the proportional gap ) between the different elements i thought that maybe i had to reduce a little bit the size of the group, the size of the text field i have in this group and other things to can put all what i had in my view of 1024 in the new view of 768 preserving the same 'view' for the user.

I don't know if i expressed myself well! I hope so!

Anyway all this i am telling you without seeing what you did. So later i will see it and come back here again!

And once again, thanks for the example.

Regards.
fko

[fko2]

Hi Dixie,

So your example is working ok!

But i think that in my case i will have the problem anyway, as between the group and the buttons i have other things...
So, if i didn't reduce their size with 'the ratio i tried', i think it will impossible to put everything in 768, where before it was in 1024...

am i wrong? Or there is something obvious that i am not understanding or seeing?

Regards.
fko

[Klaus]

I'm afraid you need a complete new layout for "the other" orientation!

[fko2]

Me too Klaus!

And for this i am really wondering that if there is one way to do it with ratios as i was trying before, or if really there is something more that it is me who is not seeing but the gurus ( as you, Dixie, Jacque, Simon, Bernd, and many others that helped me in this forum ), they know or they already had this problem and they solved it!

So, if there is not an easier solution, then what should i do??? To create all the buttons, fields, groups, etc with their desired place and size and make them visible or invisible depending on the orientation?

Regards,
fko

[fko2]

Hi,

Someone with more experience can give his mind about the steps to do to have my app with the same view in landscape and portrait?
Do i have to create the buttons ( and the rest of elements) and hide them and show them depending on the orientation?

Thanks in d'avance!

Regards,
Fko

[bn]

Hi Fko,

it is difficult to advise without knowing your specific stack

If you go down the path of rearranging your "furniture" yourself you will find that you have granular control over the whole process. At first it seems tedious but then you might even get the hang of it.

I usually arrange objects from topleft and then from there down and to the right. Or you place one reference object where you want it and relate all others with regards to this object.

One thing you should keep in mind: when doing something within the resizeStack handler and there are errors in your code Livecode might crash. This is because Livecode hands this over to the operating system and Livecode can little do to prevent a crash. To get around this I usually put a send in time message to a separate handler inside the resizeStack handler. This way whatever goes wrong can be easily debugged.

Code: Select all

on resizeStack newWidth,newHeight,oldWidth,oldHeight
   
   -- code taken out of resizeStack handler because it it difficult to debug
   -- Debugger can not debug when the operating system is taking over like in resizeStack
   -- by sending it after completion of resizeStack handler (send xxx in 10 milliseconds) Livecode is on its own again and can debug
   
   send "adjust newWidth,newHeight,oldWidth,oldHeight" to me in 10 milliseconds
  -- adjust newWidth,newHeight,oldWidth,oldHeight once everything works you can unblock this to get it up to speed

end resizeStack

all adjusting is in "adjust" handler which gets passed the parameters of the resizeStack message.

Here are examples on how to rearrange objects when the size of the stack or the group changes.
http://livecodeshare.runrev.com/stack/387/ResizeGroup
an example of changing a groups size and adjusting its elements in size

http://forums.livecode.com/viewtopic.ph ... ane#p52581
a rather complex adjustment of elements both when you change the stack dimension and a horizontal and vertical divider inside the card

What you have in mind should be easier to accomplish.
This is just to give you some ideas.

Kind regards
Bernd

[fko2]

Hi Bernd,

Thanks for your reply!

I will see the links you put me and try to see if i am able to do what i want!

And tomorrow i will make one screenshot of my card and tell you where are i have located the elements and their size to can make more understandable what i am asking for.
I imagine that it is difficult to give advices as you are not seeing what i am seeing! So i will try to make it more understandable!

Regards,
fko

[fko2]

Hi Bernd,

Till the moment i had no time to see the links you told me.
I hope i will have more time this end of afternoon.

As i told you, i will try to give you more details about what i am trying to do!

So the card i have one group composed with buttons "-", "+F", and "+M" and also text fields ("1", "2", "3", etc ).
I also have one label "title" just above the group, one big label "List" in the top of the card and two buttons in the right side of the card ( first i had more buttons,but maybe i will keep only these two buttons ).

The size of the group is 572x2498. the location is 338x1518, the rect is 52, 269, 624, 2767.
In the group the first button "-" has one size 40x40, the location is 76x293, the rect is 56, 273, 96, 313.the gap with the next button "-" is 50 pixels.
The first text field "1" has one size 393x22, the location is 301x294, the rect is 105, 283, 498, 305.the gap with the next text field "2" is 50 pixels.
The first button "+F" has one size 62x40, the location is 528x293, the rect is 497, 273, 559, 313.the gap with the next button "+F" is 50 pixels.
The first button "+M" has one size 62x40, the location is 589x293, the rect is 558, 273, 620, 313.the gap with the next button "+M" is 50 pixels.

The size of the label "title" is 570x40. the location is 344x248, the rect is 59, 228, 629, 268

The size of the label "List" is 624x100. the location is 510x106, the rect is 198, 56, 822, 156

The button "Share" has one size 220x50, the location is 876x455, the rect is 766, 430, 986, 480.
The button "Delete List" has one size 220x50, the location is 876x585, the rect is 766, 560, 986, 610.

I attached one folder where i have three screenshots. The one named 'Landscape' is the one in which i designed my app ( so, how it should be ), and the two others (portrait) are how are appearing.

So my target is to make appear in the portrait orientation everything and have the same view as the landscape one. So for example, in the beginning i should only see the first 10 buttons "-", "+F", "+M" and the text fields, and not till the 15th, as i have n the portrait orientation.
So what i thought was to reduce 'specially' the width of the text fields to can 'earn' more place and like this reduce this same width to the group. and once these will be shorter, then i can bring more to the left the buttons that were not appearing. Because i didn't want to deform the buttons. But this is 'only' my idea!

I hope now it is more understandable what i am trying to do! If not, tell me please!

I will look at your links a little bit later and see if i can understand it and see if i can apply it to my need.

I couldn't attach all in one file...So after this post i will make a new one only attach the other half of what i want to attach!:-)

Regards.
fko