Free Animated Lower Thirds with Dockable Control Panel v.1.6

[keaglin]

So I'm doing something a little bit different. I actually need twice as many entries. But something is kind of wonky? Because simply doubling everything does not work. Anybody know what I might've missed? Or where I can look at OBS' like cache and/or localStorage? As I understand, everything browser source is compiled together. And I'm trying to figure out where the issue is.

I know that may be kind of outside the scope of this plugin but I figured it wouldn't hurt to at least ask!

 

[VideoHockey]

You can put the switches to the left if you want. In the Main Settings, it's the third checkbox under the Custom Fonts: "Switches on the left". I don't know if you mean that.

Oh my, this is frightingly good!!!! I DID have a look at those 4 options, but must have overlooked nr. 3 :-)

 

[VideoHockey]

Hi @VideoHockey, I already asked something similar and NoeAl gave the help to do it, here are his answers

Hi Blondelion,

 

[VideoHockey]

Hi Blondelion, do you still create separate control panels, or have you stopped doing that because of the many updates NoeAl makes :-)
So what I tried to do (I'm a noob on this)
For the Ladies team I did the following
1: I copied Style-source.css and named it Style-Source-D1.css and in there I replaced all "ALT" into "ELT"
2: Copied Browser-source.html and named it Browser-source-D1.html and replaced all "ALT" into "ELT" and referred to href="../common/css/style-source-D1.css"
3: Copied Control-panel-.html and named it Control-panel-D1.html and replaced all "ALT" into "ELT"
4: In both Browser-source-D1.html and Control-panel-D1.html I changed the broadcast channels and receivechannel into 'obs-lower-thirds-channel-D' & 'obs-lower-thirds-channel2-D' (The 'D' stands for 'Dames' which means 'Ladies')

For the men's team I created the same files but ending with "H" (for "Heren", which means "Men"), did refer to the proper obs-lower-third-channels, but left everything in there on "ALT".

Browser source D1 (see picture) shows "Puck Polanos" (bottom left). When I close that dock, open the men's dock (Lower 3rd H1) and change that name into Polano, close it again and open the D1 again, the name of Polanos also has changed into this dock into Polano

.... which off course we don't want in the first place.

Where am i going wrong?

 

[breakthebell]

Excellent tool, I'm having difficulty removing a lower thirds that I've previously used but no longer need

 

[NoeAL]

Hi Blondelion, do you still create separate control panels, or have you stopped doing that because of the many updates NoeAl makes :-)
So what I tried to do (I'm a noob on this)
For the Ladies team I did the following
1: I copied Style-source.css and named it Style-Source-D1.css and in there I replaced all "ALT" into "ELT"
2: Copied Browser-source.html and named it Browser-source-D1.html and replaced all "ALT" into "ELT" and referred to href="../common/css/style-source-D1.css"
3: Copied Control-panel-.html and named it Control-panel-D1.html and replaced all "ALT" into "ELT"
4: In both Browser-source-D1.html and Control-panel-D1.html I changed the broadcast channels and receivechannel into 'obs-lower-thirds-channel-D' & 'obs-lower-thirds-channel2-D' (The 'D' stands for 'Dames' which means 'Ladies')

For the men's team I created the same files but ending with "H" (for "Heren", which means "Men"), did refer to the proper obs-lower-third-channels, but left everything in there on "ALT".

Browser source D1 (see picture) shows "Puck Polanos" (bottom left). When I close that dock, open the men's dock (Lower 3rd H1) and change that name into Polano, close it again and open the D1 again, the name of Polanos also has changed into this dock into PolanoView attachment 61646 .... which off course we don't want in the first place.

Where am i going wrong?

Hi! I don't know exactly what problem you're having. but why don't you increase the number of memory slots instead of doubling the whole tool?

Between <ul id="alt-1-memory-slots">..........</ul> you'll found:
<li id="alt-1-slot-1"><div class="slot-number">1</div><div class="slot-storable stored-name" id="alt-1-name-1"></div><div class="slot-storable stored-info" id="alt-1-info-1"></div></li>...

You can increase them to the number you want. The control panel may look a bit weird though.
For example. This would give you 2 more slots in the Panel 1:

<li id="alt-1-slot-11"><div class="slot-number">11</div><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>
<li id="alt-1-slot-12"><div class="slot-number">12</div><div class="slot-storable stored-name" id="alt-1-name-12"></div><div class="slot-storable stored-info" id="alt-1-info-12"></div></li>

Each memory slot is:
<li id="alt-X-slot-Y"><div class="slot-number">Y</div><div class="slot-storable stored-name" id="alt-X-name-Y"></div><div class="slot-storable stored-info" id="alt-X-info-Y"></div></li>

Replace:
X = Number of the Lower Third panel.
Y = Number of the slot (It always has to be different).

And important! Add this in the style-control-panel.css:
.panel-bottom > ul { max-width: 220px; flex-wrap: wrap;}
.panel-bottom > ul > li {margin-bottom: 4px;}


I hope that with this you don't have to duplicate the tool. ^^

 

[Gonzalez Silva]

Good Morning. How do I configure on Linux? the lower thirds.

 

[zbhsmith]

Is there any way to see the additional text, beyond the one line? I need to put more than one line of text in the info box.

 

[zbhsmith]

Is there any way to see the additional text, beyond the one line? I need to put more than one line of text in the info box.

Nevermind, I found it in CSS. Just changed the overflow to visible.

 

[NoeAL]

Nevermind, I found it in CSS. Just changed the overflow to visible.

Great! Or if you are using the style 2, you can add this line in the style-source.css file:
#lower-third-1.style-2 > div.text-content > div:nth-child(2) {height: auto;}

 

[NoeAL]

Good Morning. How do I configure on Linux? the lower thirds.

This tool only works on Windows. You can only use it thanks to the Custom Browser Docks feature, currently not available on Mac or Linux. Sorry!

 

[VideoHockey]

Hi! I don't know exactly what problem you're having. but why don't you increase the number of memory slots instead of doubling the whole tool?

Between <ul id="alt-1-memory-slots">..........</ul> you'll found:
<li id="alt-1-slot-1"><div class="slot-number">1</div><div class="slot-storable stored-name" id="alt-1-name-1"></div><div class="slot-storable stored-info" id="alt-1-info-1"></div></li>...

You can increase them to the number you want. The control panel may look a bit weird though.
For example. This would give you 2 more slots in the Panel 1:

<li id="alt-1-slot-11"><div class="slot-number">11</div><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>
<li id="alt-1-slot-12"><div class="slot-number">12</div><div class="slot-storable stored-name" id="alt-1-name-12"></div><div class="slot-storable stored-info" id="alt-1-info-12"></div></li>

Each memory slot is:
<li id="alt-X-slot-Y"><div class="slot-number">Y</div><div class="slot-storable stored-name" id="alt-X-name-Y"></div><div class="slot-storable stored-info" id="alt-X-info-Y"></div></li>

Replace:
X = Number of the Lower Third panel.
Y = Number of the slot (It always has to be different).

And important! Add this in the style-control-panel.css:
.panel-bottom > ul { max-width: 220px; flex-wrap: wrap;}
.panel-bottom > ul > li {margin-bottom: 4px;}


I hope that with this you don't have to duplicate the tool. ^^

Hi NoeAl .... thnx for the tip, but the idea I had to create 2 tools is for me to make it easier to click the right slot.
I have around 20 names per team (Men / Women). So what I want to do is:
first I shortcut-click the slot nr, then activate the panel, then activate the overall button.
Let's say nr. 07 scores. I then short click {NUMPAD-7}, which activates all 4 slots '7'. Since 7 < 10, I know I then have to activate Panel 1 and then activate the General button to start showing the lower 3rd.
If nr 17 scores, I do the same, but activate Panel 2, for 17 < 20.
We have one player who wanted nr 77 .... :-( .... He'll be on panel 4.

Since I now have Panel 3 & 4 for the Women's team, I can't use nr 77 on panel 4, but I hav had to put him on panel 2, slot 9 ... which makes my shortcutting more difficult... I then have to look at the screen and check where he is.... and I don't have time to look, nor think :-)

But thank you for thinking with me..... :-)

 

[VideoHockey]

Excellent tool, I'm having difficulty removing a lower thirds that I've previously used but no longer need

Long press that particular slot ... it will blink red and you can remove it...

 

[Novgorod]

Thanks for the great tool, it really allows for a lot of flexibility with little effort! No more pre-rendered stuff for animations!

I have a feature request (if I may) that would be really useful to me and hopefully to others as well. Rather than using the inactive timer to cycle through memory slots at a constant interval (that's kind of a niche application I'd think), I would like to have a "manual mode" where you can manually fire the lower third (including fade-in animation) by clicking on the particular memory slot. Right now, if you click on the memory slot, it simply changes the content in whatever state it's currently in (active or inactive) but doesn't trigger the animation. In my use case, I want to setup several memory slots, e.g. with song titles, and some active time (e.g. 20s) and then manually show the title at the beginning of each song, which automatically disappears after 20s with the fade-out animation. In order to do that, I have to set the inactive timer to "infinity" (very large number), select the memory slot, start the fade-in using the set switch, wait until it fades out, disable the set with the switch, click on the next memory slot, and lastly turn the set switch on again to start the fade-in with the newly selected memory slot. All this could be done by a single click on the next memory slot. You could add a checkbox named something like "allow manual transitions", so a click on any memory slot (in an enabled set) would fire the corresponding lower third with its fade-in animation regardless of the current state. Alternatively, this behavior could be enabled when the inactive timer is set to zero and the active timer has run out (otherwise the functionality remains as it's now), but this would make it a bit hidden to the user. On that note, a value of zero for the inactive timer should set it to infinity like it does for the active timer (just for consistency, regardless of my feature request).

It would be really great if you could consider this. Thanks!

 

[Dankwo]

Hi.
Thanks for this flexible tool.
I am trying use Style 1 to generate a background that can have two rows of text. I want the background to fill the entire width of the screen.
I have managed to get the two rows of text but the background only fills the entire screen width when I have a lot of text. It doesn't work with few text. Any pointers on what I can do? I am a novice when it comes to CSS.

 

[NoeAL]

Thanks for the great tool, it really allows for a lot of flexibility with little effort! No more pre-rendered stuff for animations!

I have a feature request (if I may) that would be really useful to me and hopefully to others as well. Rather than using the inactive timer to cycle through memory slots at a constant interval (that's kind of a niche application I'd think), I would like to have a "manual mode" where you can manually fire the lower third (including fade-in animation) by clicking on the particular memory slot. Right now, if you click on the memory slot, it simply changes the content in whatever state it's currently in (active or inactive) but doesn't trigger the animation. In my use case, I want to setup several memory slots, e.g. with song titles, and some active time (e.g. 20s) and then manually show the title at the beginning of each song, which automatically disappears after 20s with the fade-out animation. In order to do that, I have to set the inactive timer to "infinity" (very large number), select the memory slot, start the fade-in using the set switch, wait until it fades out, disable the set with the switch, click on the next memory slot, and lastly turn the set switch on again to start the fade-in with the newly selected memory slot. All this could be done by a single click on the next memory slot. You could add a checkbox named something like "allow manual transitions", so a click on any memory slot (in an enabled set) would fire the corresponding lower third with its fade-in animation regardless of the current state. Alternatively, this behavior could be enabled when the inactive timer is set to zero and the active timer has run out (otherwise the functionality remains as it's now), but this would make it a bit hidden to the user. On that note, a value of zero for the inactive timer should set it to infinity like it does for the active timer (just for consistency, regardless of my feature request).

It would be really great if you could consider this. Thanks!

Hi! Thanks for your words and for helping with your ideas.
The truth is that when I added the hotkeys to the memory slots I thought about that function. I think they have to have an automatic fire feature.
Along with this, I wanted to add the option to turn off the lower third switch at the end of the active time. A one-shot mode.
I think that with these two features you could do what you want.

I'd like to spend more time adding many more features. But because of work, I can't invest as much time as I would like.
This project doesn't stop growing, but I have to pay my bills. ^^

Thanks again for your comments and I hope to add all this soon.

 

[NoeAL]

Hi.
Thanks for this flexible tool.
I am trying use Style 1 to generate a background that can have two rows of text. I want the background to fill the entire width of the screen.
I have managed to get the two rows of text but the background only fills the entire screen width when I have a lot of text. It doesn't work with few text. Any pointers on what I can do? I am a novice when it comes to CSS.

Hi, you can add these lines to the style-source.css file:

#lower-third-1.style-1 > .graph-2 {
margin: -1em -5em;
padding: 1em 400%;
}

#lower-third-1 > div.text-content > div:nth-child(2) {
height: auto;
width: 50%;
}

Note: "width: 50%" means that the text line is going to break at half of the screen width. Choose the value you want.
Another option is not to choose the width and cut the text where you want. Write <br> in the text field where you want to break the line.

Hope it helps you.

 

[Novgorod]

Along with this, I wanted to add the option to turn off the lower third switch at the end of the active time. A one-shot mode.
I think that with these two features you could do what you want.

Sounds good!

I'd like to spend more time adding many more features. But because of work, I can't invest as much time as I would like.
This project doesn't stop growing, but I have to pay my bills. ^^

Don't worry, no need to rush! The tool is already amazing, especially the UI design.

Oh and maybe if there was a way to export/import the settings in the future, it would make it even greater :)... I think the settings are stored in the OBS internal browser cache, but I had no luck copying it over to a different system, especially with multiple instances. Of course it's no big deal to copy all fields manually, so again, no need to rush with updates, just something to consider for a future release.

Thanks again for the work and don't feel obliged to anything! You're doing us a favor, not the other way round :)..

 

[Dankwo]

Hi, you can add these lines to the style-source.css file:

#lower-third-1.style-1 > .graph-2 {
margin: -1em -5em;
padding: 1em 400%;
}

#lower-third-1 > div.text-content > div:nth-child(2) {
height: auto;
width: 50%;
}

Note: "width: 50%" means that the text line is going to break at half of the screen width. Choose the value you want.
Another option is not to choose the width and cut the text where you want. Write <br> in the text field where you want to break the line.

Hope it helps you.

Thanks a alot.

I realise that I should have written Style 2 instead of Style 1. Would the lines above apply to the style 2 also, especially for the width of the background?

 

[NoeAL]

Thanks a alot.

I realise that I should have written Style 2 instead of Style 1. Would the lines above apply to the style 2 also, especially for the width of the background?

In that case, forget the previous and use this:

#lower-third-1.style-2 > div.text-content > div:nth-child(2) div {
height: auto;
width: 100%;
padding: 1em 50% 1em 1em;
box-sizing: border-box;
}

#lower-third-1.style-2 > div.text-content > div:nth-child(2) {
height: auto;
}

Note: The 50% in the padding means you leave half screen free of text. Change it to the value you want.