I'm trying to preload a number of images, prior to drawing them using Canvas. I've googled, and read and managed to find some code (with revisions) to cycle through a list of URLs. However, I can't seem to be able to set the housing_image.src to a URL within the list.
Using console.log I can see that the URL is reporting correctly, but when I assign it to the hosuing_image.src the console.log appears blank.
Hopefully it is something super simple that I am missing...
const imageURL = ["https://syrathos.net/other/sale_sign.png","https://syrathos.net/other/housing_1.png"];
const images = [];
var imageCount = 0;
function allLoaded(){
context.drawImage(images[1],0,0);
context.drawImage(images[0],0,0);
}
for (const URL of imageURL) {
const housing_image = new Canvas.Image();
housing_image.onload = ()=>{
console.log("loaded : " + housing_image.src)
imageCount += 1;
if(imageCount === imageURL.length){
allLoaded();
}
}
console.log(URL)
housing_image.src = URL;
images.push(housing_image);
console.log(housing_image.src);
};
Console Log
Printing file path with directory indentation.
Input will be
[
"/root/html/file/a.html",
"/root/html/image/a.jpg",
"/root/html/file/b.html",
"/tmp/c.log"
]
Output needs to be like following,
- root
- html
- file
- a.html
- b.html
- image
- a.jpg
- tmp
- c.log
I couldn't find any solution. I guess it will be a recursive call with a tree structure. Any help would be appreciated.
You could map each file path of your input data into a simple tree-map structure and then recursively print this structure. Something like this (not tested and might still need to handle edge cases):
function processData(data) {
const separator = "/";
const tree = {};
data.forEach(element => mapPathToTree(tree, element.split(separator).filter(part => part)));
printTree(tree, 0);
}
function mapPathToTree(tree, pathParts) {
if (pathParts && pathParts.length <= 1) {
tree[pathParts[0]] = {};
return;
}
const currPart = pathParts[0];
let subTree = tree[currPart];
if (!subTree) {
subTree = {};
tree[currPart] = subTree;
}
mapPathToTree(subTree, pathParts.slice(1));
}
function printTree(subTree, level) {
for (const key in subTree) {
console.log(" ".repeat(level).concat("- ").concat(key));
printTree(subTree[key], level + 1);
}
}
processData([
"/root/html/file/a.html",
"/root/html/image/a.jpg",
"/root/html/file/b.html",
"/tmp/c.log"
]);
I build Animate CC HTML5 canvas ads, and we have a new vendor who needs all assets saved in the root folder. When I change this publish setting in Animate, only the stage color loads. We have a test site, so I'm posting the and viewing from a server, not locally.
I'm only changing the publish destinations from the default "/images" (image assets) and "/libs" (CreateJS assets) to "/" for both, and when I publish, the files end up in the correct root folder, but the js can't find them. Everything loads fine when I switch back to using asset folders.
This "new" js code includes 60+ additional lines, including some about fonts, but I'm not using live type. The HTML is the same either way. We don't use spritesheets.
THIS CODE WORKS - AFTER the "// symbols:" LINE, CODE MATCHES IN BOTH FILES.
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 1200,
height: 627,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"images/FRWL_DBA_1200x627_B1bkgd.jpg?1546039438038", id:"FRWL_DBA_1200x627_B1bkgd"},
{src:"images/FRWL_DBA_1200x627_B1CTA.png?1546039438038", id:"FRWL_DBA_1200x627_B1CTA"},
{src:"images/FRWL_DBA_1200x627_B1HLacross.png?1546039438038", id:"FRWL_DBA_1200x627_B1HLacross"},
{src:"images/FRWL_DBA_1200x627_B1HLget.png?1546039438038", id:"FRWL_DBA_1200x627_B1HLget"},
{src:"images/FRWL_DBA_1200x627_B1HLnow.png?1546039438038", id:"FRWL_DBA_1200x627_B1HLnow"},
{src:"images/FRWL_DBA_1200x627_B1logo.png?1546039438038", id:"FRWL_DBA_1200x627_B1logo"},
{src:"images/FRWL_DBA_1200x627_B1ppl.png?1546039438038", id:"FRWL_DBA_1200x627_B1ppl"}
]
};
lib.ssMetadata = [];
// symbols:
THIS IS THE "NEW" CODE THAT DOESN'T WORK:
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
lib.webFontTxtInst = {};
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
// library properties:
lib.properties = {
width: 1200,
height: 627,
fps: 24,
color: "#00CC66",
opacity: 1.00,
webfonts: {},
manifest: [
{src:"/FRWL_DBA_1200x627_B1bkgd.jpg", id:"FRWL_DBA_1200x627_B1bkgd"},
{src:"/FRWL_DBA_1200x627_B1CTA.png", id:"FRWL_DBA_1200x627_B1CTA"},
{src:"/FRWL_DBA_1200x627_B1HLacross.png", id:"FRWL_DBA_1200x627_B1HLacross"},
{src:"/FRWL_DBA_1200x627_B1HLget.png", id:"FRWL_DBA_1200x627_B1HLget"},
{src:"/FRWL_DBA_1200x627_B1HLnow.png", id:"FRWL_DBA_1200x627_B1HLnow"},
{src:"/FRWL_DBA_1200x627_B1logo.png", id:"FRWL_DBA_1200x627_B1logo"},
{src:"/FRWL_DBA_1200x627_B1ppl.png", id:"FRWL_DBA_1200x627_B1ppl"}
]
};
lib.ssMetadata = [];
lib.updateListCache = function (cacheList) {
for(var i = 0; i < cacheList.length; i++) {
if(cacheList[i].cacheCanvas)
cacheList[i].updateCache();
}
};
lib.addElementsToCache = function (textInst, cacheList) {
var cur = textInst;
while(cur != exportRoot) {
if(cacheList.indexOf(cur) != -1)
break;
cur = cur.parent;
}
if(cur != exportRoot) { //we have found an element in the list
var cur2 = textInst;
var index = cacheList.indexOf(cur);
while(cur2 != cur) { //insert all it's children just before it
cacheList.splice(index, 0, cur2);
cur2 = cur2.parent;
index++;
}
}
else { //append element and it's parents in the array
cur = textInst;
while(cur != exportRoot) {
cacheList.push(cur);
cur = cur.parent;
}
}
};
lib.gfontAvailable = function(family, totalGoogleCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);
loadedGoogleCount++;
if(loadedGoogleCount == totalGoogleCount) {
lib.updateListCache(gFontsUpdateCacheList);
}
};
lib.tfontAvailable = function(family, totalTypekitCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);
loadedTypekitCount++;
if(loadedTypekitCount == totalTypekitCount) {
lib.updateListCache(tFontsUpdateCacheList);
}
};
// symbols:
Has anyone else had this problem? Is there something I'm missing in Animate, or do I have to manually adjust the code for the js to find the images? I couldn't find anything on the Adobe site saying extra steps were needed, and I'm only a novice coder.
THANKS!
Sheesh. After searching and messing with code for hours, I found the answer 20 minutes after this post. Hopefully this helps someone else...
It WAS something I missed in Animate:
Apparently it's mandatory in Animate CC to use the built-in toggle buttons—the folder icons next to the text fields in the publish settings—and it'll either save assets in folders or at the root, or not at all if you uncheck the boxes. You can't choose your own path without breaking the system.
My mistake was changing the path myself. It now works swimmingly, and oddly enough, I feel stupid and smart at the same time.
I want to delete an empty/non-empty directory from my local system and i have restriction that i need to do that only using javascript functions.I cannot refer to functions like 'FileSystemObject'
Please help!
Please Note:
I need solution for above issue as I am working on mobile app which support javascript only
This function should work. Removes files synchronously
Pass removeself = true to remove the empty directory.
const path = require('path');
const fs = require('fs');
const rmDir = function (dirPath, removeSelf) {
if (removeSelf === undefined)
removeSelf = true;
try {
var files = fs.readdirSync(dirPath);
} catch (e) {
// throw e
return;
}
if (files.length > 0)
for (let i = 0; i < files.length; i++) {
const filePath = path.join(dirPath, files[i]);
if (fs.statSync(filePath).isFile())
fs.unlinkSync(filePath);
else
rmDir(filePath);
}
if (removeSelf)
fs.rmdirSync(dirPath);
};
Disclaimer: Not my code, copied from someone's gist(forgot the url).
When using images on a site, retina.js automatically looks for an image in the same folder with the same name with the added #2x, and then swaps out if the user has a high-DPI screen.
What I am trying to do is to tell retina.js to instead look for this retina #2x image in a sub folder. So if I'm using image.png, I want retina.js to look for image#2x.png in a subfolder named Retina for example.
I won't get into why I need this, but that is the gist of it. So then, is this possible, and where do I do this? I've found this part of retina.js that looks like it could do something along the lines of what I want, but I'm not sure how to proceed.
function RetinaImagePath(path, at_2x_path) {
this.path = path || '';
if (typeof at_2x_path !== 'undefined' && at_2x_path !== null) {
this.at_2x_path = at_2x_path;
this.perform_check = false;
} else {
if (undefined !== document.createElement) {
var locationObject = document.createElement('a');
locationObject.href = this.path;
locationObject.pathname = locationObject.pathname.replace(regexMatch, suffixReplace);
this.at_2x_path = locationObject.href;
} else {
var parts = this.path.split('?');
parts[0] = parts[0].replace(regexMatch, suffixReplace);
this.at_2x_path = parts.join('?');
}
this.perform_check = true;
}
}
Thank you.