Pass JavaScript variables to JSX.
I'm exploring Adobe CEP for use in After Effects.
I've already written HTML and am currently using main.js to handle button responses. When the button is clicked, it executes a JSX function.
HTML(part):
<div id="Panel">
<label for="lensSelect">Select:</label>
<select id="Select">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<button id="Button">Button</button>
</div>
main.js(part):
Button.addEventListener('click', function () {
// Get selected Lens
const Select = document.getElementById('Select');
const selected = Select.value;
// Define functions for each button to execute JSX functions
function runA() {
var csA = new CSInterface();
csA.evalScript('runA()');
};
function runB(){
var csB = new CSInterface();
csB.evalScript('runB()');
}
function runC() {
var csC = new CSInterface();
csC.evalScript('runC()');
}
// Set corresponding JSX code based on the selected Lens
if (selected === 'A') {
runA();
} else if (selected === 'B') {
runB();
} else if (selected === 'C') {
runC();
}
});In the subsequent content within the same main.js file, I have returned some variables:
return {
returnD,
returnE,
returnF,
}
How can I retrieve the returned variables (e.g., returnD) within Button.addEventListener and send them to be used in the JSX file?
I've tried converting variables into a JSON string, successfully retrieving JavaScript variables within JSX in simple tests and displaying the content using an alert window. However, when dealing with complex structures, I am unsure how to proceed, and it often renders the button ineffective.
thanks!!
