What's a teleprompter?
A teleprompter is a device used by speakers to view the script on a screen in front of them as they are speaking. Using a teleprompter is similar to using cue cards. If you record and upload videos on YouTube, it can be pretty useful to have a teleprompter in front of you. Teleprompters can be pretty useful but most of them are expensive. To learn more about teleprompters, click here.
Who came up with this idea?
Joel Lindstrom and a few of my other Hitachi colleagues were discussing posting videos on YouTube. Joel asked if any one of us had used a teleprompter. One of the other guys said it can be pretty bad since viewers can easily see that you are reading text off of a screen. But Joel felt that using a teleprompter would be useful especially for the introductions and endings. Then came the moment - Joel asked if a Power Apps teleprompter app would work where we could scroll text! Then the discussion quietly moved on to another topic and everyone got distracted. What did I do next? I opened my browser and typed in "make.powerapps.com"! This was too good of an idea to let go by. I had to try it!
A Power Apps teleprompter!
Demo
Before we look at how I went by creating a teleprompter in Power Apps and the different configuration options, let's take a look at what the end product looks like!
Configuration options
The main requirement was clear - there needed to be a way to scroll text automatically. And the easiest way to do that was to simply change the Y position of the label displaying the text entered by a user. With this problem out of the way, I thought about adding some configuration options to make it even more user friendly and useful. Let's take a look at those configuration options:
- Font size - increment/decrement font size by 1 or enter a font size
- Line height - increment/decrement line height by 1 or enter a line height
- Colors - like Microsoft Teams, pick from one of the three themes - default (black text on white background), dark (white text on black background), and high contrast (black text on yellow background)
- Prompter width - control the width of the prompter/text window. Smaller width allows for less left-right movement of the eyes
- Scroll speed - pick a number between 1 to 10 to control the speed at which the text scrolls
- Countdown start - pick from 0, 3, 5, or 10s for a countdown timer before the text becomes visible
Y position
To make the text scroll, the Y position of the label changes/decreases as time progresses. The Y property of the label is set to:
Max(
-Self.Height * (tmrScroll.Value / tmrScroll.Duration),
-Self.Height
)The label's auto height is set to be true. Let's say the height of the label is 100. As the timer starts and ends, tmrScroll.Value/tmrScroll.Duration changes from 0 to 1 so as time progresses, the Y position of the label changes from 0 to -100. The Max function ensures that the Y position of the label doesn't get lower than -100.
Scroll speed
To control the scroll speed, the duration of the timer is made dependent on the scroll speed selected by the user (used as a multiplier) and the ration of the height of the container housing the label and the height of the label (the longer the text, the smaller the ratio, the higher the multiplier). The Duration property of the timer is set to:
50000 * locScrollSpeed / 10 / (Parent.Height / lblTeleprompter.Height)To get out of a session, click on the X icon at the top right corner. To pause scrolling, simply click anywhere on the screen while the text is scrolling.
Summary
To summarize, with a label and a timer and a little bit of math, I was able to create a configurable teleprompter! Go use it before you record your next video!
Power Teleprompter app sample
Two versions (MSAPP file, and ZIP package for import) of this app are shared here.
All, there was a bug with countdown timer. Have reuploaded the code here:
If u have already downloaded the app, here is the set of changes:
1. tmrCountdown
AutoStart=locAutoStartTimerReset=locResetTimerStart=remove the code that's in placeOnTimerEnd=UpdateContext({locStartTimer: false});
UpdateContext(
{
locStartTimer: true,
locResetTimer: true
}
)
2. Teleprompter Screen:
OnVisible=UpdateContext(
{
locResetTimer: true,
locPauseTimer: false,
locAutoStartTimer: true
}
);
UpdateContext({locStartTimer: false});
If(
locCountdownTimer = 0,
UpdateContext({locStartTimer: true})
)
3. rdoTeleprompterCountdownStart:
Default=Switch(
locCountdownTimer,
0,
"0s",
3,
"3s",
5,
"5s",
10,
"10s"
)