traffic light dashboard display


I am trying to set up a web page that has various traffic lights in a dashboard type display. Each traffic light will represent the "state" of an indicator. Each indicator will be represented by a value in a text file (or similar). What I would like to achieve is that when the web page loads, each of the traffic lights checks the value in its associated text file and then displays red, green or amber based on that value (e.g. 1, 2 or 3).

Unfortunately, being a complete web novice I have no idea of how to go about implementing this e.g. where do I get the traffic light graphics, what language do I need to use etc.

Any pointers as to (a) whether this is feasible and (b) how to implement it would be greatly appreciated.

Thanks in advance.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

first, what web server are you using?
What is this for? I don't really understand what you are trying to accomplish
You could use VB-Script and ASP-Pages ... You find an ASP tutorial here:

What you can do, make some images (with PhotoShop, Flash, FireWorks) for your different traffic lights and call them for example Green.gif, Orange.gif and Red.gif. You can maybe also search the web for nice pictures (free or for a little price)

Now, with ASP, you can check the value in your text-file our DB and show the right image ...

Something like this:

Select Case Status1
  When 1 Response.Write "<img src='/images/green.gif'>"
  When 2 Response.Write "<img src='/images/orange.gif'>"
  When 3 Response.Write "<img src='/images/red.gif'>"
end Select
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

sseniorAuthor Commented:

thanks for the replies.

wsteegmans - I don't think we have asp installed so I can't run your suggestion, although your solution would appear to be exactly what I was after. I've done some digging on the w3schools site and it would seem JavaScript in HTML would be the easiest for me to implement. So, how do I read a value from a file and then display the relevant image based on this value?

af500 - this if for a risk management system we are developing at work. This part is to display the results via the intranet to the user community - hence it has to look good - with traffic lights showing how risky various parts of the business are.

Thanks again
ASP runs almost on every Windows 2000 WorkStation and Server ... I would have a closer look at that.

Because, ... I suppose these files with the status-values are located at the server? If I'm right, it is impossible to read these values with JavaScript!

But, when you ask the question more general: "Is it possible to read text-files with JavaScript?" ... I'm afraid this is the answer:

This is not really possible. JavaScript provides no means to read text files. There are some potential hacks/workarounds that might work in some browsers.

Internet Explorer 4 allows you to read the contents of the page. using innerText, outerText, innerHTML and outerHTML, you could use this to read the contents of a hidden frame. Internet Explorer 4 also supports data binding, which allows simple client side databases using CSV text files.

Most browsers now support JavaScript *.js source files. You could use JavaScript to hold text that you later display. Used with frames you could load different files of JavaScript/text at different times.

The last one you could eventually use. Create a js-file with variables that holds the values ... but it is not really generic. So, try to figure out if you can run ASP ... It's really more easy to solve your problem.

  All browsers do not read *.txt files easily.  The following works for IE6.0:


function doit(frObj)
  if (frObj.body.innerHTML.indexOf('someValue') != -1)
     document.images['theImage'].src = ''
<body onload='doit(theFrame.document)'>
<img name='theImage' src="">
<iframe name='theFrame' src="myfile.txt"></iframe>

sseniorAuthor Commented:
thanks for the posts I am really getting somewhere now.

wsteegmans - unfortunately we are still running NT4 and won't be on 2000 until late next year (hence I think why we don't have asp).

Vinny - thanks for the comments but we are all running IE5 and not version 6.

a bit of digging, and I have found a method that appears to work - With this I was able to read in values from a text file as in the example given. However do you know how I can now bind the value to a variable and then use a script to check the value and display the relevant image? I don't know what the SPAN, DATASRC and DATAFLD items are!?


Maybe this link gives some extra info:

About Windows NT and ASP. It is perfectly possible to run ASP-application on your NT4-machine. The only thing you have to do is to download the Microsoft NT 4 Option Pack (Free) and install it ...

After installing this Option Pack (more specific the Internet Information Service) you have a full functional ASP-Server.
More about it:

Download it:

1) I don't think IE5 would have problems with the code I posted -- and since it's simple enough, you should cut & paste, and try it (altering the iframe's source and the flag to something appropriate)

2) I do not think tdc (tabular data controls will help you identify the 'flag', variable, or whatever you are looking for.
SPAN  -- as in HTML <span>, similar to <div>
 DATASRC  -- the source file of the tabular data.
DATAFLD -- the fieldnames

the html:
<TABLE ID=Table1 BORDER DATASRC=#tdcStrings>
       <TD ROWSPAN=2><DIV DATAFLD=Symbol ></DIV></TD>
       <TD><SPAN DATAFLD=field1></SPAN></TD>
       <TD><SPAN DATAFLD=field2></SPAN>
           <SPAN DATAFLD=field3></SPAN>
 <table border="1" datasrc=#tdcStrings>
  <span id='menutitle' tabindex='1'  datafld='Symbol' dataformatas='html'></span>
the text file contents:

3) if you have control of the data file, you can do the following:
 a) rename it to *.js
 b) write out the data so that it looks like a javascript array -- for example:
var myFlag = 1
var fieldnames = ["First Name","Last Name", "Address"]
var names = ["Joe","Blow","nowhere usa", "John", "Smith", "wherever Joe isn't"]
c) load it into your html file as follows:
  <script language='javascript' type='text/javascript' src='myfile.js'></script>
d) then test for the value of myFlag

sseniorAuthor Commented:

Thanks for the posts, you were right your original code worked fine in IE5.0.

Digesting all of the above, I think the best route for what I want to do would be to import the data as a src .js file. I'll try and explain what I would like to do in a non web-programming way:

e.g. data file which we'll call "data.js" - this will contain the values representing the states of the various risks I am interested in (1 represents red, 2 amber and 3 green). An example of its content would be:

var risk1 = 1
var risk2 = 3
var risk3 = 2

This data.js file would be updated daily as the statuses change.

Now from what I understand I load this into the html by doing <head>
  <script language='javascript' type='text/javascript' src='data.js'></script>

ok so now it's loaded, this is where I fall down:

If you imagine that I now want to check each of the variables (risk1, risk2, risk3 etc) in turn and have an individual image (red, green or amber) for each of those values on the page - so in effect it will look like a dashboard, something like:


so I need some way for each value in the data.js file for checking the status, eg:

if risk1 = 1 then red-image elseif risk1 = 2 amber-image else green-image.

but this will have to be done for each of the values in the data.js file.

So far I have been unable to write the code to (a) reference the variables declared in data.js within the main page and (b) to display the correct coloured logo based on the if statement.

Any help appreciated, or any alternate suggestions.

Many thanks to everyone for their help so far, very much appreciated!

Hi ssenior,

   I have only an approximate understanding of what you intend (possibly because I have only had one mug of espresso, but also because you are talking in general terms).  However...

1) Instead of having 3 variables (risk1, risk2, risk3), you should have only 1 variable that can contain one of 3 values -- var theRisk = 0 (or 1 or 2).  

2) preload your images:
   var theLights = new Array();
   for (var i = 0; i < 3; i++)
      theLights[i] = new Image();
      theLights[i].src = "dashboard" + i + ".gif"  
 //where dashboard0.gif = green/ dashboard1.gif = amber; dashboard2.gif = red
3) Then, after loading the specific file, in the html file, you simply query the var and set the image accordingly,  

either by changing the html's image src:  
 ....something.src... = theLights[theRisk].src

or the image object itself:

    ...someImageObj... = 'theLights[' + theRisk + ']'

actual code and/or url would be helpful

sseniorAuthor Commented:
Thanks to all of you for the help, I've cracked it!

Here is the code out of interest:

<title>Risk Indicators</title>

<script language='javascript' type='text/javascript' src='data4.js'></script>


//var temp = "risk1";

function show_red(frObj, number)
     document.images[number].src = 'red-light.bmp';

function show_amber(frObj, number1)
     document.images[number1].src = 'amber-light.bmp';

function show_green(frObj, number2)
     document.images[number2].src = 'green-light.bmp';

function changeit(r,s)
      switch (s) {
      case 1:
            //status passed of 1 so change the given risk to green
            show_green(document, r);
      case 2:
            //status passed of 2 so change the given risk to amber
            show_amber(document, r);
      case 3:
            //status passed of 3 so change the given risk to red
            show_red(document, r);

function changeall()
      changeit("risk1", risk1_status);
      changeit("risk2", risk2_status);
      changeit("risk3", risk3_status);

<body onload='changeall()'>
<img name='risk1' src="green-light.bmp">
<img name='risk2' src="amber-light.bmp">
<img name='risk3' src="red-light.bmp">

couldn't have done it without you.


Glad I helped


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PHP runs fine under apache on an unmodified NT installation... doesn't have all the bugs and security holes, either ;)


Server-side would definitely be the best option for you here, seeing as your display code has to have knowledge of a local file.  ASP or PHP can do this fine.  Using javascript for things like that is really not the best option.

You needn't worry about creating lots of graphics for each colour, either.  Create a simple light image with the area you want "illuminated" transparent.  Put this image in a table cell.  You can now set the cell's background colour attribute in javascript (or pre-write it in server-side-stylee) and it will update the colour accordingly.  With this method you can have any colour lights you want, and even fade them in and out on demand.
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
    Accept: VincentPuglia {http:#9751763}

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

EE Cleanup Volunteer
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.