82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
import "./rgb-slider.js";
|
|
|
|
const ws = new WebSocket("ws://localhost:8000/ws");
|
|
|
|
ws.onopen = () => {
|
|
console.log("WebSocket connection established");
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log("WebSocket connection closed");
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
console.error("WebSocket error:", error);
|
|
};
|
|
|
|
// Number of sliders (tabs) you want to create
|
|
const numTabs = 3;
|
|
|
|
// Select the container for tabs and content
|
|
const tabsContainer = document.querySelector(".tabs");
|
|
const tabContentContainer = document.querySelector(".tab-content");
|
|
|
|
// Create tabs dynamically
|
|
for (let i = 1; i <= numTabs; i++) {
|
|
// Create the tab button
|
|
const tabButton = document.createElement("button");
|
|
tabButton.classList.add("tab");
|
|
tabButton.id = `tab${i}`;
|
|
tabButton.textContent = `Tab ${i}`;
|
|
|
|
// Add the tab button to the container
|
|
tabsContainer.appendChild(tabButton);
|
|
|
|
// Create the corresponding tab content (RGB slider)
|
|
const tabContent = document.createElement("div");
|
|
tabContent.classList.add("tab-pane");
|
|
tabContent.id = `content${i}`;
|
|
const slider = document.createElement("rgb-slider");
|
|
slider.id = i;
|
|
tabContent.appendChild(slider);
|
|
|
|
// Add the tab content to the container
|
|
tabContentContainer.appendChild(tabContent);
|
|
|
|
// Listen for color change on each RGB slider
|
|
slider.addEventListener("color-change", (e) => {
|
|
const { r, g, b } = e.detail;
|
|
console.log(`Color changed in tab ${i}:`, e.detail);
|
|
// Send RGB data to WebSocket server
|
|
if (ws.readyState === WebSocket.OPEN) {
|
|
const colorData = { r, g, b };
|
|
ws.send(JSON.stringify(colorData));
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to switch tabs
|
|
function switchTab(tabId) {
|
|
const tabs = document.querySelectorAll(".tab");
|
|
const tabContents = document.querySelectorAll(".tab-pane");
|
|
|
|
tabs.forEach((tab) => tab.classList.remove("active"));
|
|
tabContents.forEach((content) => content.classList.remove("active"));
|
|
|
|
// Activate the clicked tab and corresponding content
|
|
document.getElementById(tabId).classList.add("active");
|
|
document
|
|
.getElementById("content" + tabId.replace("tab", ""))
|
|
.classList.add("active");
|
|
}
|
|
|
|
// Add event listeners to tabs
|
|
tabsContainer.addEventListener("click", (e) => {
|
|
if (e.target.classList.contains("tab")) {
|
|
switchTab(e.target.id);
|
|
}
|
|
});
|
|
|
|
// Initially set the first tab as active
|
|
switchTab("tab1");
|