I can not get all thumbnails using Google Drive API. They are randomly displayed.
Here is the code I use:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function gapiLoaded() {
gapi.load('client', intializeGapiClient);
}
async function intializeGapiClient() {
await gapi.client.setToken({access_token:'ya29.a0AVvZVs...'});
loadDriveApi();
};
function loadDriveApi() {
gapi.client.load('drive', 'v3', listFiles);
}
function listFiles() {
var parentID = 'root';
var request = gapi.client.drive.files.list({
'q': `'${parentID}' in parents and trashed = false`,
'fields': "nextPageToken, files(id,thumbnailLink,size,webViewLink,parents,shared,name,createdTime,mimeType,properties)",
});
_files = [];
i = 0;
request.execute(function(resp) {
var files = resp.files;
if (files && files.length > 0) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
_files += file.id+'|'+file.name+'|'+file.size+'|'+file.thumbnailLink+'|'+file.mimeType+'|'+file.webViewLink+'|'+file.parents+'|'+file.createdTime+'\r\n';
if (i+1 == files.length){
console.log(_files);
}
}
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded();"></script>
and here is animated gif displaying the result: https://i.postimg.cc/26FMy6Hs/g1.gif
How to get all thumbnails, please?
Related
I am uploading data from an excel file into my website using input html button.
and then convert the data into json and then I map it with local external metadata.
Finally view it using the id.
My website becomes unresponsive & sometimes takes a lot of time processing. Please help
function ExportToTable() {
var regex = /^([a-zA-Z0-9\s_\\.\-:()])+(.xlsx|.xls)$/;
/*Checks whether the file is a valid excel file*/
if (regex.test($("#excelfile").val().toLowerCase())) {
var xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/
if ($("#excelfile").val().toLowerCase().indexOf(".xlsx") > 0) {
xlsxflag = true;
}
/*Checks whether the browser supports HTML5*/
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
/*Converts the excel data in to object*/
if (xlsxflag) {
var workbook = XLSX.read(data, { type: 'binary' });
}
else {
var workbook = XLS.read(data, { type: 'binary' });
}
/*Gets all the sheetnames of excel in to a variable*/
var sheet_name_list = workbook.SheetNames;
console.log(sheet_name_list);
var cnt = 0; /*This is used for restricting the script to consider only first
sheet of excel*/
sheet_name_list.forEach(function (y) { /*Iterate through all sheets*/
/*Convert the cell value to Json*/
if (xlsxflag) {
var exceljson = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
}
else {
var exceljson = XLS.utils.sheet_to_row_object_array(workbook.Sheets[y]);
}
//Download & View Subscriptions
if (exceljson.length > 0 && cnt == 1) {
metadata = [];
fetch("metadata.json")
.then(response => response.json())
.then(json => {
metadata = json;
console.log(metadata);
user_metadata1 = [], obj_m_processed = [];
for (var i in exceljson) {
var obj = { email: exceljson[i].email, name: exceljson[i].team_alias, id: exceljson[i].autodesk_id };
for (var j in metadata) {
if (exceljson[i].email == metadata[j].email) {
obj.GEO = metadata[j].GEO;
obj.COUNTRY = metadata[j].COUNTRY;
obj.CITY = metadata[j].CITY;
obj.PROJECT = metadata[j].PROJECT;
obj.DEPARTMENT = metadata[j].DEPARTMENT;
obj.CC=metadata[j].CC;
obj_m_processed[metadata[j].email] = true;
}
}
obj.GEO = obj.GEO || '-';
obj.COUNTRY = obj.COUNTRY || '-';
obj.CITY = obj.CITY || '-';
obj.PROJECT = obj.PROJECT || '-';
obj.DEPARTMENT = obj.DEPARTMENT || '-';
obj.CC = obj.CC || '-';
user_metadata1.push(obj);
}
for (var j in metadata) {
if (typeof obj_m_processed[metadata[j].email] == 'undefined') {
user_metadata1.push({ email: metadata[j].email, name: metadata[j].name, id: metadata[j].autodesk_id,
GEO: metadata[j].GEO,
COUNTRY : metadata[j].COUNTRY,
CITY : metadata[j].CITY,
PROJECT : metadata[j].PROJECT,
DEPARTMENT : metadata[j].DEPARTMENT,
CC:metadata[j].CC
});
}
}
document.getElementById("headings4").innerHTML = "MetaData Mapping";
BindTable(user_metadata1, '#user_metadata1
cnt++;
});
$('#exceltable').show();
}
if (xlsxflag) {/*If excel file is .xlsx extension than creates a Array Buffer from excel*/
reader.readAsArrayBuffer($("#excelfile")[0].files[0]);
}
else {
reader.readAsBinaryString($("#excelfile")[0].files[0]);
}
}
else {
alert("Sorry! Your browser does not support HTML5!");
}
}
else {
alert("Please upload a valid Excel file!");
}
}
Here is how the json is bind after mapping metadata
function BindTable(jsondata, tableid) {/*Function used to convert the JSON array to Html Table*/
var columns = BindTableHeader(jsondata, tableid); /*Gets all the column headings of Excel*/
for (var i = 0; i < jsondata.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = jsondata[i][columns[colIndex]];
if (cellValue == null)
cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(tableid).append(row$);
}
}
function BindTableHeader(jsondata, tableid) {/*Function used to get all column names from JSON and bind the html table header*/
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < jsondata.length; i++) {
var rowHash = jsondata[i];
for (var key in rowHash) {
if (rowHash.hasOwnProperty(key)) {
if ($.inArray(key, columnSet) == -1) {/*Adding each unique column names to a variable array*/
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
}
$(tableid).append(headerTr$);
return columnSet;
}
var myImage = document.getElementById("pauls");
var imageArray = ["stpauls.jpg", "stpauls1.jpg", "stpauls2.jpg", "st pauls3.jpg"];
var imageIndex = 0;
$(document).ready (function.changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex ++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
});
setInterval(changeImage, 5000);
so im trying to rotate a series of 4 photos using the code above, but when i load my page, nothing happens the original src photo stays
in my HTML i have id="pauls" src="stpauls" and linked my
file to my index.html file
regards
check browser console for error, create the function inside the callback of ready() function
var myImage = document.getElementById("pauls");
var imageArray = ["https://singlecolorimage.com/get/5b71aa/100x100", "https://singlecolorimage.com/get/31a57e/100x100", "https://singlecolorimage.com/get/55ae19/100x100", "https://singlecolorimage.com/get/ae1946/100x100"];
var imageIndex = 0;
$(document).ready(function() {
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
setInterval(changeImage, 1000);
});
<img id="pauls" src="https://singlecolorimage.com/get/ae1946/100x100" width="100">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
My website reads QR CODES using the mobile phone. I have used that library
https://github.com/schmich/instascan
<div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
</div>
<video autoplay muted playsinline></video>
<script async src="js/main.js"></script>
Because the mobile phone has many camaras I want to let the user to select which camara wants for scanning the qr code.
main.js:
https://simpl.info/getusermedia/sources/
https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js
'use strict';
var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');
videoSelect.onchange = getStream;
getStream().then(getDevices).then(gotDevices);
function getDevices() {
// AFAICT in Safari this only gets default devices until gUM is called :/
return navigator.mediaDevices.enumerateDevices();
}
function gotDevices(deviceInfos) {
window.deviceInfos = deviceInfos; // make available to console
console.log('Available input and output devices:', deviceInfos);
for (const deviceInfo of deviceInfos) {
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
videoSelect.appendChild(option);
}
}
}
function getStream() {
if (window.stream) {
window.stream.getTracks().forEach(track => {
track.stop();
});
}
const videoSource = videoSelect.value;
const constraints = {
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
};
return navigator.mediaDevices.getUserMedia(constraints).
then(gotStream).catch(handleError);
}
function gotStream(stream) {
window.stream = stream; // make stream available to console
videoSelect.selectedIndex = [...videoSelect.options].
findIndex(option => option.text === stream.getVideoTracks()[0].label);
videoElement.srcObject = stream;
}
function handleError(error) {
console.error('Error: ', error);
}
Then I want to start the scanner to the camara the user has selected because I want to obtaint the QR-CODE:
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview'),mirror: false });
scanner.addListener('scan', function (content) {
alert("qr result " + content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]); //I want to scanner.start the camara that the user has selected.
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
Ok, so apparently I am unable to inject an advertisement generating script into a chrome tab. Since I'm not very experienced at the chrome extensions api, I would hugely appreciate your help. So basically my main javascript file injects the script in the following way:
chrome.tabs.executeScript({
file: "inject.js"
});
so this works perfect, but the script itself doesn't seem to execute, while it works perfectly well if inserted into html directly (via 'Inspect Element' in chrome) :
var _$cmp = _$cmp || {};
(function() {
var companionId = "SK1POPCORN-TIME-FREE_27122_9";
if (!_$cmp[companionId]) {
_$cmp[companionId] = true;
var g = document.createElement("script");
g.type = "text/javascript";
g.src = "http://clkrev.com/adServe/banners?tid=SK1POPCORN-TIME-FREE_27122_9&pause=5";
var scripts = document.getElementsByTagName("script");
var myScript;
var found = false;
for (var i = (scripts.length - 1); i >= 0; i--) {
myScript = scripts[i];
if (myScript.src.indexOf("tid=PTFFO") != -1) {
found = true;
break;
}
}
if (!found) {
myScript = scripts[scripts.length - 1];
}
if (myScript.parentNode != document.getElementsByTagName("head")[0]) {
myScript.parentNode.insertBefore(g, myScript.nextSibling);
} else {
var bodyOnLoad = function() {
document.getElementsByTagName('body')[0].appendChild(g);
};
if (window.addEventListener) {
window.addEventListener("load", bodyOnLoad, false);
} else if (window.attachEvent) {
window.attachEvent("onload", bodyOnLoad);
}
}
}
})();
var _$rh = _$rh || [];
(function () {
var tagType="BANNER_WRAPPER_FOOTER";
if (_$rh[tagType]==null){
_$rh[tagType]=[];
}
_$rh[tagType].push({cid: 'PTFFO',type: 'footer',size: '728x90',domain: 'clkrev.com'});
_$rh.p = "mk4";
if (window[_$rh.p] == null) {window[_$rh.p]=function(e){};};
_$rh.bp = function(e){(window[_$rh.p])(e);};
var browser = function() {
var n = navigator.userAgent.toLowerCase();
var b = {
webkit: /webkit/.test(n),
mozilla: (/mozilla/.test(n)) && (!/(compatible|webkit)/.test(n)),
chrome: /chrome/.test(n),
msie: ((/msie/.test(n) || /trident/.test(n) || !! window.MSStream) && !/opera/.test(n)),
firefox: /firefox/.test(n),
safari: (/safari/.test(n) && !(/chrome/.test(n))),
opera: /opera/.test(n)
};
b.version = (b.safari) ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/: ]([\d.]+)/) || [])[1];
return b;
}();
var trigger = "click";
var useCapture = (browser.firefox || browser.mozilla || browser.chrome);
if (browser.chrome) {
trigger = "mousedown";
}
document.addEventListener ? document.addEventListener(trigger, _$rh.bp, useCapture) : document.attachEvent("on"+trigger, _$rh.bp);
var g = document.createElement("script");
g.setAttribute("id","rh_tag_"+tagType+"_PTFFO_wrapper");
g.type= "text/javascript";
g.src= "http://cdn1.rhtag.com/banners/footer/footer-tag_1.0.23.js";
var scripts = document.getElementsByTagName("script");
var myScript;
var found=false;
for(var i=(scripts.length - 1);i>=0;i--){
myScript = scripts[i];
if (myScript.src.indexOf("tid=PTFFO")!=-1) {
found=true;
break;
}
}
if (!found) { //fallback
myScript=scripts[scripts.length - 1];
}
if (myScript.parentNode!=document.getElementsByTagName("head")[0]) {
myScript.parentNode.insertBefore( g, myScript.nextSibling );
}
else{
var bodyOnLoad = function() {
document.getElementsByTagName('body')[0].appendChild( g);
};
if(window.addEventListener)
{
window.addEventListener("load", bodyOnLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", bodyOnLoad);
}
}
})();
var _$rh = _$rh || [];
(function () {
var tagType="BANNER";
if (_$rh[tagType]==null){
_$rh[tagType]=[];
}
_$rh[tagType].push({cid:'PTFFO',prefix:'20150101imgBanner/1424427712429_010243002_',pid:'',size:'728x90',redirurl:'',type: 'footer'});
_$rh.p = "mk4";
if (window[_$rh.p] == null) {window[_$rh.p]=function(e){};};
_$rh.bp = function(e){(window[_$rh.p])(e);};
var browser = function() {
var n = navigator.userAgent.toLowerCase();
var b = {
webkit: /webkit/.test(n),
mozilla: (/mozilla/.test(n)) && (!/(compatible|webkit)/.test(n)),
chrome: /chrome/.test(n),
msie: ((/msie/.test(n) || /trident/.test(n) || !! window.MSStream) && !/opera/.test(n)),
firefox: /firefox/.test(n),
safari: (/safari/.test(n) && !(/chrome/.test(n))),
opera: /opera/.test(n)
};
b.version = (b.safari) ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/: ]([\d.]+)/) || [])[1];
return b;
}();
var trigger = "click";
var useCapture = (browser.firefox || browser.mozilla || browser.chrome);
if (browser.chrome) {
trigger = "mousedown";
}
document.addEventListener ? document.addEventListener(trigger, _$rh.bp, useCapture) : document.attachEvent("on"+trigger, _$rh.bp);
var g = document.createElement("script");
g.setAttribute("id","rh_tag_"+tagType+"_PTFFO");
g.type= "text/javascript";
g.src= "http://cdn1.rhtag.com/banners/script/bnr-tag_1.0.6.js";
var scripts = document.getElementsByTagName("script");
var myScript;
var found=false;
for(var i=(scripts.length - 1);i>=0;i--){
myScript = scripts[i];
if (myScript.src.indexOf("tid=PTFFO")!=-1) {
found=true;
break;
}
}
if (!found) { //fallback
myScript=scripts[scripts.length - 1];
}
if (myScript.parentNode!=document.getElementsByTagName("head")[0]) {
myScript.parentNode.insertBefore( g, myScript.nextSibling );
}
else{
var bodyOnLoad = function() {
document.getElementsByTagName('body')[0].appendChild( g);
};
if(window.addEventListener)
{
window.addEventListener("load", bodyOnLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", bodyOnLoad);
}
}
})();
Thank you again for taking your valuable time to look over this, your help is highly appreciated. Thanks again.
EDIT:
The inject.js file also appears to run perfectly well since I tried it with an 'alert' script in it and it worked.
Got this code, that only works when alert (markers.length); is uncommented.
When this javascript alert not shown I dont get any Markers.. Really weird!!
In the body tag I have <body onload="load()" onunload="GUnload()">
Previoslly the load() function is called and other functions :
function showAddress(address) {
if (geocoder) {//+', '+init_street
geocoder.getLatLng(address,
function(point) {
if (!point) {
document.getElementById("place").value="not found";
//alert(address + " not found");
} else {
// document.getElementById("place").value=point.y.toFixed(4) + "," + point.x.toFixed(4);
map.setCenter(point, 16);
marker.setPoint(point);
//marker.openInfoWindowHtml(address);
}
}
);
}
}
//from a point returns and address!
function showPointAddress(response) {
if (!response || response.Status.code != 200) {//not found
//alert("Status Code:" + response.Status.code);
document.getElementById("place").value="not found";
}
else {//found
map.setCenter(marker.getPoint(), 16);
place = response.Placemark[0];
document.getElementById("place").value=place.address;
//document.getElementById("place").value=marker.getPoint().toUrlValue();
}
}
// Creates a marker at the given point with the given number icon and text
function createMarker(p,text) {
var marker = new GMarker(p);
if (text!=""){
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);});
}
return marker;
}
` var geocoder = null;`
` var map = null;`
function load() {//loading the map
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.enableScrollWheelZoom();
geocoder = new GClientGeocoder();
if (init_street!=""){
geocoder.getLatLng(init_street,function(point) {//set center point in map
if (point){
map.setCenter(point, zoom);
map.addOverlay(createMarker(point,init_street));
map.openInfoWindow(point,init_street);
}
});
}
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
}
}`
function(data, responseCode) {
if(responseCode == 200) {
var texts = [];
var addresses = [];
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("item");
alert (markers.length);
for (var i = 0; i < markers.length; i++) {
var address=markers[i].getElementsByTagName('address').item(0).childNodes.item(0).nodeValue;
if (address!=null){
//alert (address);
var title=markers[i].getElementsByTagName('title').item(0).childNodes.item(0).nodeValue;
var link=markers[i].getElementsByTagName('link').item(0).childNodes.item(0).nodeValue;
var desc=markers[i].getElementsByTagName('description').item(0).childNodes.item(0).nodeValue;
desc=desc.substr(0,220);//limit
addresses.push(address);
texts.push("<div style='width: 200px'><a target='_blank' href='" +link+"'>"+title+"</a><br />"+desc+"</div>");
}//if
}//for
for (var i = 0; i < addresses.length; i++) {
geocoder.getLatLng(addresses[i], function (current) {
return function(point) {
if (point) map.addOverlay(createMarker(point,texts[current]));
}
}(i));
}
}//if });
I Understand the issue of needing a callback function to load the markers, but Im lost..
Any help apreciated!! ;)
Thx in advanced!!
This usually happens when fetching data with Ajax or similar. Basically when you fetch the data you need to utilize a callback function to wait for the data. If you don't there is no data to execute on. However, if you pause the execution with a alert() the data will have been fetched in the background.
Think of it as the waiting for the DOM to load before executing Javascript on the page.
I can't give you a better answer as you have not included the code that is calling the function you included.