Resolution Issue?

[cu3e]

Hello, I created a app with a size of 320x480 pixel. When I test the app on my android phone, its too small?!
Please see attached picture. What did I missed?!

[cu3e]

I just checked the Sheep Herder Game, and getting the same small size. Anybody know a fix?

[webmaster]

Android phones come in various screen resolutions. So far, my research shows that the majority are in the following categories:
* 240x320 -- QVGA -- quite rare, actually.
* 320x480 -- HVGA -- fairly common (older phones)
* 480x800 -- WVGA -- fairly common (newer phones)
* 480x856 -- FWVGA -- Motorola Droid series (fairly popular)

You will either need to target a specific screen resolution, or program using some method to handle layouts for different screen resolutions. I'm personally still working through a method to handle this. (Don't have a "perfect" solution to the problem, yet.) It seems to be a significant complexity that comes with development for mobile devices.

--ForrestD

[Gene]

Check out the Geometry Manager in the User Guide. Also, look into the User Samples and find a developer tool called "NativeSoft Native Geometry." I haven't tried it yet, but it claims to make it easy to configure your program for multiple resolutions.

Also, the LiveCode summer academy webinar series (in progress) has promised to provide a guide to handling multiple resolutions on mobile platforms later on in the series.

Hope this helps! -Gene

[andyh1234]

Ive found the best way is to design for the 480x800 resolution and set the stack to not resizable.

When the app loads on other resolutions it always fires a resizestack call if the device is anything other than 480x800 so you can resize the current stack and its contents.

The following is still 'code in progress', based on some code originally posted by another user and then modified as I find bits that dont work for me, but if placed in the stack you want to resize and that stack is originally 480x800 it takes care of most of the resizing for you automatically. Probably not the best code, but I hope it helps someone.

Andy

Code: Select all

local xScaler, yScaler

on preopenstack
   if the environment is "development" then
      set the height of me to 762 // 800 - 38 for the toolbar
      set the width of me to 480
      set the top of me to 100
   end if
end preopenstack

on resizestack
   put getRatioX() into xScaler
   put getRatioY() into yScaler
   textSizeSet the long name of this stack
   loadRects the long name of this stack
end resizestack

function getRatioX
   set the itemdel to comma
   put item 3 of the working screenRect into tWidth
   put tWidth / 480 into tRatio
   return tRatio
end getRatioX

function getRatioY
   set the itemdel to comma
   put item 4 of the working screenRect into tHeight
   put tHeight / 800 into tRatio
   return tRatio
end getRatioY

command textSizeSet tStack
   
   repeat with y = 1 to the number of cards of tStack
      repeat with x = 1 to the number of fields of card y of tStack
         if the TextSize of field x of card y of tStack > 0 then
            set the textSize of field x of card y of tStack to the TextSize of field x of card y of tStack * xScaler 
         end if
      end repeat
      repeat with x = 1 to the number of buttons of card y of tStack
         if the TextSize of button x of card y of tStack > 0 then
            set the textSize of button x of card y of tStack to the TextSize of button x of card y of tStack * xScaler 
         end if
      end repeat
   end repeat
   
end textSizeSet

command loadRects tStack
   
      local tRect
      put 2 into tDiv     
      repeat with y = 1 to the number of cards of tStack
         repeat with x = 1 to the number of controls of card y of tStack
            if the long id of control x of card y of tStack begins with "group" then
               set the margins of  long id of control x of card y of tStack to 0
               next repeat
            end if
            if the long id of control x of card y of tStack contains "graphic" then

               set the roundRadius of control x of card y of tStack to (the roundRadius of control x of card y of tStack * xScaler)
            end if
            
            put the rect of control x of card y of tStack into tRect
            put item 1 of tRect * xScaler into item 1 of tRect
            put item 2 of tRect * yScaler into item 2 of tRect
            put item 3 of tRect * xScaler into item 3 of tRect
            put item 4 of tRect * yScaler into item 4 of tRect
            set the rect of control x of card y of tStack to tRect          
         end repeat
      end repeat 

end loadRects

[cu3e]

Thank you all!

[webmaster]

I posted a working example of one method of handling multiple screen resolutions in the following post:
http://forums.runrev.com/viewtopic.php? ... 58&start=0

There are a number of approaches to handling this, and I'm sure different solutions are appropriate to various types of moblie apps.

[cu3e]

I posted a working example of one method of handling multiple screen resolutions in the following post:
http://forums.runrev.com/viewtopic.php? ... 58&start=0

There are a number of approaches to handling this, and I'm sure different solutions are appropriate to various types of moblie apps.

Hello, why cant I see that topic?

"Information

You are not authorised to read this forum."

[webmaster]

Sorry... I forgot that was posted to the Summer Academy forum that not everyone has access to see.

Repost below...

----------

I've been hammering away at a "simple" but effect method for detecting screen size and orientation and adjusting the card layouts to match. I've got this proof-of-concept method working and so I thought I'd share.

http://www.curiositi.com/filestoshare/S ... xample.zip (288 kb)

I took some ideas from another similar method posted by a developer in the main forums. His method was specific to iOS and just a bit different from mine. I am identifying screens by their common screen resolution names -- 320x480 = HVGA, 1024x768 = XGA, etc. This is agnostic of device manufacturer.

The method is basically this:

• The screen resolution and orientation are detected.
• The appropriate "template card" is selected.
• The controls on the "working" card (with all the functional scripts) are adjusted to match the location and size of the same control on the template card.

This method allows you to actually draw the screen layouts at various sizes using the visual editor of the LiveCode IDE. However, all the scripting is kept on the "working" card so that any changes only need to happen in one place (regardless of the number of screen resolutions and orientations you support with your app). The advantage is simplicity of drawing each layout (rather than programatic tweaks to the layout). The trade-off (disadvantage) is the need to create/maintain a "template" card for each screen resolution and orientation.

In this sample stack:

• The stack scripts contains all the code that handles sensing screen changes and redrawing cards based on templates.
• The card scripts contain code specific to handling function of the card (in this example, the ABC keyboard).

Hope this proof of concept is helpful to some of you! I'd be happy to hear suggestions on how to continue improving this method.

[SusanB]

I know this is going to seem horribly ignorant to 99% of those who are following this, but I'll swallow my pride and post anyway.
When I click on the above link, I am presented with a page full of something which I have no idea what it is or what to do with.
I have the same problem with a miniscule app showing up on the android phone. It's cute, and I'm grateful it's finally there, but I'm desperate to figure out how to resize. Any further clarification on what to do with that link would be infinitely appreciated!

[BarrySumpter]

Hi SusanB,

Welcome to the forum and to LiveCode.

This should be a safe place for you to come and post your questions without apology or reprisal.

I use my signature on this forum to let other know where I'm coming from.
You can update your sig if you want to. And no prob if not:
Top Left of this forum page - User Control Panel | Profile | Edit Signature

Could you please reply with a clarification describing the full page of something you're referring to?

I need to know if its the zip file contents or the Adroid app or the LiveCode IDE you're referring to.

Happy to help as best I can.

[BarrySumpter]

Hope this helps any and all who might be following this thread:

LiveCode Getting Started Course
http://www.runrev.com/developers/docume ... rs-course/

The lesson material there is the TickedOff project.
Its got the resizing and paging and maps.
A really nice place to start.

There is a lot of info on this page.
From beginners topics to some really nice intermediate topics.

[SusanB]

Thank you, Barry. When I click on this
http://www.curiositi.com/filestoshare/S ... xample.zip (288 kb)

it opens up to a page of this:

PKI~Ú> Screen_Rotation_Example.livecodeUXª›N‰›Nõì=xÇÒg:F€é=9L3ÄEÝÝ0\° ! [g[ KB’± ˜!Ð;„ÞB @jèÐ[h!@ („öïÞÞI·§;I'/yÏzß›à¹ÝÙ™Ù™ÙÙ¹½»„Ýãå¡R©O ‚(I’gD…Î:ƒ‰L´ëÒû%ˆrí ðêG|FXKÁô¯æ‘ ¤,ƒ´Áf¤-Ýj°ØÉt³žÀd·šàe¤Òí³‰4gÀe"º|sŽLÓÙ(= ®d›ÓFŠÔSéÛHg·[ i9vÊìD‚_RÅ£HÚ2=Çj¥L`dUOvr,zFäXÀv*ÛbHº FÑb¶hþt&=i3¤ Uû°+h”k¶ö3˜2]F°›Él==‹ndÓe;g;bã:†Å˜ÐDZ)‹•²A!ô†ŒŠ‡‘ò±²›­pUy¦‰€ç 9dÔl2æ“&ŠÒ#Móe±µâi†ÔY)Ô)ŒˆÔìëºþâ-”‰¶_ „éž2 0XͦlÈ0ÏÍ¥?¼f‚ÍÀ/(¨ƒI—&8ÇF+7#ÇhÛÌÆd&ÒÐ5Ël¢B]Íz2ÉœêŸ@Ù &?Ї ð—DEÔÀ¸lI›KbºÎH4'ېr!Ý*ÙÆ4Lph·æP4dZS`ê ¾ÎÁÿ`C p‘¥3eRz_ZºÉdÓEÙK3͹”>ž3QÈ ‘Ÿ˜U2@o¦l¦fvz:š#J‰”ݧF‡“²fè€Sp'ì›cÞC¢Èƒü‘NóCS1šFH;ÍâÑî;AYâI0’™Ô‘tVœ*†ŸHd.Ð.˜ +pg`6•nÈ0Pzº©8£¿Ålµ[u»?Ù¸Av¶ŽÔeþ]xÁÅØ `è͹&¯:ŸÚÒuŠ4Rލåìb5dfyì”@e›Pȁ“FÚ]èŒÖsl¯cÓƒ`gGýŒ:4-V:HñF@ff[ÈR°ÆÐìš#ð þÈÌ;Œ]@ öG{oWU—mcuAÇ©, {Ò£•`…¦à Ãí˜Î¥è¦/àˆ,³Ù<†/tMœO(0W2(©@‹³¿%pÀ2((šBLC+ƒ˜-höé@Ÿf¶ÛÍÙ`RÍV=3vÊ!Š²\WBÇš2̬2P›à ò ™ñFŒûc°fLŒ%å[(Î"˜FA!Qï:V¤!ÛÈþ‘úÁ wáÄX!m˜,gœë=½€¥ûçA{碕½p¦áhô¹z)ñà—ÖQÒ_!—æ)5R yà‚¿3ìÒÓ=:Ì„•ýÒ¬”®Ÿ!”G ¸C²ÔS^ºJÍ

To a simple minded person like me, this is downright intimidating

[sturgis]

Right click the link, choose "save as" or it might say save link as.. or something of that nature.

Once its saved, locate the zip file and unzip it to get at the livecode stack files.

[SusanB]

I did do that, but it is an html file, not a livecode app. It can't be downloaded without .html at the end of it.