CODEWITHSUNDEEP
google-apps-scriptgoogle-sheets
Manuel303
Manuel303

Reputation: 11

Create Array of Images

I want to create an array of images using createImage() that reads the URLs from a Google Spreadsheet. I want to ignore empty cell values in the Range and also be able to read values on the adjacent column of the URL. Example: URL, Name, Attribute. This is what I have so far but cannot get multiple values in the URL range to load into the different image spaces.

function doGet(e) {
var app= UiApp.createApplication().setTitle('Not Here')  
var abspanel= app.createAbsolutePanel();//.setHeight('100%').setWidth('100%');
var stackpanel=app.createStackPanel();
var grid = app.createGrid(8,8);

var titleLabel= app.createLabel('Not Here');
titleLabel.setStyleAttribute("text-align", "center");
titleLabel.setStyleAttribute("font-size", "135%");
titleLabel.setStyleAttribute("font-weight", "bold");
var insertlabel= app.createLabel('Which Schedule? (Insert Document Key)');
var inserttxtbox=app.createTextBox().setId('txtbox').setName('ttbox').setMaxLength(44);
var loadbtn= app.createButton('Load Pictures').setId('loadbtn');
var resetbtn= app.createButton('Refresh').setId('rbtn').setVisible(false);
var daylabel= app.createLabel('Select Day');
var mon= "P - Mon"
var tues= "P - Tues"
var wed= "P - Wed"
var thurs= "P - Thurs"
var fri= "P - Fri"
var dayListBox= app.createListBox().setWidth('140px').setId('day').setName ('sday')
dayListBox.addItem(mon);
dayListBox.addItem(tues);
dayListBox.addItem(wed);
dayListBox.addItem(thurs);
dayListBox.addItem(fri); 

var image1= app.createImage().setPixelSize(250,250).setId('image1').setVisible(false);
var image2=app.createImage().setPixelSize(250,250).setId('image2').setVisible(false);
var image3=app.createImage().setPixelSize(250,250).setId('image3').setVisible(false);
var image4=app.createImage().setPixelSize(250,250).setId('image4').setVisible(false);
var image5=app.createImage().setPixelSize(250,250).setId('image5').setVisible(false);
var image6=app.createImage().setPixelSize(250,250).setId('image6').setVisible(false);

var loadhandler=app.createServerHandler('loadPics');
loadhandler.addCallbackElement(stackpanel);
loadbtn.addClickHandler(loadhandler);

grid
.setWidget(1,0,insertlabel)
.setWidget(1,1,inserttxtbox)
.setWidget(2,0, daylabel)
.setWidget(2,1, dayListBox)
.setWidget(3,1, loadbtn)
.setWidget(3,2,resetbtn)
.setWidget(4,2,spinner)
.setWidget(5,1, image1)
.setWidget(5,2, image2)
.setWidget(5,3, image3)
.setWidget(6,1, image4)
.setWidget(6,2, image5)
.setWidget(6,3, image6);
abspanel.add(titleLabel);
stackpanel.add(grid);
app.add(abspanel);
app.add(stackpanel);

return app;
}


function loadPics(e){
var app= UiApp.getActiveApplication();
var ss= SpreadsheetApp.openById(e.parameter.ttbox);
var list=ss.getSheetByName(e.parameter.sday);
var row= list.getLastRow()-1;
var values2= list.getRange(2,47,1,1);
var values3= list.getRange(2,48,1,1);
var values4=list.getRange(row,49,1,1).getValues();
var image1=app.getElementById('image1').setVisible(true);
var image2=app.getElementById('image2').setVisible(true);
values4 = values4.split(',');

for(var i=0;i<values4.length;i++){
if (values4[i][0] != '')
image1.setUrl(values4[i]);

}

values4=values4.split(',');
for(var i=0;i<values4.length;i++){
if (values4[i][0] != '')
image2.setUrl(values4[i]);

}

return app;  
}

Upvotes: 0

Views: 549

Answers (1)

Mogsdad
Mogsdad

Reputation: 45720

This version loads all the images as you wish. You'll need to adjust the spreadsheet access to suit you - see the embedded comments.

The images are created as an array, so that they can be populated and added to the grid within a loop. Image IDs are likewise created on the fly, and thus loadPics() can follow a similar pattern. An example of adding the value from the "Name" column as the image title is included.

Edit / Added Bonus: Working spinner, and support for Name & Attributes with pictures.

maxImgs = 6;      // Number of images in grid
colUrl = 0;       // Column containing URL
colName = 1;      // Column containing Name
colAttr = 2;      // Column containing Attributes

function doGet(e) {
  var app = UiApp.createApplication().setTitle('Not Here');
  var abspanel = app.createAbsolutePanel(); //.setHeight('100%').setWidth('100%');
  var stackpanel = app.createStackPanel();
  var grid = app.createGrid(8, 8);

  var titleLabel = app.createLabel('Not Here');
  titleLabel.setStyleAttribute("text-align", "center");
  titleLabel.setStyleAttribute("font-size", "135%");
  titleLabel.setStyleAttribute("font-weight", "bold");
  var insertlabel = app.createLabel('Which Schedule? (Insert Document Key)');
  var inserttxtbox = app.createTextBox().setId('txtbox').setName('ttbox').setMaxLength(44);
  var loadbtn = app.createButton('Load Pictures').setId('loadbtn');
  var resetbtn = app.createButton('Refresh').setId('rbtn').setVisible(false);
  var daylabel = app.createLabel('Select Day');
  var mon = "P - Mon"
  var tues = "P - Tues"
  var wed = "P - Wed"
  var thurs = "P - Thurs"
  var fri = "P - Fri"
  var dayListBox = app.createListBox().setWidth('140px').setId('day').setName('sday')
  dayListBox.addItem(mon);
  dayListBox.addItem(tues);
  dayListBox.addItem(wed);
  dayListBox.addItem(thurs);
  dayListBox.addItem(fri);

  // Borrowed from https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/progress-indicators
  var spinner = app.createImage('https://5079980847011989849-a-1802744773732722657'+
                                '-s-sites.googlegroups.com/site/scriptsexamples/ProgressSpinner.gif')
                                .setVisible(false)
                                .setId('spinner');
  // Client handler for loadbtn will start spinner when button clicked
  // Server handler will stop spinner when done loading pictures
  var loadSpinner = app.createClientHandler()
                  .forTargets(spinner)
                  .setVisible(true);
  loadbtn.addClickHandler(loadSpinner);  

  var loadhandler = app.createServerHandler('loadPics');
  loadhandler.addCallbackElement(stackpanel);
  loadbtn.addClickHandler(loadhandler);

  grid
    .setWidget(1, 0, insertlabel)
    .setWidget(1, 1, inserttxtbox)
    .setWidget(2, 0, daylabel)
    .setWidget(2, 1, dayListBox)
    .setWidget(3, 1, loadbtn)
    .setWidget(3, 2, resetbtn)
    .setWidget(4, 2, spinner);

  for (var img = 0, row = 5; img < maxImgs; img++) {
    var image = app.createImage().setPixelSize(250, 250).setId('image' + img).setVisible(false);
    var imageName = app.createLabel().setId('name'+img).setVisible(false);
    var imageAttr = app.createLabel().setId('attr'+img).setVisible(false);
    var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image);
    grid.setWidget(row + Math.floor(img / 3), 1 + (img % 3), vertPan)
  }
  abspanel.add(titleLabel);
  stackpanel.add(grid);
  app.add(abspanel);
  app.add(stackpanel);

  return app;
}


function loadPics(e) {
    e = {};
    e.parameter = {};
    e.parameter.ttbox = '0AmkSPNhhUowadFMxdDhpaXFlUFdMNkstaUZPdU5mR2c'
    e.parameter.sday = 'P - Mon'
  var app = UiApp.getActiveApplication();
  var ss = SpreadsheetApp.openById(e.parameter.ttbox);
  var list = ss.getSheetByName(e.parameter.sday);
  var data = list.getDataRange().getValues().splice(1); // Get whole spreadsheet, without headers

  for (var row = 0, img = 0; row < data.length && img < maxImgs; row++) {
    var rowData = data[row];
    if (rowData[0] != '') {
      var image = app.getElementById('image' + img);
      var imageName = app.getElementById('name'+img);
      var imageAttr = app.getElementById('attr'+img);

      image.setUrl(rowData[colUrl])
           .setTitle(rowData[colName].toString() === '' ? 'image'+img : rowData[colName])
           .setVisible(true);
      imageName.setText(rowData[colName])
           .setVisible(true);
      imageAttr.setText(rowData[colAttr])
           .setVisible(true);
      img++;
    }
  }

  // Done loading, hide spinner
  app.getElementById('spinner').setVisible(false);
  return app;
}

Screenshot

Upvotes: 1

Related Questions