创建图像阵列 [英] Create Array of Images
本文介绍了创建图像阵列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用createImage（）从Google电子表格中读取URL来创建一个图像数组。我想忽略Range中的空单元格值，并且能够读取URL的相邻列中的值。示例：URL，名称，属性。
这是我目前为止的内容，但无法在URL范围中获取多个值以加载到不同的图像空间中。
$ b $ preprese =lang-js prettyprint-覆盖>
函数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（'Schedule 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 - Tuesday
var wed =P - Wed
var thurs =P - Thurs
var fri =P - Fri
var dayListBox = app.createListBox（）。setWidth（'140px'）。setId（'day'）。setName（'sday'）
dayListBox.addItem （星期一）;
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）;
返回应用;
函数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] ）;
}
返回应用;
解决方案
如你所愿。您需要调整电子表格访问以适合您 - 查看嵌入的注释。
图像以数组形式创建，以便它们可以填充并添加到循环内的网格。图像ID同样也是随时创建的，因此 loadPics（）可以遵循相似的模式。一个将姓名列中的值添加为图片标题的示例。
编辑/添加奖励：工作微调器，并支持Name&
maxImgs = 6; //网格中的图像数
colUrl = 0; //包含URL的列
colName = 1; //包含名称的列
colAttr = 2; //包含属性的列
函数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（'Schedule 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 - Tuesday
var wed =P - Wed
var thurs =P - Thurs
var fri =P - Fri
var dayListBox = app.createListBox（）。setWidth（'140px'）。setId（'day'）。setName（'sday'）
dayListBox.addItem （星期一）;
dayListBox.addItem（tues）;
dayListBox.addItem（wed）;
dayListBox.addItem（thurs）;
dayListBox.addItem（fri）;
//从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'）;
// loadbtn的客户端处理程序将在点击按钮时启动微调
//服务器处理程序在完成加载图片时将停止微调
var loadSpinner = app.createClientHandler（）
.forTargets（微调）
.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） ; （var img = 0，row = 5; img
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）;
返回应用;
}
函数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）; （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 ++;
//完成加载，隐藏微调
app.getElementById（'spinner'）。setVisible（false）;
返回应用程序;
}
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;
}
解决方案
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;
}
这篇关于创建图像阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
