Resource icon

Free Animated lower thirds with control panel 2020-04-12

Animalfalcon

New Member
Hello, congrats for this excellent tool but i can´t do work. I add a control panel and a new browser source when i click on show, nothing happen. Please can help me ? Thanks
 

jsonhide

New Member
Its an amazing tool to build lower-thirds.
Appreciate if anyone could enlighten me about how to config the "logo.png" to be shown at the left-bottom corner!! I am not very good at CSS coding.
 

Animalfalcon

New Member
Hello, congrats for this excellent tool but i can´t do work. I add a control panel and a new browser source when i click on show, nothing happen. Please can help me ? Thanks
Thanks for the help. I discovered what´s happend. In OBS Config, in the advanced menu, the option: hardware acceleration for navigator its enabled. Just i disable it and works well.
 

johnedstone

New Member
This is so cool! I have a question. I understand js, css, and html. My question is "how do these two pages talk to each other? Do they share the same javascript 'space' in OBS? Where can I read more how this works?" Thanks!
 

bloodshot

New Member
If you are on Mac, you can add the controller as a new Browser source, then click the "eye" to make it not show. Then right-click it and choose "interact" and you can use the controller that way.
 

Baron Oz

New Member
Downloaded this in the morning, up and running in a few minutes. Nice clean code too. Thanks so much, great job!
 

RichieTee

Member
Its an amazing tool to build lower-thirds.
Appreciate if anyone could enlighten me about how to config the "logo.png" to be shown at the left-bottom corner!! I am not very good at CSS coding.

First, you need to know where you unzipped the file, then navigate to [common\images] this path is where the logo is.
Here you can change the Logo as you see fit.

If you want to config the logo, go to the browser-source.html file and edit, make sure the logo you want is inside the [common\images] folder
 

Attachments

  • Logo.png
    Logo.png
    86.1 KB · Views: 285

RichieTee

Member
@from1975 This is amazing!

I did have two side questions as a non-coder: Is it possible to run 2 of these at the same time? Is it possible to make it generate more than 2 lines of text (lets just say I wanted 4 lines of text).

Hey, you asked 2 questions, I can answer one right now, the other I need more time to play around.
Is it possible to run 2 of these at the same time?
Yes, it is. See the attached screenshot and the steps.

Steps
1: Duplicate Common and lower thirds folders e.g "common2", and "lower thirds2"

2: Open the lower thirds2 folder, open the browser-source.html file in an editing app like Notepad++

2.0 -- Modify the following lines
2.1:- <link rel="stylesheet" href="../common/css/style-001.css"> to <link rel="stylesheet" href="../common2/css/style-001.css">
remember "common2" is the name of the duplicate folder.

2.2:- var bcc = new BroadcastChannel('obs-lower-thirds-channel'); to var bcc = new BroadcastChannel('obs-lower-thirds-channel1');
the reason adding the 1, is to tell the script to use a different name, if you use the same name, it will always populate the 2nd panel. You can add anything to it, just make sure the name is different.

2.3:- <img src="../common/images/logo.png"> to <img src="../common2/images/logo.png">
this is to reference the logo from the proper folder.

3: Open the lower thirds2 folder, open the "control-panel.html" file in an editing app like Notepad++
3.0 -- Modify the following lines

3.1: <link rel="stylesheet" href="../common2/css/style-001.css">
this is to reference the stylesheet from the proper folder.

3.2: <script src="../common2/js/jquery.js"></script>
this is to reference the jquery from the proper folder.

3.3: var bc = new BroadcastChannel('obs-lower-thirds-channel1');
this is to reference the name created earlier in STEP 2.2.

4: Create your docks, add the Browser Source, and have fun.
 

Attachments

  • OBS Tools 2 Instance Docks.png
    OBS Tools 2 Instance Docks.png
    11.3 KB · Views: 282
  • OBS Tools 2 Instance Script Config.png
    OBS Tools 2 Instance Script Config.png
    79.2 KB · Views: 302
  • OBS Tools 2 Instance.png
    OBS Tools 2 Instance.png
    68.4 KB · Views: 297

RichieTee

Member
This is absolutely fantastic. Thanks you so much for the tip. I'm very new to html, and I have a follow-up question. How can I change the colors in the lower third text to a bright white (#FFFFFF). If someone could point me in the right direction, this rookie would greatly appreciate it. Cheers.

Hey, there, luckily for you I just did exactly what you needed.

1) Go to your "common\css" folder
2) open the "style-001.css" file in an editor such as NotePad or NotePad++
3) To change the Name(top text)
scroll down to "body.browser-source.lower-thirds #lower-third #name" then change the color
4) To change the Function(bottom text)
scroll down to "body.browser-source.lower-thirds #lower-third #function" then change the color
5) Save the file and have fun... See the attached screenshot.
 

Attachments

  • Change LowerThird Color to White.png
    Change LowerThird Color to White.png
    49.3 KB · Views: 191

dr-froehlich

New Member
Hi,
great tool, very easy to use and apply, very clean, thank you so much!

Can anybody help on how to create an underlying semi-transparent box? I'd like to make the logo and writing stick out independent of the content underneath. Of course i can supply an image, but then I would lose the "show/hide" and animation facility. Any help or ideas are greatly apprecitated, thank you!

Peter
 

s2videos

New Member
Hello...
Thanks for the great tools in my new OBS interface (lowerthird dock/panel)....
But somehow I need to put a stroke or shadows in a text...
Could someone please tell us on how to put the script...
Thanks..!
 

RichieTee

Member
Hi,
great tool, very easy to use and apply, very clean, thank you so much!

Can anybody help on how to create an underlying semi-transparent box? I'd like to make the logo and writing stick out independent of the content underneath. Of course i can supply an image, but then I would lose the "show/hide" and animation facility. Any help or ideas are greatly apprecitated, thank you!

Peter
Can you provide a sketch of what you need and the image, let me play around it.
 

RichieTee

Member
Hi,
great tool, very easy to use and apply, very clean, thank you so much!

Can anybody help on how to create an underlying semi-transparent box? I'd like to make the logo and writing stick out independent of the content underneath. Of course i can supply an image, but then I would lose the "show/hide" and animation facility. Any help or ideas are greatly apprecitated, thank you!

Peter
Hey Peter, I just played around and came up with this

Basically all i did was,
1) go to the "browser-source.html" file, it will be located in the "Lower thirds" folder
2) Open in a note editor such as NotePad++ or even the default Notepad on Windows.
3) Modify this line from
<div id="lower-third">
to
<div id="lower-third" style="background-color:#d3d3d3;box-sizing: border-box;border-radius: 8px;">

4) Save the file and cheers.

Explanation of the code added:
Background-Color: light grey
border-radius: make the border a bit like a circle, not a perfect square.

N.B: Remember to reload/rrefresh the BROWSER SOURCE in OBS to apply the changes.

Pro-Tip: Download "refresh-browsers.lua" file to help reset all browser sources Globally.

I modified my file, to add a CLEAR button, this will clear all the text from Program/Preview and the Control-Panel textbox in OBS.
 

Attachments

  • browser-source.html.png
    browser-source.html.png
    70.6 KB · Views: 221
  • OBS Setup.png
    OBS Setup.png
    34.5 KB · Views: 226
  • Output.png
    Output.png
    18.6 KB · Views: 221

nesdf

New Member
Hi, first i want to say thank you, it was a great job man.
i did some changes to the code, my point was get a better integration of the panel so leave here the changes and the rar with the changes implemented, finally some captures.
11111.JPG
22222222.JPG
ange .
333333.JPG
 

Attachments

  • OBS Tools.rar
    639 KB · Views: 130

JrBK

New Member
Is there a way to make an image appear instead of the text? I have full screen images that already exist and want to use them. I have removed the logo and replaced the names with the name I will use but would like to use an image instead of the names.

Thank you in advance.
 
Top