noeal-dac / animated-lower-thirds

Animated Lower Thirds with dockable Control Panel - OBS Tool

Animated-Lower-Thirds

Animated Lower Thirds with dockable Control Panel - OBS Tool

Description

With this tool you can use a control panel to add and change your own lower thirds on the fly. Feel free to customize. Basic knowledge of HTML, Javascript and CSS is required. For communication between control panel and browser layer it use BroadcastChannel API.

This project is based on Lower thirds in HTML/CSS, and Animated lower thirds with control panel.

Features

• Include dynamic content to streaming app with browser support (like OBS)
• 4 differents Lower Thirds at same time
• 10 slots for each Lower Third (Same configuration but with different title, description and logo)
• 3 predefined styles
• Highly customizable (colors, fonts, timing, automation, ...)

Installation

1. Download the Zip file, unzip it.
2. See how to install and new features: https://youtu.be/tddMYWya7O0

Requiriments

Unfortunately, OBS doesn't support browser panels on MacOs. It only works on Windows, but can be used on Linux using the snap installation of OBS (More info here)

Usage

See previus features: https://youtu.be/cQ0_1GwpwB0

Support

You can find all videotutorials on this Youtube Channel

Translations

Portugues (Brasil)
Inglês

Contributing

I am a designer and my scripting knowledge is few. I made this tool (Frankenststool) because I needed it and I want to share it. You are welcome to improve it. I am aware that many parts of the code can make any expert cry. I'm really sorry :P

Donations

If you like the extension and you want to support the development - please consider to donate by Paypal. Any donations are greatly appreciated.

License

The Animated Lower Thirds source code is made available under the MIT license.

animated-lower-thirds's Issues

Ability to have crawling (scrolling) text

It would be good to have scrolling texts on either these or new styles...

Lower thirds does not scale to screen DPI (Linux HiDPI)

Describe the bug
Lower thirds does not scale to the screen DPI.

To Reproduce
Steps to reproduce the behavior:

1. In Linux, change the display scale from 100% to a different value, for example, 200%.
2. Start OBS
3. Open Lower Thirds
4. The Lower Thirds UI is not scaled and thus too small

Expected behavior
Lower Thirds scales to the screen DPI.

Actual behavior
Lower Thirds does not scale and thus appears too small.

Screenshots

Desktop (please complete the following information):

• OS: KDE/GNU/Linux
• OBS: OBS 26.1.2-35-gbb6b1e53f-modified (snap)

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.2 LTS
Release:        20.04
Codename:       focal

Some dialogs do not work on Linux

Describe the bug
Some dialogs are not working on Linux. Specifically, I found the following dialogs to not work on Linux:

• The "CHOOSE IMAGE" dialog to choose an image.
• The dialog to change the font (stuck on "Open Sans").

There might be other dialogs that don't work that I'm not aware of.

To Reproduce
Steps to reproduce the behavior regarding "CHOOSE IMAGE" (1):

1. Go to Main settings, click on +, click on show more, click on a logo. The logo view opens (without delete symbol).
2. In the logo view, click on "CHOOSE IMAGE" ⇒ nothing happens.

Expected behavior: a dialog appears that allows choosing one of the four logos.

Steps to reproduce the behavior regarding "CHOOSE IMAGE" (2):

1. Go to any of the four Lower Thirds. Click on the Logo. The logo view opens (with delete symbol).
2. In the logo view, click on "CHOOSE IMAGE" ⇒ nothing happens.

Expected behavior: a dialog appears that allows choosing one of the four logos.

Steps to reproduce the behavior regarding fonts:

1. Go to any of the four Lower Thids. Click on the + symbol to expand the Lower Third settings.
2. On the Font, where it shows "Open Sans", click anywhere ⇒ nothing happens.

Expected behavior: a dropdown appears that allows choosing one of the installed fonts.

Expected behavior
(See section To Reproduce)

Screenshots
Wouldn't be helpful, but I can record a video if that helps.

Desktop (please complete the following information):

• OS: Ubuntu 20.04.2 LTS w/ KDE Plasma desktop (Kubuntu)
• OBS version: 26.1.2-35-gbb6b1e53f-modified (latest snap at this time)
• Version of Animated-Lower-Thirds: v.1.6 (downloaded from https://obsproject.com/forum/resources/animated-lower-thirds-with-dockable-control-panel.1057/)

Additional context
Add any other context about the problem here.

"clear text fields and set logo to default" does not work

Describe the bug
All works as expected, but

• i can add title and subtitles to the memory slots of each of the 4 instances

• But once added, they cannot be changed or deleted.

• when button "clear text fields"pressed, the memory slots get greyed out and title and subtitle can be changed,

• but as soon as a memory slot number is clicked, it all (all slots) get restored to the first entered name. so all slots are filled with the same name and subtitle

• i have made sure all files have read/write access, further i have no idea where the entered fields get stored

Desktop (please complete the following information):

• OS: win
• OBS version -= latest = 26.1.1
• Version [e.g. 22] = latest

Additional context
Add any other context about the problem here.

more styles

Can we get more styles or make our own style?

Feature request: Fade instead of animate

Currently the 3 lower-thirds styles do very nice motion animations coming in and out.

I would like an option to instead have a simple fade-in and fade-out (with configurable fade times). Maybe it could be a slider/checkbox in the configuration.

FEATURE REQUEST: Embed in any streaming provider

Is your feature request related to a problem? Please describe.
I'm trying to add the lower thirds in my streaming using another streaming software (lightstream), on lightstream they have an option to put a website, or anything hosted online, as a content.
I uploaded the files of lower thirds to a bucket on GCP, and configured the permissions to the browser file and controls, this works at the some point, before I put the streaming "live" the lower thirds work very well, but after that, did not work and not show on the livestream.

Describe the solution you'd like
I think this is a configuration of javascript, I don't know very well where is this configuration, I think is something like "embed".

Describe alternatives you've considered
I really don't know :(

Additional context

Cannot activate lower thirds after OBS update 27.2

Red border when activating lower thirds after OBS 27.2 update. Worked around by reverting to OBS version 27.1.3

OS Name Microsoft Windows 10 Pro
Version 10.0.19043 Build 19043

• OBS version 27.2
• Version 1.6

BUG: The logo selector didn´t appear in styles 1 and 3

Describe the bug
If you first select style number 2 (No logo) and then select any of the others (1 or 3) the logo selector does not appear.

To Reproduce
Steps to reproduce the behavior:

1. Open the panel
2. Go to the style selector
3. In the style 2 the logo selector dissapears
4. When you want to change to the style 1 or 3 the logo selector didn´t appear

Expected behavior
Activate the logo selector

Screenshots



And also in style 1

Desktop (please complete the following information):

• OS: Windows 11
• OBS version: 29.0.2
• Version: Lower Thirds 1.6

Additional context
I've fixed it temporarily by exporting the plugin settings and clearing "alt-3-logo: false" and then re-importing the settings.

Add obs_source_send_key_click as alternative to .js status file

Is your feature request related to a problem? Please describe.
A user might face permission error when writing and/or reading .js file

Describe the solution you'd like
Use obs_source_send_key_click function provide via API

Describe alternatives you've considered
Provide two .lua scripts, if one fails use the other.

Additional context
Key event must be passed to browser source, there is not yet API to send it to dock.

Not adding a logo

When i am choosing logo from another dir, it doesn't display correctly
Attached an youtube video
https://youtu.be/CE3Nqo0x7EY

Feature Request : add default LT, slot on starting a scene ?

is it possible to add which LT and slot to load on startup of each scene ?

Unable to insert logo

Great work on this plug in, very simple to get going.
I cant seem to insert a logo - have tried PNG/TIFF/JPEG all with the same result.
Each time I select one, it shows the file missing icon - i'm selecting a file from a local folder (not network)
Have I configured something incorrectly, do they need to be copied to a specific location?

Instruct through network

Is your feature request related to a problem? Please describe.
Unless I am mistaken, it is not possible to control lower thirds through networking, control panel and viewing page have to be in the same CEF environment.

Describe the solution you'd like
Reaching the control panel on an IP address via http and source browser also uses the viewer on the same principle, hosted like nodecg or nginx-php solution.

Is it possible?
Thank you.

Configurable Space between Text and the Right of the LT

Is your feature request related to a problem? Please describe.
Nop. Only a New Feature.

Describe the solution you'd like
Hello, I would like to be able to modify the width of LT to make a Banner that occupies 100% of the screen.
Like this.

At the moment I put a div in browser-source.html and styled it with width in px to the exact size that I will like.

I like to modify the width of LT or be able to put this div and be able to modify in the panel control.

Describe alternatives you've considered
The First idea i had is put a div into the text, and put style with width in px to exactly size i will like it. But dont like it.

Great Job. Thank for this solution.

FEATURE REQUEST: Variables like Time & Data

It would be nice to be able to insert the TIME or DATE into a Lower third. Maybe set this as Right justify from the Right side of the screen.

A way to request variables might be something like:
{@Date} - {@time}

There may be other variables like System Name, IP Address, etc so this feature might be best as a generic implementation for future improvement.

Another thought hit me as well, some tools like with StreamDeck will drop information into a File, such as a Song Title. So another variable might be a filename:
{@file:D:\mystuff\song.txt}

Great OBS tool!

Alignment Issue on Design 2

In Design 2, with the same settings, the first and second line of LT1 is not at the same height as on the other LTs. For demonstration I put it both on left side. But it is the same on Left/Right or any other orientation.
LT2, LT3 and LT4 are perfectly aligned.
Design 1 and 3 are also fine.

Version 1.6 (latest)

{"alt-2-style-color-2":"rgba(59,59,59,0)","alt-1-inverse-ratio":"8","alt-3-border-thickness":"false","lower-thirds-switch2":"true","alt-4-inverse-ratio":"8","alt-4-autoload":"false","alt-1-style":"2","alt-1-logo-default":"../logos/logo_1.png","alt-4-style-color-1":"rgba(213,65,65,0)","alt-2-align-left":"true","alt-1-preview":"false","alt-4-margin-h":"22","alt-1-style-color-1":"#E76000","alt-1-logo-2":"","alt-1-margin-v":"1","alt-3-margin-v":"1","alt-1-info-weight":"false","alt-3-style-color-1":"rgba(213,65,65,0)","set-tooltips":"false","alt-2-logo-preview":"../logos/logo_2.png","alt-1-shadow-amount":"5","alt-1-border-color":"false","alt-4-name-color":"#F2F2F2","alt-3-logo":"false","alt-2-align-right":"false","global-animation-time":"","alt-1-info-transform":"false","alt-2-logo":"false","alt-1-margin-h":"22","alt-1-lock-active":"true","alt-1-name-1":"","alt-1-active-time":"","alt-3-lock-active":"true","alt-1-logo-1":"","alt-1-inactive-time":"","alt-4-logo-preview":"../logos/logo_4.png","alt-4-style":"2","set-preview":"false","alt-1-name":"John Doe","alt-2-autotrigger":"false","alt-3-margin-h":"22","alt-1-style-color-3":"#E76000","alt-3-info":"","alt-3-name":"","alt-2-line-spacing":"1","alt-1-align-right":"false","alt-1-font":"'Open Sans', sans-serif","global-active-time":"15","alt-1-name-weight":"true","alt-2-info-color":"#F2F2F2","alt-1-logo-preview":"../logos/logo_1.png","set-slot-numbers":"false","alt-3-border-color":"false","lower-thirds-masterswitch":"true","alt-4-line-spacing":"1","alt-2-style-color-3":"#E76000","alt-3-info-color":"#F2F2F2","alt-3-logo-preview":"../logos/logo_1.png","lower-thirds-switch1":"true","alt-2-inverse-ratio":"8","alt-1-corners":"0","alt-1-logo":"false","alt-2-name-color":"#14CC1F","alt-1-border-thickness":"false","alt-2-shadows":"false","alt-1-logo-size":"-2","global-lock-active":"false","alt-4-info":"","alt-1-info-2":"","alt-1-shadows":"false","alt-1-name-2":"","alt-4-logo-9":"","alt-2-style-color-1":"#6300E7","alt-2-logo-size":"-2","alt-3-name-color":"#F2F2F2","alt-1-info":"Professional Services Consultant","alt-1-line-spacing":"1","alt-3-line-spacing":"1","alt-4-lock-active":"true","alt-2-info":"Professional Services Consultant","alt-2-name":"John Doe","alt-1-style-color-2":"rgba(59,59,59,0)","alt-4-margin-v":"1","alt-4-name":"","alt-3-inverse-ratio":"8","alt-1-background":"true","alt-1-name-transform":"true","alt-1-info-1":"","alt-4-logo-default":"../logos/logo_4.png","lower-thirds-switch3":"false","alt-1-oneshot":"true","alt-2-lock-active":"true","alt-3-logo-default":"../logos/logo_3.png","alt-3-style":"2","alt-2-logo-default":"../logos/logo_2.png","lower-thirds-switch4":"false","theme":"dark","alt-4-info-9":"","alt-2-font":"'Open Sans', sans-serif","alt-1-align-center":"false","alt-1-animation-time":"","alt-2-background":"true","alt-4-logo":"false","alt-2-name-transform":"true","sorted":"alt[]=1&alt[]=2&alt[]=3&alt[]=4","alt-4-info-color":"#F2F2F2","set-switch-position":"false","alt-1-align-left":"true","alt-2-margin-h":"22","alt-4-style-color-3":"rgba(213,65,65,0)","alt-3-style-color-3":"rgba(213,65,65,0)","alt-2-align-center":"false","alt-2-corners":"0","alt-1-autotrigger":"false","alt-4-name-9":"","alt-2-style":"2","alt-1-size":"24","alt-1-info-color":"#F2F2F2","alt-2-margin-v":"1"}

BUG : OBS crashes on exiting when 1.6 is active and running a Companion 2.2.x beta.

Describe the bug
When exiting OBS 27.1.3 with the LT 1.6 dockable browser window active and running a Companion 2.2.x beta, the LT 1.6 browser window will clear and either show all black or white. OBS will then crash.

If you remove the LT1.6 browser pane, wait for 30 seconds (for the process to complete) then exit, OBS won't crash.

To Reproduce
Have OBS 27.1.3 / LT 1.6 / Websocket 4.9.1 / Companion Beta (companion-2.2.0-86711173-3681-win64.exe) installed

1. Start OBS
2. Wait a minute
3. Close OBS
4. OBS will crash either with an obs64.exe error or an OBS has crashed! error
   
   

Desktop (please complete the following information):

• OS: Windows 10 64 bit 21H1
• OBS 27.1.3
• Websocket 4.9.1
• Companion 2.2.x beta

Feature request: interactive scoreboard overlay

Hello @noeal-dac!

I was searching for a dynamic scoreboard solution and found this one: https://obsproject.com/forum/resources/versus-c-obs-scoreboard.1339/

With this solution, I'll have to run a separated app in order to change the scoreboard information. This got me thinking: hey, imagine if there's a way to use a scoreboard just like this amazing lower thirds system? That would be perfect :)

Have you thought of that before? Do you think this would be a nice "side-project"?

Thanks a lot, have a great Sunday!

vMix Social alternative in OBS

Is your feature request related to a problem? Please describe.
Not at all :)

Describe the solution you'd like
Hello sir! First of all, thanks for this great solution, you had delivered an incredible addon for the OBS community. I was wondering if this could be a nice foundation for an important addon only found on expensive broadcast solutions:
vMix Social. The way you've managed to create a command panel and how elegant it is, your solution has the best path of doing it, in my opinion. I know that this would a lot of work, specially creating a safe way of users to connect to their social accounts and making it all possible just using HTML code.

Describe alternatives you've considered
vMix Social? haha

Additional context
https://www.vmix.com/products/vmix-social.aspx

I know this is asking for too much maybe, but there's nothing else available at the moment. Thanks again for your great work here, it is top notch. just brilliant :)