ScaleFM example for Symbian

Files:

Overview

Welcome to Radio ScaleFM!

This is an application based on an imaginary "internet radio" application, where the radio stations have frequencies that happen to correspond to the current screen DPI.

This application illustrates how to implement the Scalability Guidelines.

Instructions

On desktop, you can press the options toolbar button to launch the display selection dialog to change screen Device Profile in the desktop environment (symbian config). This will ensure that you are using screen-specific Application Style. Note that this feature doesn't function on a hardware device (you can't change the screen size of the device!)
You can compare the "scalable" solution to the "per-resolution style" solution. If you press the "Fallback" button, the default application style measurements will be used. Toggle the button to illustrate the differences between the default layout and the per-resolution measurements. Note that you would expect the layouts to look a little "better" when using the per-resolution style, compared to the fallback values, as the measurements have been tuned specifically for each Device Profile, rather than using resolution dependent measurements and platform style alone.
The current Screen device profile, category and DPI are also shown in the UI.
You can dynamically drag the outer window border to see the scalability features in action (such as dynamic button orientation). But this will mean that the per-resolution measurement files will not be found, and so the Application Style falls back to the "scalable" measurements, until you select a specific device profile from the settings window. See also the fallback layouts screenshots section below which illustrates the flexibility of the layout definitions.
You can press the right and left arrows to change the current DPI values (this is a desktop only feature).
The red square represents 10 x 10 mm area. If you press on the "Magnify" button the UI is scaled (down) to simulate the physical size. This feature is using just a simple scale transformation, so the result doesn't look crisp on the desktop screen, but the relative sizes between different screen configurations are correct. This feature is misleading when running on device hardware (this is a desktop only feature).
Press the "Stations" button to switch to a list view. Notice how the list item text also scales, even in the fallback layouts (because it is using the Platform Style).
Select a large screen size (or reduce the screen DPI to around 100) to switch to the "tablet" simulated layout definition. Note, the existence of this feature should not be considered indicative of device availability, it is included to illustrate how different Top level layout definitions could theoretically be implemented.

Screen Shots

Device Profiles

This shows the ScaleFM application running in the Device Profile for 640x360 resolution, at 210 DPI, using the screen specific Application Style for that Device Profile:

[Missing image example-scalefm_640_360_210_prt.png]

[Missing image example-scalefm_640_360_210_lsc.png]

This shows an alternative Device Profile for a smaller device. The screenshot looks larger because there are more pixels, but the higher DPI means that the physical size of the screen is smaller. You can also see that the aspect ratio is different.

[Missing image example-scalefm_640_480_325_prt.png]

[Missing image example-scalefm_640_480_325_lsc.png]

Fallback Layouts

The following images illustrate the effect of changing the containing window size, using the fallback layouts, demonstrating the range of different layout configurations at a particular DPI value.

Note that the Magnify feature has also been used here to show the approximate equivalent size at a desktop monitor DPI.

[Missing image example-scalefm_960_360_210_wid_mag.png]

[Missing image example-scalefm_640_360_210_lsc_mag.png]

[Missing image example-scalefm_640_640_210_sqr_mag.png]

[Missing image example-scalefm_640_360_210_prt_mag.png]

[Missing image example-scalefm_960_360_210_tal_mag.png]

Contents