Copy link to clipboard
Copied
I have done some experiments and I have great news. I have put the Application.
Here is the JSX code which launches the panel into action:
#target illustrator
function test () {
var manifestPath = app.path.fsName.replace(/\\/g, "/") + "/Support Files/Required/CEP/extensions/com.adobe.illustrator.OnBoardingForLearnPanel/CSXS/manifest.xml"
var testHtmlLocation = "file:///" + encodeURI("C:/Users/.../Simple HTML Test.html");
app.showLearnPanelWithContent(manifestPath, testHtmlLocation);
};
test();
<html>
<head>
<title>TEST</title>
<script src="CSInterface.js"></script>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
body > * {
margin: 5px;
}
</style>
</head>
<body>
<h1>Simple Extension Test</h1>
<input type="text" value="" id="test-input" placeholder="Enter a string"/>
<button id="test-doc-action">Test Document Action</button>
<p id="result-message"></p>
<script>
const cs = new CSInterface();
const scriptTemplate = `function testScript (strArg) {
app.documents.add();
alert('Your new document is made.\\n' + strArg);
return 'SUCCESS!';
}
testScript('STRING_ARGUMENT');`;
function runScriptFromLearnPanel (scriptString, strArg) {
const finalizedTemplate = scriptString.replace("STRING_ARGUMENT", strArg).replace(/^\t\t\t/g, "");
return new Promise(resolve => {
cs.evalScript(finalizedTemplate, (res) => resolve(res));
});
}
function main () {
var btn = document.getElementById("test-doc-action");
var testInput = document.getElementById("test-input");
var resultDisplay = document.getElementById("result-message");
btn.addEventListener("click", function () {
runScriptFromLearnPanel(scriptTemplate, testInput.value)
.then((res) => {
resultDisplay.textContent = res;
});
});
}
window.onload = main();
</script>
</body>
</html>
Copy link to clipboard
Copied
wow!! great article Vasily thansk for sharing!
Copy link to clipboard
Copied
Yes, wow! Thanks for taking us through your research and experiment. It's full of possibilities.
For anyone following along on Mac OS, the path to the manifest is inside the .app bundle:
/Applications/Adobe\ Illustrator\ 2021/Adobe\ Illustrator.app/Contents/Required/CEP/extensions/com.adobe.illustrator.OnBoardingForLearnPanel/CSXS/manifest.xml
Copy link to clipboard
Copied
Awesome!
Now we will have to lobby for enabling the Learn panel for everyone.
Copy link to clipboard
Copied
Thanks for sharing this experiment.
Copy link to clipboard
Copied
CSXS events work!
HTML Javascript:
// set up CSXS event test:
cs.addEventListener("LearnPanelJSXScriptEvent", function (event) {
resultDisplay.textContent = "type=" + event.type + ", data=" + event.data;
});
JSX event-emitting script:
#target illustrator
function test () {
function eventTest () {
try {
var xLib = new ExternalObject("lib:\PlugPlugExternalObject");
} catch (e) { alert(e) }
if (xLib) {
var eventObj = new CSXSEvent();
eventObj.type = "LearnPanelJSXScriptEvent";
eventObj.data = "some payload data...";
eventObj.dispatch();
}
};
eventTest();
};
test();
This means that once an event listener is attached inside the Learn panel's html, it does not necessarily have to obtain data from Illustrator by having to have the user push a script-executing button in the panel and have to have the OnBoarding.jsx file in place. At first, I was thinking of the most brutal way by dynamically writing the html file or some contents of it via JSX script to push that Illustrator data to the panel. Now it is evident that the CEP event listener can be set up to parse the payload string and not only get new data from Illustrator that way but also get more UI instructions such as a prompt dialog or entirely different UI to dynamically replace the existing UI.
Imagine, a batch script can run and invoke different child process scripts that are in different files and all of them can be sending data to this front-end listener to have it update a progress bar and also send the data to a remote url.
Copy link to clipboard
Copied
This sounds intriguing, @Silly-V ! Our AI automation solution interacts with our website constently, pulling variables from a JSON file and transfering image/vector assets. I wonder if this is something we should look at. What version of AI is required?
Copy link to clipboard
Copied
It has to be at least Ai2020.
Yes, with much more work than in this example, it may be possible to upload and download files. This could be a grease needed for ultimate satisfaction for some DAMs.
Copy link to clipboard
Copied
Very interesting. Congratulations on that investigation.
I don't like to be some grumping grinch, but I'm afraid that this adventure won't last very long.
Hopefully I'm wrong!
Copy link to clipboard
Copied
You are implying the man might come and shut the party down?
On one hand it's a very convenient way to go "CEP-lite" and it kind of implies that the Learn panel is a generic window to show stuff in, such as information about a script. On the other hand however the Learn panel may be for internal stuff only and this was an oversight. Still, and I am not sure if this will work this way, but even without the user adding in administratively the OnBoarding.jsx file, if they go to a website that has bad javascript injected or existing purposefully in its source, and it has code that does window.cep.fs they could have files written and processes executed that they didn't want. So the users who are executing JSX that sets the Learn panel will have to watch out for the contents of their JSX and execute jsxbin files only from trusted sources and developers will have to watch out for not putting in urls to bad websites in their JSX code and being careful to not put in urls to places which have been hacked or are susceptible to hacking. I guess the risk is same as making a CEP extension that replaces its UI with content from some URL - as a basic control you don't want users to put arbitrary strings in there. Hmm let's watch this space.
Copy link to clipboard
Copied
Yes, the party can be burst off sooner as you may wish today.
Let's see what may happen in the future.
Copy link to clipboard
Copied
Update: new findings regarding jsx/fs.
Although the most preferred and convenient way to manipulate Illustrator from the Learn panel would be through the use of JSX directly, this can only be done by putting a file into a location using elevated access. However, it is possible to do much of almost exactly the very same thing using window.cep.fs.writeFile().
I learned CSXS events are one-way messages sent from JSX to CEP, allowing us to quickly push data up from JSX scripts without any extra work. However they are only one-way and the JSX script can't wait on any response from the panel, which would have still been good for all sorts of things. So the next route is to write down text files and wait on them.
Using a CSXS event to trigger the panel into writing down a file works.. sort of - it's a twisted sort of asynchronous event whereby the code process of the panel seems to run after the JSX script is completed. So while I was using $.sleeps to try and wait on a file, it was sleeping and then writing the file, defeating the purpose.
Can there be a way around it? Probably!
It looks like the CSInterface event that is used to detect whether the panel was open or not can be leveraged to write down and keep a state of things. It was also necessary to mind this as the Learn panel does not automatically open when new content is processed within it via the receiving javascript that sets new UI content in my project -
Copy link to clipboard
Copied
Thanks 👍.