Resource icon

Free Animated Lower Thirds with Dockable Control Panel v.1.6

keaglin

New Member
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

New Member
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

New Member
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
OBS separate CTRL panel.jpg
.... which off course we don't want in the first place.

Where am i going wrong?
 

NoeAL

Member
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. ^^
 

zbhsmith

New Member
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.
 

Attachments

  • Capture.PNG
    Capture.PNG
    18.8 KB · Views: 61

NoeAL

Member
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;}
 

VideoHockey

New Member
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..... :-)
 

Novgorod

New Member
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

New Member
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.
 

Attachments

  • Screenshot 2020-10-11 010409.png
    Screenshot 2020-10-11 010409.png
    32.9 KB · Views: 74
  • Screenshot 2020-10-11 010553.png
    Screenshot 2020-10-11 010553.png
    14.2 KB · Views: 68

NoeAL

Member
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

Member
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

New Member
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

New Member
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

Member
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.
 
Top