FX

The original Display Shelf example uses the PerspectiveTransform. This effect is not available on mobile devices but a display shelf like navigation system is still useful to have on smaller screens. This example shows how to modify the DisplayShelf to work on a mobile device.

Exploring the Code

The mobile version of the display shelf is the same as the desktop version with just three changes: adjusting for a smaller screen, using a scale effect to replace the PerspectiveTransform, and changing the background for higher visibility.

Changing the screensize is easy. You just have to put smaller content on the screen. The stage will resize automatically. The DisplayShelf class was written with size control in mind. It has several variables you can tweak to adjust the size and placement of photos on screen: spacing, smallScale, leftOffset and rightOffset. By adjusting these variables you can move the photos closer together on each side, move them closer to the center photo, and change the size of non-center photos. The values you see in Figure 1 create a smaller stage with the photos more tightly packed.

var shelf:DisplayShelf;
shelf = DisplayShelf {
    spacing: 30
    scaleSmall: 0.6
    leftOffset: -55
    rightOffset: 55
    content: bind for(i in images) {
        var item:Item = Item {
            angle: 45
            blocksMouse: true
            position: indexof i - half
            image:Image { url: "{__DIR__}photos/{i}" width: 100 height: 100 }
            shelf: bind shelf
        };
        item;
    }

    

Figure 1: Configuring a DisplayShelf for the Mobile profile

In the original DisplayShelf example the PerspectiveTransform is applied inside of the Item class. For the mobile version I have removed the PerspectiveTransform code completely, as show in Figure 2. The scaling happens automatically inside the DisplayShelf when you set it's smallScale variable (which is 1.0 by default for no-scale).

public class Item extends CustomNode {
    public var position:Integer = 0;
    public var angle = 45.0;
    public var shelf:DisplayShelf;
    public-init var image:Image;
    
    override var onMousePressed = function(e:MouseEvent) {
        shelf.shiftToCenter(this);
    };

    override public function create():Node {
        return Group {
            content: [
                ImageView {
                    image: image
                },
                Rectangle { width: 100 height: 100 
                    stroke: Color.BLACK strokeWidth: 3
                    fill: null }
            ]
        }
    }

}

Figure 2: Item.fx updated for Mobile

These two changes make the DisplayShelf example run on a mobile device, but the photos are still a bit hard to see. In the original version photos would be seen at an angle unless they are in the center. Now they are all seen face on, which makes the edges of the photos hard to see. This problem is further compounded by shrinking the screen to mobile size. To make the photos more visible I added a 3 pixel wide black border around each photo in the Item class (Figure 2, above). I also changed the background gradient to be darker. The black borders combined with the darker gradient make the photos themselves easier to see.

var stage = Stage {
    visible: true
    resizable: false
    scene: Scene {
        content: [
            Rectangle {
                width: width
                height: 240
                fill: LinearGradient {
                    startX: 0 startY: 0
                    endX: 0 endY: 1
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.rgb(150,150,150) }
                        Stop { offset: 0.3 color: Color.rgb(0,0,0)},
                        Stop { offset: 0.7 color: Color.rgb(0,0,0)},
                        Stop { offset: 1.0 color: Color.rgb(150,150,150)},
                    ]
                }
            },
            shelf
        ]
    }
}

Figure 3: a new gradient background