Last active
November 19, 2024 03:36
-
-
Save ntfromchicago/2ef6472142f099fd8322c676c1ebcd13 to your computer and use it in GitHub Desktop.
Virtual Mac Display Time: HTML file you can full screen to use as a digital clock on Apple Vision Pro for your Virtual Mac Display window.
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
| <html> | |
| <!-- Modify as you see fit. This file was meant to stand alone and work offline without any dependencies. --> | |
| <!-- To use, simply open the file to view in a browser window. Click the time to toggle seconds display on/off. --> | |
| <!-- Once full screen, minimize the size of the Mac Virtual Display window to use as a clock widget. --> | |
| <head> | |
| <style> | |
| body { | |
| align-items: center; | |
| background-color: black; | |
| display: flex; | |
| font-family: "Andale Mono"; /* I chose a system monospace font so the numbers don't jump around */ | |
| justify-content: center; | |
| transition: background-color 1.0s ease; /* Added a transition for smooth animation */ | |
| } | |
| .time { | |
| color: white; | |
| font-size: 40vh; | |
| letter-spacing: -4vh; | |
| text-align: center; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .secondsToggle, .ampmToggle { | |
| background-color: clear; | |
| color: white; | |
| font-size: 1em; | |
| position: fixed; | |
| top: 0px; | |
| padding: 1em; | |
| } | |
| .secondsToggle { | |
| left: 0px; | |
| } | |
| .ampmToggle { | |
| right: 0px; | |
| } | |
| </style> | |
| <script> | |
| var showSeconds = false | |
| var showMeridiem = true | |
| var isFullscreen = false | |
| function showTime() { | |
| var d = new Date(); | |
| var withSeconds = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: showMeridiem }); | |
| var withoutSeconds = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: showMeridiem }); | |
| document.getElementById("time-now").innerText = showSeconds ? withSeconds : withoutSeconds; | |
| /* Clock flashes to a different color every minute as a visual cue. */ | |
| if (d.getSeconds() === 0) { | |
| document.body.style.background = "#333333"; | |
| } else { | |
| document.body.style.background = "black"; | |
| } | |
| } | |
| /* Click the top left to toggle seconds on and off */ | |
| function toggleSeconds() { | |
| showSeconds = !showSeconds; | |
| if (showSeconds === true) { | |
| document.getElementById("seconds-toggle").innerHTML = "▮▮:▮▮:▮▮"; | |
| } else { | |
| document.getElementById("seconds-toggle").innerHTML = "▮▮:▮▮:▯▯"; | |
| } | |
| showTime(); | |
| } | |
| /* Click the top right to toggle am/pm on and off */ | |
| function toggleMeridiem() { | |
| showMeridiem = !showMeridiem; | |
| if (showMeridiem === true) { | |
| document.getElementById("ampm-toggle").innerHTML = "▮▮"; | |
| } else { | |
| document.getElementById("ampm-toggle").innerHTML = "▯▯"; | |
| } | |
| showTime(); | |
| } | |
| /* Click the time to toggle fullscreen on and off. */ | |
| function toggleFullscreen() { | |
| isFullscreen = !isFullscreen; | |
| if (isFullscreen === true) { | |
| launchFullScreen(document.documentElement); | |
| } else { | |
| document.exitFullscreen(); | |
| } | |
| } | |
| function refreshTimer() { | |
| const timerId = setInterval("showTime()", 1000); | |
| } | |
| // From https://stackoverflow.com/questions/19355370/how-to-open-a-web-page-automatically-in-full-screen-mode | |
| function launchFullScreen(element) { | |
| if(element.requestFullScreen) { | |
| element.requestFullScreen(); | |
| } else if(element.mozRequestFullScreen) { | |
| element.mozRequestFullScreen(); | |
| } else if(element.webkitRequestFullScreen) { | |
| element.webkitRequestFullScreen(); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="refreshTimer();"> | |
| <div class="secondsToggle" id="seconds-toggle" onclick="toggleSeconds();">▮▮:▮▮:▯▯</div> <!-- False by default --> | |
| <div class="ampmToggle" id="ampm-toggle" onclick="toggleMeridiem();">▮▮</div> <!-- True by default --> | |
| <div class="time" id="time-now" onclick="toggleFullscreen();"></div> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Copy this file and open it in your browser for use as a clock widget when using Mac Virtual Display. For best results, minimize your MVD window size.
I created this file so I could keep the display always active and within easy reach when needed, but tiny and out of the way when not. The clock makes the tiny screen a useful utility; since I know it displays the time, I know where to look whenever I need MVD again.