Free Animated Lower Thirds with Dockable Control Panel v.1.6

[NoeAL]

NoeAL submitted a new resource:

Animated Lower Thirds with Dockable Control Panel - Animated Lower Thirds

With this tool you can use a control panel to add and change your own lower thirds on the fly. Feel free to customize. Basic knowledge of HTML, Javascript and CSS is required.
For communication between control panel and browser layer it use BroadcastChannel API.

Unfortunately, OBS doesn't support browser panels on macOs. It only works on Windows.

How to install and how it works: https://youtu.be/DIpslG-u7k0


This project is based on Lower thirds in HTML/CSS...

Read more about this resource...

 

[ecastillo]

The toggles can be activated thru Touchportal or similar? Thanks for give us this tool :)

 

[NoeAL]

The toggles can be activated thru Touchportal or similar? Thanks for give us this tool :)

Not right now. But it's a feature that I would like to add. Something like hotkeys.

I don't know if it's possible to do it from a Browser Source.

 

[Claudio Nunes]

NoeAL submitted a new resource:

Animated Lower Thirds with Dockable Control Panel - Animated Lower Thirds



Read more about this resource...

Your contribution is very good. Congratulations.

I'm looking for two-way expansion:

1 - To be able to save 2 more names and function in addition to the 2 you already save.
At this point I managed to place the button according to the two prints, but I did not find in the code the part that is called when pressing the button.

2 - Enable the shortcut keys.

 

[Claudio Nunes]

I WAS SUCCESSFUL. I managed to adjust the code to store up to three pieces of information.
The second I am still seeing. Having success I make contact here.

 

[NoeAL]

I WAS SUCCESSFUL. I managed to adjust the code to store up to three pieces of information.
The second I am still seeing. Having success I make contact here.

Great! If I see people need to store more I will add more slots in future updates.
If you find a solution for the shortcut keys let us know ;)

 

[ecastillo]

Great! If I see people need to store more I will add more slots in future updates.
If you find a solution for the shortcut keys let us know ;)

That's just my case, I'm thinking to have 9 slots, I'll be using it to show titles of the current topic that we're talking about in the live show.

 

[JoeSalmi]

It would be an awesome update if you could add these to the mix: https://codepen.io/mattchestnut/pen/dMrONe
That way we could select which one we wanted to use. I have tried to edit your files to change them or add an image but didn't have any luck. I would love to use this but the limitations are a few too many right now.

 

[NoeAL]

It would be an awesome update if you could add these to the mix: https://codepen.io/mattchestnut/pen/dMrONe
That way we could select which one we wanted to use. I have tried to edit your files to change them or add an image but didn't have any luck. I would love to use this but the limitations are a few too many right now.

It's one of the things I'm working on right now. I want to add different types of animations. They are my main inspiration.
On the other hand, I'm making great strides by enabling shortcut keys. And so it will be compatible with Touchportal or similars.

A test:

One of two things will be in the next update. Or both ;)

 

[JoeSalmi]

I WAS SUCCESSFUL. I managed to adjust the code to store up to three pieces of information.
The second I am still seeing. Having success I make contact here.

Would you care to share how you did this? I need to add 2 more (have 4 total) to mine.

 

[dejajp]

Would you help me ? I followed the instructions, but nothing appear in my OBS

 

[NoeAL]

Would you help me ? I followed the instructions, but nothing appear in my OBS

We need more information to help you. :)
Are you using the latest version of OBS? Windows or Mac? Open both html files in your internet browser (out of OBS). Works?
Go to OBS settings > Advanced > Sources. Check or uncheck "Enable Browser Source Hardware Acceleration" and try it again.
Hope it helps.

 

[ANATOLI]

Hello to all! Im tottaly new in this kind of things sorry, i succesfuly instal plugin to OBS but can`t work at all i dont know what im doing wrong but im able to fallaw all your guidans ! Windows10 latest version of OBS i open the html in browser and I see the same plugin out from OBS mean the same Lower Thirds witch is in the OBS but out from there in the browser! No idea what i have to do to have working Lower third in obs!

 

[NoeAL]

Hello to all! Im tottaly new in this kind of things sorry, i succesfuly instal plugin to OBS but can`t work at all i dont know what im doing wrong but im able to fallaw all your guidans ! Windows10 latest version of OBS i open the html in browser and I see the same plugin out from OBS mean the same Lower Thirds witch is in the OBS but out from there in the browser! No idea what i have to do to have working Lower third in obs!

Can you see the control panel inside OBS? Area you adding the "browser-source.html" file in the scene? All the files in the Zip are important, are you unzipping all files and directories?
Can you post a screenshot of your OBS to see how it looks?

 

[dejajp]

We need more information to help you. :)
Are you using the latest version of OBS? Windows or Mac? Open both html files in your internet browser (out of OBS). Works?
Go to OBS settings > Advanced > Sources. Check or uncheck "Enable Browser Source Hardware Acceleration" and try it again.
Hope it helps.
[/QUOTE
PERFECT !!! WORKS THANKS

 

[dominic.roca]

Hi. I appreciate the contribution of you for making OBS more suitable for business live-streaming :).
Im a newbie in HTML, and because of that, I'll write a question.. or two.
How could I switch between slot memory 1 and slot memory 2 in live? What I need is to make memory 1 active for 30 sec, deactivate it, make memory 2 active, and repeat.. all in left side, with transitions.
One more question: How could I make the background disappear animation after closing the side?

 

[NoeAL]

Hi. I appreciate the contribution of you for making OBS more suitable for business live-streaming :).
Im a newbie in HTML, and because of that, I'll write a question.. or two.
How could I switch between slot memory 1 and slot memory 2 in live? What I need is to make memory 1 active for 30 sec, deactivate it, make memory 2 active, and repeat.. all in left side, with transitions.
One more question: How could I make the background disappear animation after closing the side?

Hi! At the moment there is no way to automatically change the loaded memory slot. You can only do it manually.
It's a very interesting behavior that I think I could implement in future updates. Even though right now I don't know how.
¯\_(ツ)_/¯
Regarding the background, in the next update you can choose the color and it will be animated.
Thank you for being patient. I hope to upload something soon!

 

[ANATOLI]

 

[ANATOLI]

actuali i havent anything in my folders! I unzip the files but there havent anything. i download the file from you please help me please

 

[NoeAL]

actuali i havent anything in my folders! I unzip the files but there havent anything. i download the file from you please help me please

First of all you need to have all the files and folders of the zip unzipped. "common" folder with "css" and "js" folders inside and "lower thirds" folder with de "html" files inside.

In the other hand, in your screenshot I don't see the "browser source.html" file added in the scene.

Watch the video tutorial again and follow the steps of minute 0:30. And the size has to be the same as your Canvas Resolution (1920x1080 or 1280x720).

I hope it helps