Lower-Thirds Banner Generator

OBS uses the Chromium Embedded Framework (CEF), so it is more like Chrome than Firefox.

@Paul2, @Namna I just downloaded Firefox on my windows system to test and it works perfectly. I cannot reproduce any of the problems on my home PC with Chrome or Firefox or Microsoft Edge.

I have changed the app to load the icons from another source (fontawesome.com itself) that has the crossorigin=“anonymous” attribute. Again this works for me, but I would appreciate it if you would try it out with the following icon:

<i class="fas fa-chart-pie"></i>

To check that you are using the latest version of the app the text " XXX" appears at the end of the Upper Text input box.

Input for your <b>upper</b> line XXX

Thanks and please let me know if it works or not.

@Elusien

I can see the XXX at the end of the text so your changes have loaded.

As for the “fa-chart-pie”, it’s just blank.

I also tried a few more and they just show a square.

With Chrome

With Firefox

Note: On Firefox, despite having reloaded the page and emptied the cache several times, the XXX does not appear.

@Namna, @Paul2, OK, Thanks again to both of you for trying.

I would like you to try 1 more possibility. I have put a new version of the App on the website. It now has a header at the top that says " Lower-Third App (version 2)", to make it easier to recognise new versions.

I have download the fontawesome icons style sheet to my website and am using that copy in the app. This should definitely work, as there is no question of “cross-origin” doing it this way.

However, the HTML file that is produced and that you would run in your browser will have to use the one from frontawesome itself. This is the unknown.

This combination definitely works for me on Windows 10 using Chrome, Edge and Firefox, but then again, so did all the others. Could you please try it using the pie-chart icon i.e.

<i class="fas fa-chart-pie"></i>

Hopefully this is the fix needed, as I am at a loss as to what to do otherwise.

Here is a screenshot of Firefox working fine on my system:

The code html copied works in my browser

But not on your site

Also the colors are different?

Nope, still does the same, just an empty block.
This is only on your app, once I download the HTML code, all good.

Screenshot below, I did use:
Screen Shot 2021-02-12 at 2.45.51 PM

Chrome on MacOS.

It’s fine and very usable for me, not sure about the others.

@Namna, @Paul2, I am completely “stumped”, “flumoxed”, “banboozled”. I have no idea what is going on. However, I have 1 last option: The fontawesome characters are being inserted in the website (and in the resulting HTML file) as what is known as “Unicode Supplementary Private Use” characters. There is another way to include the characters and that is as SVG images.

I have modified the website app to use SVGs, but not the resulting HTML file.

This is my last idea of how to get the app working for everyone, not just me. Please would you try one last time with this version 3 with the pie-chart icon?

<i class="fas fa-chart-pie"></i>

Works perfectly in your app and on the downloaded HTML.
Well done.

Yippee!!!

I hate it when I can’t figure out a problem, but a workaround like this is almost as good.

I’ve got some good ideas on lower-third banners that I’m going to experiment with - watch this space.

1 Like

Fantastic, looking forward to it.
Another thing that could be useful/popular, is animated css graphs from a given data set or manual entry.

Hint, Hint. :wink:

How about something like the examples shown here:

Yep, something like that but using css animation.
That d3.js lib has a lot of possibilities but they are static, at least the ones I checked.

You can do interactivity with d3.js, Initially I looked at it for doing the SVG animations I was working on a couple of weeks ago. Have a look towards the bottom of this webpage:

I might have a go at some of these myself.

Hi guys, sorry to come into this late - as you may imagine it’s right up my street! Been busy again with more music projects.

This is great. Will give it a test drive and I have a use for it in my next music video - so THANKS again, Sir @elusien :rofl:, your expertise is more than awesome!

Je viens de rentrer et d’essayer la version V3

@Namna, @Paul2, Thank you both so much for helping me sort out the app.

You’re very welcome and thank you for creating this and other great apps. :+1:

I’ve been working on banner #2. This is where I am currently at:

I now need to create the font-end app to make it easy to create the HTML - watch this space.

2 Likes

Lovely!!