Copy link to clipboard
Copied
Trying to get the handle mouse down to alert the colour I've clicked on.
I normally do this with iconbuttons, but saw this method being used and it has less code to color the group background and the onclick feature aswell. So want to try and get this working and that will save me several lines of code.
var b = new Array();
for(var i = 0; i<=2;i++){
b[i] = win.add("group");
bText= b[i].add('statictext',undefined,"");
b[i].graphics.backgroundColor= b[i].graphics.newBrush(b[i].graphics.BrushType.SOLID_COLOR, pcolor[i]);
b[i].addEventListener ("click", function (m,i){
handleMouseDown(m,b)
});
bText.preferredSize=[30,20];
function handleMouseDown(i){
alert(pcolor[i]);
}
}
Copy link to clipboard
Copied
Firs of all, you should be listening for mousedown or mouseup event:
b[i].addEventListener('mousedown', function() {
///
});
Second, where does the m variable come from in your handleMouseDown(m, b) function?
Third, you make bText a global variable, witch is a bad thing,
etc ... , please clean up your snippet by removing non-trivial things for the functionality you are asking to help, and keep only relevant code.
For better response, please write a basic code you need help on, so we can test it. Right now no one can run your code, therefore cannot test without investing time to figure out what's going on. Help us help you by not copy/pasting excerption from your code.
Here's a small example how to handle mousedown event on a Group object
var win = new Window("palette", "script");
var group = win.add('group');
group.preferredSize = [100, 30];
group.graphics.backgroundColor = group.graphics.newBrush(group.graphics.BrushType.SOLID_COLOR, [0.123, 0.456, 0.789]);
group.addEventListener('mousedown', function() {
alert('you clicked on group');
});
win.center();
win.show();
Copy link to clipboard
Copied
Apologies. I copied and pasted it from someone else from the Adobe forums. Then played around with it.
There was nothing they used that suggested m, but b I assume was their group b = win. add(), but then I thought m was passing on info to the function from listener to the handle. So I left these be.
The text variable. Strangely if you don't add into the group, the background color won't work for the group. So that is just a cheat to get that to work. It does if you make a window though which is bizarre, but I'm not the only one who had this issue.
So essentially you click on the group panel that looks like a coloured button. These are populated based on an array. And then once clicked activate a function.
Currently I want it to alert pcolor[I]. But I'll used that to color my layers in after effects.
Copy link to clipboard
Copied
You dont need edittext object in there at all.
Look at my snippet above.
Copy link to clipboard
Copied
Cheers will do on Monday when I get onto my machine.
Copy link to clipboard
Copied
I took the liberty of building a super small script that adds/reloads a few colored buttons. Once clicked, it alerts its RGB value. Hopefully, this is something you can read, understand, and follow.
(function(thisObj) {
var win = (thisObj instanceof Panel) ? thisObj : new Window('palette', 'script');
var btnRandomColors = win.add('button', undefined, 'Randomize Colors');
btnRandomColors.onClick = function() {
while (grpColors.children[0]) {
grpColors.remove(grpColors.children[0]);
}
addColorButtons(grpColors, 10);
grpColors.layout.layout(true);
};
var grpColors = win.add('group');
grpColors.spacing = 0;
addColorButtons(grpColors, 10);
if (win instanceof Window) {
win.show();
} else {
win.layout.layout(true);
}
function addColorButtons(container, numColors) {
for (var i = 0; i < numColors; i++) {
var color = [
generateRandomNumber(),
generateRandomNumber(),
generateRandomNumber()
];
var button = container.add('group');
button.color = color;
button.graphics.backgroundColor = button.graphics.newBrush(button.graphics.BrushType.SOLID_COLOR, color);
button.preferredSize = [20, 20];
button.addEventListener('mousedown', function() {
alert(this.color);
});
}
}
})(this);
Copy link to clipboard
Copied
I'll take a look at this on Monday.
The only problem I've found with adding group backgrounds is that in a window it works fine, but when I create a dockable, resizing window the colours don't show.
But appreciate the above as it's the first time I've seen this in a very short format and much easier to understand than anyone else's code that I've come across.
Question though and this is for tidying up code in general. If the function isn't necessary in the window, is it best to keep it outside of the window? Like you've done with the add. Group? Just an observation as I've noticed it a couple of times on other scripts
Copy link to clipboard
Copied
I've updated the above script to be a floating panel - it all works as expected, all buttons show up the same as if it was Dialog or a Panel window.
Regarding splitting into functions - always! Brake your code into multiple peaces. One function ideally should perform only one task. Above snippet could use refactoring of braking code into smaller peace, but for the sake of example, I wanted to contain everything in one function so you better see how those buttons are built.
Copy link to clipboard
Copied
That's amazing,
Really appreciate this, as it makes much more sense than theirs did.
Just to make sure I understand it all. I've noterised it. Am I missing anything otherwise I think this has been the best learning curve trying to get my script to work going forward to update it and make it much much tidier. Like 100 lines tidier based on what I'm looking at infront of me 🙂
(function(thisObj) {
var win = (thisObj instanceof Panel) ? thisObj : new Window('palette', 'script',undefined, {resizable:true} );
//Create Button
var btnRandomColors = win.add('button', undefined, 'Randomize Colors');
//Button Function
btnRandomColors.onClick = function() {
//if coloured button exist remove them
while (grpColors.children[0]) {
grpColors.remove(grpColors.children[0]);
}
//then add ten new buttons
addColorButtons(grpColors, 10);
//refresh the panel
grpColors.layout.layout(true);
};
//Add a group
var grpColors = win.add('group');
grpColors.spacing = 0;
//This is to add buttons when script loads
addColorButtons(grpColors, 10);
//build window
if (win instanceof Window) {
win.show();
} else {
win.layout.layout(true);
}
//Function to create buttons and generate new colours
function addColorButtons(container, numColors) {
for (var i = 0; i < numColors; i++) {
var color = [
generateRandomNumber(),
generateRandomNumber(),
generateRandomNumber()
];
var button = container.add('group');
button.color = color;
button.graphics.backgroundColor = button.graphics.newBrush(button.graphics.BrushType.SOLID_COLOR, color);
button.preferredSize = [20, 20];
//when clicked on alert the colour.
button.addEventListener('mousedown', function() {
alert(this.color);
});
}
}
})(this);
Copy link to clipboard
Copied
Looks good to me.
Copy link to clipboard
Copied
Right I'm scared that I'm fudging up the proper way of doing this, but this works nearly how I want it to.
One flaw. When I open the script for the first time, it asks me for a swatch. I select a swatch (lets say with 20 RGB colours), it creates 20 groups with backgroundColors. When I click Load New Swatch in my new swatch (lets say with 40 RGB colours), it creates the first 20 into groups with backgroundColors.
However, if I open my script and select the swatch with 40 Colours. It loads 40 up, and if I then change to 20. Loads 20, then go back to the 40. Loads 40.
It appears to be creating my numColors.length based on the first swatch I load.
Otherwise this works exactly how I want it to.
(function(thisObj) {
var win = (thisObj instanceof Panel) ? thisObj : new Window('palette', 'script',undefined, {resizable:true} );
//Create Button
var btnRandomColors = win.add('button', undefined, 'Load New Swatch');
//Button Function
btnRandomColors.onClick = function() {
//if coloured button exist remove them
while (grpColors.children[0]) {
grpColors.remove(grpColors.children[0]);
}
//then add ten new buttons
addColorButtons(grpColors);
//refresh the panel
grpColors.layout.layout(true);
};
//Add a group
var grpColors = win.add('group');
grpColors.spacing = 1;
//This is to add buttons when script loads
addColorButtons(grpColors);
//build window
if (win instanceof Window) {
win.show();
} else {
win.layout.layout(true);
}
//Function to create buttons and generate new colours
function addColorButtons(container) {
var aseFile = File.openDialog('Select *.ase file');
var data = app.parseSwatchFile(aseFile);
var numColors = data.values.length;
for (var i = 0; i < numColors; i++) {
var colorData = data.values[i];
if(colorData.type == "RGB"){
var color = [
colorData.r,
colorData.g,
colorData.b
];
var button = container.add('group');
button.color = color;
button.graphics.backgroundColor = button.graphics.newBrush(button.graphics.BrushType.SOLID_COLOR, color);
button.preferredSize = [20, 20];
//when clicked on alert the colour.
button.addEventListener('mousedown', function() {
alert(this.color);
});
}
}
}
})(this);
Copy link to clipboard
Copied
I don't understand what's the problem.
Copy link to clipboard
Copied
If I load in an aseFile, it'll add up all the colors to define var numColors = data.values.length.
When I click on the button to load up a new aseFile, if the previous file had a smaller length. It seems to stick with that number.
Unless it's the container.add that is the issue.
But if I close the script down, open it back up and choose the longer length aseFile. It works fine, then load the smaller one up and go back to the longer one. Still works fine.
So somewhere the script seems to be hard setting var numColors
Copy link to clipboard
Copied
Why would you assume that? Read your code carefully and try to find a line where it does that.
The issue is here - update this line in your code:
//refresh the panel
win.layout.layout(true);
Also, you misspelled resizable property in your code.
As a bonus - you are not handling cases when:
Copy link to clipboard
Copied
I really do appreciate this.
I assumed that because my main problems have been recently scoping to get information passed on. Every time, I assumed it was something in that section causing my problem. Although I went through it a few times I didn't spot that it was the grpColor.layout.layout(true)
I put my load file and parse parts in the addColorButtons(), purely because it was the only way I could get it to work. I read the link you gave, but no matter how times I tried it. I couldn't get it to alert or recognise any data from my file. Even when I copied and pasted it from the link whilst trying to understand. When I thought I had, I'd include the aseFile and the onClick would do nothing.
I promise you, your notes don't go ignored. You wouldn't believe how much I've learnt over the last week from your help.
Copy link to clipboard
Copied
Sorry Tomas,
I've tried to understand the link you've provided on scope and hoisting and I can get it to work when I just put in a var local and call it globally. But when I load in my swatch. I get nothing. This is why I've been putting everything into one function.
I know I've not put in the other stuff to make sure the file is correct, but currently I know the file works and it's just that file I'm testing, which works with everything else.
🙂
loadSwatch();
var data;
var btn = win.add("button",undefined,"CALL");
btn.onClick = function(){
alert(data.values[0].name);
}
function loadSwatch(){
var aseFile = File.openDialog('Select *.ase file');
var data = app.parseSwatchFile(aseFile);
}
Copy link to clipboard
Copied
var btn = win.add("button", undefined, "CALL");
btn.onClick = function() {
var swatchData = getSwatchData();
if (swatchData) {
addColorButtons(container, swatchData);
}
};
function getSwatchData() {
var aseFile = File.openDialog('Select *.ase file');
var data = app.parseSwatchFile(aseFile);
return data;
}
function addColorButtons(container, swatchData) {
// ... //
}
Copy link to clipboard
Copied
I'm being thick as mud here
Am I meant to pass data again similar to var swatchData?
If I put the alert in the btn.onClick it works, so I haven't the foggiest. I can get it to alert undefined fiddling around, but not [object], which makes me think I'm not Passing swatchData over at all.
var btn = win.add("button", undefined, "LOAD");
btn.onClick = function() {
var swatchData = getSwatchData();
if (swatchData) {
callOut(container, swatchData);
}
};
function getSwatchData() {
var aseFile = File.openDialog('Select *.ase file');
var data = app.parseSwatchFile(aseFile);
return data;
}
function callOut(container, swatchData){
try{
alert(swatchData.values[0].name);
}catch(err){
alert("DID NOT PASS")
}
}
Copy link to clipboard
Copied
I'm an idiot.
I'm sat here, thinking. What's Tomas gonna tell me I've not done. Then I thought, you're not going to tell me that I've not tested to see if(swatchData). So I got it to alert true. Then realised I did need to add a variable, but I was going about it wrongly.
This works haha.
Thank you so much for being patient, but I think I'm getting it now.
var btn = win.add("button", undefined, "LOAD");
btn.onClick = function() {
var swatchData = getSwatchData();
if (swatchData) {
callOut(swatchData);
}
};
function getSwatchData() {
var aseFile = File.openDialog('Select *.ase file');
var data = app.parseSwatchFile(aseFile);
return data;
}
function callOut(swatchData){
var data = swatchData;
alert(data.values[0].name);
}