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(".zone-content");
|
|
|
|
// Create tabs dynamically
|
|
for (let i = 1; i <= numTabs; i++) {
|
|
// Create the zone button
|
|
const tabButton = document.createElement("button");
|
|
tabButton.classList.add("zone");
|
|
tabButton.id = `zone${i}`;
|
|
tabButton.textContent = `Zone ${i}`;
|
|
|
|
// Add the zone button to the container
|
|
tabsContainer.appendChild(tabButton);
|
|
|
|
// Create the corresponding zone content (RGB slider)
|
|
const tabContent = document.createElement("div");
|
|
tabContent.classList.add("zone-pane");
|
|
tabContent.id = `content${i}`;
|
|
const slider = document.createElement("rgb-slider");
|
|
slider.id = i;
|
|
tabContent.appendChild(slider);
|
|
|
|
// Add the zone 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 zone ${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(zoneId) {
|
|
const tabs = document.querySelectorAll(".zone");
|
|
const tabContents = document.querySelectorAll(".zone-pane");
|
|
|
|
zones.forEach((zone) => zone.classList.remove("active"));
|
|
tabContents.forEach((content) => content.classList.remove("active"));
|
|
|
|
// Activate the clicked zone and corresponding content
|
|
document.getElementById(zoneId).classList.add("active");
|
|
document
|
|
.getElementById("content" + zoneId.replace("zone", ""))
|
|
.classList.add("active");
|
|
}
|
|
|
|
// Add event listeners to tabs
|
|
tabsContainer.addEventListener("click", (e) => {
|
|
if (e.target.classList.contains("zone")) {
|
|
switchTab(e.target.id);
|
|
}
|
|
});
|
|
|
|
// Initially set the first zone as active
|
|
switchTab("tab1");
|