Unified Digital Automation
Automation Intelligence
/* THEME */ document.getElementById("toggleTheme") .addEventListener("click", ()=>{ document.body.classList.toggle("dark"); document.body.classList.toggle("light"); });
/* LIVE COUNTERS */ let gatewayCount = 0; let cloudCount = 0;
setInterval(()=>{ gatewayCount += Math.floor(Math.random()*5); cloudCount += Math.floor(Math.random()*10); document.getElementById("gatewayCounter") .textContent = gatewayCount + " Packets"; document.getElementById("cloudCounter") .textContent = cloudCount + " Records"; },1000);
/* DATA FLOW ANIMATION */ function animatePacket(pathId){ const path = document.getElementById(pathId); const length = path.getTotalLength(); let progress = 0;
setInterval(()=>{ progress += 3; if(progress > length) progress = 0; const point = path.getPointAtLength(progress);
const circle = document.createElementNS( "http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", point.x); circle.setAttribute("cy", point.y); circle.setAttribute("r", 5); circle.setAttribute("class","packet");
document.getElementById("viewport").appendChild(circle); setTimeout(()=>circle.remove(),500); },40); }
["pathDG","pathFire","pathHVAC", "pathCloud","pathDash1", "pathDash2","pathDash3"] .forEach(p=>animatePacket(p));
/* HOVER INFO BOX */ const infoBox = document.getElementById("infoBox");
document.querySelectorAll(".device").forEach(device=>{ device.addEventListener("mousemove", e=>{ infoBox.innerText = device.getAttribute("data-info"); infoBox.style.left = e.pageX + 15 + "px"; infoBox.style.top = e.pageY + 15 + "px"; infoBox.classList.add("show"); }); device.addEventListener("mouseleave", ()=>{ infoBox.classList.remove("show"); }); });