Created
July 18, 2024 19:37
-
-
Save sam2332/b9cae4074a3a64c8286002bff5bb75f6 to your computer and use it in GitHub Desktop.
Javascript to add color rotating rainbow border to home assistant cards.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| setTimeout(function(){ | |
| function getAllHaCards(root = document) { | |
| const haCards = []; | |
| const elements = root.querySelectorAll('*'); | |
| elements.forEach(element => { | |
| if (element.shadowRoot) { | |
| haCards.push(...element.shadowRoot.querySelectorAll('ha-card')); | |
| haCards.push(...getAllHaCards(element.shadowRoot)); | |
| } | |
| }); | |
| return haCards; | |
| } | |
| const haCards = getAllHaCards(); | |
| let hue = Math.floor(Math.random() * 360); // Start at a random hue | |
| function hsvToRgb(h, s, v) { | |
| let f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0); | |
| return [f(5), f(3), f(1)]; | |
| } | |
| function rotateBorderColor() { | |
| hue = (hue + 1) % 360; // Increment hue, loop back to 0 after 360 | |
| const [r, g, b] = hsvToRgb(hue, 1, 1).map(v => Math.round(v * 255)); | |
| const color = `rgb(${r}, ${g}, ${b})`; | |
| haCards.forEach(card => { | |
| card.style.borderColor = color; | |
| card.style.transition = 'border-color 1s ease'; | |
| }); | |
| } | |
| setInterval(rotateBorderColor, 100); // Change color every 100ms | |
| },3000) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment