Resource icon

Free Animated Lower Thirds with Dockable Control Panel v.1.6

Swizzler

New Member
Do I report bugs here? The panel doesn't save the lower third color, it always resets to that reddish one after closing/reopening. Not sure if this is a limitation of how OBS handles these panels or what, it did save the data I put into the forms.
 

NoeAL

Member
Do I report bugs here? The panel doesn't save the lower third color, it always resets to that reddish one after closing/reopening. Not sure if this is a limitation of how OBS handles these panels or what, it did save the data I put into the forms.
Thanks for the report. It will be fixed in the next update. ;)
 

ANATOLI

New Member
Thank you very much indeed for help! I finaly did it succesfuly ! Now I have other question! Is it there any way to chang the logo on the lower thirds when appier? on the left side have sine " Our TV" is it chance to be somethingelse? Im doing live stream from church and like to put there the emblem of thechurch is it posible to make it? and how? :)
 

LiveTV

New Member
This looks really cool. I'm new to OBS so pardon if this is a stupid question. It appears that if you want to use a lower third you have to set up at least one layer in a scene which will be that lower third. The problem is, if you have 4 cameras and want to put a graphic over any of the 4 cameras, do you need a whole lot of scenes defined? Four clean cameras plus 4 of the same cameras but with the graphics? Then what if there are several different graphics that might show up over each camera? If I'm going to have a double box but I don't know when I build it which camera will be on the right or the left, it seems like I have to build all possible scenarios. That seems like a whole lot of scenes and a complicated way of controlling it.

By trade I am a technical director in live sports television. A full blown Grass Valley K-frame is my tool of choice (look it up) but even the simplest switchers dating back to the 1980's have some extraordinarily simple constructs that add incredible flexibility and controllability to a production. So without going into what these are and how revolutionary they would be to OBS, let me ask if there is a simple way to add a downstream key (basically a layer such as a lower third) right over the program output. That way you can add a graphic, PIP box or anything to whatever you have on air at the moment. Or to think about it differently, the program output is itself built as a scene with the lowest layer being what we think of as program now and with a way to control the transitions of the other layered elements from invisible to visible and the reverse. Can OBS do this and I'm just missing it?
 

NoeAL

Member
This looks really cool. I'm new to OBS so pardon if this is a stupid question. It appears that if you want to use a lower third you have to set up at least one layer in a scene which will be that lower third. The problem is, if you have 4 cameras and want to put a graphic over any of the 4 cameras, do you need a whole lot of scenes defined? Four clean cameras plus 4 of the same cameras but with the graphics? Then what if there are several different graphics that might show up over each camera? If I'm going to have a double box but I don't know when I build it which camera will be on the right or the left, it seems like I have to build all possible scenarios. That seems like a whole lot of scenes and a complicated way of controlling it.

By trade I am a technical director in live sports television. A full blown Grass Valley K-frame is my tool of choice (look it up) but even the simplest switchers dating back to the 1980's have some extraordinarily simple constructs that add incredible flexibility and controllability to a production. So without going into what these are and how revolutionary they would be to OBS, let me ask if there is a simple way to add a downstream key (basically a layer such as a lower third) right over the program output. That way you can add a graphic, PIP box or anything to whatever you have on air at the moment. Or to think about it differently, the program output is itself built as a scene with the lowest layer being what we think of as program now and with a way to control the transitions of the other layered elements from invisible to visible and the reverse. Can OBS do this and I'm just missing it?
Hi, thanks for your comment. I find it very important what you tell me about the control of the lower thirds in different scenes. Your professional point of view is really interesting.

The objective of this tool is to fully manage the lower thirds from the control panel, hide or unhide them (now with hotkeys) without the need to duplicate scenes. I have made some changes so that you can edit them in real time and be prepared for any possible scenario without the need for CSS knowledge.
Unfortunately the only way it works is to add the browser source file in all scenes. I read that it's planned for future OBS updates to add downstream keyer (global scenes), so users can have scenes that are always on top of the other scenes. I don't know if there is a plugin that does it right now.

In any case I think that in the next update of this tool you will find many utilities to be able to place the lower thirds where you need it, changing its appearance and position quickly.

Thanks for the recommendation of the Grass Valley K-frame, it has given me some ideas.


In a few days Version 1.1 will be available. I hope to receive your comments. ;)
 

andrescastaned

New Member
This looks really cool. I'm new to OBS so pardon if this is a stupid question. It appears that if you want to use a lower third you have to set up at least one layer in a scene which will be that lower third. The problem is, if you have 4 cameras and want to put a graphic over any of the 4 cameras, do you need a whole lot of scenes defined? Four clean cameras plus 4 of the same cameras but with the graphics? Then what if there are several different graphics that might show up over each camera? If I'm going to have a double box but I don't know when I build it which camera will be on the right or the left, it seems like I have to build all possible scenarios. That seems like a whole lot of scenes and a complicated way of controlling it.

By trade I am a technical director in live sports television. A full blown Grass Valley K-frame is my tool of choice (look it up) but even the simplest switchers dating back to the 1980's have some extraordinarily simple constructs that add incredible flexibility and controllability to a production. So without going into what these are and how revolutionary they would be to OBS, let me ask if there is a simple way to add a downstream key (basically a layer such as a lower third) right over the program output. That way you can add a graphic, PIP box or anything to whatever you have on air at the moment. Or to think about it differently, the program output is itself built as a scene with the lowest layer being what we think of as program now and with a way to control the transitions of the other layered elements from invisible to visible and the reverse. Can OBS do this and I'm just missing it?


You can use nested scenes... take a look to this youtube video
 

NoeAL

Member
NoeAL updated Animated Lower Thirds with Dockable Control Panel with a new update entry:

Styles, hotkeys and more editable!

Hi! I'm very happy to share this new update.

Video: https://youtu.be/cQ0_1GwpwB0


I've added a lot of new features:
  • Each lower third has 10 memory slots.
  • 4 lower thirds to use simultaneously.
  • Hotkeys to turn on/off switches to show and hide the lower thirds (watch the video)
  • Edit panel:
    • They glow blue or red to know if they are active or inactive.
    • Styles - At the moment there are only 2. but...

Read the rest of this update entry...
 

RichieTee

Member
This looks really cool. I'm new to OBS so pardon if this is a stupid question. It appears that if you want to use a lower third you have to set up at least one layer in a scene which will be that lower third. The problem is, if you have 4 cameras and want to put a graphic over any of the 4 cameras, do you need a whole lot of scenes defined? Four clean cameras plus 4 of the same cameras but with the graphics? Then what if there are several different graphics that might show up over each camera? If I'm going to have a double box but I don't know when I build it which camera will be on the right or the left, it seems like I have to build all possible scenarios. That seems like a whole lot of scenes and a complicated way of controlling it.

By trade I am a technical director in live sports television. A full blown Grass Valley K-frame is my tool of choice (look it up) but even the simplest switchers dating back to the 1980's have some extraordinarily simple constructs that add incredible flexibility and controllability to a production. So without going into what these are and how revolutionary they would be to OBS, let me ask if there is a simple way to add a downstream key (basically a layer such as a lower third) right over the program output. That way you can add a graphic, PIP box or anything to whatever you have on air at the moment. Or to think about it differently, the program output is itself built as a scene with the lowest layer being what we think of as program now and with a way to control the transitions of the other layered elements from invisible to visible and the reverse. Can OBS do this and I'm just missing it?

AFAIK OBS 25 does not have a DSK, this allegedly is in the works for OBS 26, at the moment only way to add a Global Graphics is to use a Nested Scene, this way you can have one scene where u load your graphics, then add that scene as a source in all scences where you might need it on the Program Output. Then you can setup hotkeys to manipulate transitions and all that.
 

NoeAL

Member
Friend,
What can I tell you? Thank you very much for the update. I had already modified the code, as I said before, to have more recording slots. I will already implement and test. I'll get back to you.
Right now you have ten for each. And I have changed the code to be scalable. If you need more slots just add another "<li>" below the last one:

<li id = "alt-1-slot-11"> <div class = "slot-storable stored-name" id = "alt-1-name-11"> </div> <div class = "slot-storable stored-info "id =" alt-1-info-11 "> </div> </li>

This will add one more in the "Lower third 1". It's important that the number is different, there cannot be two "slot-10". If you wanted it in the lower third 3, you would have to change "alt-3-slot-11", "alt-3-name-11" and "alt-3-info-11".

Hope it helps if anyone needs more. ^^
 

NoeAL

Member
The RAR file seems corrupted, is it possible to release a .ZIP file?

I think it is a problem with the Winrar version.
Anyway, it was my mistake to upload it in RAR and not in ZIP. Here you have it! ;)
 

Attachments

  • Lower-Thirds.zip
    102.9 KB · Views: 85

Blondelion

New Member
Hi @NoeAL, excelent tool

I'm trying to do something that is not working well maybe it's not the way to do it.

I managed different shows for our fan page, so I use more than 4 lower third styles for each show, so I try to add 2 docks pointing to 2 different folders, but I think you are using something that is common because when I change in one dock it changes in the other one too, and when I show the Lower Third it starts blinking.

Maybe you can help with a solution as this is a great tool I want to use for every show.
 

NoeAL

Member
Hi @NoeAL, excelent tool

I'm trying to do something that is not working well maybe it's not the way to do it.

I managed different shows for our fan page, so I use more than 4 lower third styles for each show, so I try to add 2 docks pointing to 2 different folders, but I think you are using something that is common because when I change in one dock it changes in the other one too, and when I show the Lower Third it starts blinking.

Maybe you can help with a solution as this is a great tool I want to use for every show.
Hi,
To communicate with each other, html files use a channel.
Look in both files ("browser-source.html" and "control-panel.html") for the line where it is:

var bc = new BroadcastChannel ('obs-lower-thirds-channel');
var bcr = new BroadcastChannel ('obs-lower-thirds-channel2');


The tool uses two channels, one to send information and the other to receive it.

You just have to change the name of that channel. 'obs-lower-thirds-cannel-B' and 'obs-lower-thirds-cannel2-B', for example.
The important thing is that the two files that you want to be communicated have the same name in their channels.

I would recommend that you rename the files as well to avoid other problems. Since cookies are used to store the information of the fields.

Hope this solves it.
 

cc.

New Member
Hi there,

great tool. Thanks a lot.

I just wonder, I'd like to expand the background bar across the complete screen (and or maybe with equal space on each side), but not dependant on the text only:
LowerThirdExample.png


Since I'm not really good in HTML, CSS, etc. I couldn't find it directly in the files where to change it. Could you help me there?

Thx
 

NoeAL

Member
Hi there,

great tool. Thanks a lot.

I just wonder, I'd like to expand the background bar across the complete screen (and or maybe with equal space on each side), but not dependant on the text only:
View attachment 60791

Since I'm not really good in HTML, CSS, etc. I couldn't find it directly in the files where to change it. Could you help me there?

Thx
You have to modify the "style-source.css" file. Search ".style-1 > .graph-2" (line 616 approx) and change this:

margin: -1em;
padding: 1em;


to this:

margin: -1em -5em;
padding: 1em 400%;


It's not ideal but it will work for you. ;)
Maybe I will implement it in the new styles.

Hope this can help you.
 

nikd76

New Member
Hi

Great plugin - thanks for creating this!

I have it set up and am testing it out. The latest version which has the 10 slots, I dont seem to be able to switch between them. I am wondering if this is an issue or if this is related to a setting somewhere (perhaps something being cached ?)

Thanks
 

cc.

New Member
You have to modify the "style-source.css" file. Search ".style-1 > .graph-2" (line 616 approx) and change this:

margin: -1em;
padding: 1em;


to this:

margin: -1em -5em;
padding: 1em 400%;


It's not ideal but it will work for you. ;)
Maybe I will implement it in the new styles.

Hope this can help you.

Thanks a lot for your fast answer. Works fine (for me) — Funnily enough was my editor at exact the right position open anyway. :)

Cheers helped me a lot.
 
Top