resources/scripts/simple-image-wall.js

   1 // Image Wall example
   2 //
   3 // Example usage of Dali API
   4 //
   5 //
   6 //
   7 // get the dali-demo image directory path
   8 // hard code for the device to /usr/apps/com.samsung.dali-demo/images/
   9 var imageDir = dali.DALI_DATA_DIRECTORY;
  10
  11 if (imageDir != "/usr/share/dali//") {
  12     imageDir = imageDir.substring(0, imageDir.lastIndexOf("dali/"));
  13     imageDir += "com.samsung.dali-demo/images/";
  14 } else // on device
  15 {
  16     imageDir = "/usr/apps/com.samsung.dali-demo/images/";
  17 }
  18
  19
  20 var NUMBER_OF_IMAGES = 40; // for now use 16 ( demo files go up to 30)
  21 var DEMO_IMAGES = []; // array to store Dali Images
  22 var VIDEO_WALL_ACTORS = []; // array to store Image actors
  23 var VIDEO_WALL_ROWS = 7; // use 3 rows for the video wall
  24 var VIDEO_WALL_COLUMNS = 12; // use 12 columns for the video wall
  25 var VIDEO_WALL_TOTAL_ITEMS = VIDEO_WALL_COLUMNS * VIDEO_WALL_ROWS; // total items
  26 var VIDEO_WALL_ITEM_SIZE = 128; // width / height of a item in the video wall
  27 var BORDER_SIZE = 5;
  28 var VIDEO_WALL_ITEM_SIZE_NO_BORDER = VIDEO_WALL_ITEM_SIZE - BORDER_SIZE;
  29 var VIDEO_WALL_WIDTH = VIDEO_WALL_COLUMNS * VIDEO_WALL_ITEM_SIZE;
  30 var VIDEO_WALL_HEIGHT = VIDEO_WALL_ROWS * VIDEO_WALL_ITEM_SIZE;
  31
  32 var daliApp = {};
  33
  34 var wallRootActor; // the root actor of the video wall
  35
  36 // we want demo images of format gallery-small-1.jpg
  37 daliApp.getFileName = function(index) {
  38     fileName = "gallery-small-" + (index+1) + ".jpg";
  39     return fileName;
  40 }
  41
  42 // load the images
  43 daliApp.loadImages = function() {
  44     for (index = 0; index < NUMBER_OF_IMAGES; ++index) {
  45         fileName = imageDir + daliApp.getFileName(index);
  46         DEMO_IMAGES[index] = new dali.ResourceImage( { url:fileName } );
  47     }
  48 }
  49
  50 daliApp.createRootActor = function() {
  51     wallRootActor = new dali.Actor();
  52     wallRootActor.parentOrigin = dali.CENTER;
  53     wallRootActor.anchorPoint = dali.CENTER;
  54     dali.stage.add(wallRootActor);
  55 }
  56
  57
  58
  59 daliApp.getWallActorIndex = function(x, y) {
  60     return x + y * VIDEO_WALL_COLUMNS;
  61 }
  62
  63 daliApp.createActors = function() {
  64     daliApp.createRootActor();
  65
  66     for (y = 0; y < VIDEO_WALL_ROWS; ++y) {
  67         for (x = 0; x < VIDEO_WALL_COLUMNS; ++x) {
  68
  69             var actorIndex = daliApp.getWallActorIndex(x, y);
  70             var imageActor = new dali.ImageActor();
  71
  72             // wrap image index between 0 and NUMBER_OF_IMAGES
  73             var imageIndex = actorIndex % NUMBER_OF_IMAGES;
  74
  75             imageActor.setImage(DEMO_IMAGES[imageIndex]);
  76
  77             imageActor.parentOrigin = dali.CENTER;
  78             imageActor.anchorPoint = dali.CENTER;
  79             imageActor.size = [VIDEO_WALL_ITEM_SIZE_NO_BORDER, VIDEO_WALL_ITEM_SIZE_NO_BORDER, 1.0]; // start with zero size so it zooms up
  80
  81             var xPosition = x * VIDEO_WALL_ITEM_SIZE;
  82             //  as the middle the wall is at zero (relative to wallRootActor), we need to subtract half the wall width.
  83             // + add half item size because the item anchor point is the center of the wallRootActor.
  84             xPosition = xPosition - (VIDEO_WALL_WIDTH / 2) + (VIDEO_WALL_ITEM_SIZE / 2);
  85
  86             var yPosition = y * VIDEO_WALL_ITEM_SIZE;
  87             yPosition = yPosition - (VIDEO_WALL_HEIGHT / 2) + (VIDEO_WALL_ITEM_SIZE / 2);
  88
  89             imageActor.position = [xPosition, yPosition, 0.0];
  90             // store the actor
  91             VIDEO_WALL_ACTORS[actorIndex] = imageActor;
  92
  93             // Add to the video wall root actor.
  94             wallRootActor.add(imageActor);
  95         }
  96     }
  97 }
  98
  99 function Initialise() {
 100
 101     daliApp.loadImages();
 102
 103     daliApp.createActors();
 104
 105
 106 }
 107
 108 Initialise();