Click here to Skip to main content
Click here to Skip to main content

Telemetered Secure Data Effect

By , 25 Dec 2008
Rate this:
Please Sign up or sign in to vote.

TelemeteredDataEffect

Introduction

This JavaScript based effect simulates the character-by-character transmission of secure data to a terminal.

Background

The code has been designed to move through a set of text on a character-by-character basis with a telemetry data received audio “blip”. This happens by making a copy of the text in a hidden DIV tag, and clearing the tag text then showing the DIV. Next, each character is reintroduced into the DIV tag one at a time while playing a “blip” sound.

The script also supports changing the audio “blip” style through an embedded tag: <!--SWAPSOUND-->. Here is the function that displays the next character:

Disclaimer: I have only tested the code on Internet Explorer so far.

function DisplayNextChar()
{
    var nextChar = text.charAt(index);

    if (nextChar == "<")
    {
        var endOfTag = text.indexOf(">", index) + 1;
        var tag = text.substring(index, endOfTag).toUpperCase();

        if (tag == "<!--SWAPSOUND-->")
        {
            Pause();
            tickSound = !tickSound;
            Resume();
        }
        else if (tag == "<BR>")
            document.all.message.innerHTML += "<BR><BR>";
        else
            document.all.message.innerHTML += tag;

        index = endOfTag;
    }
    else if (nextChar == "&")
    {
        var endOfElem = text.indexOf(";", index) + 1;

        document.all.message.innerHTML += text.substring(index, endOfElem);
        index = endOfElem;
    }
    else
    {
        document.all.message.innerHTML += nextChar;
        index++;
    }

    document.all.ScrollMarker.scrollIntoView();

    if (index >= text.length - 1)
    {
        Pause();
        document.all.EndTransmissionSound.src = "BlipEnd.wma";
    }
    else if (nextChar == ".")
    {
        Pause();
        setTimeout(Resume, 100);
    }
}

To add to the effect, the sound balance is rotated from one speaker to the other, adding to the allusion that the data is moving. This is accomplished by adjusting the sound’s balance property on a timer:

function RotateBalance()
{
    var balance = document.all.TelemetrySound.balance;

    balance += 50;
    if (balance > 5000) balance = -5000;

    document.all.TelemetrySound.balance = balance;
}

Using the code

The following code shows some example text and the script code in ONLOAD that starts the effect (make sure and download the entire set of script for proper operation - only excerpts of the code have been provided):

<BODY BGCOLOR="black" ONLOAD="InitTextEffect()" STYLE="MARGIN: 0px">
    <DIV ID="message" CLASS="message" STYLE="DISPLAY:none; PADDING-LEFT: 10px; ">
      Transmission one.<BR>
      <!--SWAPSOUND--><BR>
      Transmission two.<BR>
    </DIV>
    <A HREF="#" ID="ScrollMarker"></A>
</BODY>

License

This article, along with any associated source code and files, is licensed under The BSD License

About the Author

James Ritchie Carroll
Architect
United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 25 Dec 2008
Article Copyright 2008 by James Ritchie Carroll
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid