FX

package displayshelf;

import javafx.animation.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.image.*;
import javafx.scene.input.*;

var images = [
    "DSC_0026_2.jpg",
    "DSC_0040_2.jpg",
    "DSC_0068_2.jpg",
    "DSC_0083_2.jpg",
    "DSC_0094_2.jpg",
    "DSC_0129_2.jpg",
    "DSC_0152_2.jpg",
    "DSC_0162_2.jpg",
    "DSC_0172_2.jpg",
    "DSC_0178_2.jpg",
    "DSC_0199_2.jpg",
    "DSC_0277_2.jpg",
    "DSC_0290_2.jpg",
    "DSC_0425_2.jpg"
    ];

var half = images.size()/2;

var shelf:DisplayShelf;
shelf = DisplayShelf {
    spacing: 30
    scaleSmall: 0.6
    leftOffset: -55
    rightOffset: 55
    items: 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;
    }
    
    onKeyPressed:function(e:KeyEvent):Void {
        if(e.code == KeyCode.VK_LEFT) {
            shelf.shift(1);
        }
        if(e.code == KeyCode.VK_RIGHT) {
            shelf.shift(-1);
        }
    }
}

var width = 320;
shelf.translateX = width/2 - 100/2;
shelf.translateY = (240-100)/2;


var stage = Stage {
    title: "Display Shelf Mobile"
    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
        ]
    }
}

shelf.requestFocus();
stage;