Difference between revisions of "Tutorials webOS Porting Older App/example"

From WebOS Internals
Jump to navigation Jump to search
(4)
(5)
Line 9: Line 9:
 
So, the plan is, to resize the individual dot images from 19px each to 45px each.  then, we can have a 1px border between each dot image, totaling to 316 px, allowing a 2px border on each side.   
 
So, the plan is, to resize the individual dot images from 19px each to 45px each.  then, we can have a 1px border between each dot image, totaling to 316 px, allowing a 2px border on each side.   
  
You can use any graphic resizing program you like.  On windows irfan view makes this very simple.  Here is the before for a blue peg: [[Image: small_blue_peg.png]] and the resized 45px peg [[Image: large_blue_peg.png]].
+
You can use any graphic resizing program you like.  On windows irfan view makes this very simple.  Here is the before for a blue peg: [[Image: small_blue_peg.gif]] and the resized 45px peg [[Image: large_blue_peg.png]]. While we're at it, we convert from gif to png.

Revision as of 15:56, 10 August 2009

In this example we will be porting an older javascript application to the Pre. You can see the original, and its source code at The Javascript Source.

This is the classic game "Pegged" or "Solitaire" It involves jumping pegs and attempting to end up with just one left.

Pegged.png

Our first concern with this program will be layout, graphics and size. As written the board is 188 px wide. Within the blue square the cross is 156 px wide. That means that the tap targets for the cross are only about 22px square. The images themselves are 19px. That's far smaller than Palm's suggested size of 40px.

If we eliminate the blue border, and resize the cross to fill the pre screen, seven dots horizontally will use 320/7 = 53 dots per square. More than big enough. if we use 45 dots per square, that's 310 px and gives us space for borders.

So, the plan is, to resize the individual dot images from 19px each to 45px each. then, we can have a 1px border between each dot image, totaling to 316 px, allowing a 2px border on each side.

You can use any graphic resizing program you like. On windows irfan view makes this very simple. Here is the before for a blue peg: Small blue peg.gif and the resized 45px peg Large blue peg.png. While we're at it, we convert from gif to png.