node-addon/examples/scroll-view.js

   1  var window= {
   2            x:0,
   3            y:0,
   4            width:1920,
   5            height:1080,
   6            transparent: false,
   7            name:'scrollview-example'
   8  };
   9
  10  var viewMode={
  11        'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
  12        'stereoBase': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
  13  };
  14
  15  var options= {
  16     'window': window,
  17     'viewMode': viewMode,
  18  }
  19
  20 //desktop
  21 //var dali = require('../build/Release/dali')( options );
  22
  23 //target
  24 var dali = require('dali')( options );
  25
  26 var stageSize;
  27 var scrollView;
  28 var scrollBar;
  29
  30 var imageDir = "./images/";
  31
  32 var daliApp = {};
  33
  34 daliApp.createScrollView = function() {
  35
  36   // Create a scroll view
  37   scrollView = new dali.Control("ScrollView");
  38   stageSize = dali.stage.getSize();
  39   scrollView.size = [stageSize.x, stageSize.y, 0.0];
  40   scrollView.parentOrigin = dali.CENTER;
  41   scrollView.anchorPoint = dali.CENTER;
  42
  43   dali.stage.add( scrollView );
  44
  45   // Add actors to a scroll view with 4 pages
  46   var pageRows = 1;
  47   var pageColumns = 3;
  48   for(var pageRow = 0; pageRow < pageRows; pageRow++)
  49   {
  50     for(var pageColumn = 0; pageColumn < pageColumns; pageColumn++)
  51     {
  52       var pageActor = new dali.Control();
  53       pageActor.widthResizePolicy = "FILL_TO_PARENT";
  54       pageActor.heightResizePolicy = "FILL_TO_PARENT";
  55       pageActor.parentOrigin = dali.CENTER;
  56       pageActor.anchorPoint = dali.CENTER;
  57       pageActor.position = [pageColumn * stageSize.x, pageRow * stageSize.y, 0.0];
  58       pageActor.name = "pageActor" + pageColumn;
  59
  60       // Add images in a 5x4 grid layout for each page
  61       var imageRows = 4;
  62       var imageColumns = 5;
  63       var margin = 10.0;
  64       var imageSize = [(stageSize.x / imageColumns) - margin, (stageSize.y / imageRows) - margin, 0.0];
  65
  66       for(var row = 0; row < imageRows; row++)
  67       {
  68         for(var column = 0; column < imageColumns;column++)
  69         {
  70           var imageView = new dali.Control("ImageView");
  71           var imageId = (row * imageColumns + column) % 2 + 1;
  72           imageView.image = imageDir + "image-" + imageId + ".jpg";
  73           imageView.parentOrigin = dali.CENTER;
  74           imageView.anchorPoint = dali.CENTER;
  75           imageView.size = imageSize;
  76           imageView.position = [ margin * 0.5 + (imageSize[0] + margin) * column - stageSize.x * 0.5 + imageSize[0] * 0.5,
  77                                  margin * 0.5 + (imageSize[1] + margin) * row - stageSize.y * 0.5 + imageSize[1] * 0.5,
  78                                  0.0 ];
  79           pageActor.add(imageView);
  80           var position = imageView.position;
  81         }
  82       }
  83
  84       scrollView.add( pageActor );
  85     }
  86   }
  87
  88   // Set scroll view to have 3 pages in X axis and allow page snapping,
  89   // and also disable scrolling in Y axis.
  90   var scrollMode = {
  91                      xAxisScrollEnabled  : true,
  92                      xAxisSnapToInterval : stageSize.x,                // Define the snap points
  93                      xAxisScrollBoundary : stageSize.x * pageColumns,  // i.e. Define 3 pages
  94                      yAxisScrollEnabled  : false
  95                    }
  96
  97   scrollView.setScrollMode(scrollMode);
  98
  99   // Create a horizontal scroll bar in the bottom of scroll view (optional)
 100   scrollBar = new dali.Control("ScrollBar");
 101   scrollBar.parentOrigin = dali.BOTTOM_LEFT;
 102   scrollBar.anchorPoint = dali.TOP_LEFT;
 103   scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
 104   scrollBar.heightResizePolicy = "FILL_TO_PARENT";
 105   scrollBar.orientation = [0, 0, 270];
 106   scrollBar.scrollDirection = "Horizontal";
 107   scrollView.add(scrollBar);
 108
 109   // Connect to the onRelayout signal
 110   scrollView.on("onRelayout", daliApp.onScrollViewRelayout);
 111 }
 112
 113 daliApp.onScrollViewRelayout = function( button ) {
 114
 115   // Set the correct scroll bar size after size negotiation of scroll view is done
 116   scrollBar.size = [0.0, scrollView.getRelayoutSize(dali.DIMENSION_WIDTH), 0.0 ];
 117 }
 118
 119 function startup()
 120 {
 121   daliApp.init();
 122 }
 123
 124 daliApp.init = function()
 125 {
 126   daliApp.createScrollView();
 127 }
 128
 129 startup();
 130