Trying to use Folder.getFiles() as the basis for a...

Inventsable · ‎Jul 30, 2018

Hi guys. I want to make a file tree menu GUI for my script, and I found window.cep.fs.readDir strange in that it returns undefined for directories, so I decided to do this through JSX: recurseChildren(rootFolder) function recurseChildren(path) { var subFolders = getChildren(path, 'Folders'); var subFiles = getChildren(path, 'Files'); var children = []; if (subFolders) { for (var i = 0; i < subFolders.length; i++) { children.push(subFolders) children.push(recurseChildren(subFolders)); } } if (subFiles) { for (var i = 0; i < subFiles.length; i++) { children.push(subFiles); } } if (!children.length) { return false; } else { return children; } } function getChildren(path, type){ var thisFolder = Folder(path); var children = thisFolder.getFiles(); var subs = []; if (!children.length) { return false; } else { for (var i = 0; i < children.length; i++) { switch (type) { case 'Folders': if ((/\/(\w|\-|\d)*$/g.test(children)) && !(/LICENSE/.test(children))) subs.push(children); break; case 'Files': if ((/\/(\w|\d|\-)*\.(\w)*$/g.test(children)) || (/LICENSE/.test(children))) subs.push(children); break; default: subs.push(children); break; } } return subs; } } So I have access to all the files in all the folders of a single root directory, including ones that are excluded from getFiles() typically (like '.git', 'LICENSE', '.debug' and more), and my plan was to use this as a basis for constructing a tree view menu itself, but now I'm confused as to the best way to organize the data. I tried appending each new directory as a property of an object with each filename as another property within that, but found that traversing a 'nesting level' within an object without knowing it's name or what nesting level it is (to know what the parent would be) was really obfuscatory and pretty hard to do. Initially I thought I should use arrays within arrays, but then I tied myself up in a lot of corners trying to go that route too, because I need to know the name of the subfolder, the subfolder's parent, and the subfolder's contents. How would you best organize this, or rewrite the above to give a better result? I feel like dropping the file reading and returning only directories, then using window.cep.readFile on all the directories contents back in vanilla JS would be far easier than anything I'm doing here, am I wrong? Are there better ways to do this?

Inventsable · ‎Jul 27, 2018

No problem! Should note there's a typo in my code at the for loop, I have a normal comma instead of semi-colon: 'i < params.length, i++' should be 'i < params.length; i++). Not sure how to edit on mobile, lol. If you're on desktop, use the Advanced Editor. A WYSIWYG editor pops up and in the toolbar you can see a greater than bracket (<), click on it for dropdown of syntax highlighting choices, select JavaScript. It drops a line of code format that you can paste into easily, but the display glitches and you sometimes need to toggle from HTML and back to show it correctly. Array methods are very useful but there's no need to rush in learning and be overwhelmed. Coding is exciting though, if you have any more trouble I'll try to implement simple uses of array methods in another response.

Inventsable · ‎Jul 27, 2018

I'm not in a position to test it, but I'd use arrays for everything. I'd loop through an array to assign the values and properties to a new CMYKColor object, then send the result and name to another function to then add() the swatches, just to make it a bit cleaner: generateSwatchColor(0,0,40,0,'testSwatch') function generateSwatchColor(c,m,y,k,name){ // one array for the color property names var params = ['cyan', 'magenta', 'yellow', 'black']; // another array for the input values var values = [c,m,y,k]; var newSwatchColor = new CMYKColor(); // Loop through both arrays at the same time. for (var i = 0; i < params.length, i++) { var param = params; // Assign this input value to this color property newSwatchColor[param] = values; } // Send the result to another function assignSwatch(newSwatchColor, name) } function assignSwatch(color, name) { // add new swatch, assign color and name from previous function var docRef = app.activeDocument; var newSwatch = docRef.swatches.add(); newSwatch.name = name; newSwatch.color = color; } You could do this in much better ways even, like sending a full array as the first parameter instead of having four arguments for this function, or using array methods like .push(), .pop(), shift/unshift, have arrays within arrays and iterate the entire length of 30 swatches, etc. One more function before this could iterate through a parent array which itself contains child arrays (whose contents would feed into the c,m,y,k parameters of the generateSwatchColor function) and automate 30 swatches decently easily

Inventsable · ‎Jul 22, 2018

I do this all recreationally so I don't have a LinkedIn, but I can share other ways -- my username on reddit is u/PortablePawnShop and on GitHub I'm Contactician, you actually started following me on GitHub a few weeks back and I have all the code for this repo posted there. I'd welcome any help or teaming up, but I'm very new to coding in general. I tried reading and sending from JSX, and noticed that it does work as expected if there's an alert() anywhere in the stack, but once I take the alert out I'm back to the same JSX lag. Right now I'm using a single folder, but I'm thinking having a temporary folder could be more useful because I could scan for when there's a file in that temp folder as a way to verify the timing of the export then read that file, push it to a verified folder and delete the temp one. Right now I'm constantly rewriting a single file and my trouble is that I'm reading the old iteration of the file prior to the export/rewrite. JSX: var console = { log : function(data) {JSXEvent(data, 'console')} }; function verifyFile(name){ var newFile = File(setPath + "/" + name + ".svg"); try {newFile.open('r'); } catch(e){alert(e)}; var contents = newFile.read(); return contents; } function exportSVG(name){ var newName = setPath + "/" + name + ".svg"; var thisFile = new File(newName); var type = ExportType.WOSVG; doc.exportFile(thisFile, type, setOptionsForSVGExport()); console.log(verifyFile(name)); } JS: csInterface.addEventListener('console', function(evt) { console.log(evt.data); }); Is this what you mean? My plan is to 'arm' the SVG to create the a preview and generate input controls for all included classes, then crawl through both the stylesheet and the resulting SVG to RegExp or replace the default class names on export along with a few other options. I'd like to have the ability to hover over one of the inputs for renaming and highlight the parts of the preview of that corresponding class (so you know what you're renaming before export).

Inventsable · ‎Jul 22, 2018

EDIT: Please don't move my thread. I get great answers at this forum and whenever I'm pushed to Add-ons, I never get any answers. Please let me keep my thread here where I originally posted it. I want to make a panel that can package customized SVGs, creating a companion stylesheet and replacing 'cls-1' and etc. with dynamic class names along with other ways of prepping the files. I have it working to inject the SVG into my panel: But the problem is that I'm having to click twice for an accurate preview because my evalScript function is slower than my reading function. I've tried calling the evalScript before reading, using an anonymous function as the callback of the evalScript and deploying reading from there, using a sleep() function to force a delay on the reading, and sending an event from JSX to JS at the end of my evalScript function and triggering the read from there. No luck even though the event looks like it's the most accurate. So my problem is that I'm telling Illustrator to export, but all the methods of reading the file I'm using keep happening before my export is finished despite being afterwards in code. Is there a better way to do this? How can I solve this timing issue? Relevant JSX: function exportDocument(name){ exportSVG(name); JSXEvent(name, "com.mightySVG.svgReady") } function setOptionsForSVGExport(){ var options = new ExportOptionsWebOptimizedSVG(); options.artboardRange = '1'; options.coordinatePrecision = 2; options.fontType = SVGFontType.OUTLINEFONT; options.svgId = SVGIdType.SVGIDREGULAR; options.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS; return options; } function exportSVG(name){ var newName = setPath + "/" + name + ".svg"; var thisFile = new File(newName); var type = ExportType.WOSVG; doc.exportFile(thisFile, type, setOptionsForSVGExport()); } function JSXEvent(payload, eventType) { try { var xLib = new ExternalObject("lib:\PlugPlugExternalObject"); } catch (e) { JSXEvent(e, 'console') } if (xLib) { var eventObj = new CSXSEvent(); eventObj.type = eventType; eventObj.data = payload; eventObj.dispatch(); } return; } and Javascript: var preview = document.getElementById('preview'); // export the SVG on click of button var btnExport = document.getElementById('push'); btnExport.addEventListener('click', function(e){ var name = appUI.data.doc; csInterface.evalScript(`exportDocument('${name}')`, function(e){ var thisFile = previewPath + "/" + name + ".svg"; // sleep(1000); var result = window.cep.fs.readFile(thisFile); if (0 == result.err) newPreview(result.data, name); else console.log(`Error ${result.err}`); }) }, false) // the event that is meant to fire when the file is ready, // currently fires before the file is written csInterface.addEventListener('com.mightySVG.svgReady', function(evt) { updatePreview(evt.data); }); // inject the SVG into preview through AJAX function updatePreview(file){ clearPreview(); // https://stackoverflow.com/a/14070928 client = new XMLHttpRequest(); client.open("GET","../preview/" + file + ".svg",false); client.overrideMimeType("image/svg+xml"); client.send(""); document.getElementById('preview') .appendChild(client.responseXML.documentElement); } // remove previous svg preview function clearPreview(){ while(preview.firstChild){ preview.removeChild(preview.firstChild); } } // this parses the created SVG file, creating a stylesheet and SVG file with style omitted function newPreview(data, name) { // ... long ... } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } This post moved from Illustrator Scripting to Extensions/AddOns Development. [Moderator]

Inventsable · ‎Jul 04, 2018

Hi Loic, that sounds really promising. I looked in the ESTK OMV's description and read the MDN doc about garbage collection, but I only see discussions mentioning it's use without solid examples for Adobe scripting. The loaded files (if we're not talking the main extension and only snippets) are meant to be very small, just a few lines or so, should only contain variables or functions without allowing anything else, and ideally shouldn't be messy at all. I only want to clear/delete the snippet if pressing the garbage can on the right side of the panel in the demo in the original post so it's no longer available during this session. Can you point out what's wrong here? // example full snippet: var example = app.documents[0].name; // alert(example) example = null; $.gc() alert(example) It returns null, but I'm guessing it should return undefined if it actually cleared. I already have a function that splices variable and function names from the snippet (for the preview of the snippet's title) and could set those to null through another function then eval them over again. I feel like if I had to automate setting the loaded variables to null before running garbage collection regardless, then I might as well just leave it at setting them to null unless there'd be any concern with memory or bad practice doing it that way?

Inventsable · ‎Jul 02, 2018

Still stumped by this, and I'm pretty new to coding so I may be overlooking something really obvious but I'd appreciate any input. I found that you can remove javascript files from a document by identifying it with getElementsByTagName("script)" and deleting it, and I wish I could incorporate something similar here but JSX files don't show up in the Sources panel in CEF debugging, which makes me pretty curious where I could find them. Is there any way to see what JSX files are actively running (/have been evaluated) during this given session and programmatically access that information through an extension? I realize that I could store all the information; like how many snippets and what their contents are; in persistent cookies or through I/O via adobe.cep.fs.readFile then simply reload the panel each time I remove or make a modification to any given snippet to effectively rebuild the UI and eval stack to solve this problem, but that seems like a hacky solution and I'd like that to be a last resort. Is there any way (through JS, JSX or any other means) to remove or uneval a script after having used $.evalFile to initialize it?

Inventsable · ‎Jun 29, 2018

Figured I'd update this with a very simple solution: var cs = new CSInterface(); var appName = cs.hostEnvironment.appName; // using function from comment above: loadJSX(`${appName}.jsx`); I've been keeping unique functions in app-specific .jsx files but the universal/app agnostic ones in scripts prior, so you can do the above without if/else statements if your files are named "ILST.jsx", "AEFT.jsx", "PHXS.jsx", etc.

Inventsable · ‎Jun 29, 2018

I ran the script and it returns "an Illustrator error occured: 1128549443 ('CDLC')". Admittedly I'm not sure where to reference what that means, but I think it probably has to do with either your index number in the loop (if i = 1, then your use of i - 2 returns a value of negative 1) or use of activeDocument.artboards (instead of app.activeDocument.artboards or myDoc.artboards). I tested this with no errors returning: var myDoc = app.documents[0]; var myABs = myDoc.artboards.length - 1; for (var i = myABs; i > 0; i--) { myDoc.artboards.setActiveArtboardIndex(i) myDoc.artboards.remove(); } You could also use try and catch statements like so: // attempt to execute code in a try{ ... } block try { for (var i = myABs; i > 0; i--) { myDoc.artboards.setActiveArtboardIndex(i) myDoc.artboards.remove(); } } catch(error){ // catch statement is only in effect if an error occurs: alert(error); // if you wanted to bypass an error purposefully, you could use throw or something like: // } catch(e){return} };

Inventsable · ‎Jun 29, 2018

Hey guys, I'm making a panel that uses the CodeMirror library to act like a pocket IDE / native text editor for scripting, that can 'load' (by writing to a .jsx file which is immediately $.evalFile'd) snippets of jsx and transfer any error messages between: This works really well and I like the idea of these independent "notesnippets" to work with in a sandbox, but I'm not sure how I would edit or delete them after using $.evalFile on these snippets. Since I write to a file then $.evalFile(), I don't know how to do the opposite -- say I want to edit the snippet's contents then reload them so their values are updated, I notice that the original values still remain even if I: 1) Rewrite the contents of the file then $.evalFile() it again 2) Delete the file, then write and eval or doScript() it. 3) Try uneval() (which I'm sure isn't for this purpose, but I can't find any explanations of it's use and hardly any examples online, of which I don't understand the context of) So I imagine that using $.evalFile() is returning a new instance while the original instance is still being evaluated without regard to the referenced file's current contents? Can I delete a $.evalFile()'s results from memory in order to clear it without refreshing the extension, which would allow me to subsequently write new values in with a new $.evalFile() using variables or functions with the same name? Overwrite, modify or delete them?

Inventsable · ‎Jun 29, 2018

Thanks! This is very helpful, much cleaner and simpler than the one I was doing. I think your method may as well replace .appSkinInfo since it looks like both of us in practice only use the panel background color though. Do you know anything about the native app font-family or app highlight color? If not how to retrieve it programmatically, what the app actually uses as the font and what the .appSkinInfo font-family is referring to?

Inventsable · ‎Jun 25, 2018

Hey guys, I thought it was strange that appSkinInfo doesn't include very much so I've started my own version for Illustrator, After Effects and Photoshop: It works decently well at the moment though one or two colors are slightly off (like Highlight on the Light theme). In theory this should prevent any miscolored panel elements, backgrounds or text and would auto-update for recoloring, adding basic eventListeners and logging all UI data into a global object for storage, but I'm a bit confused as to where some of the information is coming from or what it's referring to. From the CSInterface file: /** * @class AppSkinInfo * Stores window-skin properties, such as color and font. All color parameter values are \c #UIColor objects except that systemHighlightColor is \c #RGBColor object. * * @param baseFontFamily The base font family of the application. * @param baseFontSize The base font size of the application. * @param appBarBackgroundColor The application bar background color. * @param panelBackgroundColor The background color of the extension panel. * @param appBarBackgroundColorSRGB The application bar background color, as sRGB. * @param panelBackgroundColorSRGB The background color of the extension panel, as sRGB. * @param systemHighlightColor The highlight color of the extension panel, if provided by the host application. Otherwise, the operating-system highlight color. * * @return AppSkinInfo object. */ This seemed pretty self-explanatory until I began expanding it to include every conceivable UI color and seeing the elements change in real time and all the values of the text in the panel updated. Illustrator and Photoshop both report Tahoma as their Base Font Family and both report 10px Font Size, but that's not correct because Illustrator looks like it has a higher DPI (or Photoshop a lower one) and this same panel in Photoshop has text that looks as much as 1.5 times as big as it should be (despite both having the same 10px font size). After Effects says the base font is Adobe Clean -- where are these Base Fonts coming from and what are they referring to? The font's inside the app are clearly san-serif (UI, input text, menus, everything that I see) and very clearly not a serif like Tahoma. So where does it get Tahoma from, and what is the actual font that Illustrator or other apps use for their UI? What is appBarBackgroundColor? The description makes it sound like it would be the header of panels in After Effects or the darker, top section of a window, yet in all apps I've tested it returns the same color as the panelBackground. Also, systemHighlightColor always gives me the OS highlight and never a host app color so I had to make them myself. Essentially, I found the only useful properties of AppSkinInfo were baseFontSize and panelBackgroundColor, and that all the others either seem incorrect or produce results that clearly don't match the UI. Am I wrong here? Your post moved from Illustrator Scripting to Extensions / Add-ons Development by Moderator.

Inventsable · ‎Jun 05, 2018

Hey guys, new to scripting. I'd like to be able to crawl through my comp and identify any visible color controls (whether inside stroke or fill, for text, or color expression controls, etc.) to either .push() into an array or to modify each by appending an expression to it. I've modified snippets given by Horshack and Dan Ebberts (thanks btw!) and am successfully combing through every property of every layer of my comp, but I'm also returning hidden colors that I'd like to not have plus I'm getting some odd errors: // find / replace parameters are for names, not relevant at the moment // main("Stroke 1", "Stroke"); var count = 0; var colorArray = []; // Horshack @https://forums.adobe.com/thread/2317720 function dumpPropTree(rootObj, nestingLevel, find, replace) { var countProps = rootObj.numProperties; for (var propIndex=1; propIndex <= countProps; propIndex++) { var prop = rootObj.property(propIndex); if (prop.name === find) { prop.name = replace; } var type = prop.propertyValueType; /////// Color: switch(prop.propertyValueType) { case PropertyValueType.COLOR: if (prop.canSetExpression) { var newColor = rgbToHex(prop.value[0] * 255, prop.value[1] * 255, prop.value[2] * 255); // working: // alert(newColor); count++; // not working: // colorArray.push(newColor); } break; default: break; } /////// End color if (prop.numProperties > 0) dumpPropTree(prop, nestingLevel+1, find, replace); } } function main(find, replace) { var activeComp = app.project.activeItem; var countSelectedLayers = activeComp.layers.length; for (selectedLayerIndex = 1; selectedLayerIndex <= countSelectedLayers; selectedLayerIndex++) { var layer = activeComp.layers[selectedLayerIndex]; dumpPropTree(layer, 0, find, replace); } // alert("Result is " + colorArray); // ERROR: Invalid numeric result (divide by zero?) // But why? There's no division in this code, and hex values are showing correctly? alert(count); } /// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb // componentToHex(); // rgbToHex(); When I use this on a comp that has one shape layer with 4 rectangles (each of which having one distinct fill), then I return 13 colors instead of 4, and the extras seem to be for Blending Modes because they're pure white or pure black. I thought .canSetExpression would filter those out since they don't seem to be visible, is there a better way to identify only the visible Color properties, and can I have any pointers on why I'm getting errors trying to push these hex values to a global array? The ideal output would be returning an array like ["ff0000", "00aa99", "bcbcbc", "323232"], which would be all four (fill/stroke/expression control) colors currently inside my comp. Can I get any help here? I can discriminate the array so only new colors are added to prevent duplicates on my own, but I'm unsure why pushing to this array doesn't work here and how to get only visible colors (and would need these solved before moving on).

Inventsable · ‎May 30, 2018

Couldn't you use SetInterval() in JS for this? It would run a csInterface.evalScript(function, callback) to Illustrator every ____ms, where the JSX would retrieve the current value of Textframes and the previous instance (which would be the last iteration of SetInterval) and discriminate them -- if previous instance and new instance are equal, return false; but if instances are not equal, return true (because the content has been changed). Then you set the previous instance equal to current in the jsx so the next interval will discriminate using that value, and a conditional in the callback so it's only activated if receiving true. Right? Are you using only JSX, or JS and JSX? Edit: Also! Depending on what you're trying to do, it'd probably be annoying for that to happen every 200ms as you're trying to type, so it should probably check what's not currently selected.

Inventsable · ‎May 28, 2018

It'd be really cool to do this in a bulletproof way, accounting for any number of elements inside the appearance panel and toggling their transparency. Haven't tried duplicating or actions yet, right now it's still at the level of checking for single strokes/fills. Won't do both stroke and fill, won't recognize content inside clipping masks or Live Paint.

Inventsable · ‎May 28, 2018

I'm not afraid of walls, sir. Admittedly I'm a bit disappointed that the ceiling is so low because I expected multiple fills and strokes to be common enough to include, but I don't mind trying new things. Will you check out my current Color History? I'm really happy with it but I'd love to take it further, if the coding weren't so sloppy then I'd share but I'd rather rebuild it first and include After Effects and I/O. The highlighting example of this thread is meant to show where in the artwork that recent color is used when inside AI. I'll look into the options you mentioned here. Is this not possible to do through Actions or duplication? Can I select objects without the selection box being displayed? Is my only "real" option to literally build my own plugin, extending the API in order to access these? I've no experience with C++ yet.

Inventsable · ‎May 25, 2018

Hello again, my first CEP panel is a responsive Color History and not much but I'm really surprised by the results -- I'm not a programmer and never thought I could code. I'm going to rebuild it to really shine in Illustrator (because it's my favorite) and thought a cool feature might be (on mouse hover over the swatches) revealing where recent colors were used by dimming all other colors of any kind of objects, like this: But right now it's crude because I'm toggling the entire object's (pathItem, textFrames) opacity, so not accounting for having both a stroke and a fill or multiples of either: I noticed that it only recognizes the bottom-most stroke and fill in your Appearance Panel, and was surprised that something like .strokeColor[1] didn't work. Ideally in the above, the strokes and fills shouldn't dim if "highlighting" (/discriminating all objects against) their respective colors, which is a Recent Colors swatch in the screen recording at the top. I know I can use pathItems.stroked and pathItems.filled to check whether it has a stroke or fill (or both), but I don't know how I'd dim only one of them once I know. This seems like something that should be in the DOM? strokeOpacity and fillOpacity? Or additional strokes and fills as array items? If I could use RGBA colors (where A is alpha/transparency) that'd work, I figure I could also follow SillyV's post on doScript() dynamic actions since a recording an opacity change for stroke/fill will correctly play them, but that seems like an awfully hacky solution to this and I'd rather not glitch the selection box display since this is purely aesthetic and a playful exercise in vanity. Is this possible? I'm using RGB color space and storing the color data in an array with hex values right now, but I don't have to. My current code is: var doc = app.activeDocument var isFill = app.isFillActive(); var exist = app.documents.length > 0; var hasPaths = doc.pathItems.length > 0; var allPaths = doc.pathItems.length; var allTexts = doc.textFrames.length; var prevOpacityTexts = []; var prevOpacityPaths = []; function lowerOpacity(exceptThis) { if (exist && hasPaths) { while (prevOpacityPaths.length > 0) { prevOpacityPaths.pop(); } while (prevOpacityTexts.length > 0) { prevOpacityTexts.pop(); } // Path Items for (var index = 0; index < allPaths; index++) { prevOpacityPaths.push(doc.pathItems[index].opacity) if (rgbActiveHex("pathItems", index) === exceptThis) { doc.pathItems[index].opacity = 100; } else { doc.pathItems[index].opacity = 20; } } // Text frames for (var index = 0; index < allTexts; index++) { prevOpacityTexts.push(doc.textFrames[index].opacity) if (rgbActiveHex("textFrames", index) === exceptThis) { doc.textFrames[index].opacity = 100; } else { doc.textFrames[index].opacity = 20; } } // } } function returnOpacity() { if (exist && hasPaths) { for (var index = 0; index < allPaths; index++) { var previous = prevOpacityPaths[index]; doc.pathItems[index].opacity = prevOpacityPaths[index]; } for (var index = 0; index < allTexts; index++) { var previous = prevOpacityTexts[index]; doc.textFrames[index].opacity = prevOpacityTexts[index]; } } } function rgbActiveHex(type, here) { var activeObject; if (type === "pathItems") { if ((doc.pathItems[here].stroked) && !(doc.pathItems[here].filled)) { activeObject = doc.pathItems[here].strokeColor } else if ((doc.pathItems[here].filled) && !(doc.pathItems[here].stroked)) { activeObject = doc.pathItems[here].fillColor } else { // } } else if (type === "textFrames") { activeObject = doc.textFrames[here].textRange.characterAttributes.fillColor } var convertColor = rgbToHex(activeObject.red, activeObject.green, activeObject.blue); return convertColor; } /// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb // componentToHex(c); // rgbToHex(r, g, b); // hexToRgb(hex);

Inventsable · ‎May 24, 2018

Thanks for the replies and sorry for the delayed response. I'm not sure what was going on in my original file because I still couldn't get it to work, tried a few different ways -- but it did work once I started with a new file so there must've been some conflict that was too hard to make out in a giant, sloppy sandbox script. I think the part that was confusing me was which script would be referenced in the manifest.xml file as the .jsx file and not realizing that, through evalFile, I don't even need that .jsx and it could be empty. The CEP Cookbook seems kind've ambiguous at this part, so now I'm using this function from another link: // https://www.davidebarranca.com/2014/01/html-panels-tips-2-including-multiple-jsx/ function loadJSX(fileName) { var csInterface = new CSInterface(); var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/"; csInterface.evalScript('$.evalFile("' + extensionRoot + fileName + '")'); } Which makes sense (and really convenient), then calling that function on startup inside my .js file: loadJSX("PS.jsx"); loadJSX("AI.jsx"); loadJSX("AE.jsx"); // etc. Now everything seems to work well, and it makes a lot more sense.

Inventsable · ‎May 22, 2018

Hey guys, say I have a single panel I want to use for both Illustrator and Photoshop. In JavaScript I can use csInterface to find the host application then route through a conditional to do app-specific actions, I figured I could just evalScript to different app-specific functions in doing so -- but I've noticed that having separate DOM references within my .jsx will cause the entire .jsx to fail. If I have a script that works perfectly in Photoshop but add something like app.isFill() anywhere in that .jsx, it returns Extendscript Fail -- even if I don't initiate it on auto-execute and try to put it in a conditional like `if (app.name === 'Adobe Illustrator'){alert (app.isFill());};`. Is there a way to sneak cross-application DOM references in the same script? If not, then what would I need to do here?

Inventsable · ‎May 18, 2018

Hello, I'm very new to scripting, and trying to either access the Recent Colors section of the Swatches panel (to read their values) or some other way to create a color history. I want to be able to store the most recently used of any arbitrary number of colors, without duplication (so only including distinct and new colors) and initially I thought this would be simple given that I'd have some way to either use a timer or of detecting that the color has been actively changed, or if I could read swatch values. My thought process was: Create an empty array Store the initial foreground and background colors in that array Use a timer to detect the current foreground color Loop through the array and compare the current color with array values, if matching break but if no matches then .push() the current color. It seemed simple but I didn't realize there was no setInterval() method to use, so now I'm stuck, and all my attempts to read swatches return undefined. All the examples using Swatches are saving new ones, not reading from Recent Colors. I have everything done except for how to trigger the comparison loop, so I'd really appreciate any methods or ways that would help. Can I detect that my Color Picker was used, that the values of the Color panel have changed, or can I access those Recent Color swatches in order to programmatically have a list of hex values (stored in an array)? Or even, can I use an eventListener for any Left Click or Enter press to then trigger the comparison of the array? How would you personally do this (and I mean without implying that you do it for me, but the best way)? I found a proposed alternative through .scheduleTask but I had no luck trying the samples given in that thread in Photoshop, I also found a lot of mentions of swatches but all of them are for adding swatches instead of reading their values. Can't find it in the OMV, confused as to where I should be looking. My code so far: var currentDocuments = app.documents.length; var colorHistory = []; // if there's an active document: if (currentDocuments > 0 ) { // grab both fg and bg colors var foregroundColor = app.foregroundColor; var backgroundColor = app.backgroundColor; // add them to an array to later discriminate the active color on a setInterval timer colorHistory.push(foregroundColor.rgb.hexValue, backgroundColor.rgb.hexValue); function checkColorHistory() { var falseCount = 0; for (var A_Index = 0; A_Index < colorHistory.length; A_Index++) { // iterate through the colorHistory array var currentColor = foregroundColor.rgb.hexValue; // compare the current active foreground color with values of the array if (currentColor === colorHistory[A_Index]) { // if matching, break loop break; } else { falseCount++; // but if false matches is equal to total array length, store the new color if (falseCount === colorHistory.length) { colorHistory.push(currentColor); } continue; } } } // --! except the trigger to check this array gives an error: // "setInterval is not a function" // setInterval(checkColorHistory, 200); // --! } else { colorHistory = []; }

Inventsable · ‎May 16, 2018

Works, thanks for the pointers guys. var isFill = app.isFillActive(); if (isFill) { alert("Fill is active"); } else { alert("Stroke is active"); } Admittedly I think it's strange that, despite earnestly trying to read a lot of the documentation on SDK, CEP and JavaScript (because it's not too clear what I should be aiming for? There isn't an outline saying "If you want this, then pursue this route, etc., it's all bundled together) extensions for the last two months in preparation of all this, I don't remember a single mention of the Help > Object Model Viewer from Extendscript that SillyV pointed out. Am I wrong in saying that? Also that even inside this OMV, there aren't any samples and the description snippets are given in pseudo-code abstractions like "Application.isFillActive" instead of "app.isFillActive" directly despite the fact this isn't under a cross-platform specification and is explicitly a class for Illustrator 22 Type So why isn't it "app.isFillActive()", to avoid confusion, or a simple example of it in use? Maybe it's just me, but some of the documentation seems very obtuse -- like how in the JavaScript Scripting Reference, it explicitly says something to the effect of "There aren't many samples and what samples there are won't necessarily be the best way to do them in JS so if you want to find out something you'll have to extrapolate the info needed over the entirety of samples given (for all hundreds of pages, of which what seems like 90% I would never need to touch because I'm not in the printing business). It's the reason I've felt the need to edge towards this over the course of months rather than just jump into it and learn from direct engagement, even though I've been using Illustrator, After Effects and Photoshop for years and am really familiar with the programs.

Inventsable · ‎May 16, 2018

That seems really odd, thanks again -- I didn't realize the PDF documentation wasn't fully inclusive but you've saved me hours of guesswork so I can't stress appreciation enough. Admittedly I dropped ESTK (Is there any way to update it for auto-completion, bracket highlighting, or other standard text-editor features? It seems really antiquated in comparison to things like Sublime, Atom and Brackets...?) to use Atom in its place, but see now I should be using them together if nothing else.

Inventsable · ‎May 16, 2018

That sounds like exactly what I need, thank you. I can't test while at work and on mobile just yet -- I'm curious though, where is this, documentation-wise? It's not in the Illustrator Scripting Reference under methods for application.

Inventsable · ‎May 16, 2018

Thanks Alexander! That solves half my problem. Also Loic, I do given how I plan to use it. This isn't for a standalone script but for a panel that will assign a new color dynamically. I should've explained more clearly: I don't want to assign both a stroke and a fill or to check if a specific color is/isn't used, I only want to assign a color as a fill if fill is active and only stroke if stroke is active -- but never both at the same time, never assign the color to a fill if stroke is active and vice versa. Since this is for a panel it's passive and meant to be used organically multiple times throughout a natural workflow, just like the current Colors panel. I've yet to see any examples of this or any kind of conditional that determines it in any of my searching, but it does concern me.

Inventsable · ‎May 15, 2018

Hello, very new to scripting. I know that I can assign a color to selected objects: app.documents.add(DocumentColorSpace.RGB) // get the active document var doc = app.activeDocument; // verify there is a document and at least one shape, // enumerate through each pathItem and assign a given color to fill if ( app.documents.length > 0 && app.activeDocument.pathItems.length > 0) { var newColor = new RGBColor; newColor.red = 255; newColor.green = 0; newColor.blue = 0; for (var a=0; a<app.selection.length; a++) { try { var currentSelection = app.selection; // But how would I know whether Stroke or Fill is active here? currentSelection.fillColor = newColor; } catch (e){alert(e) } } } With AutoHotKey, I can use ControlGetText on the input element of the Color Panel ("Edit 15") to directly interact and easily apply colors by submitting a new value within it, which accurately sends it as a stroke or fill depending on which is currently toggled. Is there any way to replicate this and have access to the current/active value within this panel?

Inventsable · ‎May 07, 2018

Thank you!

Inventsable · ‎May 06, 2018

Hi Dan, thanks for the solution. If I can prod because I'm eager -- how do you find that information or would you know that? Assuming the answer isn't "Years of experience answering questions about scripting", is there a method you're using that you can share? Are you looping or enumerating through the properties, is this an index number, can you give any insight or direction if I have a future effect with a value I can't figure out how to change? I'm brand new to Adobe scripting but I've been obsessed with AutoHotKey for the last few months so I don't mind digging through docs or being told something in rough pseudo-code.

Inventsable · ‎May 06, 2018

Hi guys, I'm very new to scripting but love After Effects, I'm finding a lot of useful information online though admittedly PropertySpec seems pretty ambiguous and I've been having trouble. I'm trying to create a new comp, add a solid the size of that comp, then stack a few effects with one or two values needing changed as an exercise (instead of something like a preset for this). So I create a solid with Gradient Ramp and Colorama: var myComp = app.project.activeItem; if (myComp != null){ var w = myComp.width; var h = myComp.height; var mySolid = myComp.layers.addSolid([1, 1, 1], "Displacement Map", w, h, 1.0); var firstLayer = myComp.layer(1) var addRamp = firstLayer.Effects.addProperty("Gradient Ramp"); var addColorama = firstLayer.Effects.addProperty("Colorama"); var fxRepetitions = firstLayer("Effects")("Colorama")("Cycle Repetitions"); var fxPreset = firstLayer("Effects")("Colorama")("Use Preset Palette"); fxRepetitions.setValue(5) alert(fxPreset); //~ reports [Object property] fxPreset.setValue("Solarize Grey") //~ error "Unable to call setValue because of parameter 1. Solarize Grey is not a number" }else{ myComp = app.project.items.addComp("New Comp", 960, 540, 1.0, 10.0, 25); } My alert shows [Object property] for "Use Preset Palette", but I don't know how to assign Solarize Grey to it. How would I change this so Colorama results in greyscale instead of coming out like a rainbow here, if not for Preset Palette and GimmePropPath? How do I retrieve that kind of information? Also, is there no syntax for code in this forum editor?

Inventsable · ‎Apr 15, 2018

Hi guys, I've recently begun to branch into HTML and CSS so I've been eager to reach a point of using custom SVG's. I can get SVGs from Illustrator to correctly display as an <img> for HTML or background-image for CSS, but I'd like to easily change the fill with CSS and add pseudo-states, and in looking online I see it recommended to use Inline HTML to accomplish this. I have a simple vector of an eye icon I'm using to test, exporting as SVG with Styling: Inline, and the code it produces is this: <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.99 14.26"> <title>EyeInline</title> <path d="M38,25h0a15.4,15.4,0,0,1-26,0h0a15.4,15.4,0,0,1,26,0ZM25,20.33A4.67,4.67,0,1,0,29.67,25,4.67,4.67,0,0,0,25,20.33Zm0,2.23A2.44,2.44,0,1,0,27.44,25,2.44,2.44,0,0,0,25,22.56Z" transform="translate(-12.01 -17.87)" style="fill: #231f20"/> </svg> But when I place this into HTML (as I see other examples doing) then it's completely blank and nothing shows up. I tried all the export options I know of: Save As > SVG, then Export As to SVG with all three styling options (Internal, Inline, Presentation). What am I doing wrong and how can I do this inline? I haven't started learning Java yet, I really want to be able to use my own custom SVGs and drawings for web graphics without being limited to <img>, background-image or manually changing the color of the SVG's fill inside a separate .svg file.

Inventsable · ‎Dec 06, 2017

Just curious, and I can't find anything through Adobe devnet sites. I realize this is a pretty hefty request seeing as the program only recently came out of beta, but I'm starting to branch into CEP for AI and AE, and I'd love to have the ability to create plugins for Ch in the near future. Is this in the works, should I not be expecting it any time soon, is there anything I can be told about it so I can plan ahead?

Inventsable

Inventsable

Activity

Trying to use Folder.getFiles() as the basis for a...

Re: String as swatch.color ?

Re: String as swatch.color ?

Re: Trying to inject a live preview SVG into my pa...

Trying to inject a live preview SVG into my panel ...

Re: Are there opposites of app.doScript() or $.eva...

Re: Are there opposites of app.doScript() or $.eva...

Re: How do I include DOM references to other apps ...

Re: Can I get rid of this error?

Are there opposites of app.doScript() or $.evalFil...

Re: Questions about csInterface.hostEnvironment.ap...

Questions about csInterface.hostEnvironment.appSki...

Trying to recursively loop through comp to find al...

Re: Event listener when TextFrameItem is edited

Re: Can I convert RGB to RGBA or access individual...

Re: Can I convert RGB to RGBA or access individual...

Can I convert RGB to RGBA or access individual fil...

Re: How do I include DOM references to other apps ...

How do I include DOM references to other apps in t...

Way to detect a change of color (to make a color h...

Re: How do I access the values inside the Color pa...

Re: How do I access the values inside the Color pa...

Re: How do I access the values inside the Color pa...

Re: How do I access the values inside the Color pa...

How do I access the values inside the Color panel ...

Re: How to setValue of a property that isn't selec...

Re: How to setValue of a property that isn't selec...

How to setValue of a property that isn't selectabl...

Export as > SVG (Styling: Inline) showing blank wh...

Is there a scripting reference or any CEP document...