Skip to content

Instantly share code, notes, and snippets.

@kirinelf
Forked from sam0737/clock.html
Last active March 28, 2024 17:02
Show Gist options
  • Star 46 You must be signed in to star a gist
  • Fork 19 You must be signed in to fork a gist
  • Save kirinelf/932d7704e623fd42970801597ddcccc4 to your computer and use it in GitHub Desktop.
Save kirinelf/932d7704e623fd42970801597ddcccc4 to your computer and use it in GitHub Desktop.
OBS Studio: A HTML page for showing current date and time in the video
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A simple clock</title>
</head>
<body translate="no" >
<div id="output"
style= "display: inline-block;
font-family: monospace;
font-size: 30px;
text-align: right;
color: lightgray;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script>
// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
var urlParams;
(function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
var output = document.getElementById("output");
if (urlParams["style"]) output.setAttribute("style", urlParams["style"]);
if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]);
var c;
setInterval(
c = function() {
output.innerText = moment().format(urlParams["format"] || 'DD/MM/YYYY HH:mm:ss');
// output.innerText = moment().format(urlParams["format"] || '');
}, 1000);
c();
</script>
</body>
</html>
@chessset5
Copy link

Nice, its looking closer to the original

@chessset5
Copy link

chessset5 commented Jan 25, 2022

btw if you wanted too add this comment under line 43 for people to know what the format options are
Here are the entire format options for moment.js in relation to time.

/*
https://momentjs.com/docs/#/displaying/format/                         
Month                   M           1 2 ... 11 12
                        Mo          1st 2nd ... 11th 12th
                        MM          01 02 ... 11 12
                        MMM         Jan Feb ... Nov Dec
                        MMMM        January February ... November December
Quarter                 Q           1 2 3 4
                        Qo          1st 2nd 3rd 4th
Day of Month            D           1 2 ... 30 31
                        Do          1st 2nd ... 30th 31st
                        DD          01 02 ... 30 31
Day of Year             DDD         1 2 ... 364 365
                        DDDo        1st 2nd ... 364th 365th
                        DDDD        001 002 ... 364 365
Day of Week             d           0 1 ... 5 6
                        do          0th 1st ... 5th 6th
                        dd          Su Mo ... Fr Sa
                        ddd         Sun Mon ... Fri Sat
                        dddd        Sunday Monday ... Friday Saturday
Day of Week (Locale)    e           0 1 ... 5 6
Day of Week (ISO)       E           1 2 ... 6 7
Week of Year            w           1 2 ... 52 53
                        wo          1st 2nd ... 52nd 53rd
                        ww          01 02 ... 52 53
Week of Year (ISO)        W         1 2 ... 52 53
                        Wo          1st 2nd ... 52nd 53rd
                        WW          01 02 ... 52 53
Year                    YY          70 71 ... 29 30
                        YYYY        1970 1971 ... 2029 2030
                        YYYYYY      -001970 -001971 ... +001907 +001971
                                        Note: Expanded Years (Covering the full time value range of approximately 273,790 years forward or backward from 01 January, 1970)
                        Y           1970 1971 ... 9999 +10000 +10001
                                        Note: This complies with the ISO 8601 standard for dates past the year 9999
Era Year                y           1 2 ... 2020 ...
Era                     N, NN, NNN  BC AD
                                    Note: Abbr era name
                        NNNN        Before Christ, Anno Domini
                                        Note: Full era name
                        NNNNN       BC AD
                                        Note: Narrow era name
Week Year               gg          70 71 ... 29 30
                        gggg        1970 1971 ... 2029 2030
Week Year (ISO)         GG          70 71 ... 29 30
                        GGGG        1970 1971 ... 2029 2030
AM/PM                   A           AM PM
                        a           am pm
Hour                    H           0 1 ... 22 23
                        HH          00 01 ... 22 23
                        h           1 2 ... 11 12
                        hh          01 02 ... 11 12
                        k           1 2 ... 23 24
                        kk          01 02 ... 23 24
Minute                  m           0 1 ... 58 59
                        mm          00 01 ... 58 59
Second                  s           0 1 ... 58 59
                        ss          00 01 ... 58 59
Fractional Second       S           0 1 ... 8 9
                        SS          00 01 ... 98 99
                        SSS         000 001 ... 998 999
                        SSSS... SSSSSSSSS            
                                    000[0..] 001[0..] ... 998[0..] 999[0..]
Time Zone               z or zz     EST CST ... MST PST
                                        Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they *do* work if you are using a specific time zone with the moment-timezone addon.
                        Z           -07:00 -06:00 ... +06:00 +07:00
                        ZZ          -0700 -0600 ... +0600 +0700
Unix Timestamp          X           1360013296
Unix Millisecond Timestamp    
                        x           1360013296123
*/

@louismorasse
Copy link

I love you. Errr, I mean thanks!

@NemanSyed
Copy link

NemanSyed commented Nov 3, 2022

I'm not a coder at all. How should we interpret "Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they do work if you are using a specific time zone with the moment-timezone addon."? Sure enough, adding zz to the end of the format string does nothing. (To be clear, ZZ does work.)

I want to create a format string with my current date/time, time zone, UTC date/time, and UTC offset. Thanks for any ideas!

Tip: Updates to the format string only appear in OBS after switching scene collections or restarting OBS. Switching scenes was insufficient on its own. "Refresh browser when scene becomes active" is enabled, just in case that's related.

Tip: There appears to be a practical limit of 26 chars, including spaces.

@alohagirl92
Copy link

how do you bold the text?

@bma-diy
Copy link

bma-diy commented Jan 22, 2023

Workaround for the timezone issue along with other formatting styles:

output.innerText = moment().format(urlParams["format"] || 'MMM DD, YYYY') +"\r"+ moment().format(urlParams["format"] || 'HH:mm:ss') + " CT";

This is how it prints:

image

@NemanSyed
Copy link

NemanSyed commented Jan 26, 2023

I wanted to avoid literal text to indicate the time zone for portability and not having to think about it every six months. I ended up with:

output.innerText = moment().format(urlParams["format"] || 'ddd MMM D YYYY HH:mm') + " UTC" + moment().format(urlParams["format"] || 'ZZ');

image

Note knowing the UTC offset is far more useful than knowing the time zone, as the only practical reason to know the time zone is to know the UTC offset. (For reasons I can't understand, everyone insists it's Standard time all year. :-D )

@NemanSyed
Copy link

how do you bold the text?

@alohagirl92 you should be able to throw any CSS into the <style> element starting on line 12. I Googled "css bold text" and got font-weight: bold; as the method.

Note all the text defined by this bit of HTML will be bold, not a part within that text. I know it can be done, but I don't know how to do that kind of thing.

@NemanSyed
Copy link

@raleighlittles for those who need it... you're absolutely correct. :-)

This was my preferred balance between showing the time and reducing the amount of unnecessary/distracting motion on-screen.

@ZeroPandaSections
Copy link

@raleighlittles

I was also interested in timestamping with fractional seconds. You can change how often it refreshes in lines 40-44:

original (refreshes every 1000ms):
setInterval( c = function() { output.innerText = moment().format(urlParams["format"] || 'DD/MM/YYYY HH:mm:ss'); // output.innerText = moment().format(urlParams["format"] || ''); }, 1000);

updated (refreshes every 10ms):
setInterval( c = function() { output.innerText = moment().format(urlParams["format"] || 'YYYY/MM/DD HH:mm:ss.SS'); // output.innerText = moment().format(urlParams["format"] || ''); }, 10);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment