I am not able to get the image path in javascript, below is the code
for (let i = 0; i < 10; i++)
{
const themeButton = document.createElement('button')
if (i === 0)
{
themeButton.style.backgroundImage = "url('../assets/Pngs/ThemesIcon/NewTheme.png')"
//themeButton.style.backgroundImage = `url(https://i.postimg.cc/wMT2jLG7/Group-4807.png)`
}
else
{
themeButton.style.backgroundImage = "url('../assets/Pngs/ThemesIcon/NewTheme.png')"
}
themeButton.classList.add('colorBtn')
themeButton.style.backgroundRepeat = 'no-repeat'
themeButton.style.backgroundSize = '374px 180px'
container.appendChild(themeButton)
}
if i use url it is working for local path it is not working.
themeButton.style.backgroundImage = `url(https://i.postimg.cc/wMT2jLG7/Group-4807.png)`
Folder structure is:
App
Files
assets
Files/uiController.js --> i am accessing image
assets/Pngs/ThemesIcon/Theme1.png --> image folders
According to the folders structure, you provided.
You need backward by one folder with ../.
So the path will be
themeButton.style.backgroundImage = "url('../assets/Pngs/ThemesIcon/Theme1.png')"
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
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 basically want to create a new path with the canvas globalCompositeOperation set to 'destination-out'. Is this possible? If so, how?
I noticed that Item has a blendMode property: http://paperjs.org/reference/item#blendmode, but trying the different values does not provide the desired effect.
http://jsfiddle.net/D8vMG/12/
In light of your recent comment, you would need to create layers, as described here:
http://paperjs.org/tutorials/project-items/project-hierarchy/#removing-items-and-children
and then you can add your paths to a layer and do something like this:
//add image to project as background
// ... your code here ...
var secondLayer = new Layer();
Whenever you create a new Layer, it becomes the active layer of the project, and then you can draw on top of the second layer all you want.
if you want a simple 'undo' button you can do:
function onMouseDown(event) {
if (window.mode == "drawing") {
myPath = new Path();
myPath.strokeColor = 'black';
}
else if (window.mode == "undo") {
myPath.opacity = '0'; //this makes the last path used completely see through
// or myPath.remove(); // this removes the path.
//if you're intent on something that writes and erases, you could do
}
}
But what you are looking for is something like this:
function onMouseDrag(event) {
if (window.mode == "drawing") {
myPath.add(event.point);
}
else if (window.mode == "erasing") {
myPath.removeSegment(0);
}
}
this erases the segments of the path from beginning to end. For the full functionality, you need something that identifies a path on click, (layer.getChildren() ? then select child). Then using the point on mouse move you need to identify the segment index and remove it from the path using .removeSegment(index).
http://paperjs.org/reference/path#removesegment-index
Well, the simple solution would be to just create a path which is white. http://jsfiddle.net/D8vMG/11/
function onMouseDown(event) {
if (window.mode == "drawing") {
myPath = new Path();
myPath.strokeColor = 'black';
}
else if (window.mode == "erasing") {
myPath = new Path();
myPath.strokeColor = 'white';
myPath.strokeWidth = 10;
}
}
First of all I want to give you the link before I forget.
http://www.roblox.com/User.aspx?ID=1
Towards the bottom of the page there are multiple tabs. (Gear, Hats, Faces, Packages, etc.)
function checkForHat() {
$.get (
'http://www.roblox.com/User.aspx?ID=1',
function parse(data) {
var hatid1 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl00_AssetThumbnailHyperLink');
var hatidtitle1 = hatid1.attr('title');
var hatidhref1 = "http://www.roblox.com" + hatid1.attr('href');
var hatidpi1 = $(hatid1).find('img')
var hatidpic1 = hatidpi1.attr('src')
hatLink1 = hatidhref1;
hatTitle1 = hatidtitle1;
hatPic1 = hatidpic1;
var hatid2 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl01_AssetThumbnailHyperLink');
var hatidtitle2 = hatid2.attr('title');
var hatidhref2 = "http://www.roblox.com" + hatid2.attr('href');
var hatidpi2 = $(hatid2).find('img')
var hatidpic2 = hatidpi2.attr('src')
hatLink2 = hatidhref2;
hatTitle2 = hatidtitle2;
hatPic2 = hatidpic2;
var hatid3 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl02_AssetThumbnailHyperLink');
var hatidtitle3 = hatid3.attr('title');
var hatidhref3 = "http://www.roblox.com" + hatid3.attr('href');
var hatidpi3 = $(hatid3).find('img')
var hatidpic3 = hatidpi3.attr('src')
hatLink3 = hatidhref3;
hatTitle3 = hatidtitle3;
hatPic3 = hatidpic3;
if (hatLink3 != null && hatTitle3 != null && hatPic3 != null) {
checkIfNew3();
}
if (hatLink2 != null && hatTitle2 != null && hatPic2 != null) {
checkIfNew2();
}
if (hatLink1 != null && hatTitle1 != null && hatPic1 != null) {
checkIfNew1();
}
}
);
};
Of course some of the variables are already called earlier in the code.
Now my question is how to change tabs with JQuery. Like I said the tabs are towards the bottom.
This answer is starting to become vital because I have alot of requests for an upgrade on the chrome extension that this is in.
Thanks.
It appears that the javascript used to execute tab switching is held in the href attribute. You can execute eval on that method.
//this will click the shirts tab
eval($('#ctl00_cphRoblox_rbxUserAssetsPane_AssetCategoryRepeater_ctl05_AssetCategorySelector').attr('href'))
If you want something a little more robust then:
$shirtElem = $('#assetsMenu a').filter( function() {
if ($(this).html() == 'Shirts') return true;
});
eval($shirtElem.attr('href'));
None of it I like, but this looks like autogenerated visual studio code which means it will be ugly and hard to work with =). I am also assuming that you don't have any control over the source or this would be a lot simpler.