resources/scripts/simple-image-wall.js.in

   1 // Image Wall example
   2 //
   3 // Example usage of Dali API
   4 //
   5
   6 var imageDir = "@DEMO_STYLE_IMAGE_DIR@";
   7
   8 var NUMBER_OF_IMAGES = 40; // for now use 16 ( demo files go up to 30)
   9 var VIDEO_WALL_ROWS = 7; // use 3 rows for the video wall
  10 var VIDEO_WALL_COLUMNS = 12; // use 12 columns for the video wall
  11 var VIDEO_WALL_ITEM_SIZE = 128; // width / height of a item in the video wall
  12 var BORDER_SIZE = 5;
  13 var VIDEO_WALL_ITEM_SIZE_NO_BORDER = VIDEO_WALL_ITEM_SIZE - BORDER_SIZE;
  14 var VIDEO_WALL_WIDTH = VIDEO_WALL_COLUMNS * VIDEO_WALL_ITEM_SIZE;
  15 var VIDEO_WALL_HEIGHT = VIDEO_WALL_ROWS * VIDEO_WALL_ITEM_SIZE;
  16
  17 var daliApp = {};
  18
  19 var wallRootActor; // the root actor of the video wall
  20
  21 // we want demo images of format gallery-small-1.jpg
  22 daliApp.getFileName = function(index) {
  23     fileName = "gallery-small-" + (index+1) + ".jpg";
  24     return fileName;
  25 }
  26
  27 daliApp.createRootActor = function() {
  28     wallRootActor = new dali.Actor();
  29     wallRootActor.parentOrigin = dali.CENTER;
  30     wallRootActor.anchorPoint = dali.CENTER;
  31     dali.stage.add(wallRootActor);
  32 }
  33
  34 daliApp.getWallActorIndex = function(x, y) {
  35     return x + y * VIDEO_WALL_COLUMNS;
  36 }
  37
  38 daliApp.createActors = function() {
  39     daliApp.createRootActor();
  40
  41     for (y = 0; y < VIDEO_WALL_ROWS; ++y) {
  42         for (x = 0; x < VIDEO_WALL_COLUMNS; ++x) {
  43
  44             var actorIndex = daliApp.getWallActorIndex(x, y);
  45             var imageView = new dali.Control("ImageView");
  46
  47             // wrap image index between 0 and NUMBER_OF_IMAGES
  48             var imageIndex = actorIndex % NUMBER_OF_IMAGES;
  49
  50             imageView.image = imageDir + daliApp.getFileName(imageIndex);
  51
  52             imageView.parentOrigin = dali.CENTER;
  53             imageView.anchorPoint = dali.CENTER;
  54             imageView.size = [VIDEO_WALL_ITEM_SIZE_NO_BORDER, VIDEO_WALL_ITEM_SIZE_NO_BORDER, 1.0]; // start with zero size so it zooms up
  55
  56             var xPosition = x * VIDEO_WALL_ITEM_SIZE;
  57             //  as the middle the wall is at zero (relative to wallRootActor), we need to subtract half the wall width.
  58             // + add half item size because the item anchor point is the center of the wallRootActor.
  59             xPosition = xPosition - (VIDEO_WALL_WIDTH / 2) + (VIDEO_WALL_ITEM_SIZE / 2);
  60
  61             var yPosition = y * VIDEO_WALL_ITEM_SIZE;
  62             yPosition = yPosition - (VIDEO_WALL_HEIGHT / 2) + (VIDEO_WALL_ITEM_SIZE / 2);
  63
  64             imageView.position = [xPosition, yPosition, 0.0];
  65
  66             // Add to the video wall root actor.
  67             wallRootActor.add(imageView);
  68         }
  69     }
  70 }
  71
  72 function Initialise() {
  73     daliApp.createActors();
  74 }
  75
  76 Initialise();