silvamichael
New Member
Also modified a different version of lowerthirds by vjcruz using same type of connection via browser and controller.
Resource icon
- Thread starter from1975
- Start date
Claudio Nunes
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.
silvamichael
New Member
Why not use "stream elements" obs.live overlays for the comments from youtube or facebook?
RichieTee
Member
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.
Dj_NeST
New Member
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?
I'm also getting a similar white screen as above. Any help is much appreciated.
Ok. I got it sorted out. The sources and files were not in the correct place.
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.
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.
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
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.
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.
kadesemowo
New Member
kadesemowo
New Member
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.
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.
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.
youtu.be
Cheers.
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
youtu.be
RichieTee
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.
- YouTube
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
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.
RichieTee
Member
Lots of people have answered this question.. Look above there should be an answer
diggsmcgee
New Member
Would you mind pointing out the code you modified to make text animate in and out instead of popping out?
Thanks.
NoeAL
Member
Hi! Thanks for this amazing tool.
Inspired by this I've created one that I would like to share with everyone. I hope that it would be useful to someone.
https://obsproject.com/forum/resources/animated-lower-thirds-with-dockable-control-panel.1057/
See how it works: https://youtu.be/DIpslG-u7k0
Once again, thank you for your work!
Inspired by this I've created one that I would like to share with everyone. I hope that it would be useful to someone.
https://obsproject.com/forum/resources/animated-lower-thirds-with-dockable-control-panel.1057/
See how it works: https://youtu.be/DIpslG-u7k0
Once again, thank you for your work!