e University of Akron
IdeaExchange@UAkron
43467*7*&6(-64/*(87
?*6&6=&3)&2*1&#.11.&2743467
411*,*
56.3,
Smart-Teleprompter: An Online Teleprompter
with Text Editing
Mikyla Wilfred
26;>.579&0643*)9
1*&7*8&0*&242*38847-&6*-4;8-.7;460-*157=49 8-649,-8-.7796:*=$496+**)'&(0;.11'*
.25468&38&7;*51&3+968-*6)*:*1452*384+4966*547.846=
4114;8-.7&3)&)).8.43&1;4607&8 -A5.)*&*<(-&3,*9&0643*)9-43467%6*7*&6(-%564/*(87
&684+8-* 64&)(&78&3)".)*489).*7422437 42293.(&8.43 *(-3414,=&3)*;
*).&422437 &8&'&7*7&3)3+462&8.43=78*27422437 4@;&6*3,.3**6.3,422437
&3)8-* =78*276(-.8*(896*422437
?.743467*7*&6(-64/*(8.7'649,-884=49+46+6**&3)45*3&((*77'=?*6&6=&3)&2*1&#.11.&27
43467411*,*&8)*&<(-&3,*!06438-*.378.898.43&16*547.846=4+?*!3.:*67.8=4+0643.30643-.4
!8-&7'**3&((*58*)+46.3(197.43.343467*7*&6(-64/*(87'=&3&98-46.>*)&)2.3.786&8464+
)*&<(-&3,*!064346246*.3+462&8.4351*&7*(438&(8 2/439&0643*)99&56*779&0643*)9
*(422*3)*).8&8.43
#.1+6*).0=1&2&68 *1*564258*6331.3* *1*564258*6;.8- *<8).8.3, Honors Research
Projects
-A5.)*&*<(-&3,*9&0643*)9-43467%6*7*&6(-%564/*(87
Smart-Teleprompter: An Online Teleprompter with Text Editing
Mikyla Wilfred
Department of Computer Science
Honors Research Project
Submitted to
The University of Akron’s Williams Honors College
Approved:
__________________________Date______
Honors Project Sponsor (signed)
____________________________________
Honors Project Sponsor (printed)
__________________________Date______
Reader (signed)
____________________________________
Reader (printed)
__________________________Date______
Reader (signed)
____________________________________
Reader (printed)
Accepted:
__________________________Date______
Department Head (signed)
____________________________________
Department Head (printed)
__________________________Date______
Honors Faculty Advisor (signed)
____________________________________
Honors Faculty Advisor (printed)
__________________________Date______
Dean, Honors College (signed)
____________________________________
Dean, Honors College (printed)
Smart-Teleprompter 1
Introduction
When I was trying to figure out what the best thing to do for my honors project, I knew I
wanted to make sure that I utilized my minor in media along with my major in computer science.
A teleprompter seemed the natural fit.
The teleprompter is a key piece in every news studio. A news anchor sits in front of the
camera and reads the words displayed on the teleprompter. An operator runs the teleprompter to
match the speed of the news anchor who is reading. The speed of the teleprompter is a curious
aspect and seems quite antiquated. Today, most teleprompters only put large words on a screen
in contrasting colors and allow someone to read from them. However, something needed to be
different to make it more valuable to news writers and their cohorts. With this idea in mind, I
decided it would be best to create a website as I am very familiar with PHP, JavaScript and
HTML. The PHP was utilized to create an object oriented class. I have added a level of CSS in
the website as well.
In this project, I wanted to solve the various issues I see with the current teleprompters.
Most teleprompters exist as downloaded programs onto a single computer. This means scripts
must be edited in another text editor and then transferred to the program. With the website, I
wanted to create a place for everything to be saved at once. The ability to go into a file and edit it
right in the program seemed more efficient than having to transfer scripts. I also wanted to allow
users to save color data and font data, so when a new reader is used, they can already have a set
design, while most programs downloaded onto a computer only save the last settings, the website
will save the user’s preferences no matter who used the program last.
Smart-Teleprompter 2
These issues are not being fixed as there are not many people with a media background
who understand different tech aspects. By having the background of the media world, I
understand the things that are important to media producers as well as having the capabilities to
create them myself. This software fills in a gap that media producers may not even know they
have, as it has always been a specific way.
The site I created, smart-teleprompter.com, is a place to write scripts, and immediately
allow them to be viewed on the screen. The teleprompter will also have a way to share the scripts
with other people. A way to be “head of an organization” which will allow people to see all the
scripts created for that organization is included in the website. Editing and uploading scripts will
allow changes on one computer to be transferred to another computer. Now I am very excited to
show you the world of the Smart-Teleprompter.
Linux Server
For the location of my project, I created it on an Ubuntu 14.04 server. Linode was the
easiest way to get ahold of a Linux server. Linode hosts Linux servers that can be accessed and
updated online. ("Get a Server Running in Seconds") Utilizing the Unix class was very helpful in
the creation of my smart-teleprompter website.
To access the server, I used PuTTY, a simple SSH program. I also used FileZilla to
access and upload all files I needed for the code.
Linode had a list of how to create and host a website. It is the first place to start after
getting the server up and running. ("Hosting a Website" 2017) Apache is very important to
creating a website, thus it is the first thing to install.
Smart-Teleprompter 3
Apache is needed to host a website, which is overall simple to install to a virtual host.
(Group "Essentials¶”) For my virtual host, I used smart-teleprompter.com as I could get access to
it on hover. Hover is a domain hosting website, which connects to the IP address of my Linode
server.
Smart-Teleprompter 4
The MySQL database (which will be explained in depth below) was also downloaded
into the server.
Then after that the PHP aspect needed to be downloaded to the server.
Now that the website support was put on the server, I used hover to buy and host my
domain. I had a problem setting up the DNS server getting it to work. This was the first time I
attempted to create a website on a server. Once I figured that out, smart-teleprompter went live, I
started processes on it.
One major problem I have found on this server was sending emails with the mail function
through Gmail. At first, I got it working almost immediately using sendmail. Sendmail uses the
SMTP for email routing. ("Linux sendmail command help and examples" 2017) I had it logging
into my Gmail account and sending emails when needed. However, the Gmail security caused
my server to stop sending the emails and no matter what I try to install, it will not send. I have
tried Postfix and send mail. I am not sure how to fix it. At this point, I cannot get it to send as a
root. Without emailing, I will have an issue with the forgotten password and verifying email
address. The PHP code worked when tested, however, so once the server issue is fixed, the
process will have no issues.
Smart-Teleprompter 5
After about a week of trying to fix the code, I finally had to give up on my endeavor. For
now, this piece is broken simple because mailing services have rules against spam. I found this
very difficult to get around and will keep looking, but due to a lack of time, I had to use my time
for more important features.
Database
When writing this program, I decided using MySQL would make the most sense to
connect to my PHP code. This choice is mainly for the users and to keep a list of the files. The
files themselves are saved as text files, which I will explain in more detail below.
The diagram below explains the database well. First you can see the user table. A field
saves hex numbers of the colors of font and background of the teleprompter. This consistency
allows users to make sure they are always reading the same way when they are logged in. The
field for font size is included as well, which saves an integer of the size. It also includes the field
Font_Pref which is the actual font. These default immediately to be white on black with a font
size of 200px. The font family is Arial.
The manager of table shows who oversees whom, which allows the person to see all the
files of the person they oversee. This setting can be changed in the edit user to add subordinate.
A manager can only be in the same company, and all users must be in one company.
The scripts in read by and in test are used to get time data. They allow calculations to
read the test scripts and find the words read per minute. The word count and calculation of time
reading allows people to write more efficient scripts. The test scripts and the files are similar and
save where the file is to make sharing easier to save as well as listing files easier.
Smart-Teleprompter 6
The company is mostly to keep all the files in one place and make sharing more efficient.
If someone is head of the company, he or she can see all the files in that company. The database
also includes a can access table, which attaches the file id and a user id and allows people to see
the right files.
The diagram below shows how all the tables connect in the database as well as the
primary keys, which are all underlined and mostly auto-increments to make editing them easier.
Teleprompting
The most important piece of the entire project, the teleprompter, which will be used by
the news casters to read from. I started this project with the teleprompter.
To start with this aspect, I needed to make the font size large, the background black and
the font white. The style was basic CSS. The next fun test was that the larger font did not stick to
the page which involved a horizontal scroll which is not how a teleprompter looks, so I needed
Smart-Teleprompter 7
an aspect of word wrapping added which was word-wrap to the CSS code. ("CSS word-wrap
Property")
The script is grabbed from the post data from the teleprompt the script page. The file is
then read line by line into the paragraph tag in html. Then the program closes the file.
Once the script is all read to the page, I had to find a process of moving the script, which
I decided would be best to do in JavaScript. One instance I had seen of auto-scroll is a left mouse
click and using the mouse scroll up to make the speed faster and scroll down to slow. However,
when using the scroll, I found that the mouse scroll was not consistent in JavaScript, so I decided
to use the arrow keys instead. The up arrow increases the auto-scroll speed and the down arrow
decreases it, which correlates with whether the prompter is going up or down. The left button on
the mouse allows the auto-scroll to go down. The right mouse button created an issue that
highlighted the whole script as you read through. To fix this issue, I disabled the highlight using
CSS.
Smart-Teleprompter 8
To scroll up, the right mouse must be used. This requirement caused two issues. To scroll
up, the JavaScript became more complicated. The up and down arrows still needed to increase
the speed, but to scroll up the speed must be negative, so the math became many more if
statements.
The next issue was to use a right click, I had to disable the context menu that occurs,
which would have created an issue every time someone needed to scroll backwards. I fixed this
issue with a simple line of JavaScript.
Smart-Teleprompter 9
The script was grabbed from the “post” data from the teleprompting screen below. The
settings below are the defaults when all users are created. Post data is created after a form is
submitted. In this case, the run teleprompter is the submit button.
The font color and background colors both open color pickers that are inputs in html. The
font dropdown was manually made, so I had a limited number of fonts. However, the dropdown
does change its font based on the font selected using JavaScript and the DOM style properties.
("Style font Property")
Smart-Teleprompter 10
To set these colors, the defaults are saved in the database, explained above, and in the
session, also explained above. A set defaults button then needs to change both; to do this action I
call an ajax function.
This ajax function call a PHP script that changes the settings in the session and updates
the database. Once the database is saved successfully, a notification pops up declaring whether
the save to the database is successful or not.
These settings are then applied using PHP and CSS simultaneously.
Smart-Teleprompter 11
.
On that teleprompting set-up page, vertical and horizontal mirroring options are also
located. This requirement was brought up to me as a necessity by some of the media majors.
When using a teleprompter, some of the screens that are used must be reflected onto to be placed
in front of the camera. In most cases, screens/mirrors are in front of the lens on a camera. These
mirrors allow news anchors to read while looking at the camera, which creates more of a
connection with the audience. These settings are not saved in the defaults yet. For now, that
requirement seems more specific to the computer used and not the user. The rotation and
reflection are all done in CSS and decided if the reflection should be used in PHP. When both
buttons are checked, another if statement with both is used, which is a total of three if statements.
Smart-Teleprompter 12
I also had the issue of leaving the page, so at the bottom of the teleprompting page, I
added buttons. They navigate to the three most important parts of the script: the top of the
teleprompting page, the set up page, and the editor. These buttons use a reverse color scheme
from the background to be more visible on all configurations.
Along with these buttons, a normal button to get out of other teleprompter programs is
the escape button. I have the escape button set up to be a back button. This choice will help some
people who have muscle memory and use the escape button in my program. ("How to detect
escape key press with pure JS or jQuery?") I added it into the up and down arrow function.
The last issue I came across was the full screen. In most cases, the browser cannot go into
full screen with code. The code is limited to the window; thus, I could not get the code to make
the page full screen. The F11 key will put a browser into full screen. I will put a note of the F11
key in the instructions and for now the F11 key will fix that issue.
User and Company
The users are primarily controlled by the database, however to log in, I used sessions in
PHP. The session allows me to save variables about the person. For instance, if a user is logged
in, and I saved their email in the session, I can access the email session variable and send the
person an email.
Smart-Teleprompter 13
I have a create user or a register page. This page has an area to enter a password, email,
company, and position. The password is hashed before being saved into the database, and I have
created a place to type the password twice to make sure they match. The password also has
credentials that mean the password has to have at least 8 letters, less than 25 characters, an
uppercase, a lowercase, a number and a symbol. The code checks for these requirements when
creating a user and also, when changing the password. Finally, the session is set immediately
after the user is created meaning the user does not have to log in after the creation of the user.
The creation also sends a verification code to the user’s email. This verification code is
generated using the function:
The login page is straightforward. The user enters their email as well as their password.
The most exciting piece of the login page is an alert to let the user know when cap locks is on
Smart-Teleprompter 14
while typing a password. As the password is case sensitive, this warning is a helpful feature to
have.
This code is saved in the database and changed to a 1 when the email is verified. The
verification column is saved in the session, and it also is used to give the ability to send the
verification email again if the session variable is not 1, and it is the code.
For some of the pages, a session must be set before the user can access pages. If no one is
logged in, it redirects to the home page.
The Contact Us page is not one that redirects, however, if a user is logged in, the email
and named are auto-filled into the form to make contact easier. This form simply sends an email
with the questions or comments in the body.
Smart-Teleprompter 15
The functionality for edit user was especially difficult. Most of the form was very similar
to the create user. The names, the email, and company are all on the edit. No password is on the
edit user. The password changes are on other pages. The editor has an add subordinate section.
This piece allows the users to add users that they can see all the files for their company. I used a
for loop and a max number of subordinates. This action creates the inputs and then hides them
using JavaScript, which is a for loop in PHP to add them to the manager of table. Below, the first
picture runs through and hides all the inputs as well as hiding them all. The buttons in the third
picture trigger the function. The first picture also uses window onload. (_CK_ 2012) I had some
issues with the window onload function and found out I had been multiple ways to get it to work,
and the function at the bottom of the first picture uses it. The second picture saves the data,
deletes it or updates it based on whether the subordinate has been saved before. The third picture
generates the full form then is hidden. The ability to change the max amount is in one spot,
however, changing it makes the file load slower the larger it is. I have kept it at 10 as it seems the
correct size for now until more user testing can be done.
Smart-Teleprompter 16
Smart-Teleprompter 17
The final product looks like the below, and the dropdowns are filled with the names of
the other people in the company.
The last important part of any user page is the passwords. Once logged in, a page exists
to change password. This action needs an enter the old password as well as the new one being
entered twice.
Also the forget password at the point of the login.
Smart-Teleprompter 18
The forgotten password needs an email. If the email is in the system, a new password is
generated and emailed to the user. Once the user logs in with this generated password, he or she
immediately directed to the change password page.
I added the pieces that I found were the most important to a user set and a login. The
password changed and the user creation and editor were all vital and are part of my program.
Files and Uploader
The most interesting and unique piece of the smart-teleprompter versus other
teleprompters is the ability to write, upload, and edit scripts in the site. In most cases, scripts
must be copied and pasted into the program on the computer. In this case, scripts can be edited
on the website from any computer allowing the scripts to be contained in one area. I will also
have a history of the files saved on a server not in many different computers and locations.
The files are saved as text files, as I have no reason to take more space than that required.
I found no major formatting needed for scripts. This reason is why I also simply stuck to a text
area and did not put formatting in. I used a simple put contents in a file function using PHP to
complete this task. ("file_put_contents")
The text files are created and named using the same generator used in the generation of a
verification code, then I also added the user id at the end to create less duplicate names. I had an
Smart-Teleprompter 19
issue of the files needing permissions to be created. I found it was a few simple bash functions,
but this issue took me some time to find the correct code.
In the new file, the generated name is saved in the database, as well as the “friendly
name” which is the name displayed for the users. A creation date is used to order the files. The
files are on a live search in an unordered list form. They can be searched by name, created date
or the file name. An example is shown below. (“How TO - Filter/Search List”)
Displaying the files did prove to be difficult as I had to check the manager of table, the
files sharing table, and the files table to get the ones created by. The MySQL query became the
following:
The first query is merely grabbing the files created by the signed-in user. The next
attempt was to access the files the user could get from the files shared files. Then the query adds
Smart-Teleprompter 20
a call to the manager of table, where any manager can see his or her subordinate’s script. The
subordinates can be added in the edit user, and sharing a specific file is in the file text editor.
The next query gets all the files created for the company if the user oversees the
company.
Next is a new file page, which is putting the “friendly name” in a text box, and the file is
created.
The upload is similar except I wanted to accept different types of files in the uploader.
My program accepts Word documents, PowerPoints, excel sheets, PDFs, and text files.
First, I found a pdf2text class. ("[PHP] class.pdf2text.php”) When the extension is PDF,
an instance of this class is created and made into text. ("Reading the "clean" text from PDF with
PHP") This allowed the PDF compatibility with my program.
The teleprompter has also a class used for Word documents (docx and doc), Excel (xlsx)
and PowerPoint to allow uploads of these file types. This class was used very similarly to the
pdf2text class. This action, however, did take some manipulation to get fully working. ("How to
extract text from word file .doc,docx,.xlsx,.pptx php")
Lastly, the files only accept csv and text files, which did not need to change formatting at
all and were very simple.
An error is thrown if the file is none of these types.
Smart-Teleprompter 21
The text editor allows the friendly name of the file. The most interesting piece of the
friendly name is if the user creates a file and the name is already used, an alert pops up, but it
still allows the user to create the file.
Once the test files are in place to get the number of words a user can read per minute, the
idea of a word count seemed key. It does not matter if the user knows how many words he or she
can read a minute, if a word count is not available. This word and character counter updates as
the user types keeping the numbers correct the entire time. (deepumohanp.)
Media Influences and Design
In getting both a major in computer science and a minor in media, one of the aspects I
learned was social media, which is important for many reasons. First, social media will be a way
to communicate with people getting new update notices out as well as getting issues in. I utilized
Facebook and Twitter as these are two important social media platforms with the most traffic. I
also have YouTube. The How-To video, described below, is on YouTube, and playlists are on
there about using a teleprompter and another one on teleprompter hardware.
Another aspect of my media minor is the How-To video I created. I utilized the screen
capture video program on the Mac. I used Adobe Premiere to edit in the voice over and the
music. This element is another that makes the website look more professional while utilizing my
minor.
Smart-Teleprompter 22
Another media influence I had was designing the website and the logo. I started on the
CSS code looking over different designs as well as a color scheme. I had one of my media
friends, Bradley Mickna, create a logo, which is in the header, and an icon, which is used in the
tab. A few different ideas are shown below.
Smart-Teleprompter 23
Ultimately we decided on the last design. After figuring out the logo, I had to come up
with a design of the website. The icon used was put in the header of the website.
The graphic designer and I also worked on an animated logo. The “smart” in the screen
scrolls up like it is a teleprompter, and the “teleprompter” types out like a typewriter. This logo
portrays the two things this program does, teleprompt and type.
The first design of the site came out to something like the below image. I created this
design thinking it would be best to keep everything in the header and even adding the name of
the logged in user in the header. This task was simple after using access the session data. It also
changed depending if the user was logged in or not. This change makes sure if the user needs to
logout, or if there is a need to login, the header reflects what needs to be there.
After sometime, I had a discussion with the graphic designer again, and he decided to
mockup a slightly different design which is where the website stays now.
To do this change, I had to break apart the CSS classes to have similar design but the
colors needed to be different. I also had the issue of making sure the logout was centered and
Smart-Teleprompter 24
also the brighter red was still close in the color scheme but also dark enough the white font
would show. I also used CSS to dropdown and show more links.
This new design was slightly more visually appealing and also balanced well with the
footer the graphic designer created.
The footer contained its own set of issues. I wanted the footer to be at the bottom of the
loaded page or stick to the bottom of the window if the content was not long enough. This idea
proved to be a very difficult. Discovering how difficult it would be, I found a footer tag I had
never used before. ("HTML <footer> Tag") The footer tag does not fully do anything on its
own; however, CSS can manipulate it very easily. The first piece to getting the footer to stick to
the bottom or be at the end of the page is setting the body to a height of 100%. This change
makes sure that the bottom of the page is the bottom of the window. Then it was as simple as
setting it the bottom as 0 in the CSS and putting all the main data in a div and the footer in the
next div. ("Sticky Footer, Five Ways" 2018)
Smart-Teleprompter 25
I also used the font awesome to set us the social media links. ("How TO - Social Media
Buttons")
Conclusion
The smart-teleprompter is a wonderful combination of my major and my minor. Being
able to write a program that I can take to some of my peers in my minor and have them use is a
good feeling. This program will come in handy, and I am still very excited to add a read time to
the program and possibly display graphs based on a company’s words per minute as well as an
individual's progress over time. I also have an idea to create a backup file on the server to make
sure if something goes wrong the user can access the backup file. The last idea I had was to save
multiple defaults for a user and allow the user to save them. This option could be effective if a
person uses different screens to prompt on or, depending on the camera angle, different colors
may be easier to see.
Smart-Teleprompter 26
I am excited for the progress of this program as well as how far it has come. I cannot wait
until the website is used by other people.
Smart-Teleprompter 27
Works Cited
“[PHP] Class.pdf2text.Php.” Pastebin, pastebin.com/dvwySU1a.
“CSS Word-Wrap Property.” CSS Word-Wrap Property,
www.w3schools.com/cssref/css3_pr_word-wrap.asp.
“CSS Word-Wrap Property.” CSS Word-Wrap Property,
www.w3schools.com/cssref/css3_pr_word-wrap.asp.
deepumohanp. “JSFiddle.” Word Count - JSFiddle, jsfiddle.net/deepumohanp/jZeKu/.
“file_put_contents.” Php, php.net/manual/en/function.file-put-contents.php.
“Get a Server Running in Seconds.” Deploy a Cloud Server in Seconds - Linode,
www.linode.com/linodes.
Group, Documentation. “Essentials¶.” Welcome! - The Apache HTTP Server Project,
httpd.apache.org/.
“Hosting a Website.” Linode Guides & Tutorials, 18 Jan. 2017,
linode.com/docs/websites/hosting-a-website/.
“How TO - Filter/Search List.” How to Create a Filter/Search List,
www.w3schools.com/howto/howto_js_filter_lists.asp?
Smart-Teleprompter 28
“How TO - Social Media Buttons.” How to Create Social Media Buttons,
www.w3schools.com/howto/howto_css_social_media_buttons.asp.
“How to Detect Escape Key Press with Pure JS or JQuery?” JavaScript - How to Detect
Escape Key Press with Pure JS or JQuery? - Stack Overflow,
stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-pure-js-or-
jquery.
“How to Extract Text from Word File .Doc,Docx,.Xlsx,.Pptx Php.” Stack Overflow,
stackoverflow.com/questions/19503653/how-to-extract-text-from-word-file-doc-docx-
xlsx-pptx-php.
“HTML <footer> Tag.” HTML Footer Tag, www.w3schools.com/tags/tag_footer.asp.
“Linux Sendmail Command Help and Examples.” Computer Hope, 29 Dec. 2017,
www.computerhope.com/unix/usendmai.htm.
“Reading the ‘Clean’ Text from PDF with PHP.” Reading the "Clean" Text from PDF with
PHP, webcheatsheet.com/php/reading_clean_text_from_pdf.php.
“Sticky Footer, Five Ways.” CSS-Tricks, 16 Feb. 2018, css-tricks.com/couple-takes-sticky-
footer/.
_ck_. “Stop Using ‘Window.onload’ in JavaScript.” _ck_ Says..., 10 Jan. 2012,
ckon.wordpress.com/2008/07/25/stop-using-windowonload-in-javascript/.
Smart-Teleprompter 29
“Style Font Property.” HTML DOM Style Font Property,
www.w3schools.com/jsref/prop_style_font.asp.
