Resource icon

Free Animated Lower Thirds with Dockable Control Panel v.1.6

Download
Overview Updates (6) Reviews (92) History Discussion
VideoHockey

VideoHockey

New Member
Novgorod said:
Sounds good!



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 :)..
Click to expand...
I as well think that import export would be a good idea for the "problem" I have with
 
VideoHockey

VideoHockey

New Member
VideoHockey said:
I as well think that import export would be a good idea for the "problem" I have with
Click to expand...
I as well think that import export would be a good idea for the "problem" I have with 2 control panels (men's and women's team) is to difficult for me to fix, especially when a new update overwrites all those changes.
If an export/import could become available, I could import before each match the correct settings and button names...
I'm in favor...
 
VideoHockey

VideoHockey

New Member
Novgorod said:
Sounds good!



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 :)..
Click to expand...
I as well think that import export would be a good idea for the "problem" I have with
VideoHockey said:
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..... :-)
Click to expand...
I think it best to leave it as it is.... There are other and better request and you have limited time.
I am grateful for what you've developed over 1.1 to 1.4
 
N

Novgorod

New Member
VideoHockey said:
I as well think that import export would be a good idea for the "problem" I have with 2 control panels (men's and women's team) is to difficult for me to fix, especially when a new update overwrites all those changes.
Click to expand...

Something went wrong with your reply button... ;)

But yeah, that's a problem I've encountered as well and I would say it's a bug in OBS because it stores LocalStorage data for ALL costum browser panels in the same database and doesn't even append protective strings to the variable names. I've reverse engineered the levelDB data structure OBS uses for LocalStorage data and sure enough, there seems to be a provision for a protective prefix for variable names but it's unused. All variable names start with "_file://" and I guess it's supposed to be followed by the path to the custom control panel, but instead it's immediately followed by the actual variable name.

In the case of this Lower Thirds tool there are about 200 variables stored in LocalStorage and it seems like a nightmare to add protective lables to all of them for different instances manually (like "_A", "_B" etc.). Maybe this can be done programmatically in a smarter way by editing the loadData() and saveData() functions. Anyway, I don't consider this a bug in the Lower Thirds tool because it's not meant to be used with multiple instances AND a browser should always store LocalStorage data per-document and not globally. Since OBS misbehaves in that sense, it could cause variable name collisions even for a single instance of Lower Thirds if you have other custom browser panels loaded that happen to use the same variable names as Lower Thirds. For generic variable names such as "theme" that's not so unlikely, so as a precaution it may be advisable to add a protector string to all variable names after all - and put this protector string as a variable at the beginning of the script so we can easily modify it for multiple instances :) :) :)...
 
VideoHockey

VideoHockey

New Member
Novgorod said:
Something went wrong with your reply button... ;)

But yeah, that's a problem I've encountered as well and I would say it's a bug in OBS because it stores LocalStorage data for ALL costum browser panels in the same database and doesn't even append protective strings to the variable names. I've reverse engineered the levelDB data structure OBS uses for LocalStorage data and sure enough, there seems to be a provision for a protective prefix for variable names but it's unused. All variable names start with "_file://" and I guess it's supposed to be followed by the path to the custom control panel, but instead it's immediately followed by the actual variable name.

In the case of this Lower Thirds tool there are about 200 variables stored in LocalStorage and it seems like a nightmare to add protective lables to all of them for different instances manually (like "_A", "_B" etc.). Maybe this can be done programmatically in a smarter way by editing the loadData() and saveData() functions. Anyway, I don't consider this a bug in the Lower Thirds tool because it's not meant to be used with multiple instances AND a browser should always store LocalStorage data per-document and not globally. Since OBS misbehaves in that sense, it could cause variable name collisions even for a single instance of Lower Thirds if you have other custom browser panels loaded that happen to use the same variable names as Lower Thirds. For generic variable names such as "theme" that's not so unlikely, so as a precaution it may be advisable to add a protector string to all variable names after all - and put this protector string as a variable at the beginning of the script so we can easily modify it for multiple instances :) :) :)...
Click to expand...
I'll just wait and see new developments. For now I already am grateful for the changes NoeAl already made at my request....
And yeah, probably pressed reply twice... Sorry
 
D

Dankwo

New Member
NoeAL said:
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.
Click to expand...
Thank you for taking the time to respond. I got it working now.
 
VideoHockey

VideoHockey

New Member
Tomorrow I have a webinar where I use the Lower 3rds. I had to clean up Bank 4 and fill 10 names off speakers. When the webinar is fonished I have to re-enter the 10 names of our womens hockey team.

Is there a way to create a 5th bank myself and fill it with names that are more variabel (like most of your users do, for 1-4 are fairly fixed for me). .... Or as mentioned earlier an export/import function would be devastatingly great :-)
 
N

Novgorod

New Member
I found a way to make multiple instances of Lower Thirds work properly and all input fields are saved for all instances and loaded correctly when OBS restarts. As I mentioned before, that's a bit of an oversight in the way the OBS browser handles LocalStorage data from different locally stored custom browser docks so that same variable names used in different docks will overwrite each other. A quick solution is to add a unique protector string for each dock to its variable names before they are written to LocalStorage. In the case of Lower Thrids, this is relatively simple to do.

Here are the steps to create correctly functioning multiple instances of Lower Thirds (valid for Version 1.4):

1. Copy and rename browser-source.html and control-panel.html (e.g. add _A, _B, _C to the file names).

2. In the copied browser-source.html, search for these 4 lines:
var receiveChannel = 'obs-lower-thirds-preview';
var receiveChannel = 'obs-lower-thirds-channel';
var bcr = new BroadcastChannel('obs-lower-thirds-channel2');
var bcf = new BroadcastChannel('obs-lower-thirds-fonts');
and add a suffix to each channel name, i.e. the string inside the single quotes. For example, 'obs-lower-thirds-preview_A', 'obs-lower-thirds-channel_A' etc. The suffix can be the same for all 4 channel names but must be unique for each copy of the file (e.g. use suffix _B for the next copy etc.).

3. In the copied control-panel.html, search for these 4 lines:
var bc = new BroadcastChannel('obs-lower-thirds-channel');
var bcr = new BroadcastChannel('obs-lower-thirds-channel2');
var bcp = new BroadcastChannel('obs-lower-thirds-preview');
var bcf = new BroadcastChannel('obs-lower-thirds-fonts');
and add a suffix to each channel name, i.e. the string inside the single quotes. For example, 'obs-lower-thirds-preview_A', 'obs-lower-thirds-channel_A' etc. The 4 channel names with suffix must be identical to their counterparts in the corresponding copy of browser-source.html!

4. In the copied control-panel.html, search and replace these strings (all occurences!):
Search string #1: localStorage.getItem(id)
Replace string #1: localStorage.getItem('LowerThirdsA_'+id)
(6 replacements)
Search string #2: localStorage.setItem(id, value)
Replace string #2: localStorage.setItem('LowerThirdsA_'+id, value)
(7 replacements)
The prefix string (here 'LowerThirdsA_') is up to your choice. It must be the same for both replacements within the file but must be unique for each copy of the file (e.g. use 'LowerThirdsB_' for the next copy).

Now you can load the copied and edited html files as custom browser dock and browser source, respectively, and the settings in all loaded copies will be preserved after OBS restarts.

A temporary hack to export/import settings would be to backup/restore the localDB database of the OBS browser. Simply backup the entire folder \AppData\Roaming\obs-studio\plugin_config\obs-browser\Local Storage\leveldb after you made your Lower Thirds settings and closed (!) OBS, and restore the folder contents (while OBS is closed) if you want to restore the settings. Warning: If you use the OBS browser for other tools (browser sources or custom browser docks) which make use of the LocalStorage database, all their settings are contained in that folder as well and will be backuped/restored along with the Lower Thirds settings if you do that.
 
N

Novgorod

New Member
The forum doesn't let me edit my posts, which is a bit annoying. The search/replace pattern in Step 4 covers most of the variables but not all of them - the fonts and the theme are treated differently in the script. Here is the correct way to protect all occurences of LocalStorage access:

4. In the copied control-panel.html, search and replace these strings (all occurences!):
Search string #1: localStorage.getItem(
Replace string #1: localStorage.getItem('LowerThirdsA_'+
(16 replacements)
Search string #2: localStorage.setItem(
Replace string #2: localStorage.setItem('LowerThirdsA_'+
(10 replacements)

Maybe someone with more rights can merge the posts.
 
VideoHockey

VideoHockey

New Member
Novgorod said:
I found a way to make multiple instances of Lower Thirds work properly and all input fields are saved for all instances and loaded correctly when OBS restarts. As I mentioned before, that's a bit of an oversight in the way the OBS browser handles LocalStorage data from different locally stored custom browser docks so that same variable names used in different docks will overwrite each other. A quick solution is to add a unique protector string for each dock to its variable names before they are written to LocalStorage. In the case of Lower Thrids, this is relatively simple to do.

Here are the steps to create correctly functioning multiple instances of Lower Thirds (valid for Version 1.4):

1. Copy and rename browser-source.html and control-panel.html (e.g. add _A, _B, _C to the file names).

2. In the copied browser-source.html, search for these 4 lines:
var receiveChannel = 'obs-lower-thirds-preview';
var receiveChannel = 'obs-lower-thirds-channel';
var bcr = new BroadcastChannel('obs-lower-thirds-channel2');
var bcf = new BroadcastChannel('obs-lower-thirds-fonts');
and add a suffix to each channel name, i.e. the string inside the single quotes. For example, 'obs-lower-thirds-preview_A', 'obs-lower-thirds-channel_A' etc. The suffix can be the same for all 4 channel names but must be unique for each copy of the file (e.g. use suffix _B for the next copy etc.).

3. In the copied control-panel.html, search for these 4 lines:
var bc = new BroadcastChannel('obs-lower-thirds-channel');
var bcr = new BroadcastChannel('obs-lower-thirds-channel2');
var bcp = new BroadcastChannel('obs-lower-thirds-preview');
var bcf = new BroadcastChannel('obs-lower-thirds-fonts');
and add a suffix to each channel name, i.e. the string inside the single quotes. For example, 'obs-lower-thirds-preview_A', 'obs-lower-thirds-channel_A' etc. The 4 channel names with suffix must be identical to their counterparts in the corresponding copy of browser-source.html!

4. In the copied control-panel.html, search and replace these strings (all occurences!):
Search string #1: localStorage.getItem(id)
Replace string #1: localStorage.getItem('LowerThirdsA_'+id)
(6 replacements)
Search string #2: localStorage.setItem(id, value)
Replace string #2: localStorage.setItem('LowerThirdsA_'+id, value)
(7 replacements)
The prefix string (here 'LowerThirdsA_') is up to your choice. It must be the same for both replacements within the file but must be unique for each copy of the file (e.g. use 'LowerThirdsB_' for the next copy).

Now you can load the copied and edited html files as custom browser dock and browser source, respectively, and the settings in all loaded copies will be preserved after OBS restarts.

A temporary hack to export/import settings would be to backup/restore the localDB database of the OBS browser. Simply backup the entire folder \AppData\Roaming\obs-studio\plugin_config\obs-browser\Local Storage\leveldb after you made your Lower Thirds settings and closed (!) OBS, and restore the folder contents (while OBS is closed) if you want to restore the settings. Warning: If you use the OBS browser for other tools (browser sources or custom browser docks) which make use of the LocalStorage database, all their settings are contained in that folder as well and will be backuped/restored along with the Lower Thirds settings if you do that.
Click to expand...
Great thinking, I'll have to look into it...
 
Rcarreri

Rcarreri

New Member
My Animated Lower Thirds with Dockable Control Panel 1.4 this installed in the preview shows but in the scene does not work it crashes windows

H E L P P L E A S E !!!!!!
 

Attachments

  • preview.png
    preview.png
    27.6 KB · Views: 92
  • Live.png
    Live.png
    53.5 KB · Views: 92
  • windows.png
    windows.png
    27 KB · Views: 96
C

commentator

New 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
2020-10-17 (1).png


doesn't matter where I place it. Everywhere it is out of where it should be. Suggestions to solve this?
 
avisin

avisin

New 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

LowerThird_Text_Truncated.jpg
 
You must log in or register to reply here.
Top