Last active
October 2, 2024 21:56
-
-
Save grischard/ce5b9707652b67e81bc6957911f2324a to your computer and use it in GitHub Desktop.
Swatch beats Home Assistant
This file contains hidden or 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
| class SwatchBeatBase extends HTMLElement { | |
| connectedCallback() { | |
| this.interval = setInterval(() => this.updateBeats(), 86); | |
| } | |
| disconnectedCallback() { | |
| clearInterval(this.interval); | |
| } | |
| updateBeats() { | |
| const now = new Date(); | |
| const beats = ( | |
| (((now.getUTCHours() * 3600 + | |
| now.getUTCMinutes() * 60 + | |
| now.getUTCSeconds()) * | |
| 1000 + | |
| now.getUTCMilliseconds() + | |
| 3600000) % | |
| 86400000) / | |
| 86400 | |
| ).toFixed(3); | |
| this.render(beats); | |
| } | |
| render(beats) { | |
| throw new Error('Method "render(beats)" must be implemented'); | |
| } | |
| } | |
| class SwatchBeatCard extends SwatchBeatBase { | |
| set hass(hass) { | |
| if (!this.content) { | |
| const card = document.createElement("ha-card"); | |
| card.header = "Swatch Internet Beats"; | |
| this.content = document.createElement("div"); | |
| this.content.id = "swatch-beat"; | |
| this.content.className = "card-content"; | |
| card.appendChild(this.content); | |
| this.appendChild(card); | |
| } | |
| this.updateBeats(); | |
| } | |
| render(beats) { | |
| this.content.innerHTML = `@${beats}`; | |
| } | |
| setConfig(config) { | |
| this.config = config; | |
| } | |
| getCardSize() { | |
| return 1; | |
| } | |
| } | |
| class SwatchBeatBadge extends SwatchBeatBase { | |
| set hass(hass) { | |
| this._hass = hass; | |
| if (!this.content) { | |
| this.content = document.createElement("div"); | |
| this.content.setAttribute("style", ""); | |
| this.content.className = "badge active standard"; | |
| this.content.setAttribute("role", "button"); | |
| this.content.setAttribute("tabindex", "0"); | |
| // Ripple effect? | |
| const ripple = document.createElement("ha-ripple"); | |
| ripple.setAttribute("aria-hidden", "true"); | |
| const surface = document.createElement("div"); | |
| surface.className = "surface"; | |
| ripple.appendChild(surface); | |
| this.content.appendChild(ripple); | |
| // State icon | |
| const stateIcon = document.createElement("ha-state-icon"); | |
| const haIcon = document.createElement("ha-icon"); | |
| haIcon.setAttribute("icon", "mdi:at"); // Using mdi:at icon | |
| stateIcon.appendChild(haIcon); | |
| this.content.appendChild(stateIcon); | |
| // Content | |
| const contentSpan = document.createElement("span"); | |
| contentSpan.className = "content"; | |
| // Name | |
| const nameSpan = document.createElement("span"); | |
| nameSpan.className = "name"; | |
| nameSpan.textContent = "beat"; // Set the name of your badge | |
| contentSpan.appendChild(nameSpan); | |
| // State | |
| const stateSpan = document.createElement("span"); | |
| stateSpan.className = "state"; | |
| this.beatsDisplay = document.createElement("state-display"); | |
| stateSpan.appendChild(this.beatsDisplay); | |
| contentSpan.appendChild(stateSpan); | |
| this.content.appendChild(contentSpan); | |
| this.appendChild(this.content); | |
| } | |
| this.updateBeats(); | |
| } | |
| render(beats) { | |
| if (this.beatsDisplay) { | |
| this.beatsDisplay.textContent = `${beats}`; | |
| } | |
| } | |
| setConfig(config) { | |
| this.config = config; | |
| } | |
| } | |
| customElements.define("swatch-beat-badge", SwatchBeatBadge); | |
| customElements.define("swatch-beat-card", SwatchBeatCard); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment