Create Array of Images - google-apps-script

Question

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;
}

Answer 1

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;
}