Resource icon

Free Animated Lower Thirds with Dockable Control Panel v.1.6

seraslibre

New Member
New to this so apologies if this has been asked, but I couldn't find it anywhere. Is there a way to clear or overwrite memory slots? Excellent plug-in!
 

NoeAL

Member
NoeAL,

New fan here :-) I also must say that I LOVE how engaged you are in the discussion here and everything.

One request (Sorry if this has been discussed earlier)...

REQUEST: Would it be possible to "Wrap" the Text or to Autoscale the Text to Fit?
What I am trying to do (and I think this would be a common scenario)...
Is to show the "Topic or Question" being discussed during a livestream.

▶ See Video for More: https://youtu.be/Ha7k7UPhTbg

View attachment 62194
Hi Avi! First of all, thank you for your wonderful review and your generous contribution to the project.
On the other hand, more and more people use the tool in a similar way to yours. Surely, I'll end up adding this function as a style or something.
For now, I hope that this temporary solution will help you (it can also be applied in the next updates):

1. In the browser-source.html file, look for line 468: alt_3_info_size = received_data [54]; Replace it with the following:

if (received_data[52].length > 70 && received_data[52].length < 140) {
alt_3_info_size = received_data[54];
alt_3_info_size = alt_3_info_size - ((received_data[52].length * 0.030 - alt_3_info_size) / 2.10);
} else if (received_data[52].length > 139) {
alt_3_info_size = 1;
} else {
alt_3_info_size = received_data[54];
}


2. Then in style-source.css file, add this at the end:

.left > .logo {min-width: fit-content; align-self: start;}
.style-1 > .graph-1 {align-self: start; min-width: 0.3em;}
#lower-third-3 > div.text-content > div:nth-child(2) div {line-height: 1.25em;}
#lower-third-3 > div.text-content > div:nth-child(2) {height: auto;}
#lower-third-3.left {top: var(--alt-3-margin-v); bottom: unset;}
#lower-third-3.style-1.left > .text-content {margin-right: 1em;}


What it will do is reduce the font so that it fits the text on one line. But if the text becomes too small it begins to divide the text into lines.
These changes affect only Lower Third 3. And they work correctly with the settings you use in the video. Any change in font or size may slightly affect the result.

Note: If you don't want the text to adapt the size, just skip Step 1.

Hope it helps you and anyone who needs this feature.
 

NoeAL

Member
Hi Avi! First of all, thank you for your wonderful review and your generous contribution to the project.
On the other hand, more and more people use the tool in a similar way to yours. Surely, I'll end up adding this function as a style or something.
For now, I hope that this temporary solution will help you (it can also be applied in the next updates):

1. In the browser-source.html file, look for line 468: alt_3_info_size = received_data [54]; Replace it with the following:

if (received_data[52].length > 70 && received_data[52].length < 140) {
alt_3_info_size = received_data[54];
alt_3_info_size = alt_3_info_size - ((received_data[52].length * 0.030 - alt_3_info_size) / 2.10);
} else if (received_data[52].length > 139) {
alt_3_info_size = 1;
} else {
alt_3_info_size = received_data[54];
}


2. Then in style-source.css file, add this at the end:

.left > .logo {min-width: fit-content; align-self: start;}
.style-1 > .graph-1 {align-self: start; min-width: 0.3em;}
#lower-third-3 > div.text-content > div:nth-child(2) div {line-height: 1.25em;}
#lower-third-3 > div.text-content > div:nth-child(2) {height: auto;}
#lower-third-3.left {top: var(--alt-3-margin-v); bottom: unset;}
#lower-third-3.style-1.left > .text-content {margin-right: 1em;}


What it will do is reduce the font so that it fits the text on one line. But if the text becomes too small it begins to divide the text into lines.
These changes affect only Lower Third 3. And they work correctly with the settings you use in the video. Any change in font or size may slightly affect the result.

Note: If you don't want the text to adapt the size, just skip Step 1.

Hope it helps you and anyone who needs this feature.
Note: For the lines of the text to grow down, the vertical position is now from the top. You will have to move the entire Lower Third to the height you want.
 

NoeAL

Member
Hello, I'm new to OBS and found your nice plugin.
I have a small problem. After docking it it isn't correct docked and over my menu
View attachment 62147

doesn't matter where I place it. Everywhere it is out of where it should be. Suggestions to solve this?
Hi! It looks like an OBS problem.
Try with this: Go to OBS settings > Advanced > Sources. Check or uncheck "Enable Browser Source Hardware Acceleration" and try it again.
Hope it helps.
 

tomnasc

New Member
Why doesn't it work at prism live studio?
I opened the control panel in chrome and added the browser to the fonts, but it doesn't display.
Do you have an explanation?
 

NoeAL

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

Logos and Backups!

Hi everybody! First of all, I would like to thank those of you who have contributed to the project with your donation. Your generosity is a clear sign that I am on the right way.

Remember that you can support the project by making a donation via PayPal. I'll be very grateful.

On the other hand, with this update, I hope to solve many of the problems with data management. And that you can use the same tool in different scenarios.

Video...

Read the rest of this update entry...
 

NoeAL

Member
Is there a possibility to add a fifth lower third?
Everything has its price! XD
Now seriously. Adding one Lower Third triggers a lot of issues. Countless new variables, more hotkeys, multiply the lines in the CSS. It is not impossible, but it's a lot of effort.
I hope in the future to be able to give you a solution. ^^
 

NoeAL

Member
Why doesn't it work at prism live studio?
I opened the control panel in chrome and added the browser to the fonts, but it doesn't display.
Do you have an explanation?
I don't use Prism Live Studio, but in the hypothetical case where it could work, the Control Panel and the Source should be within the same program. Your Control Panel is in Chrome and the Source is inside Prism Live Studio. They cannot communicate.
 

andrescastaned

New Member
Everything has its price! XD
Now seriously. Adding one Lower Third triggers a lot of issues. Countless new variables, more hotkeys, multiply the lines in the CSS. It is not impossible, but it's a lot of effort.
I hope in the future to be able to give you a solution. ^^
My friend! you are an absolute Master! Thank you for this great update!
 

commentator

New Member
Thanks for this nice Logo addition.
The first place is not remembering its logo, after clicking on 2 showing it and clicking on 1 it only shows the text and logo is gone
 

NoeAL

Member
Thanks for this nice Logo addition.
The first place is not remembering its logo, after clicking on 2 showing it and clicking on 1 it only shows the text and logo is gone
Hi! Make sure to copy the logo file into the Logos folder. Also, make sure that you are storing in the memory slot after making any changes.
 

Mr. Proxy

New Member
Great tool, thank you very much, NoeAL!
It runs perfectly when I use it with the control deck.
Next level would be to control it with my Stream Deck. But the Hotkeys are not working !
I fumbled around quite a while now but couldn't get rid of this error:

[lower-thirds_hotkeys.lua] Failed to call hotkey_pressed for hotkey_pressed: ...ugins/Lower-Thirds/lower thirds/lower-thirds_hotkeys.lua:436: C:/Program Files/obs-studio/data/obs-plugins/Lower-Thirds/common/js/hotkeys.js: Permission denied

I thought it is a admin thing, but also moving the file to a public folder doesn't work.
Did someone experience sth similar? Any idea?
Thanks in advance!
Mr. Proxy
 
Top