From iPhone retina to iPhone non-retina

[Mag]

Hi all,

I created a stack for iPhone retina, all (controls, images etc) are at 2x size. I run this stack in a retina iPhone and all works great. I use this handler in preOpen stack:

Code: Select all

   if the environment is mobile then 
           if iphoneDeviceScale() is "2" then --    Returns 2 on a retina display, 1 otherwise 
                   iphoneUseDeviceResolution true, true -- Sets whether the full resolution of high-resolution devices is to be used
           end if
   end if

I saw some LiveCode Academy great lessons and I learnt that I can adapt the stack size via onResizeStack handler combined with individual object and image size settings, and I will follow this way to port the stack on Android devices. Now the question: I will create a sub stack to run in non-retina iPhones, is there a way to reduce the stack size by 50% in an automatic way?

[jmburnod]

Hi mag,

is there a way to reduce the stack size by 50% in an automatic way

Why not something like that ?

Code: Select all

on initDim
   set the uMyWidth of this stack to the width of this stack
    set the uMyHeight of this stack to the height of this stack
end initDim

 on DoResizeStack pFactor
    put the uMyWidth of this stack into tW
    put the uMyHeight of this stack into tH
    put round(tW*pFactor) into tWd
    put round(tH*pFactor) into tHd
    set the width of this stack to tWd
    set the height of this stack to tHd
end DoResizeStack

Best regards
Jean-Marc

[Mag]

Hi Jean-Marc, thank you so much for your replay, I admit that I have difficulties to understand the code you posted... could you explain it a bit, so I see if I can understand?

[jmburnod]

Hi Mag,
I put a little stack in attachment with comments in the scripts
I hope this help
Kind regards
Jean-Marc

[Mag]

Hi jmburnod, thank you so much for the stack, very useful and illuminating. This will let me to resize the "window" of the stack. What about to resize its controls. Actually I need to run a stack I made in 640x960 pixel in a device which is 320×480 resolution.

[Simon]

Here the link to the same sizing issue.
http://forums.runrev.com/phpBB2/viewtop ... ers#p65794
Once you get to nabble watch the video then get Chip's lib.

Simon

[Mag]

Thank you so much Simon. Very interesting topic. So I have now solve the problem by scripting some code. It seems to work fine, but it's certainly far to be perfect. I post it here so maybe can be useful to somebody have the same problem.

CARD SCRIPTS

Code: Select all

on preOpenCard
   if the environment is "mobile" then
      createCardControlsList
      scaleControls
   end if
end preOpenCard

Code: Select all

on createCardControlsList
   put empty into cardControlList
   
   put "106,43,190,66," into cardControlList ["backButton"] -- this list is hardcoded to date (see below)
   put "933,258,402,464,14" into cardControlList ["Credits"]
   put "325,166,410,120," into cardControlList ["logo"]
   
end createCardControlsList

STACK SCRIPTS

Code: Select all

on scaleControls
   if the environment is mobile then
      if iphoneDeviceScale() is "2" then -- Returns 2 on a retina display, 1 otherwise 
         put "1" into scaleRate
         put "@2x" into at2xString -- used to create name of images when dimamically created on scripts
      else -- non-retina
         put "0.5" into scaleRate
         doScaleControls scaleRate -- 0.5 because the stack was created in @2x
         put "" into at2xString 
         -- send "resizeImages" to card "images" of stack "resources" -- used for Android where you want to resize an object to an arbitrary size
         send "useNonRetinaImages" to card "images" of stack "resources" -- used for iOS where you use retina or non-retina sizes (e.g. "image@2x" or just "image")
      end if
   end if
end scaleControls

command doScaleControls pScale   
   repeat for each key tKey in cardControlList do
      set the location of control tKey to item 1 of cardControlList [tKey] * pScale & comma & item 2 of cardControlList[tKey] * pScale
      set the width of control tKey to item 3 of cardControlList[tKey] * pScale
      set the height of control tKey to item 4 of cardControlList[tKey] * pScale
      if item 5 of cardControlList[tKey] <> "" then -- some controls have an item for text sizes
         set the textSize of control tKey to item 5 of cardControlList[tKey] * pScale -- scale
      end if
   end repeat
end doScaleControls

IMAGES SUBSTACK SCRIPTS
global imagesResized, scaleRate

Code: Select all

on resizeImages -- for Android use
   if imagesResized = "YES" then exit resizeImages -- to resize just one time
   
   repeat with x = 1 to the number of images of me
      put the short name of image x of me into tImageName
      put the width of image tImageName of me into tWidth
      put the height of image tImageName of me into tHeight
      set the width of image tImageName of me to tWidth * scaleRate
      set the height of image tImageName of me to tHeight * scaleRate
      set the lockLocation of image tImageName to true -- to avoid image backs at it's original size when navigate between cards
   end repeat
   
   put "YES" into imagesResized
end resizeImages

Code: Select all

on useNonRetinaImages -- then we will use non-retina images
   if imagesResized = "YES" then exit useNonRetinaImages

   set the icon of button "myNav" of cd "info" of stack "myStack" to "navBar" -- by default button has "navBar@2x" as icon button, here we set the non-retina one
   set the icon of button "backButton" of cd "info" of stack "myStack" to "navBack"
   set the icon of button "logo" of cd "info" of stack "myStack" to "Logo"

   put "YES" into imagesResized
end useNonRetinaImages

UTILITY BUTTON SCRIPT (to use in each card to create the list of controls) -- should to be replaced with some repeat statements in "createCardControlsList" handler in future versions

Code: Select all

on mouseUp
   repeat with x = 1 to the number of controls of the current card
      put the short name of the control x into tControl
      
      put the name of the control x of the current card into kindCheck
      if the first word of kindCheck <> "group" then -- don't need to resize groups
         put "put"&&quote & (loc of control tControl) &","& (width of control tControl) &","& (height of control tControl) &","& (textSize of control tControl) &quote&& "into cardControlList ["&quote&tControl&quote&"]" &return after controlList
      end if
      
      put controlList -- copy this and paste in the createCardControlsList handler
   end repeat
end mouseUp

PS
BTW, to dimamically set a button icon, I use a code like this:

Code: Select all

set icon of button "imageAction" of cd "content" to "action" & at2xString

at2xString can contain "@2x" or "" based on the retina or non-retina screen.

[reelstuff]

Very interesting subject, I know that in the past dealing with a Universal with different sized graphics, you would just manage those resources, never thought about resizing dynamically depending on the type of device used, this has probably all changed since this is an older topic.

[Mag]

OK, made some changes to have a more compact code.

Code: Select all

on mouseUp
   put 0.9 into scaleRate -- retina is 1, non-retina is 0.5
   
   if scaleRate <> "1" then -- if 1 the controls don't need to be resized
      repeat with x = 1 to the number of controls of the current card
         
         -- exclude groups
         if the name of the control x contains "group" then next repeat
         
         -- loc
         put item 1 of the loc of control x into tX
         put item 2 of the loc of control x into tY
         set the loc of control x to (tX*scaleRate,tY*scaleRate)
         
         -- width and height
         set the width of control x to the width of control x*scaleRate
         set the height of control x to the height of control x*scaleRate
         
         -- text size
         set the textSize of control x to the textSize of control x*scaleRate
         
         -- line size
         set the lineSize of control x to the lineSize of control x*scaleRate
      end repeat
   end if
end mouseUp

I attach a stack sample.