node-addon/examples/item-view.js

   1  var window= {
   2            x:0,
   3            y:0,
   4            width:1920,
   5            height: 1080,
   6            transparent: false,
   7            name:'itemview-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 items = [];
  30 var button;
  31 var stageSize;
  32
  33 var itemView;
  34 var itemFactory;
  35
  36 var currentLayoutIndex = 0;
  37 var totalItemCount = 100;
  38
  39 var imageDir = "./images/";
  40
  41 var daliApp = {};
  42
  43 daliApp.createItemView = function() {
  44
  45   // Create item view data
  46   var itemViewData = [];
  47   for (var itemId = 0; itemId < totalItemCount; itemId++)
  48   {
  49     var data = {};
  50     data["template"] = "template-item-list"; // Create items initially with list template
  51     data["icon_path"] = imageDir + "icon-" + itemId % 3 + ".png";
  52     data["title_text"] = "Item " + itemId;
  53     itemViewData[itemId] = data;
  54   }
  55
  56   // Create item factory and set the data
  57   itemFactory = new dali.ItemFactory();
  58   itemFactory.jsonTemplateFile = "./scripts/item-template.json";
  59   itemFactory.data = itemViewData;
  60
  61   // Create item view
  62   stageSize = dali.stage.getSize();
  63   itemView = new dali.Control("ItemView", itemFactory);
  64   itemView.size = [stageSize.x, stageSize.y, 0.0];
  65   itemView.parentOrigin = dali.CENTER_LEFT;
  66   itemView.anchorPoint = dali.CENTER_LEFT;
  67   itemView.refreshInterval = 4.0;
  68
  69   // Add item view to the stage
  70   dali.stage.add( itemView );
  71
  72   // Create scroll bar for item view
  73   var scrollBar = new dali.Control("ScrollBar");
  74   scrollBar.parentOrigin = dali.TOP_RIGHT;
  75   scrollBar.anchorPoint = dali.TOP_RIGHT;
  76   scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
  77   scrollBar.heightResizePolicy = "FILL_TO_PARENT";
  78   itemView.add(scrollBar);
  79
  80   // Add the list and grid layouts
  81   itemView.addLayout(dali.ITEM_LAYOUT_LIST); // layout index 0
  82   itemView.addLayout(dali.ITEM_LAYOUT_GRID); // layout index 1
  83
  84   // Set custom item size for list layout
  85   itemView.setItemSize(0, [stageSize.x, stageSize.y * 0.1, 0.0]);
  86
  87   // Set custom item size for grid layout
  88   var layoutMargin = 120;
  89   itemView.setItemSize(1, [(stageSize.x - layoutMargin) / 4, stageSize.y * 0.2, 0.0]);
  90
  91   // Activate the list layout
  92   itemView.activateLayout(0, itemView.size);
  93
  94   // Create button for layout switching
  95   button = new dali.Control("PushButton");
  96   button.size = [100.0, 60.0, 0.0];
  97   button.position = [-20.0, 20.0, 0.0];
  98   button.parentOrigin = dali.TOP_RIGHT;
  99   button.anchorPoint = dali.TOP_RIGHT;
 100   button.labelText = "Switch";
 101   dali.stage.add( button );
 102
 103   // Connect a signal callback to button pressed signal
 104   button.on("pressed", daliApp.buttonPressedEvent);
 105 }
 106
 107 daliApp.buttonPressedEvent = function( button ) {
 108
 109   // Calculate the layout index for the next layout to switch to
 110   currentLayoutIndex++;
 111   currentLayoutIndex = currentLayoutIndex % itemView.getLayoutCount();
 112
 113   // Activate the next layout
 114   itemView.activateLayout(currentLayoutIndex, [stageSize.x, stageSize.y, 0.0], 0.0);
 115
 116   // Change the item template in item view data as we want to change the layout of the items
 117   var data = itemFactory.data;
 118   for (var itemId = 0; itemId < totalItemCount; itemId++)
 119   {
 120     if(currentLayoutIndex == 0)
 121     {
 122       // List layout
 123       data[itemId]["template"] = "template-item-list"; // Create items with list template
 124     }
 125     else
 126     {
 127       // Grid layout
 128       data[itemId]["template"] = "template-item-grid"; // Create items with grid template
 129     }
 130   }
 131   itemFactory.data = data;
 132 }
 133
 134 function startup()
 135 {
 136   daliApp.init();
 137 }
 138
 139 daliApp.init = function()
 140 {
 141   daliApp.createItemView();
 142 }
 143
 144 startup();
 145