Close
0%
0%

Entirely HTML, simple teleprompter

I was learning javascript, so wanted to make a teleprompter webpage.

sciencedude1990sciencedude1990
Following
Liked Like project

Just one more thing

To make the experience fit your profile, pick a username and tell us what interests you.

Pick an awesome username
hackaday.io/
Your profile's URL: hackaday.io/username. Max 25 alphanumeric characters.
Pick a few interests
Projects that share your interests
People that share your interests

We found and based on your interests.

Choose more interests.

OK, I'm done! Skip
Public Chat
Similar projects worth following
591 views
0 comments
0 followers
View Gallery
Public Chat
A completely free teleprompter, HTML/javascript based teleprompter. You are welcome, internet.

Here is the HTML for the project...

Please see:

https://sciencedude1990.github.io/hello_world_tests/scroll_test.html

  • HTML listing

    sciencedude1990 • 04/01/2021 at 03:40 • 0 comments

    <html>
    <head>
    <title>Scroll Test</title>
    </head>
    <body>
    <script>

    // State for the play/stop button
    // 0 for stop, 1 for just started playing, 2 for playing
    var state = 0;

    // Speed for scrolling
    var speed = 1;

    // Variable for tracking scroll position, with fine granularity
    var trackScroll = 0;

    // Variable to hold the interval (for periodic update every 80 ms)
    var myinterval = setInterval(updateDisplayArea, 80);

    function updateDisplayArea() {

    if (state == 1) {
    // User just pressed the play button

    // Set the scroll bar in the textarea to 0
    var txtArea = document.getElementById("theText");
    trackScroll = txtArea.scrollTop * 20;

    // Set the state to 2
    state = 2;
    }
    else if (state == 2) {
    // Now playing...

    var txtArea = document.getElementById("theText");
    var scrollRange = txtArea.scrollHeight - txtArea.offsetHeight;

    // Only adjust the scroll bar if there is enough text
    if (scrollRange > 0) {
    // Increment the variable
    trackScroll = trackScroll + speed;

    // Divide by 20 and round
    var temp = Math.round(trackScroll / 20);

    // If the value in temp is less than the maximum scroll
    if (temp <= scrollRange) {
    txtArea.scrollTop = temp;
    }
    else {
    // Back to stop
    state = 0;
    }
    }
    else {
    // Back to stop
    state = 0;
    }
    }
    else if (state == 0) {
    // State is stop, so make sure the button says play
    var temp = document.getElementById("btnPlay");
    temp.innerHTML = "Play";
    }

    // Update the label to indicate the speed
    var temp = document.getElementById("btnSpeed");
    temp.innerHTML = speed;

    }

    // Copy the text from the source to the teleprompter
    function mrCopy() {
    var txtArea = document.getElementById("theText");

    var txtSource = document.getElementById("theSource");

    txtArea.value = txtSource.value;
    }

    // Call to change the state of the play button
    function mrPlay() {
    if (state == 0) {
    state = 1;
    var temp = document.getElementById("btnPlay");
    temp.innerHTML = "Stop";
    }
    else {
    state = 0;
    var temp = document.getElementById("btnPlay");
    temp.innerHTML = "Play";
    }
    }

    // Call to change the speed
    function mrSpeed(dir) {

    if ((speed + dir) < 0) {
    speed = 0;
    }
    else {
    speed = speed + dir;
    }

    // window.alert("Speed: " + speed);
    }

    </script>

    <textarea id="theText" name="theText" rows="16" cols="50" spellcheck="false" style="transform:scaleX(-1); transform:scaleY(-1); background-color:black; color:white; font-size:200%; text-align:center">
    Hi!
    </textarea>
    <br>
    <button id="btnPlay" style="font-size : 20px" onmouseup="mrPlay()">Play</button> 
    <button id="btnSpeedUp" style="font-size : 20px" onmouseup="mrSpeed(+1)"> + </button> 
    <button id="btnSpeedDown" style="font-size : 20px" onmouseup="mrSpeed(-1)"> - </button> 
    <button id="btnSpeed" style="font-size : 20px"> 1 </button>
             <button id="btnCopy" style="font-size : 20px" onmouseup="mrCopy()">Copy</button>

    <br>
    <textarea id="theSource" name="theSource" rows="16" cols="50" style="font-size:200%">
    Test test
    </textarea>
    <br>

    </body>
    </html>

View project log

Enjoy this project?

Share

Discussions

Similar Projects

Upgrade your home with our Smart Module for seamless control of appliances via smartphone, touch, IR remote, and voice assistants.
Project Owner Contributor

Smart Home Solution

mayur-rabadiyaMayur Rabadiya

Knickknack does not do much right now ... but who doesn't have an item or two of little value ...
Project Owner Contributor

Knickknack

chrisChris

Not all simulations are ODEs! Cellular Automata (CA) use local rules and communication. CA can simulate biological and physical systems.
Project Owner Contributor

Physical Simulation with Cellular Automata

bruce-landBruce Land

Robot on a PCI-e Stick (ROPS) is a project to provide a flexible I/O solution for ROS robots.
Project Owner Contributor

ROPS

calebCaleb

Does this project spark your interest?

Become a member to follow this project and never miss any updates

Going up?

About Us Contact Hackaday.io Give Feedback Terms of Use Privacy Policy Hackaday API

© 2024 Hackaday

Yes, delete it Cancel

Report project as inappropriate

You are about to report the project "Entirely HTML, simple teleprompter", please tell us the reason.

Send message

Your application has been submitted.

Remove Member

Are you sure you want to remove yourself as a member for this project?

Project owner will be notified upon removal.