Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| swatch_time [2025/05/11 18:03] – created gardenia | swatch_time [2025/08/03 16:04] (current) – [Swatch Internet Time / .beat Time] fixed clock ribose | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | < | + | ====== |
| - | < | + | <fs xx-large># |
| - | <html lang=" | + | |
| - | < | + | |
| - | <meta charset=" | + | |
| - | <meta name=" | + | |
| - | < | + | ===== Introduction ===== |
| - | <link rel=" | + | Swatch time is a universal standard time for the entire internet! It lets you plan events or meetups with your friends from anywhere in the world and not have to worry about timezones or other annoyances! Its also hella hacker and very cool to use :^) |
| - | <link href=" | + | It was originally invented by the Swatch Company in 1998 (Sorta since they copied it from a time format used in the French Revolution) although it did not gain much widespread popularity - however, it's used on MelonLand and many other web revival sites as a standard means of organisation and planning! |
| - | <link rel=" | + | |
| - | <link href=" | + | |
| - | </ | + | |
| - | < | + | |
| - | <!-- The header image is 700 x 480 pixels. You can change | + | Timestamps on the [[https://forum.melonland.net/|forum]] are displayed in Swatch time. When using the default forum theme, timestamps will convert to 24-hour time in your local timezone when hovered over. |
| - | <div id=" | + | |
| - | < | + | ===== How does it work? ===== |
| - | <div class="container"> | + | It divides the day into 1000 “**beats**”. Instead of using hours, minutes, and seconds to represent time, Swatch Internet Time uses a single decimal number ranging from 000 to 999. Each beat is equivalent to 1 minute and 26.4 seconds. Sometimes you'll also see some extra numbers like ".56" |
| - | <!-- This is the left sidebar! --> | + | Swatch time is usually preceded by an **@** symbol; this helps you know it's swatch time and not some random number! For example **@123** or **@542.69** |
| - | <div class=" | + | |
| - | < | + | 000 in Swatch time is the same as Midnight UTC+1; but because swatch time does not use timezones, midnight will be different for everyone. The goal of swatch time is not to provide the relative time you can use in your daily life; it's for worldwide events that all need to happen at the same time! |
| - | <div class=" | + | |
| - | <img src=" | + | |
| - | <p> | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | ==== Useful Conversions ==== |
| - | <div class="music marquee"> | + | Below are some helpful conversions you can use to contextualise beat time and understand how to think about it! |
| - | < | + | |
| - | <img src=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | === Recommended reference beat times: === |
| - | <div class=" | + | |
| - | <ul> | + | * **1.beat** - AFK I'll be back in a moment! |
| - | < | + | * **5.beats** - The time it takes to make a coffee |
| - | < | + | * **15.beats** - a quick lunch break |
| - | <li>6.16.2004: Got sued by She-Hulk.</ | + | * **30.beats** - An average TV show episode without ads |
| - | < | + | * **100.beats** - A long movie! |
| - | < | + | * **200.beats** |
| - | < | + | * **350.beats** - The time you'd spend at a full-time job and/or a good night' |
| - | < | + | |
| - | </ul> | + | |
| - | </ | + | === Beats to common time frames: === |
| - | < | + | * **4.beats** = 5 minutes |
| - | <!-- Start of CuterCounter Code --> | + | * **11.beats** = 15 minutes |
| - | <a href=" | + | * **42.beats** |
| - | <!-- End of CuterCounter Code --> | + | * **125.beats** |
| - | </ | + | * **1000.beats** = 24 hours |
| - | <!-- That's the end of the left sidebar.--> | + | |
| - | <!-- This is the main middle box! --> | + | ===== How can I use swatch time in my life? ===== |
| - | <div class=" | + | |
| - | < | + | |
| - | < | + | Easy; just use swatch time when you are planning your events or meetups |
| - | < | + | |
| - | <ul> | + | **Swatch Time Apps for various platforms: |
| - | < | + | * All Apple devices, including Apple Watch - [[https:// |
| - | < | + | * Android Phones - [[https:// |
| - | <ul> | + | * Pebble Smart Watches - [[https:// |
| - | < | + | * macOS Menubar - [[https:// |
| - | < | + | * GNOME Extension - [[https:// |
| - | < | + | * Cinnamon Applet - [[https:// |
| - | </ul> | + | * Win 95/XP - [[https:// |
| - | < | + | * Winamp & WaCUP - [[https:// |
| - | </ul> | + | * iPad - [[https:// |
| + | * Color - [[rgbeat|RGBeat]], | ||
| - | < | + | ===== Other useful links! ===== |
| - | < | + | * Swatch time [[https:// |
| + | * The Swatch [[https:// | ||
| + | * Swatch Time History on [[https:// | ||
| + | * Decimal Time on Wikipedia [[https:// | ||
| - | < | + | ---- |
| - | </ | + | |
| - | <!-- This is the right sidebar! --> | + | ===== Code Snippets ===== |
| - | <div class=" | + | You can also include a swatch clock on your website; here are some premade code snippets you can use! |
| - | < | + | |
| - | <!--This is the code for the calendar.--> | + | |
| - | <div class=" | + | |
| - | <header class=" | + | |
| - | <p class=" | + | |
| - | </ | + | |
| - | <div class=" | + | ==== JavaScript: ==== |
| - | <ul class=" | + | |
| - | </ | + | |
| - | <script src=" | + | |
| - | </ | + | |
| - | <!--Now the calendar is over.--> | + | |
| - | < | + | **JavaScript - Easy Option** |
| - | <div class=" | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| - | <h3> | + | Here is a premade JavaScript clock for your website! Just paste this code onto your page wherever you want your clock to be and it will work! |
| - | <div class="sidebarbox"> | + | <code> |
| - | < | + | <span id="swatchClock">@000</span> |
| - | <p> | + | <script defer src=" |
| - | < | + | </code> |
| + | **JavaScript - Full Code** | ||
| + | < | ||
| + | // Returns the current Swatch beat | ||
| + | function GetSwatchTime(showDecimals = true) { | ||
| + | // get date in UTC/GMT | ||
| + | var date = new Date(); | ||
| + | var hours = date.getUTCHours(); | ||
| + | var minutes = date.getUTCMinutes(); | ||
| + | var seconds = date.getUTCSeconds(); | ||
| + | var milliseconds = date.getUTCMilliseconds(); | ||
| + | // add hour to get time in Switzerland | ||
| + | hours = hours == 23 ? 0 : hours + 1; | ||
| + | // time in seconds | ||
| + | var timeInMilliseconds = ((hours * 60 + minutes) * 60 + seconds) * 1000 + milliseconds; | ||
| + | // there are 86.4 seconds in a beat | ||
| + | var millisecondsInABeat = 86400; | ||
| + | // calculate beats to two decimal places | ||
| + | if (showDecimals) { | ||
| + | return Math.abs(timeInMilliseconds / millisecondsInABeat).toFixed(2); | ||
| + | } else { | ||
| + | return Math.floor(Math.abs(timeInMilliseconds / millisecondsInABeat)); | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | If you want it to display on your webpage and auto-update here is an example - first, we make a **span** with an id, this is where the clock will appear on your page - then we get that span in a script, make a function that fills it with the swatch time, and finally, we set it to reload every microbeat. | ||
| + | < | ||
| + | <span id=" | ||
| + | < | ||
| + | var mySwatchClock = document.getElementById(' | ||
| + | function updateSwatchClock() { | ||
| + | mySwatchClock.innerHTML = ' | ||
| + | } | ||
| + | setInterval(updateSwatchClock, | ||
| + | </ | ||
| + | </ | ||
| - | < | + | ==== PHP: ==== |
| - | <div class=" | + | |
| - | < | + | |
| - | <img src="https:// | + | |
| - | </ | + | |
| - | < | + | PHP has native support for Swatch time, you can get the latest beat using this snippet: |
| - | <h3>Boxname</ | + | <code>$swatchTime |
| - | <div class=" | + | |
| - | </div> | + | However if you would like a full function that also shows microbeats, we have that too! |
| - | <!--That' | + | <code> |
| + | // Returns the current Swatch beat | ||
| + | function GetSwatchTime($showDecimals = true) | ||
| + | { | ||
| + | // Get time in UTC+1 (Do not Change!) | ||
| + | $now = new DateTime(" | ||
| + | $now->add(new DateInterval(" | ||
| + | // Calculate | ||
| + | $midnight = clone $now; | ||
| + | $midnight-> | ||
| + | $seconds = $now-> | ||
| + | // Swatch beats in seconds - DO NOT CHANGE | ||
| + | $swatchBeatInSeconds = 86.4; | ||
| + | // Calculate beats to two decimal places | ||
| + | if ($showDecimals) { | ||
| + | return number_format(round(abs($seconds / $swatchBeatInSeconds), | ||
| + | } else { | ||
| + | return floor(abs($seconds / $swatchBeatInSeconds)); | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | ==== BASH: ==== | ||
| + | (note that Etc timezones are inverted) | ||
| + | Calculating Beat Time in bash is simple: | ||
| + | < | ||
| + | MIDNIGHT=$( TZ=' | ||
| + | BTIME=$(( (($EPOCHSECONDS - $midnight) * 1000) / 86400 )) | ||
| + | echo @$BTIME | ||
| + | </ | ||
| + | However, you need to use an external program to calculate centibeats, since bash does not handle decimals well: | ||
| - | </div> | + | (using dc, which is a rpn calculator) |
| - | <!--This is the end of the main "container" | + | <code> |
| + | MIDNIGHT=$( TZ=' | ||
| - | <!--Here' | + | printf @ |
| - | <div class=" | + | dc << EOF |
| - | <p>Layout anticopyright: | + | # setting precision |
| - | </div> | + | 2 k |
| + | # subtracting midnight from the current epoch | ||
| + | $EPOCHREALTIME $MIDNIGHT | ||
| + | # converting to ms | ||
| + | 1000 * | ||
| + | # divide by seconds in a day | ||
| + | 86400 / | ||
| + | # print it to screen | ||
| + | p | ||
| + | EOF | ||
| + | </code> | ||
| + | To display it on your screen permanently, you can use any program that uses piped input, but lemonbar is the easiest to use: | ||
| + | <code> | ||
| + | while true | ||
| + | do | ||
| + | MIDNIGHT=$( TZ=' | ||
| + | BTIME=$(( (($EPOCHSECONDS - $midnight) * 1000) / 86400 )) | ||
| + | echo @$BTIME | ||
| + | done | lemonbar -bg 48+0+18 | ||
| + | </code> | ||
| + | (you can replace the code between the do and done with the dc version too) | ||
| - | </ | ||
| - | </ | ||
