search

ImaginarySense / Imaginary-Teleprompter

Easy to use, free software, teleprompter app.
http://imaginary.tech/teleprompter
GNU General Public License v3.0
265 stars 52 forks source link

Ability to change the background image #44

Closed leogear closed 2 years ago

leogear commented 4 years ago

It would be nice if we can change the background image. I know this is a minority opinion but I sometime use this software at some presentation where people having hearing issues can read. And I'd like to change it to some nicer background to look at, and more suitable with the presentation. Is there anyway to do that? Thanks

Cuperino commented 4 years ago

We thought of adding this feature long ago and never got around to... It seems like a great addition when you put it into perspective. I'll ask the author of the Custom Styles functionality to add this feature to version the version 3 rewrite.

In the meantime, the simplest way to add backgrounds, images or videos to the current version of Imaginary Teleprompter is by hard-coding said media into the software. This is actually very easy to do if you have some experience with HTML and CSS.

  1. Follow the instructions at the following repository to build Imaginary Teleprompter: https://github.com/ImaginarySense/Imaginary-Teleprompter-Electron *You will need to have an SSH key associated to your GitHub account for the git clone --recursive command to work. Otherwise you'll have to manually clone this repository and place its contents inside the app folder of Imaginary Teleprompter Electron. Here are instructions for creating and associating SSH keys: https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent **You do not need to create a full build if you will use the same computer for prompting. After step 5 you can simply run npm start to launch your development build.
  2. Once your build is working, open app/css/teleprompter.css in your favorite text editor, locate the #promptcontainer selector (currently line 117) and add your desired background attributes within the brackets. The following is an example of working code. Change the URL to a local or remote path that points to your image: 
    #promptcontainer {
overflow: hidden;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
background-image: url("https://i.stack.imgur.com/XcZ1s.png");
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
  3. Launch Imaginary Teleprompter by running npm start from either repository's folder location. Click on Prompt It! to see your changes. You don't need to restart the software every time to see the changes, you can just close the prompter and click on Prompt It again.

Hard-coding a video background is a more difficult. You could adapt the following tutorial for this purpose: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

To add a video background you would need to modify the following files:

Cuperino commented 4 years ago

Feel free to write back if you have any questions. This issue will remain open until the feature gets added to v3, but that will take some time I cannot estimate.

leogear commented 4 years ago

Feel free to write back if you have any questions. This issue will remain open until the feature gets added to v3, but that will take some time I cannot estimate.

Thank you. I was able to build myself a version with hard-coding background. That all I need for now. Thanks again 👍

Cuperino commented 4 years ago

Excellent! I'll leave this issue open until we add a way to setup backgrounds in 3.x.

Cuperino commented 2 years ago

Dear @leogear,

A few months after my last reply, I started working on a new teleprompter app, written from scratch to bypass all of Imaginary Teleprompter's technical limitations. The new app is called QPrompt and I recently released version 1.0 of it. qprompt.app

With regards to the future of Imaginary Teleprompter, I'm expecting a beta update soon, with some new features. but these won't be on par with QPrompt's, as some of QPrompt's features are impossible to implement here. Imaginary Teleprompter will receive one final mayor release to incorporate community contributions, and bring support for new systems, such as native Wayland support on Linux and arm64 support on M1 Macs. The main goal with this release is to ease user transition from Imaginary Teleprompter over to QPrompt.

QPrompt is open source teleprompter software for all video creators. Built with ease of use, fast performance, control accuracy, and cross-platform support in mind. QPrompt works with studio teleprompters and tablet teleprompters, cellphones, and webcams. It is also designed to be used in video conferences.

QPrompt is a native Linux application, written in C++ using the Qt and Kirigami frameworks, meaning it runs on all mayor systems, and it performs significantly better than Imaginary Teleprompter.

Packages are currently available for:

The Android version is not yet ready for production use. Flatpak support is on its way, and should arrive sometime soon.

With regards to the feature requested on this thread...

QPrompt offers the ability to set a custom background image, a custom color tint, and to make the background transparent.

To make better use of my time, I will not be implementing the ability to set a custom background image on Imaginary Teleprompter. But if anyone wishes to develop it, I will gladly incorporate it.

Please report any issues or requests that you have with QPrompt by going to feedback.qprompt.app, it'll help make this a smooth transition for all users. Hope that you enjoy using QPrompt and that it makes your production easier.

Best regards, Cuperino