avoid button deformation

Klaus · Post by **Klaus** » Thu Mar 05, 2015 5:44 pm

Hi fko,

check this one

http://forums.livecode.com/viewtopic.ph ... es#p111641

Will of course also work on mobile!

Best

Klaus

fko2 · Post by **fko2** » Thu Mar 05, 2015 7:08 pm

Hi Klaus,

Thanks for the link, i will look at it now!

Some post ago, i was telling that as Jacque suggested me, i made / designed again my cards from the iPhone size, so the smaller one.
And now when i simulate in iPhone and iPad is working with the fullScreenMode and the option "noBorder", but it is happening something strange, at least for me!

When i am in the iPhone simulator i can scroll well, but in the iPad simulator, the first button and field are not scrolling well...So when i scroll down, and then i scroll up again, i can scroll and 'hide' the first button and field. But when i try again in the iPhone simulator is scrolling always well when i go up and down.
This is concerning to the fullScreenMode? The group i am scrolling is in position 115,923.
So it is not in the top to risk to be hidden because of the margins. And in fact, when the card is opened is appearing well, and also when i change of card, during the simulation, and i come back to this card, it is always showing it well. But when i scroll down and then up it is going out of the limit.
And this is strange, because is happening only in the iPad simulator. Never in the iPhone simulator.

Someone has any idea why is happening this or how to control this?

Regards.
fko

fko2 · Post by **fko2** » Thu Mar 05, 2015 8:06 pm

Hi Klaus,

It is me again!

I tried what you told me or what i "understood", but it didn't work.

So i created one folder "Images" i put in this folder two different resolution images.
Then in the setting of the standalone, i add this folder to the copy files.
and then i put this code in my preopenCard of the "cardL" where are the buttons that i want to change them the icon.

Code: Select all

   put the effective filename of this stack into tPath
   set itemdel to "/"
   put tPath & "/Images/TestImage@medium.png" into imageName
   set the icon of the btn btnNameDoNot of card "cardL" to the id of image imageName of card “cardL"

But it is evident that i am making something wrong as i have no icon (no medium and no high) in my buttons.

Regards.
fko

jacque · Post by **jacque** » Thu Mar 05, 2015 8:32 pm

But when i scroll down and then up it is going out of the limit.
And this is strange, because is happening only in the iPad simulator. Never in the iPhone simulator.

This can happen if you have coded exact coordinates into the script because they will not match on different devices. Never use numerical coordinates, instead use the rectangle of an existing object, like the field itself. Also, when you leave the card, delete the control. On preOpenCard, create it again.

jacque · Post by **jacque** » Thu Mar 05, 2015 8:41 pm

fko2 wrote: So i created one folder "Images" i put in this folder two different resolution images.
Then in the setting of the standalone, i add this folder to the copy files.
and then i put this code in my preopenCard of the "cardL" where are the buttons that i want to change them the icon.
Code: Select all
   put the effective filename of this stack into tPath
   set itemdel to "/"
   put tPath & "/Images/TestImage@medium.png" into imageName
   set the icon of the btn btnNameDoNot of card "cardL" to the id of image imageName of card “cardL"
But it is evident that i am making something wrong as i have no icon (no medium and no high) in my buttons.

Do you know how to step through the code in the debugger? Because if you do that you will see immediately what the problem is. Your file path is not correct.

But you don't need to do any of this in the script. Use the property inspector to set the icon image to a file on disk during development. When you build the app, the LC engine will manage the different images for you, provided you have set up the image folder correctly and included it in the build. You can delete the imported copy of the image, you don't need it.

fko2 · Post by **fko2** » Thu Mar 05, 2015 10:03 pm

Hi Jacque,

Thanks for both answers!

So, about the the scroll, It was not in my code that i was creating the group.
I did it directly during the design. So 'only' selecting all the elements and then pressing on "Group Selected" in the "object" menu.
Sorry Jacque, but i don't see what you mean telling that i should use the rectangle of an existing object
this is the rect of my group : 21,169,210,1677
this the rect of the first button i have in the group: 25,177,45,197
and this the rect of the last button i have: 25,1647,45, 1667

How with the rect of my buttons can i arrive to give the correct size for my group?
I am trying to imagine, but i can't see how to do this!:-(

and about he image, from the property inspector of the button i can't assign to it the image i have in the folder "Images" as the only options i have from the property inspector the images library are "standard icons", "default patterns", "metacard compatible icons", "metacard compatible patterns" and "this stack"...

Or it means that i have to import the image, assign it to the button and then delete the image i imported, as this image will be the same of the one i have in the "images" folder?

Regards,
fko

jacque · Post by **jacque** » Thu Mar 05, 2015 11:26 pm

Referenced images: http://lessons.runrev.com/m/4603/l/44144-using-images When you use a referenced image, the engine gets the image from disk. You don't need another copy in the stack.

For the scrolling, I assume you are using a native scroller, right? It is scripted? If so, the script will set a rectangle for the scroller, and that rectangle should not use hard-coded numbers. In your app it probably needs to calculate the rect of the group placement. I haven't gone back to read this whole thread so I can't remember exactly how you have set up your scroller.

How to make a native scroller: http://lessons.runrev.com/m/4069/l/9441 ... ll-a-field This lesson will work with your existing group. Notice how it gets the content rectangle by examining the dimensions of the group for the parameter tContentRect.

fko2 · Post by **fko2** » Fri Mar 06, 2015 12:53 pm

Hi Jacque,

So for the referenced image i made as the lesson said:

1.- I added an image object to the stack
2.- I opened the property inspector and i selected an image stored in my folder (in my case the folder is "Images", the one i copied for the standalone settings). Being more precise, i choose the image "DoNotEnter@medium.png"

And this time i have nothing scripted in my card / stack.

And then i associated this image (named "Image 1" ) to the icon of my button.

And to see if really was making something, i named another image (different to my image ) as "DoNotEnter@high.png". So they have the same name till the '@', but the image is completely different. Like this i can see if it is changing really when i test in the iPhone or iPad simulator.
But not!

the image is always the 'medium' one.

Am i still doing something wrong? It seems that yes, so the correct question is what i am doing wrong now, even if i followed the lesson, concretely the part that speaks about "Referencing Images"?

and this is my code to create the scroller:

Code: Select all


      mobileControlCreate "scroller", "groupScroller2Iphone"
      put the result into sScrollerListIDIphone
      put the topLeft of group "objectsListIphone" into tRect2
      put the right of group "objectsListIphone" into item 3 of tRect2
      put the height of this card into item 4 of tRect2
      
      put the formattedWidth of group "objectsListIphone" into tWidth
      put the formattedHeight of group "objectsListIphone" into tHeight
      mobileControlSet sScrollerListIDIphone,"rect", tRect2
      mobileControlSet sScrollerListIDIphone, "contentRect", (0,0,tWidth,tHeight)
      mobileControlSet sScrollerListIDIphone, "visible", "true"
      
      iphoneControlSet sScrollerListIDIphone, "canBounce", "true"
      iphoneControlSet sScrollerListIDIphone, "scrollingEnabled", "true"
      iphoneControlSet sScrollerListIDIphone, "canScrollToTop", "true"
      iphoneControlSet sScrollerListIDIphone, "lockDirection", "true"
      iphoneControlSet sScrollerListIDIphone, "decelerationRate", "normal"
      iphoneControlSet sScrollerListIDIphone, "pagingEnabled", "false"
      iphoneControlSet sScrollerListIDIphone, "indicatorStyle", "black"
      iphoneControlSet sScrollerListIDIphone, "vIndicator", "true"
      iphoneControlSet sScrollerListIDIphone, "delayTouches", "true"
      iphoneControlSet sScrollerListIDIphone, "canCancelTouches", "true"
      iphoneControlSet sScrollerListIDIphone, "hscroll", 0
      iphoneControlSet sScrollerListIDIphone, "vscroll", 0

As the lesson says, about experiencing hidden text after scroll it should replace the script with the next line to avoid hidden text / parts:

Code: Select all

put 0,0,(the formattedWidth of group "scrollArea"),(the formattedHeight of group "scrollArea") into tContentRect

but in my case i already have it in this part of my code when i create the scroller:

Code: Select all

      put the topLeft of group "objectsListIphone" into tRect2
      put the right of group "objectsListIphone" into item 3 of tRect2
      put the height of this card into item 4 of tRect2
      
      put the formattedWidth of group "objectsListIphone" into tWidth
      put the formattedHeight of group "objectsListIphone" into tHeight
      mobileControlSet sScrollerListIDIphone,"rect", tRect2
      mobileControlSet sScrollerListIDIphone, "contentRect", (0,0,tWidth,tHeight)

So, it should work well, no?

Regards,
fko

fko2 · Post by **fko2** » Fri Mar 06, 2015 3:19 pm

Help please!

I am blocked here and i don't know how to advance!

Regards,
fko

fko2 · Post by **fko2** » Fri Mar 06, 2015 5:39 pm

It is me again,

I was looking in my card, and i found that i already had the same images, i wanted to use by reference, imported in my card.
So i deleted them, and then i made again the same process i explained before ( as the lesson Jacque suggested to me ), but it is not changing from the 'medium' to 'high' image! So, i don't know what else i can do!:-(

I prefer to learn than to copy, but for these two 'little' things ( even if for me in this moment are 'very big problems' ), anyone can show me in one little example / stack how to do for the referenced images and also to control the hidden part of one scroll when the device is changing from one iPhone ( the size of the stack for my design ) to the iPad ( in this case the iPad simulator ) ?
Maybe with this example i can see how it should be, because this time i am not able to understand, or being more precise, 'understand and apply' what i read in these two lessons, and specially for the scrolling, as in my code i had already the line proposed in the lesson to control the hidden text!

Regards,
fko

jacque · Post by **jacque** » Fri Mar 06, 2015 10:05 pm

Your scroller script looks correct. I don't understand what you mean about hidden buttons. Maybe a screenshot will help.

Put all the images into a single folder, and put that folder into the same one that holds your stack. In standalone settings Copy Files pane, delete everything in there. Then click Add Folder and choose your images folder. Do not select "copy referenced files".

Then look at the filename assigned to the image. If it includes the full path on your hard drive, it is not a relative path and it won't be found on an iPad. Change the referenced file name in the property inspector, remove any reference to your hard drive. Use only the folder and file name, like this:

Images/DoNotEnter@medium.png

See if that works.

fko2 · Post by **fko2** » Sat Mar 07, 2015 12:25 am

Hi Jacque,

I created another folder that i named "ImagesTest", and i put there two images to can test, the medium and the high one.
And i made what you told me in the standalone settings.

And this is the name of image i have: "./ImagesTest/DoNotEnter@medium.png"
But it is not changing in the iPad simulator to the high one!

What can i do here????

And for the scroller i attached two images, one is one screenshot in the iPhone simulator, that is working well, and the other from the iPad simulator that is working not well.
In the iPhone screenshot i put one "1" to show that is the first field, and after scroll down and up, i still can see the first field and buttons.
And in the other screenshot , in the iPad simulator, after scrolling down and up, the first "do not enter" button, the first field, where is written the number "1" and the other to buttons are not 100% visible. Is like if they are hidden.

I hope with the screenshot it will be more clear what i am trying to explain, as i am not sure i expressed myself well!

Regards,
fko

jacque · Post by **jacque** » Sat Mar 07, 2015 10:04 pm

I misinformed you about the image file path. Use only the part of the name before the "@": the referenced file path should be "/ImagesTest/DoNotEnter.png". LiveCode will calculate the other resolutions based on that path. Here is an explanation: http://lessons.runrev.com/m/15262/l/156 ... -densities

The screen shots helped, II see now what you mean about the scrolling problem but I am not sure how to solve it. It looks like the formattedHeight of the group is not calculated correctly, so the scroller content rect is not correct. It might help to set the group margins to 0.

Dixie · Post by **Dixie** » Sun Mar 08, 2015 10:56 am

fko...

I think that Jacque is correct in that you are not handling the 'formattedheights' properly... Have another look at the attachment 'ipadOrient3' that I posted... Note that when you first build the content you must set the scroll of group "master" to 0

Code: Select all

on buildIndexList
   lock screen
   set the vScroll of group "master" to 0

Then when you build the scroller, set the vScroll of the scroller also to 0... that then will align both when first built.

Code: Select all

   iphoneControlSet scrollID, "vscroll", 0
   iphoneControlSet scrollID, "hscroll", 0
end buildScroller

Also remember to calculate the height of the image within the group "master... is it shorter in height or greater ?

Code: Select all

put the rect of group "master" into theRect
   put 0 into item 1 of theContentRect
   put 0 into item 2 of theContentRect
   put the width of group "master" of me into item 3 of theContentRect
   
   if the height of group "master" of me >= the formattedheight of group "master" of me then
      put the height of group "master" + 1 into item 4 of theContentRect
   else
      put the formattedheight of group "master" +8  into item 4 of theContentRect
   end if
   
   set the unboundedVScroll of group "master" of me to true

in the 'buildIndexlist' handler, try setting the number of times the groups are copied... try changing it to 'repeat 6 times', watch how it behaves... then try say 60 and see what happens..

Code: Select all

on buildIndexList
   lock screen
   set the vScroll of group "master" to 0
   
   put 1 into count
   repeat 6 times

Dixie

fko2 · Post by **fko2** » Sun Mar 08, 2015 4:04 pm

Hi Dixie,

So i looked at your other post with the example you had.
And based in yours, i made this:

Code: Select all

   set the vScroll of group "objectsListIphone" to 0
   if the environment is "mobile" then

      if scrollID is not empty then iphoneControlDelete sScrollerListIDIphone
      
      put the rect of group "objectsListIphone" into theRect
      put 0 into item 1 of theContentRect
      put 0 into item 2 of theContentRect
      put the width of group "objectsListIphone" of me into item 3 of theContentRect
      
      if the height of group "objectsListIphone" of me >= the formattedheight of group "objectsListIphone" of me then
         put the height of group "objectsListIphone" + 1 into item 4 of theContentRect
      else
         put the formattedheight of group "objectsListIphone" +200  into item 4 of theContentRect
      end if
      
      set the unboundedVScroll of group "objectsListIphone" of me to true
      
      iphoneControlCreate "scroller"
      put the result into sScrollerListIDIphone
      iphoneControlSet sScrollerListIDIphone, "rect", theRect
      iphoneControlSet sScrollerListIDIphone, "contentRect", theContentRect
      iphoneControlSet sScrollerListIDIphone, "visible", "true"
      iphoneControlSet sScrollerListIDIphone, "canBounce", "true"
      iphoneControlSet sScrollerListIDIphone, "scrollingEnabled", "true"
      iphoneControlSet sScrollerListIDIphone, "canScrollToTop", "true"
      iphoneControlSet sScrollerListIDIphone, "lockDirection", "false"
      iphoneControlSet sScrollerListIDIphone, "decelerationRate", "normal"
      iphoneControlSet sScrollerListIDIphone, "pagingEnabled", "false"
      iphoneControlSet sScrollerListIDIphone, "delayTouches", "true"
      iphoneControlSet sScrollerListIDIphone, "canCancelTouches", "true"
      
      iphoneControlSet sScrollerListIDIphone, "vscroll", 0
      iphoneControlSet sScrollerListIDIphone, "hscroll", 0
   end if

This code, i have it in my openCard, and the only difference is that i have no subgroups in my group "objectsListIphone".
All the elements of this group, i placed them with one vertical gap of 30 pixels using one repeat (the first element of the first row is in the location 35,187 and then i added 30 to the 187, then 30 to the 217, etc ). And once they were placed, then i grouped them, with the option 'Group selected'.
So except for this part of your code, there rest is exactly the same. But each time i try to scroll down and up, even with this last code, i have the same result as in the screenshot in the iPad simulator. So the first row is disappearing!

Do you think that this is concerning with the fact that i am not creating the group by code in runtime?
Because for the rest i think now is the same as your code. Or maybe as i created for iPhone and with the option "showAll" of the fullScreenMode?

Regards,
fko

LiveCode Forums.

avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation

Re: avoid button deformation