All Versions Time and Date Overlay updated

Chessset5 submitted a new resource:

Time and Date Overlay updated - Local Clock HTML file

View attachment 79491

Clock.html GitHub File

1. Download the HTML File
2. In OBS add a Browser Source
3. Select local file
4. Browse to the clock.html file
5. adjust the height and width accordingly

You can edit the clock.html in the notepad app on windows, any other text editor on any other OS.

Lines 13 through 20 is where you can change the visual options like font type and color...

Click to expand...

Read more about this resource...

Hi, I'm probably being daft and overlooking something, but no matter what I do at Line 43 it always takes the same format as what you initially show on the main page here. I'm trying to have the clock show the day of the week eg Saturday but nothing doing.

Cool! Work nice!

Is it possible to math certain date for ex 1/01/2021 minus current date and show how many days was past from certain date?

My ideate to show how many days I am continuously broadcast

Best, Alex

Thank you so much for this been using this for my Twitch streams and OBS videos it helps me track time on the fly while streaming It's the best and the cleanest overlay yet I have made some adjustments to it so I can see everything for accurate timing and date, for example, this is what I'm using right now: (dddd, MMMM Do, YYYY | hh:mm:ss A) I think it's the best, of course, with different HTML color code #DFFF00 so It doesn't mix with the background of anything I'm recording.

*I have attached a picture of it I think this is the cleanest result I've got.

Hi,

I was able to install it.
I edit the timer to show fraction of seconds ( I am trying to use it for gaming desync)
However, the fraction SSS numbers don't run fast like in other timers.
They jump second by second.

Any suggestions how to make it run like it properly?

thx

A trick for this to not need a html file.

For this to work you need to set mime type to text/html, and double-escape the regex at "pl = /\\+/g,"

Then you get a URL like

Which you can paste right into the OBS url.

How can I insert regular text into the format string if the text I want to insert contains letters that get formatted? For example, I want to make it read: Q1 for first quarter, but if I put QQ, it puts 11. I want to put the day # of the year, but if I put Day#DDD it comes out: 3am1#215

Second question: How do I center the output inside the browser source box? I'm sure this is a simple OBS question (exposing how noob I am, but none-the-less I would like to figure this out)

dedmen said:

A trick for this to not need a html file.

data: URI Generator

For this to work you need to set mime type to text/html, and double-escape the regex at "pl = /\\+/g,"

Then you get a URL like

Code:

data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCg0KPGhlYWQ+DQogIDxtZXRhIGNoYXJzZXQ9IlVURi04Ij4NCiAgPHRpdGxlPkEgc2ltcGxlIGNsb2NrPC90aXRsZT4NCg0KPC9oZWFkPg0KDQo8Ym9keSB0cmFuc2xhdGU9Im5vIiA+DQogIDxkaXYgaWQ9Im91dHB1dCINCiAgICAgICBzdHlsZT0gICAgImRpc3BsYXk6IGlubGluZS1ibG9jazsNCiAgICAgICAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZTsNCiAgICAgICAgZm9udC1zaXplOiAzMHB4Ow0KICAgICAgICB0ZXh0LWFsaWduOiByaWdodDsNCiAgICAgICAgY29sb3I6IGxpZ2h0Z3JheTsNCiAgICAgICAgYm9yZGVyLXJhZGl1czogMTBweDsNCiAgICAgICAgcGFkZGluZzogMTBweDsNCiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjc1KTsiPg0KICA8L2Rpdj4NCg0KICA8c2NyaXB0IHNyYz0naHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvbW9tZW50LmpzLzIuMTguMS9tb21lbnQubWluLmpzJz48L3NjcmlwdD4NCiAgPHNjcmlwdD4NCi8vIGh0dHBzOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzkwMTExNS9ob3ctY2FuLWktZ2V0LXF1ZXJ5LXN0cmluZy12YWx1ZXMtaW4tamF2YXNjcmlwdA0KdmFyIHVybFBhcmFtczsNCihmdW5jdGlvbiAoKSB7DQogICAgdmFyIG1hdGNoLA0KICAgICAgICBwbCAgICAgPSAvXCsvZywgIC8vIFJlZ2V4IGZvciByZXBsYWNpbmcgYWRkaXRpb24gc3ltYm9sIHdpdGggYSBzcGFjZQ0KICAgICAgICBzZWFyY2ggPSAvKFteJj1dKyk9PyhbXiZdKikvZywNCiAgICAgICAgZGVjb2RlID0gZnVuY3Rpb24gKHMpIHsgcmV0dXJuIGRlY29kZVVSSUNvbXBvbmVudChzLnJlcGxhY2UocGwsICIgIikpOyB9LA0KICAgICAgICBxdWVyeSAgPSB3aW5kb3cubG9jYXRpb24uc2VhcmNoLnN1YnN0cmluZygxKTsNCiAgICB1cmxQYXJhbXMgPSB7fTsNCiAgICB3aGlsZSAobWF0Y2ggPSBzZWFyY2guZXhlYyhxdWVyeSkpDQogICAgICAgdXJsUGFyYW1zW2RlY29kZShtYXRjaFsxXSldID0gZGVjb2RlKG1hdGNoWzJdKTsNCn0pKCk7DQp2YXIgb3V0cHV0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIm91dHB1dCIpOw0KaWYgKHVybFBhcmFtc1sic3R5bGUiXSkgb3V0cHV0LnNldEF0dHJpYnV0ZSgic3R5bGUiLCB1cmxQYXJhbXNbInN0eWxlIl0pOw0KaWYgKHVybFBhcmFtc1siYm9keVN0eWxlIl0pIGRvY3VtZW50LmJvZHkuc2V0QXR0cmlidXRlKCJzdHlsZSIsIHVybFBhcmFtc1siYm9keVN0eWxlIl0pOw0KdmFyIGM7DQpzZXRJbnRlcnZhbCgNCmMgPSBmdW5jdGlvbigpIHsNCiAgICAvL291dHB1dC5pbm5lclRleHQgPSBtb21lbnQoKS5mb3JtYXQodXJsUGFyYW1zWyJmb3JtYXQiXSB8fCAnREQvTU0vWVlZWSBISDptbTpzcycpOw0KICAgIC8vIF4gb2xkIHN0cmluZywgYWJvdmUsIG5ldyBwcmVmZXJyZWQgYmVsb3c6DQogICAgb3V0cHV0LmlubmVyVGV4dCA9IG1vbWVudCgpLmZvcm1hdCgnTEwgTFRTIFtHTVRdWlonKTsNCn0sIDEwMDApOw0KYygpOw0KICA8L3NjcmlwdD4NCjwvYm9keT4NCjwvaHRtbD4=

Which you can paste right into the OBS url.

Click to expand...

thats cool

evanevans said:

How can I insert regular text into the format string if the text I want to insert contains letters that get formatted? For example, I want to make it read: Q1 for first quarter, but if I put QQ, it puts 11. I want to put the day # of the year, but if I put Day#DDD it comes out: 3am1#215

Second question: How do I center the output inside the browser source box? I'm sure this is a simple OBS question (exposing how noob I am, but none-the-less I would like to figure this out)

Click to expand...

For unformatted text in the format you would use escape characters, please refer to the format link in the instructions and go to the

Escaping characters​

section of the page, press control + F and paste that in the search bar to find it faster. As a reminder, here is the link: https://momentjs.com/docs/#/displaying/format/
For your examples Day#DDD you would put [Day]#DDD which would result in Day#215, For the quarter, use [Q]Q, which would result in Q1. Anything you don't want to be formatted, put it in brackets: [ ]

For centering, the browser in OBS is simple and has no logic, I could add logic to the HTML but that would require me to write in JS and I would prefer to not do that.

As a work around, you can adjust the browser source to the edges of the browser display, the height of a single line is 60, the width is what ever you put your string format to. Note that if the text goes past the width you set, it will move to a new line, so instead of one line you will have two, so make sure to add some space to the end of width, say 5 pixels.
The current version of OBS does not show the changes live like it did in previous versions, so you will need to confirm your change then view it again and open and change over and over until you get it just right.

You can also just crop the browser source to the appropriate size, make sure the source is unlocked, hold alt and drag the red box into place. Cropped edges will be dashed in green. This is probably the easier method...

Once you have the browser source either cropped or adjusted into place, select the source again and press control + F, this will have the source fill the screen and center it. Once that happens, move the top and or bottom bars of the red box into place, you will notice that the browser will stay in the center of the screen. It will also adjust its size according to the inside of size of the red bounding box.

Once you are done. hit the lock icon and lock the source into place so it does not move.

I hope that helps.

aramar said:

Hi,

I was able to install it.
I edit the timer to show fraction of seconds ( I am trying to use it for gaming desync)
However, the fraction SSS numbers don't run fast like in other timers.
They jump second by second.

Any suggestions how to make it run like it properly?

thx

Click to expand...

unfortunately the code technically pulls from the internet, cloud flare servers, so there will aways be lag. Your best bet is a python/lua script for OBS. Or a js script that you run locally in the OBS browser.

I am under the impression if there was no internet it would pull from the internal clock, but I have not tested it toughly.

This is great. can you tell me how to stack the time and date like picture. not inline.

I was doing in websites 35 years ago so I only remember doing this in HTML and with tables I don't know how to do this in CSS

anyways this is what I ended up doing, it works great for where I needed to put it. https://youtu.be/ITBYocvH8ZU

John Zapf said:

This is great. can you tell me how to stack the time and date like picture. not inline.

Click to expand...

I am sorry I am not a web dev and frankly avoid it as much a possible since I am not a fan of it.
But it looks like what you made here

John Zapf said:

anyways this is what I ended up doing, it works great for where I needed to put it. https://youtu.be/ITBYocvH8ZU

Click to expand...

Looks to work well.

The work around I have done is just adjusting the browser size and having it automatically handling the browser size. Else you can add a a new line character '\n' to the format string to see if that allow for a new line to appear, else I would advise looking at the documentation for the format string posted in the main guide of this thread.

Chessset5 said:

I am sorry I am not a web dev and frankly avoid it as much a possible since I am not a fan of it.
But it looks like what you made here

Looks to work well.

The work around I have done is just adjusting the browser size and having it automatically handling the browser size. Else you can add a a new line character '\n' to the format string to see if that allow for a new line to appear, else I would advise looking at the documentation for the format string posted in the main guide of this thread.

Click to expand...

No like I said I figured it out and I provided the ZIP file above to what I did and it works perfect.