developing a cep panel but my button is not working need help

Report · Dec 30, 2022

hey developers,

firts of am sorry for my bad english

I am a fresher to adobe scripting and i have an issue which i am trying to fix in my panel which i want to create

when i wrote all of my frontend (i created design and look of my panel using HTML and CSS)

i provided source code and video off my prblm in

https://drive.google.com/drive/folders/1f-X-Kag8ETEtMqVovXnDCItD9V8ecnGc

this is my html and css code

<!DOCTYPE html>

<head>

<title>vishu</title>

</head>

<body>

</body>

<div>

<button class="allbtn" id="btn1" onclick="v()" >Fill images</button>

</div>

<div>

<sp-button class="allbtns" id="btn2" onclick="v()" >single fill</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn3" onclick="v()" >swap images</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn4" onclick="v()" >fit2frame</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn5" onclick="v()" >open template</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn6" onclick="v()" >new page</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn7" onclick="v()" >rec frame</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn8" onclick="v()" >vrec frame</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn9" onclick="v()" >cir frame</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn10" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn11" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn12" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn13" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn14" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn15" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn15" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn15" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn15" onclick="v()" >clicke me</sp-button>

</div>

<div>

<sp-button class="allbtns" id="btn15" onclick="v()" >clicke me</sp-button>

</div>

</footer>

</html>

css=

.allbtns {

appearance: none;

background-color: transparent;

border: 2px solid #1A1A1A;

border-radius: 13px;

box-sizing: border-box;

color: #000000;

cursor: pointer;

display: inline-block;

font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

font-size: 13px;

font-weight: 600;

line-height: normal;

margin: 0;

min-height: 20px;

max-width: 5;

outline: none;

text-align: center;

text-decoration: none;

transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);

user-select: none;

-webkit-user-select: none;

touch-action: manipulation;

width: 100%;

will-change: transform;

margin-top: 04px;

padding-top: 2px;

padding-bottom: 2px;

-webkit-border-radius: 13px;

-moz-border-radius: 13px;

-ms-border-radius: 13px;

-o-border-radius: 13px;

}

.allbtns:disabled {

pointer-events: none;

}

.allbtns:hover {

color: #fff;

background-color: #2d2d2d;

box-shadow: rgba(0, 0, 0, 0.25) 0 10px 18px;

transform: translateY(-2px);

}

.allbtns:active {

box-shadow: none;

transform: translateY(0);

}

/* ure*/

.allbtn {

appearance: none;

background-color: transparent;

border: 2px solid #1A1A1A;

border-radius: 13px;

box-sizing: border-box;

color: #000000;

cursor: pointer;

display: inline-block;

font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

font-size: 13px;

font-weight: 600;

line-height: normal;

margin: 0;

min-height: 20px;

max-width: 5;

outline: none;

text-align: center;

text-decoration: none;

transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);

user-select: none;

-webkit-user-select: none;

touch-action: manipulation;

width: 100%;

will-change: transform;

margin-top: 100px;

padding-top: 2px;

padding-bottom: 2px;

-webkit-border-radius: 13px;

-moz-border-radius: 13px;

-ms-border-radius: 13px;

-o-border-radius: 13px;

}

.allbtn:disabled {

pointer-events: none;

}

.allbtn:hover {

color: #fff;

background-color: #2d2d2d;

box-shadow: rgba(0, 0, 0, 0.25) 0 10px 18px;

transform: translateY(-2px);

}

.allbtn:active {

box-shadow: none;

transform: translateY(0);

}

#btn3 {

font-size: 12px ;

}

#btn5{font-size: 10px;

}

and

index.js is

var csInterface = new CSInterface();

var Button = document.querySelector("#btn1");

Button.addEventListener("click", fillimgs);

function fillimgs() {

csInterface.evalScript("batch()");

}

and final index.jsx

function batch(){

var newName = ("layer name", "ViShU_Frame");

var layers = getSelectedLayers();

for (var i = 0; i < layers.length; i++) {

layers[i].name = newName;

}

function getSelectedLayers() {

var idGrp = stringIDToTypeID("groupLayersEvent");

var descGrp = new ActionDescriptor();

var refGrp = new ActionReference();

refGrp.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));

descGrp.putReference(charIDToTypeID("null"), refGrp);

executeAction(idGrp, descGrp, DialogModes.ALL);

var resultLayers = new Array();

for (var ix = 0; ix < app.activeDocument.activeLayer.layers.length; ix++) { resultLayers.push(app.activeDocument.activeLayer.layers[ix]) }

var id8 = charIDToTypeID("slct");

var desc5 = new ActionDescriptor();

var id9 = charIDToTypeID("null");

var ref2 = new ActionReference();

var id10 = charIDToTypeID("HstS");

var id11 = charIDToTypeID("Ordn");

var id12 = charIDToTypeID("Prvs");

ref2.putEnumerated(id10, id11, id12);

desc5.putReference(id9, ref2);

executeAction(id8, desc5, DialogModes.NO);

return resultLayers;

}

var main = function (arguments, body) {

if (app.documents.length < 1) {

return;

}

var dir = Folder('D:/ViShU_ToMaR/PHOTOS FOR SHEETS');

var files = dir.openDlg('Open', '', true);

if (files.length < 1 || files === null) {

return;

} else {

var doc = app.activeDocument;

for (var i = 0; i < files.length; i++) {

try {

var curr_file = app.open(files[i]);

curr_file.selection.selectAll();

curr_file.selection.copy();

Folder((fnp = (fle = (aD = activeDocument).fullName).parent + '/ViShU_Used/')).create(), File(fle).remove()

; (jpg = new JPEGSaveOptions()).quality = 12;

aD.saveAs(File(fnp + aD.name), jpg),

aD.close(SaveOptions.DONOTSAVECHANGES)

var idslct = charIDToTypeID("slct");

var desc11 = new ActionDescriptor();

var idnull = charIDToTypeID("null");

var ref1 = new ActionReference();

var idLyr = charIDToTypeID("Lyr ");

ref1.putName(idLyr, "ViShU_Frame");

desc11.putReference(idnull, ref1);

var idMkVs = charIDToTypeID("MkVs");

desc11.putBoolean(idMkVs, false);

var idLyrI = charIDToTypeID("LyrI");

var list2 = new ActionList();

list2.putInteger(5);

desc11.putList(idLyrI, list2);

executeAction(idslct, desc11, DialogModes.NO);

doc.paste();

var idsetd = charIDToTypeID("setd");

var desc357 = new ActionDescriptor();

var idnull = charIDToTypeID("null");

var ref31 = new ActionReference();

var idLyr = charIDToTypeID("Lyr ");

var idOrdn = charIDToTypeID("Ordn");

var idTrgt = charIDToTypeID("Trgt");

ref31.putEnumerated(idLyr, idOrdn, idTrgt);

desc357.putReference(idnull, ref31);

var idT = charIDToTypeID("T ");

var desc358 = new ActionDescriptor();

var idNm = charIDToTypeID("Nm ");

desc358.putString(idNm, """Image_Layer_ViShU""");

var idLyr = charIDToTypeID("Lyr ");

desc357.putObject(idT, idLyr, desc358);

executeAction(idsetd, desc357, DialogModes.NO);

createSmartObject(app.activeDocument.activeLayer);

function createSmartObject(layer) {

var idnewPlacedLayer = stringIDToTypeID('newPlacedLayer');

executeAction(idnewPlacedLayer, undefined, DialogModes.NO);

}

var oldPref = app.preferences.rulerUnits

app.preferences.rulerUnits = Units.PIXELS;

var doc = activeDocument;

var iLayer = doc.activeLayer;

layerDown();

var mLayerB = doc.activeLayer.bounds;

doc.activeLayer = iLayer;

var scale = Math.max((mLayerB[2] - mLayerB[0]) / (iLayer.bounds[2] - iLayer.bounds[0]), (mLayerB[3] - mLayerB[1]) / (iLayer.bounds[3] - iLayer.bounds[1]));

iLayer.resize(scale * 100, scale * 100);

iLayer.translate((mLayerB[0] + mLayerB[2]) / 2 - (iLayer.bounds[0] + iLayer.bounds[2]) / 2, (mLayerB[1] + mLayerB[3]) / 2 - (iLayer.bounds[1] + iLayer.bounds[3]) / 2);

clip();

function clip() {

var idGrpL = charIDToTypeID("GrpL");

var desc7 = new ActionDescriptor();

var idnull = charIDToTypeID("null");

var ref6 = new ActionReference();

var idLyr = charIDToTypeID("Lyr ");

var idOrdn = charIDToTypeID("Ordn");

var idTrgt = charIDToTypeID("Trgt");

ref6.putEnumerated(idLyr, idOrdn, idTrgt);

desc7.putReference(idnull, ref6);

executeAction(idGrpL, desc7, DialogModes.NO);

};

function layerDown() {

var idslct = charIDToTypeID("slct");

var desc2 = new ActionDescriptor();

var idnull = charIDToTypeID("null");

var ref1 = new ActionReference();

var idLyr = charIDToTypeID("Lyr ");

var idOrdn = charIDToTypeID("Ordn");

var idBckw = charIDToTypeID("Bckw");

ref1.putEnumerated(idLyr, idOrdn, idBckw);

desc2.putReference(idnull, ref1);

var idMkVs = charIDToTypeID("MkVs");

desc2.putBoolean(idMkVs, false);

var idLyrI = charIDToTypeID("LyrI");

var list1 = new ActionList();

list1.putInteger(3);

desc2.putList(idLyrI, list1);

executeAction(idslct, desc2, DialogModes.NO);

};

var idslct = charIDToTypeID("slct");

var desc694 = new ActionDescriptor();

var idnull = charIDToTypeID("null");

var ref110 = new ActionReference();

var idLyr = charIDToTypeID("Lyr ");

var idOrdn = charIDToTypeID("Ordn");

var idBckw = charIDToTypeID("Bckw");

ref110.putEnumerated(idLyr, idOrdn, idBckw);

desc694.putReference(idnull, ref110);

var idMkVs = charIDToTypeID("MkVs");

desc694.putBoolean(idMkVs, false);

var idLyrI = charIDToTypeID("LyrI");

var list90 = new ActionList();

list90.putInteger(4);

desc694.putList(idLyrI, list90);

executeAction(idslct, desc694, DialogModes.NO);

var idsetd = charIDToTypeID("setd");

var desc696 = new ActionDescriptor();

var idnull = charIDToTypeID("null");

var ref111 = new ActionReference();

var idLyr = charIDToTypeID("Lyr ");

var idOrdn = charIDToTypeID("Ordn");

var idTrgt = charIDToTypeID("Trgt");

ref111.putEnumerated(idLyr, idOrdn, idTrgt);

desc696.putReference(idnull, ref111);

var idT = charIDToTypeID("T ");

var desc697 = new ActionDescriptor();

var idNm = charIDToTypeID("Nm ");

desc697.putString(idNm, "ViShU_Used_Frame");

var idLyr = charIDToTypeID("Lyr ");

desc696.putObject(idT, idLyr, desc697);

executeAction(idsetd, desc696, DialogModes.NO);

var idslct = charIDToTypeID("slct");

var desc698 = new ActionDescriptor();

var idnull = charIDToTypeID("null");

var ref112 = new ActionReference();

var idLyr = charIDToTypeID("Lyr ");

var idOrdn = charIDToTypeID("Ordn");

var idFrwr = charIDToTypeID("Frwr");

ref112.putEnumerated(idLyr, idOrdn, idFrwr);

desc698.putReference(idnull, ref112);

var idMkVs = charIDToTypeID("MkVs");

desc698.putBoolean(idMkVs, false);

var idLyrI = charIDToTypeID("LyrI");

var list91 = new ActionList();

list91.putInteger(82);

desc698.putList(idLyrI, list91);

executeAction(idslct, desc698, DialogModes.NO);

} catch (e) {

continue;

}

main();

}

i want that when i click that button then jsx scrip run in photoshop

as we manully run scripts in adobe photoshop

links for everything mentioned in video :-

https://drive.google.com/drive/folders/1f-X-Kag8ETEtMqVovXnDCItD9V8ecnGc

if any developer help me out to make that button working

it be a big help

Adobe Community

developing a cep panel but my button is not working need help

Explore related tutorials & articles