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