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
Resource icon
- Thread starter from1975
- Start date
Animalfalcon
New Member
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!
johnedstone
New Member
Never mind. I started reading the documentation. I got it!
Have you seen https://github.com/vjccruz/lower-thirds-obs ? Would love to see the project take on this kind of approach.. Do you have a github repo setup for your project yet?
RichieTee
Member
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
RichieTee
Member
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
RichieTee
Member
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
RichieTee
Member
CSS folder is not being referenced correct.
To test, open your "lower third" folder double click on the "control-panel.html" file so it opens locally in your browser.
Post what you see here.
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
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
RichieTee
Member
Can you provide a sketch of what you need and the image, let me play around it.
RichieTee
Member
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
kallemback
New Member
kallemback
New Member
simple web based template control on web browser
https://navve.co/gc/nome/ <<<<<<< 1920X1080
Cut the control pannel and use =) Create a template Without code