Resource icon

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

Claudio Nunes

New Member
Hello, the problem on our end is that people sometimes dropped by on the middle of the broadcast. if that's the case we need to reload the source file of the controller, hence needed extra technical process to do it. With this case, we just type the information directly.

attached is the files that i've used.

my controller is "control-panel-MultiInput.html" and by obs output file is "browser-source - BK.html"

Regards...
Thank you. I am seeing ways to put 4 lines and thus be able to use comments from youtube or facebook.
I'm still having some difficulty.
 

RichieTee

New Member
Thank you. I am seeing ways to put 4 lines and thus be able to use comments from youtube or facebook.
I'm still having some difficulty.
How are you planning on getting the comments from YouTube or Facebook?
For YouTube you can simply use the "browser source" to display YouTube comments (get the live chat URL), Facebook comments is a different beast.
 

Tu_Palo

New Member
from1975 submitted a new resource:

Animated lower thirds with control panel - Lower thirds on the fly. Completely free!



Read more about this resource...
You can edit predefined values in "control-panel.html" file. Also you can change the logo. Basically, you can change everything, cause it's just a bunch of CSS lines :) <---- Can someone explain how you can make all those changes that from1975 says please? / Alguien puede explicar como se puede hacer todos esos cambios que dice from1975 porfavor?
 

kadesemowo

New Member
From1975 Lower Thirds might end up being one of the best things that has ever happen to OBS.
If there is one thing that has limit my use of OBS, it is lack of animated, dynamic and feed-in (csv et al) lower thirds.

I've use some plug-ins (Tobias stream overlay studio, Jaxel 8wr.io et al). They work great. However, from1975 is just simple to use and highly flexible. I guess it's time for me to start dusting my CSS and js.
 

kadesemowo

New Member
This variant allows you to select colour for line 1 and line 2. For now, line three is by default red. Can be changed in the CSS.
PS: snapshot and zip file attached (note the source has not been clean up: lots of commented out codes.
NB: My attempt at using colour pick did not work (seems OBS browser limitation). Will appreciate if any can point int he right direction regarding colour picker. NB: it works in standalone browsers but not within OBS (dock).

Plan:
1. integrate @silvamichael SilvaMichael additional inputs;
2. include a glassy backdrop and text effect;
3. the "up" button doesn't work for now. It is a placeholder to scroll in from bottom.
- Hint: modify or remove animateout! Thanks @michaelc for the heads up.
4. additional buttons or use of drop-down list to control animation (right, fly, bottom, et al.);
5. explore possibility of parsing csv (or txt or excel) file.
6.
 

Attachments

RichieTee

New Member
This variant allows you to select colour for line 1 and line 2. For now, line three is by default red. Can be changed in the CSS.
PS: snapshot and zip file attached (note the source has not been clean up: lots of commented out codes.
NB: My attempt at using colour pick did not work (seems OBS browser limitation). Will appreciate if any can point int he right direction regarding colour picker. NB: it works in standalone browsers but not within OBS (dock).

Plan:
1. integrate @silvamichael SilvaMichael additional inputs;
2. include a glassy backdrop and text effect;
3. the "up" button doesn't work for now. It is a placeholder to scroll in from bottom.
- Hint: modify or remove animateout! Thanks @michaelc for the heads up.
4. additional buttons or use of drop-down list to control animation (right, fly, bottom, et al.);
5. explore possibility of parsing csv (or txt or excel) file.
6.
You said " My attempt at using colour pick did not work", i tested your files in OBS without any code change, i could select the color for the first file Line, couldn't for the second.

When testing with a browser, for the 1st line i could change the color everytime, however for the 2nd line, once the color is chosen it can't be changed unless the page is refreshed.

1595851660757.png
 

kadesemowo

New Member
You said " My attempt at using colour pick did not work", i tested your files in OBS without any code change, i could select the color for the first file Line, couldn't for the second.
[/QUOTE

Thanks @RichieTee for the feedback. Deeply appreciated.
When using colour picker (HTML5 or js), the (colour selector) popup doesn't comes up. This works outside the OBS (dock) though.
My understanding is that OBS (dock) doesn't allow ContextMenu or direct interaction.
This is different for Browser source in OBS.
Possibly, there is something that needs to be enabled. I trust the community will assist in this regard. If so, then with css and js, we can have one instance of colour picker and possibly instantiate it for all the different text fields.

Hence, in the 'version' that was uploaded, the colour picker (native HMTL5 or js), was commented out.
HTML:
<!--//NotUsedAsOBSDoesntAllowContextMenu--// input type="color" id="lower-thirds-name-color"-->
[Currently]
For line 1, colour can be selected from the drop down (substituted colour picker).
For line two, users can select or simply type the colour they want/prefer. Obviously, this has a limitation of: typing correctly, and the typed colour recognised.

When testing with a browser, for the 1st line i could change the color every time, however for the 2nd line, once the color is chosen it can't be changed unless the page is refreshed.
Thanks. Yes, that is correct. Will look at fixing the 'bug'; .click, .change ....

It's got to do with the difference between colour selector for line 1 and line 2.
For line 1, it's simply <select> <option> ... </select> ... <input ...>.
For line 2, it's
HTML:
<input type="text" ...>
            <datalist id="color-list">
            <select name="fxn-color2">
            <option value="light grey" selected> light grey</option>
            ... ...
           </select ...
[Walkaround]
user should simply type in their desired colour. for line 2.
 

kadesemowo

New Member
You said " My attempt at using colour pick did not work", i tested your files in OBS without any code change, i could select the color for the first file Line, couldn't for the second.
Thanks @RichieTee for the feedback. Deeply appreciated.
When using colour picker (HTML5 or js), the (colour selector) popup doesn't comes up. This works outside the OBS (dock) though.
My understanding is that OBS (dock) doesn't allow ContextMenu or direct interaction.
This is different for Browser source in OBS.
Possibly, there is something that needs to be enabled. I trust the community will assist in this regard. If so, then with css and js, we can have one instance of colour picker and possibly instantiate it for all the different text fields.

Hence, in the 'version' that was uploaded, the colour picker (native HMTL5 or js), was commented out.
HTML:
<!--//NotUsedAsOBSDoesntAllowContextMenu--// input type="color" id="lower-thirds-name-color"-->
[Currently]
For line 1, colour can be selected from the drop down (substituted colour picker).
For line two, users can select or simply type the colour they want/prefer. Obviously, this has a limitation of: typing correctly, and the typed colour recognised.

When testing with a browser, for the 1st line i could change the color everytime, however for the 2nd line, once the color is chosen it can't be changed unless the page is refreshed.

[image]...
Thanks. Yes, that is correct. Will look at fixing the 'bug'; .click, .change ....

It's got to do with the difference between colour selector for line 1 and line 2.
For line 1, it's simply
HTML:
 <select> <option> ... </select> ... <input ...>. [/CODE

For line 2, it's
[CODE=html]<input type="text" ...>
<datalist id="color-list">
<select name="fxn-color2">
<option value="light grey" selected> light grey</option>
... ...
</select ...
[Walkaround]
user should simply type in their desired colour. for line 2.
 

sderman

New Member
Hey peeps, I've made a tutorial on how to use this and make a few customizations. Please check it out and leave me some feedback, good or bad.
Cheers.
 

RichieTee

New Member
Hey peeps, I've made a tutorial on how to use this and make a few customizations. Please check it out and leave me some feedback, good or bad.
Cheers.
Watched your video.
1) You should use a different note editor, so the colors can pop out.
2) You needed to delete and readd the browser dock to effect a change for the browser-source, when you could easily add the Reset Browser Source LUA from Exeldro "https://obsproject.com/forum/resources/reset-browsers-sources.966/". or use the Scene Browser Refresh by Alexik "https://obsproject.com/forum/resources/scene-browsers-refresh.1025/". As long as the changes is not on the Control Panel.html [browser dock], you don't need to delete and readd.
3) You could add an extra button to clear the text fields.

Aside that, your video shed proper light for those who prefer visual imagery. Cheers
 

sderman

New Member
Watched your video.
1) You should use a different note editor, so the colors can pop out.
2) You needed to delete and readd the browser dock to effect a change for the browser-source, when you could easily add the Reset Browser Source LUA from Exeldro "https://obsproject.com/forum/resources/reset-browsers-sources.966/". or use the Scene Browser Refresh by Alexik "https://obsproject.com/forum/resources/scene-browsers-refresh.1025/". As long as the changes is not on the Control Panel.html [browser dock], you don't need to delete and readd.
3) You could add an extra button to clear the text fields.

Aside that, your video shed proper light for those who prefer visual imagery. Cheers
Thank you very much for those tips. There's so much I don't know about OBS and the vast resources you guys provide. Thanks again.
 

DJ457

New Member
Thank you for the plugin. Is there anyway to add a background behind the text? Depending what's on the screen the text is not always visible. I'm not a CSS coding guy, so I appreciate the help.

Thank you.
 

RichieTee

New Member
Thank you for the plugin. Is there anyway to add a background behind the text? Depending what's on the screen the text is not always visible. I'm not a CSS coding guy, so I appreciate the help.

Thank you.
Lots of people have answered this question.. Look above there should be an answer
 
Top