Chessset5 submitted a new resource:
Time and Date Overlay updated - Local Clock HTML file
Read more about this resource...
Time and Date Overlay updated - Local Clock HTML file
Read more about this resource...
All Versions Time and Date Overlay updated
- Thread starter Chessset5
- Start date
ItsYESfahad
New Member
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.
*I have attached a picture of it I think this is the cleanest result I've got.
Attachments
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.
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.
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)
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)
thats cool
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.
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.
anyways this is what I ended up doing, it works great for where I needed to put it. https://youtu.be/ITBYocvH8ZU
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.
No like I said I figured it out and I provided the ZIP file above to what I did and it works perfect.