Goal:
Design a script that I can run inside of photoshop, that will provide me the x and y coordinates of every layer in the PSD file, and then save that to a text file that I can use to extract said data.
Progress:
I have already found a script that will accomplish this, and made my own additions to it.
Issue:
My issue is that I am not a very advanced coder, I am trying to get the x and y coordinates of the center registration point of the layer, not top left. I have done hours of research (maybe not asking google the right questions) to try to figure this out. I realize my level of understanding is not on par with actual software developers, and while I respect that, there is no developer that works here and I am kind of left alone to figure this out. I have studied a little javascript, so I understood enough to make small additions to the following code.
The Code:
// Bring application forward
app.bringToFront();
// Set active Document variable and decode name for output
var docRef = app.activeDocument;
var docName = decodeURI(activeDocument.name);
// Define pixels as unit of measurement
var defaultRulerUnits = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
// Define variable for the number of layers in the active document
var layerNum = app.activeDocument.artLayers.length;
// Define variable for the active layer in the active document
var layerRef = app.activeDocument.activeLayer;
// Define varibles for x and y of layers
var x = layerRef.bounds[0].value;
var y = layerRef.bounds[1].value;
var coords = "";
// Loop to iterate through all layers
function recurseLayers(currLayers) {
for ( var i = 0; i < currLayers.layers.length; i++ ) {
layerRef = currLayers.layers[i];
x = layerRef.bounds[0].value;
y = layerRef.bounds[1].value;
coords += layerRef.name + ": " + x + "x" + "," + y + "y" + "\n";
//test if it's a layer set
if ( isLayerSet(currLayers.layers[i]) ) {
recurseLayers(currLayers.layers[i]);
}
}
}
//a test for a layer set
function isLayerSet(layer) {
try {
if ( layer.layers.length > 0 ) {
return true;
}
}
catch(err) {
return false;
}
}
// Ask the user for the folder to export to
var FPath = Folder.selectDialog("Save exported coordinates to");
// Detect line feed type
if ( $.os.search(/windows/i) !== -1 ) {
fileLineFeed = "Windows";
}
else {
fileLineFeed = "Macintosh";
}
// Export to txt file
function writeFile(info) {
try {
var f = new File(FPath + "/" + docName + ".txt");
f.remove();
f.open('a');
f.lineFeed = fileLineFeed;
f.write(info);
f.close();
}
catch(e){}
}
// Run the functions
recurseLayers(docRef);
preferences.rulerUnits = defaultRulerUnits;
// Set preferences back to user's defaults
writeFile(coords);
// Show results
if ( FPath == null ) {
alert("Export aborted", "Canceled");
}
else {
alert("Exported " + layerNum + " layer's coordinates to " + FPath + "/" +
docName + ".txt " + "using " + fileLineFeed + " line feeds.", "Success!");
}
The bounds property of a layer gives you the top left corner. The middle point is x + half the layer width and y + half the layer height. All you need are the layer dimensions and a little math.
Related
I'm using TensorflowJs and react to test gesture based interfaces. I've mapped an image cursor to my mobile phone and when i move my mobile phone across a camera feed, it moves the image element accordingly.
An object detection model runs in a react component like this:
const runCoco = async () => {
const net = await cocossd.load();
console.log("COCOSSD model loaded.");
// Loop and detect hands
setInterval(() => {
detect(net);
}, 10);
};
useEffect(runCoco,[]);
//public variables
const webcamRef = useRef(null);
const canvasRef = useRef(null);
const xScalar = 2.5;
const yScalar = 1.7;
const yShift = 389.203119516;
I move the cursor element over a large button in my program and when I want to click on an element i bring in a plastic bottle into frame (this was just a quick way to get testing). When the bottle is detected I call document.elementFromPoint(x,y) and dispatch a click event onto the element below the cursor at that time.
const detect = async (net) => {
// Check data is available
if (
typeof webcamRef.current !== "undefined" &&
webcamRef.current !== null &&
webcamRef.current.video.readyState === 4
) {
// Get Video Properties
const cursor = document.getElementById('cursor');
const video = webcamRef.current.video;
const videoWidth = webcamRef.current.video.videoWidth;
const videoHeight = webcamRef.current.video.videoHeight;
// Set video width
webcamRef.current.video.width = videoWidth;
webcamRef.current.video.height = videoHeight;
// Make Detections
const obj = await net.detect(video);
//console.log(obj);
try
{
//all this manipulation below was just a good way I found to convert the bounding box outputs
//into comfortable larger x and y coordinates for the user to navigate with.
x = (-1 * (((obj[0]['bbox'][0] + obj[0]['bbox'][2] ) / 2))) + 640;
y = obj[0]['bbox'][1] - 200; ///200px higher than the top of the bounding box
x = x * xScalar;
y = (y * yScalar);
if (obj[0]['class'] === "cell phone" && obj[0]['score'] > 0.8 )
{
prevX = x;
prevY = y;
cursor.style.transform = `translate(${ x }px, ${ y }px)`;
}
else if ( obj[0]['class'] === "bottle" )
{
console.log("");
x = document.querySelector('#cursor').getBoundingClientRect().left;
y = document.querySelector('#cursor').getBoundingClientRect().top;
console.log( " Model Values: " + prevX + ", " + (prevY + yShift));
console.log( " Cursor Values: " + x + " " + y );
var ev = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true,
'screenX': x,
'screenY': y
});
// x = 305.45550537109375;
// y = 271.7203674316406;
console.log( " Just before click: " + x + " " + y );
var el = document.elementFromPoint( Math.trunc(x), Math.trunc(y) );
console.log(" After click: " + x + " " + y)
el.dispatchEvent(ev);
}
}
catch (err)
{
console.error(err);
}
}
}
This is where the issue arises:
When I feed the literal values here, it works. the button is clicked and all is good.
x = 305.45550537109375;
y = 271.7203674316406;
var el = document.elementFromPoint( Math.trunc(x), Math.trunc(y) );
el.dispatchEvent(ev);
But if I feed it this way:
x = document.querySelector('#cursor').getBoundingClientRect().left;
y = document.querySelector('#cursor').getBoundingClientRect().top;
No click is registered, the dispatched event does nothing.
Here is an image of some console outputs I tried to debug it with:
The values barely differ so I really can't figure out why it doesn't work.
This is an image of a button and the cursor in the program, if it helps
I am trying to work out how to use javascript with photoshop, but eventhough i dont find a logical error in the code, it doesnt work properly.
I have a folder of 1000+ images/.ai files that have varying dimensions. I need these images on the Pillow and saved as .jpeg.
I choose the smartlayer and run the script to choose the images and it saves them correctly. The only problem is, that the resizing of images and positioning dont work properly.
If i put the image in manually, it works without issues, but not with the script.
If the width is greater than the height, it should set the width to 1200 px and calculate the height according to that. (and vice versa) and place in the middle of the layer.
How do i fix the resizing and positioning?
Is it possible to choose a folder where the images are inside instead of selecting the images?
How do i handle it when there are 2 smart layers to change in the mockup instead of 1?
Anyone know where the problem lies this code?
Im grateful for any bit of help!
// Replace SmartObject’s Content and Save as JPG
// 2017, use it at your own risk
// Via #Circle B: https://graphicdesign.stackexchange.com/questions/92796/replacing-a-smart-object-in-bulk-with-photoshops-variable-data-or-scripts/93359
// JPG code from here: https://forums.adobe.com/thread/737789
#target photoshop
if (app.documents.length > 0) {
var myDocument = app.activeDocument;
var theName = myDocument.name.match(/(.*)\.[^\.]+$/)[1];
var thePath = myDocument.path;
var theLayer = myDocument.activeLayer;
// JPG Options;
jpgSaveOptions = new JPEGSaveOptions();
jpgSaveOptions.embedColorProfile = true;
jpgSaveOptions.formatOptions = FormatOptions.STANDARDBASELINE;
jpgSaveOptions.matte = MatteType.NONE;
jpgSaveOptions.quality = 8;
// Check if layer is SmartObject;
if (theLayer.kind != "LayerKind.SMARTOBJECT") {
alert("selected layer is not a smart object")
} else {
// Select Files;
if ($.os.search(/windows/i) != -1) {
var theFiles = File.openDialog("please select files", "*.psd;*.tif;*.jpg;*.ai", true)
} else {
var theFiles = File.openDialog("please select files", getFiles, true)
};
};
(function (){
var startRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
var bounds = activeDocument.activeLayer.bounds;
var height = bounds[3].value - bounds[1].value;
var width = bounds[2].value - bounds[0].value;
if (height > width){
var newSize1 = (100 / width) * 800;
activeDocument.activeLayer.resize(newSize1, newSize1, AnchorPosition.MIDDLECENTER);
app.preferences.rulerUnits = startRulerUnits;
}
else{
var newSize2 = (100 / height) * 800;
activeDocument.activeLayer.resize(newSize2, newSize2, AnchorPosition.MIDDLECENTER);
app.preferences.rulerUnits = startRulerUnits;
}
})();
if (theFiles) {
for (var m = 0; m < theFiles.length; m++) {
// Replace SmartObject
theLayer = replaceContents(theFiles[m], theLayer);
var theNewName = theFiles[m].name.match(/(.*)\.[^\.]+$/)[1];
// Save JPG
myDocument.saveAs((new File(thePath + "/" + theName + "_" + theNewName + ".jpg")), jpgSaveOptions, true,Extension.LOWERCASE);
}
}
};
// Get PSDs, TIFs and JPGs from files
function getFiles(theFile) {
if (theFile.name.match(/\.(psd|tif|jpg)$/i) != null || theFile.constructor.name == "Folder") {
return true
}
};
// Replace SmartObject Contents
function replaceContents(newFile, theSO) {
app.activeDocument.activeLayer = theSO;
// =======================================================
var idplacedLayerReplaceContents = stringIDToTypeID("placedLayerReplaceContents");
var desc3 = new ActionDescriptor();
var idnull = charIDToTypeID("null");
desc3.putPath(idnull, new File(newFile));
var idPgNm = charIDToTypeID("PgNm");
desc3.putInteger(idPgNm, 1);
executeAction(idplacedLayerReplaceContents, desc3, DialogModes.NO);
return app.activeDocument.activeLayer
};
I have attached 2 pictures. 1 how it needs to look like and 2 what the script outputs
Correct
Wrong
Your replaced images have to be the same resolution as the smart object.
You can declare the folder path in your code. If you still want to select the path by hand, you can select one image in the path, and extract the parent folder path.
You can recursively go through all of the layers in the documents and extract all the smart objects that you want to replace.
You may want a function to recursively traverse all the layers in the document
function browseLayer(layer, fn) {
if (layer.length) {
for (var i = 0; i < layer.length; ++i) {
browseLayer(layer[i], fn)
}
return;
}
if (layer.layers) {
for (var j = 0; j < layer.layers.length; ++j) {
browseLayer(layer.layers[j], fn);
}
return;
}
//apply this function for every layer
fn(layer)
}
Get all the smart objects in the document
const smartObjects = [];
//The smart objects can be visit twice or more
//use this object to mark the visiting status
const docNameIndex = {};
const doc = app.open(new File("/path/to/psd/file"));
browseLayer(doc.layers, function (layer) {
//You cannot replace smart object with position is locked
if (layer.kind == LayerKind.SMARTOBJECT && layer.positionLocked == false) {
smartLayers.push(layer);
doc.activeLayer = layer;
//open the smart object
executeAction(stringIDToTypeID("placedLayerEditContents"), new ActionDescriptor(), DialogModes.NO);
//activeDocument is now the smart object
const docName = app.activeDocument.name;
if (!docNameIndex[docName]) {
docNameIndex[docName] = true;
smartObjects.push({
id: layer.id,
name: layer.name,
docName: docName,
width : app.activeDocument.width.as('pixels'),
height : app.activeDocument.height.as('pixels'),
resolution : app.activeDocument.resolution //important
});
}
//reactive the main document
app.activeDocument = doc;
}
});
I assume that you have two smart objects needed to replace, the images for replacement are stored in different folders with the same name.
smartObjects[0].replaceFolderPath = "/path/to/folder/1";
smartObjects[1].replaceFolderPath = "/path/to/folder/2";
//we need temp folder to store the resize images
smartObjects[0].tempFolderPath = "/path/to/temp/folder/1";
smartObjects[1].tempFolderPath = "/path/to/temp/folder/2";
Ex: The first iteration will replace smartObjects[0] with "/path/to/folder/1/image1.jpg", and smartObjects[1] with "/path/to/folder/image1.jpg"
Now resize all the images following the properties of the smart objects
smartObjects.forEach(function(smartObject){
//Get all files in the folder
var files = new Folder(smartObject.replaceFolderPath).getFiles();
//Resize all the image files
files.forEach(function (file) {
var doc = app.open(file);
doc.resizeImage(
new UnitValue(smartObject.width + ' pixels'),
new UnitValue(smartObject.height + ' pixels'),
smartObject.resolution
);
//save to temp folder
doc.saveAs(
new File(smartObject.tempFolderPath + "/" + file.name),
new PNGSaveOptions(),
true
);
doc.close(SaveOptions.DONOTSAVECHANGES)
});
});
Finally, replace the smart object
//get list of file again
var files = new Folder(smartObject.replaceFolderPath).getFiles();
files.forEach(function(file){
var fileName = file.name;
smartObjects.forEach(function(smartObject){
//active the window opening the smart object
app.activeDocument = app.documents.getByName(args.documentName);
var desc = new ActionDescriptor();
desc.putPath(charIDToTypeID("null"), new File(smartObject.tempFolderPath + "/" + fileName));
executeAction(stringIDToTypeID( "placedLayerReplaceContents" ), desc, DialogModes.NO);
});
//Now export document
var webOptions = new ExportOptionsSaveForWeb();
webOptions.format = SaveDocumentType.PNG; // SaveDocumentType.JPEG
webOptions.optimized = true;
webOptions.quality = 100;
doc.exportDocument(new File("/path/to/result/folder" + file.name), ExportType.SAVEFORWEB, webOptions);
});
Now you can close all the opening smart objects
smartObjects.forEach(function (s) {
app.documents.getByName(r.docName).close(SaveOptions.DONOTSAVECHANGES);
});
i posted this question earlier however it was a jumbled and made no real sense.
Also I've re hashed the code but i'm still getting the same issue.
To explain; i have an SVG element that i can current click on and drag about, this will works peachy and i'm, pleased with it, however once the user unclicks the mouse button and then goes and moves the mouse and starts the dragging functionality, the svg co-ords simply go back to 0 and the whole image just starts back at 0.0.
this is really buggin me now, i feel like i'm missing something simple.
edit: JSFiddle as requested - https://jsfiddle.net/2cu2jvbp/2/
Here is the code that i've "hashed" together:
var states = '', stateOrigin;
var root = document.getElementById("svgCanvas");
var viewport = root.getElementById("viewport");
function setAttributes(element, attribute)
{
for(var n in attribute) //rool through all attributes that have been created.
{
element.setAttributeNS(null, n, attribute[n]);
}
}
function setupEventHandlers() //self explanatory;
{
setAttributes(root, {
"onmousedown": "mouseDown(evt)", //do function
"onmouseup": "mouseUp(evt)",
"onmousemove": "mouseMove(evt)",
});
}
function setCustomTransMatrix(element, a,b,c,d,e,f) {
var m = "matrix(" + a + " " + b + " " + c + " " +d + " " + e + " " + f + ")";
element.setAttribute("transform", m);
}
function getMousePoint(evt) { //this creates an SVG point object with the co-ords of where the mouse has been clicked.
var points = root.createSVGPoint();
points.x = evt.clientX;
points.Y = evt.clientY;
return points;
}
function mouseDown(evt)
{
if(evt.target == root || viewport)
{
states = "pan";
stateOrigin = getMousePoint(evt);
}
}
function mouseMove(evt)
{
var pointsLive = getMousePoint(evt);
var storedCo = [];
if(states == "pan")
{
setCustomTransMatrix(viewport, 1,0,0,1, pointsLive.x - stateOrigin.x, pointsLive.Y - stateOrigin.Y);
storedCo[0] = pointsLive.x - stateOrigin.x
storedCo[1] = pointsLive.Y - stateOrigin.Y;
}
else if(states == "store")
{
stateOrigin = pointsLive;
states = "stop";
}
}
function mouseUp(evt)
{
if(states == "pan")
{
states = "store";
if(states == "stop")
{
states ='';
}
}
}
function intialize() {
var matrik = root.getCTM();
setupEventHandlers();
console.log(matrik);
//setCustomTransMatrix(viewport, matrik.a, matrik.b, matrik.c, matrik.d, matrik.e,matrik.f);
}
intialize();
I have attached the screenshot below to explain what i am trying to do.
The yellow highlighted line is the script which is run to get the position of the div (The red box in the picture).
I have used this code to calculate the position.
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
var left = 0;
var top = 0;
var i = 0;
while (element) {
xPosition = (element.offsetLeft);
yPosition = (element.offsetTop);
console.log("TOP Pos: "+yPosition+"Left Pos: "+xPosition);
if (i == 1) {
left = xPosition;
top = yPosition;
}
element = element.offsetParent;
i++;
}
return {
x: left,
y: top
};
}
And here i have used this method
function ReadDivPos(selector) {
var _divPos = "";
var parentDoc = window;
while (parentDoc !== parentDoc.parent) {
parentDoc = parentDoc.parent;
}
parentDoc = parentDoc.document;
var parentDiv = parentDoc.getElementsByTagName('div');
var divs = [];
for (var i = 0; i < parentDiv.length; i++) {
if (parentDiv[i].className == "content") {
var pos = getPosition(parentDiv[i]);
var x = pos["x"];
var y = pos["y"];
console.log("Values+ Top: " + y + " Left: " + x);
var w = parentDiv[i].offsetWidth;
_divPos += x + "," + w + "," + y + "," + (x + w) + ","+window.screen.availWidth+"\\n";
}
}
console.log("Values+ x: " + _divPos);
return _divPos;
}
Interestingly i am getting three values and on the second attempt i am getting the correct values. Here is the screenshot showing all the three values.
The correct value is
TOP Pos: 185Left Pos: 197
which i got it in the second attempt. Can anyone explain me why i did not get the correct values in the first attempt or is there any efficient way to get these values. I have to get the parent node because this was the only way to access the div class='content' as script is placed before the div content so i have to read the parent nodes and then i am able to access the required div.
Please Note this is the copy of my original question(Div Positioning is calculated fine but need explanation how it is working). The guy asked me to accept his answer and then he will show how it is done but he never came back to me once i accepted his answer and unfortunately i have also forgot my userid so i am able to logon to my orignal account.
If someone just explain me why this is giving me correct positions in the second attempt. I am new to frontend development if i understand this concept then it will help in my future projects. Thanks in advance
I am creating a diagramming tool using RaphaelJS and have run into a problem, i cannot see how i can edit the shapes that have been painted onto the canvas paper. For example, below is the code i use to create a UML Class shape and would now like to know how to modify the elements contained within, Im using MooTools BTW:
var uml_Class = new Class(
{
initialize: function(name)
{
this.className = name;
this.pointA_X = 1; this.pointA_Y = 1;
this.pointB_X = 150; this.pointB_Y = 1;
this.pointC_X = 1; this.pointC_Y = 40;
this.pointD_X = 150; this.pointD_Y = 40;
this.pointE_X = 1; this.pointE_Y = 100;
this.pointF_X = 150; this.pointF_Y = 100;
this.pointG_X = 1; this.pointG_Y = 160;
this.pointH_X = 150; this.pointH_Y = 160;
this.generate_Shape();
},
generate_Shape: function()
{
this.classSet = paper.set();
this.classSet.push
(
this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y).attr({"fill":"white"}),
this.line_Attrib = paper.path("M " + this.pointC_X + " " + this.pointC_Y + " L " + this.pointD_X + " " + this.pointD_Y),
this.line_Method = paper.path("M " + this.pointE_X + " " + this.pointE_Y + " L " + this.pointF_X + " " + this.pointF_Y),
this.classText = paper.text(this.pointB_X/2, this.pointA_Y+20, this.className).attr({"font-size":"14"}),
this.attribText = paper.text(this.pointD_X/2, this.pointC_Y+10, "Attributes").attr({"font-size":"10"}),
this.methodText = paper.text(this.pointF_X/2, this.pointE_Y+10, "Methods").attr({"font-size":"10"})
);
this.shapeBase.draggable.enable();
},
add_new_Attrib: function()
{
},
add_new_Attrib: function()
{
}
});
The above code works fine and on my canvas classes are created which show there name and are constructed using the rectangle for the base and two line to create the three sections:
name area
attrib area
method area
By making the shapeBase rectangle variable draggable i means that the user can click anywhere within this shape to drag, again this functionality works fine.
i would now like to code the two functions add_new_Attrib and add_new_Method. The attrib function should first resize or grow the cube by adding 20 to the overall height (via point_H_X) to make space for a new attrib entry and then move the method line (line_Method) and text (method_Text) down by 20.
the add_new_method line should also grow the shapeBase rectangle by 20 to make room for the new method entry.
I cant seem to find a way to do this, for example, when i put the following code into the add_new_Attrib shape, i am trying to redraw the shapeBase but instead it draws an entirely new rectangle:
add_new_Attrib: function()
{
this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y+20).attr({"fill":"white"});
},
Could anyone tell me how to resize or reposition the rectangle and paths that are inside my class?
Thanks for any input your may have!
RaphaelJS's getBBox and attr methods is what you are looking for:
add_new_Attrib: function()
{
var bbox = this.shapeBase.getBBox();
this.shapeBase.attr({'height': bbox.height + 20, "fill":"white"})
}
To reposition, look at translate (can't link, but it is in the same doc as above).