Answered
Extension is not communicating with After effects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Extension Name</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="libs/classic.min.css"> <!-- Local Pickr CSS -->
</head>
<body>
<nav id="nav">
<div class="panels-group">
<button id="panelx1">Panel 1</button>
<button id="panelx2">Panel 2</button>
</div>
<div class="settings-group">
<button id="settings-button">
<img src="client\images\Settings.png" alt="Settings" style="width: 24px; height: 24px;">
</button>
</div>
</nav>
<div id="panels">
<div class="panel" id="panel0">
<button id="cmp-button">CMP</button> <!-- Button for CMP -->
<button id="ADJ-button">ADJ</button>
<button id="NULL-button">NULL</button>
<button id="IN-button">IN</button>
<button id="OUT-button">OUT</button>
<button id="DUP-button">DUP</button>
<button id="STR-button">STR</button>
<button id="END-button">END</button>
<button id="SPLT-button">SPLT</button>
</div>
<div class="panel" id="panel1">
<button id="1-button">1</button> <!-- Button for CMP -->
<button id="2-button">2</button>
<button id="3-button">3</button>
<button id="4-button">4</button>
<button id="5-button">5</button>
<button id="6-button">6</button>
</div>
<div class="panel" id="panel2">
<div id="omnipotent" class="group-container">
<div id="color-group" class="color-group">
<div class="color-wheel-container">
<div id="color-picker-1" class="color-picker"></div>
<div id="color-picker-2" class="color-picker"></div>
<div id="color-picker-3" class="color-picker"></div>
<div id="color-picker-4" class="color-picker"></div>
<div id="color-picker-5" class="color-picker"></div>
</div>
</div>
<div id="other-group" class="other-group">
<div class="button-container">
<button id="default-button">Default</button>
<button id="dark-button">Dark</button>
<button id="monster-button">I am a Monster</button>
</div>
</div>
</div>
</div>
</div>
<script src="libs/CSInterface.js"></script> <!-- Include CSInterface.js -->
<script src="libs/pickr.min.js"></script> <!-- Local Pickr JS -->
<script src="js/main.js"></script>
</body>
</html>
I am trying to run an after effects script through CMP button but its not working. Please help me
document.addEventListener('DOMContentLoaded', function() {
var csInterface = new CSInterface();
const panels = document.querySelectorAll('.panel');
// Define button names and functions for Panel 1 and Panel 2
const panel1Buttons = [];
const panel2Buttons = [];
// Panel 0: 9 buttons in a 3x3 layout
createButtons(panels[0], panel1Buttons);
// Panel 1: 6 buttons in a 3x2 layout
createButtons(panels[1], panel2Buttons);
// Show the first panel by default
showPanel(0);
// Add click events to nav buttons
const navButtons = document.querySelectorAll('#nav button');
navButtons.forEach((button, index) => {
button.addEventListener('click', () => {
showPanel(index);
});
});
// Add click event to settings button
const settingsButton = document.getElementById('settings-button');
settingsButton.addEventListener('click', () => {
showPanel(2); // Show settings panel
});
// Function to create Pickr with local storage support
function createColorPicker(selector, storageKey, defaultColor) {
const savedColor = localStorage.getItem(storageKey) || defaultColor;
const pickr = Pickr.create({
el: selector,
theme: 'classic',
default: savedColor,
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
input: true,
save: true,
clear: true,
}
}
});
pickr.on('save', (color) => {
const colorString = color.toHEXA().toString();
localStorage.setItem(storageKey, colorString);
pickr.hide(); // Close the picker after saving
});
pickr.on('change', (color) => {
const colorString = color.toRGBA().toString();
updateColors(storageKey, colorString);
});
return pickr;
}
// Initialize Pickr instances with default colors
const colorPickers = [
createColorPicker('#color-picker-1', 'color1', '#3498db'), // Default color for color picker 1 (Panel 1)
createColorPicker('#color-picker-2', 'color2', '#e74c3c'), // Default color for color picker 2 (Panel 2)
createColorPicker('#color-picker-3', 'color3', '#563ce7'), // Default color for color picker 3 (Panel 3)
createColorPicker('#color-picker-4', 'color4', '#FFFFFF0A'), // Default color for color picker 4 (Button background)
createColorPicker('#color-picker-5', 'color5', '#ffffff') // Default color for color picker 5 (Button text)
];
// Function to update colors based on storage key
function updateColors(storageKey, colorString) {
if (storageKey === 'color1') {
panels[0].style.backgroundColor = colorString;
if (isActivePanel(0)) {
document.getElementById('nav').style.backgroundColor = colorString;
}
} else if (storageKey === 'color2') {
panels[1].style.backgroundColor = colorString;
if (isActivePanel(1)) {
document.getElementById('nav').style.backgroundColor = colorString;
}
} else if (storageKey === 'color3') {
panels[2].style.backgroundColor = colorString;
if (isActivePanel(2)) {
document.getElementById('nav').style.backgroundColor = colorString;
}
} else if (storageKey === 'color4') {
document.documentElement.style.setProperty('--button-bg-color', colorString);
} else if (storageKey === 'color5') {
document.documentElement.style.setProperty('--button-text-color', colorString);
// Update panel 1 and panel 2 button text color in nav
navButtons[1].style.color = colorString;
navButtons[0].style.color = colorString;
}
}
// Initialize colors on page load
function initializeColors() {
const storageKeys = ['color1', 'color2', 'color3', 'color4', 'color5'];
const defaultColors = ['#3498db', '#e74c3c', '#563ce7', '#FFFFFF0A', '#ffffff'];
storageKeys.forEach((key, index) => {
const savedColor = localStorage.getItem(key) || defaultColors[index];
updateColors(key, savedColor);
});
}
// Function to check if a panel is active
function isActivePanel(index) {
return panels[index].classList.contains('active');
}
// Function to create buttons in a panel with custom names and functions
function createButtons(panel, buttonData) {
buttonData.forEach((buttonInfo) => {
const button = document.createElement('button');
button.textContent = buttonInfo.name;
button.addEventListener('click', buttonInfo.action);
panel.appendChild(button);
});
}
// Function to show a specific panel and update navigation styles
function showPanel(panelIndex) {
const nav = document.getElementById('nav');
const navButtons = document.querySelectorAll('#nav button');
const settingsButton = document.getElementById('settings-button');
panels.forEach((panel, index) => {
if (index === panelIndex) {
panel.classList.add('active');
navButtons[index].classList.remove('dim');
// Update the nav background color based on the active panel's color
nav.style.backgroundColor = panels[index].style.backgroundColor;
} else {
panel.classList.remove('active');
navButtons[index].classList.add('dim');
}
});
// Toggle dim class on settings button
if (panelIndex === 2) {
settingsButton.classList.remove('dim');
} else {
settingsButton.classList.add('dim');
}
}
// Preset themes
const defaultButton = document.getElementById('default-button');
defaultButton.addEventListener('click', () => {
// Set color pickers to their default colors
colorPickers[0].setColor('#3498db'); // Default color for color picker 1
colorPickers[1].setColor('#e74c3c'); // Default color for color picker 2
colorPickers[2].setColor('#563ce7'); // Default color for color picker 3
colorPickers[3].setColor('#ffffff33'); // Default color for color picker 4 (Button background)
colorPickers[4].setColor('#ffffff'); // Default color for color picker 5 (Button text)
});
const DarkButton = document.getElementById('dark-button');
DarkButton.addEventListener('click', () => {
// Set color pickers to their default colors
colorPickers[0].setColor('#1E1E1E'); // Default color for color picker 1
colorPickers[1].setColor('#1E1E1E'); // Default color for color picker 2
colorPickers[2].setColor('#1E1E1E'); // Default color for color picker 3
colorPickers[3].setColor('#00000033'); // Default color for color picker 4 (Button background)
colorPickers[4].setColor('#FFFFFF'); // Default color for color picker 5 (Button text)
});
const MonsterButton = document.getElementById('monster-button');
MonsterButton.addEventListener('click', () => {
// Set color pickers to their default colors
colorPickers[0].setColor('#FFFFFF'); // Default color for color picker 1
colorPickers[1].setColor('#FFFFFF'); // Default color for color picker 2
colorPickers[2].setColor('#FFFFFF'); // Default color for color picker 3
colorPickers[3].setColor('#00000014'); // Default color for color picker 4 (Button background)
colorPickers[4].setColor('#282828'); // Default color for color picker 5 (Button text)
});
// Initialize colors on page load
initializeColors();
});
AdChoices