Power Teleprompter 01-20-2022 11:38 AM

[PowerAddict]

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!

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!

 

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:

1. Font size - increment/decrement font size by 1 or enter a font size
2. Line height - increment/decrement line height by 1 or enter a line height
3. 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)
4. Prompter width - control the width of the prompter/text window. Smaller width allows for less left-right movement of the eyes
5. Scroll speed - pick a number between 1 to 10 to control the speed at which the text scrolls
6. 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!

Demo

For a demo, here's a link to my blog post: https://thepoweraddict.com/how-to-build-a-teleprompter-using-power-apps

 

Attachments

1. Power Teleprompter.msapp (MSAPP version)
2. PowerTeleprompter_XYZ.zip (ZIP package for import)

[PowerAddict]

All, there was a bug with the countdown timer. Have reuploaded the code.

If u have already downloaded the app, here is the set of changes:

1. tmrCountdown

AutoStart=locAutoStartTimer

Reset=locResetTimer

Start=remove the code that's in place

OnTimerEnd=
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"
)

Apologies for the bug!

Thanks,

Hardit Bhatia

[R3dKap]

Nice job @PowerAddict 😉

One thing though: right at the start, the text should start in the middle of the screen so the reader has enough time to read the first lines...

[PowerAddict]

Thanks a lot @R3dKap! Precisely what I was thinking! I am going to release another version soon which will also allow for the text to be mirror imaged like how some real teleprompters do. Just need to make some finishing touches, might reach out to you with a question.