创建图像阵列

Question

我想使用createImage（）从Google电子表格中读取URL来创建一个图像数组。我想忽略范围中的空单元格值，并且能够读取URL的相邻列中的值。示例：URL，名称，属性。 这是我到目前为止，但无法获得URL范围中的多个值加载到不同的图像空间。

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

此版本根据需要加载所有图像。您需要调整电子表格访问权限以适合您 - 查看嵌入的评论。

图像被创建为一个数组，以便它们可以填充并添加到循环内的网格中。图像ID同样可以随时创建，因此loadPics()可以遵循类似的模式。包括将“姓名”列中的值添加为图像标题的示例。

编辑/添加奖金：工作微调器，并支持名称&带图片的属性。

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