Free Animated Lower Thirds with Dockable Control Panel v.1.6

[RehanSaeed]

Unfortunately, there can only be four. Would it be totally different designs or just color changes?

Mostly, it's different colours.

 

[Mairginter]

Hi! The idea is that you can manage everything from the Control Panel, that's why there is only one Browser Source that is in charge of displaying the Lower Thirds sent by the Control Panel.

The good thing is that the next version (v1.7) will have a feature to automatically show the Lower Thirds we want according to the scene we are in.

I hope this helps you and thanks for your patience.

Thank you for your reply!!
Are the settings of the scenes planned for each slot?
If so, then my problem would be solved, because I can then set a maximum of 4 lower thirds with different positions in a scene :-)

Do you already have a rough idea when the v1.7 will be released?
Thank you for your help!!!!

 

[Bairespm]

hello, something I suggest to add, the possibility of choosing two slots and placing them in another part of the screen. example: host has a lowerthirds

guest has a lowerthirds

and when I go to the scene that they are together I need to enable the two LTs and that they are located in another sector of the screen next to the double overlay

sorry for my english i only speak spanish

 

[DamienF]

For those, like me, who are trying to make it work on a Mac, i found this tuto very useful : https://www.youtube.com/watch?v=mjSWHPB7Iiw

Thanks again for the amazing job done on this soft and plugin !!

 

[maccesch]

Hey, I'm a Web dev and I love this plugin. The only thing I wished for was a responsive panel that I could make a bit wider. So I did the changes.

In the original width it looks pretty much the same. I changed the labels "Clr X" to "C X" because when using it on my Mac the number would get wrapped to the next line:

So here are the layouts at original width and two wider versions. The controls will automatically adjust to the width of the panel.

 

[HamMan 73]

I am seeing something very strange. Every once in a while my icon and slot text in a lower third box will disappear, as if they have never been configured. However, if I reboot the PC all comes back to the way I configured it, with my icon and slot text. Any thoughts or ideas as to what could be causing this??

 

[Bacchin]

Is there any parameter for the plugin to accept images? I'm trying various sizes and types (jpeg, png) but it doesn't appear in preview and on screen. Look how it's appearing - it's like you don't recognize the image, even though it allows you to select it.

 

[AdmiralFunghie]

Is there any parameter for the plugin to accept images? I'm trying various sizes and types (jpeg, png) but it doesn't appear in preview and on screen. Look how it's appearing - it's like you don't recognize the image, even though it allows you to select it.


View attachment 73145

You have to put your logos/images in the folder: ...\Animated-Lower-Thirds\logos

 

[AdmiralFunghie]

Here is an example of how to use a single button in Touch Portal to toggle between two lower thirds. (Set Key Commands as mentioned in Low Level key Press).

I use this to show if an item is enabled or disabled. So my button is set to "SET ENABLE" to show me that if I press it, it will show the ENABLED lower third. etc.

 

[OBS_FAN]

Hi thanks for your work that's very helpful. I'm having some difficulties: 1st mine doesn't look like you have on the YouTube video the version that I downloaded was v1.6 my obs version is 27.0.1(64bit)
2nd can you tell me what size should the logo be so I can see it on obs because when I put my logo it didn't show on obs. Thanks...

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.

 

[AdmiralFunghie]

In answer to question 2: As far as I can tell, the logo can be any size but as mentioned in the post just above, even though you get a location dialog for the logo, it must be copied to here in order for it to work:

...\Animated-Lower-Thirds\logos

 

[ryangray1022]

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.

I am having trouble accomplishing this, I made the changes though it seems to have no effect?

 

[ryangray1022]

I am having trouble accomplishing this, I made the changes though it seems to have no effect?

attaching the current .css file (changed to .txt just for the upload

 

[cswroe]

Regarding adding the date: I was able to add the date this using a small piece of javascript and a span element. You can add the time as well, but it will only update when you do a transition, and the date is really all I needed.
I used the code from here: https://www.arclab.com/en/kb/htmlcss/display-date-time-javascript-php-ssi.html and added it to the script at the bottom of the browser-source.html within the script tags.

I then went up to the lower third that I was using and placed a div and span where I wanted the date to appear. The drawback to this is that it will appear on all the memory slots for that lower third section, but it works for my application.

The result:

The developer has very clean and well-organized code, so this was easy to implement. I hope that this helps in possibly adding this in a future update.

 

[AdmiralFunghie]

The developer has very clean and well-organized code, so this was easy to implement. I hope that this helps in possibly adding this in a future update.

Yes you are right and nice work there. It might be handy to include the actual text so that folks can copy and paste it? Either way, great stuff.

 

[Luis Antonio Galindez]

This tool has been very helpful and solves a lot of little issues I've been having. I was trying to add a small scoreboard so I could double it as a quick overlay with hotkeys but I keep adding a leg to a shoulder and bolt to elbow in my Frankenstein attempts. Maybe a toggle showing the scores between left or right. Any help would be appreciated, w3schools has been a good helping tool though.

Also will try something from an earlier post but hoping someone can code it better than whatever I come up with lol

 

[Luis Antonio Galindez]

For my application this will work but I just can't seem to change the code to increase/decrease with the text box but if I change it to numbers its undefined. I feel like its something super simple but I am just not seeing it.

                        </div>
                        <div class="first-edit-container">
                            <div class="logo-container" onclick="openLogoPopup('alt-1-logo-preview', 'alt-1-logo-default')">
                                <img id="alt-1-logo-preview" class="logo-storable alt-logo-preview" >
                            </div>
                            <div class="textfields-container">
                                <input class="storable" type="text" id="alt-1-name" placeholder="Name" tabindex="4">
                                <div id="alt-1-name-appearance">
                                    <label class="config-btn small">
                                        <input class="checkbox-storable" type="checkbox" id="alt-1-name-transform" checked>
                                        <div class="icon-btn icon small icon-uppercase"></div>
                                    </label>
                                    <label class="config-btn small">
                                        <input class="checkbox-storable" type="checkbox" id="alt-1-name-weight" checked>
                                        <div class="icon-btn icon small icon-bold"></div>
                                    </label>
                                    <input class="storable" id="alt-1-name-color" data-jscolor="{width:100, padding:5, borderRadius:3, borderWidth:0, controlBorderWidth:0, backgroundColor:'#1f1e1f', position:'right', shadow:true, previewSize:60}" value="">
                                </div>
                                <input type="text" id="alt-1-info" placeholder="Info" tabindex="5" min="0" max="10" value="1">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="down"></button>
                                            <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="up"></button>

 

[jhancock]

I am setting up my lower thirds and when I went to add the script i got this message.
[lower-thirds_hotkeys.lua] Error calling script_load: ...mated-Lower-Thirds/lower thirds/lower-thirds_hotkeys.lua:436: C:/Program Files/obs-studio/Animated-Lower-Thirds/lower thirds/../common/js/hotkeys.js: Permission denied
Also my images I'm adding do not show up when selected

 

[K-Dog]

I can't load an image to replace the default. I am using Linux Mint.

1) I click on the 'Your Logo Here' image in one of the four docked dialogs.
2) A 'choose image' dialog box opens with 'CHOOSE IMAGE on the top.
3) I click on the 'Chose Image' Bar and nothing happens. So I click on the little folder icon next to the bar and a smaller dialog box appears. All I can do is Cancel it or hit Ok.

Which since I can't do anything else are the same kind of nothing.

To make things simple for a test I opened a default image and colored the white overlay part red using Linux gimp. Then I saved it as logo_5.png in the same folder. If I could navigate to it and select it I think it would work. But I can't select it. I made a screenshot of where the dialog gets stuck.

 

[jandb1980]

Hi all, is it possible to make the yellow line ( | ) seen in the graphic oblique, so like this -> / ?

I suspect that you have to adjust it somewhere in the CSS, however I find nothing there. It is the first style that you can select.
Thanks a lot for your help.