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