Friday, March 4, 2011

Template Sizes

What size should your new templates be?

Each “Cell” in QwikTouchPro is 100px x 100px.

If you want a template that is 1024x768, create a template that is 10 Columns by 7 Rows and you will have a template that is 1,000 x 700 (QwikTouchPro will take care of the missing 24 & 78 Pixels).

Dynamic Template Sizing
By default, all QwikTouchPro Templates will stretch/squeeze and scale to fit any resolution, even accounting for taskbar visibility and displaying in portrait mode.

If you create a template for an 800x600 display (let’s say 8 columns and 6 rows), it will display at 800x600 without any scaling.
8 Columns x 100 pixels = 800 Pixels Wide
6 Rows x 100 pixels = 600 Pixels High

If you display that same Template on your 1920x1080 Display, QwikTouchPro will have to scale it –
The width will stretch from 800px to 1920px, and the height will stretch from 600px to 1080px.

If QwikTouchPro will scale the templates anyway, why does it matter?

The main reason is Aspect Ratio-

If you make a Square Template (10x10 for e.g.) and display it on a widescreen monitor (16:9) it will no longer be square.  All of your QwikTouchPro Controls will have to squish and scale to fit the new aspect ratio, which is probably not desired.

In my experience, the aspect ratio does not have to be perfect.

Let’s do some examples for a 1024x768 Display -
10 Columns x 7 Rows = 1,000x700 = Very close to our target resolution and Aspect Ratio.
10 Columns x 8 Rows = 1,000x800 = Very close to our target resolution and Aspect Ratio.
10 Columns x 7.6 Rows = 1,000x760 = VERY close to our target resolution and Aspect Ratio.

If you view all 3 of these templates at once you will see the subtle differences in aspect ratio - 1 template will be a little fatter, one a little thinner, and one will be just right (10x7.6).

The main thing is, all 3 templates will appear to be the correct Aspect Ratio to the naked eye.

What if you want more Keys on your template?
Add more rows and/or columns, just keep the aspect ratio.

To calculate the aspect ratio, but I simply divide the Width of my Display by the Height (1024 / 768 = 1.3333333).

I know the height of my template needs to be 1.333 x the Width to maintain my aspect ratio.
If I want 11 Rows, I need to have (11 * 1.333) = 14.7 Columns.

I can choose 14 columns, 15 columns, 14.7 Columns, and probably even 13 or 16 columns and still maintain an aspect ratio that’s “good enough”.

No comments:

Post a Comment