Solved

traffic light dashboard display

Posted on 2003-11-13
16
1,202 Views
Last Modified: 2007-12-19
Hello,

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.
0
Comment
Question by:ssenior
  • 4
  • 4
  • 3
  • +3
16 Comments
 
LVL 4

Expert Comment

by:af500
ID: 9739476
first, what web server are you using?
0
 
LVL 4

Expert Comment

by:af500
ID: 9739479
What is this for? I don't really understand what you are trying to accomplish
0
 
LVL 7

Expert Comment

by:wsteegmans
ID: 9739547
You could use VB-Script and ASP-Pages ... You find an ASP tutorial here:
http://www.w3schools.com/asp/asp_intro.asp

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
%>
0
 

Author Comment

by:ssenior
ID: 9739817
Hi,

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
0
 
LVL 7

Expert Comment

by:wsteegmans
ID: 9740078
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.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9740093
Hi,

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

<html><head>
<script>

function doit(frObj)
{
  if (frObj.body.innerHTML.indexOf('someValue') != -1)
     document.images['theImage'].src = 'http://members.aol.com/grassblad/images/moiAvatar.jpg'
}
</script>
</head>
<body onload='doit(theFrame.document)'>
<img name='theImage' src="http://members.aol.com/grassblad/images/grassAvatar.jpg">
<iframe name='theFrame' src="myfile.txt"></iframe>
</body></html>

Vinny
0
 

Author Comment

by:ssenior
ID: 9740591
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 - http://www.codetoad.com/tabular_data_control.asp. 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!?

Thanks.

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 7

Expert Comment

by:wsteegmans
ID: 9740820
Maybe this link gives some extra info:
http://msdn.microsoft.com/library/default.asp?url=/workshop/database/tdc/overview.asp

FYI:
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:
http://www.microsoft.com/ntserver/techresources/appserv/optionpack/ntopdg.asp

Download it:
http://www.microsoft.com/ntserver/nts/downloads/recommended/NT4OptPk/default.asp
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9741493
Hi,

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>
   <TBODY>
     <TR>
       <TD ROWSPAN=2><DIV DATAFLD=Symbol ></DIV></TD>
       <TD><SPAN DATAFLD=field1></SPAN></TD>
     </TR>
     <TR>
       <TD><SPAN DATAFLD=field2></SPAN>
           <SPAN DATAFLD=field3></SPAN>
       </TD>
     </TR>
   </TBODY>
 </TABLE>
 <table border="1" datasrc=#tdcStrings>
  <tr><td>
  <span id='menutitle' tabindex='1'  datafld='Symbol' dataformatas='html'></span>
  </td></tr></table>
the text file contents:
Symbol,field1,field2,field3
four,1,2,3
five5,4,5,6
1234567890,7,8,9

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:
   <head>
  <script language='javascript' type='text/javascript' src='myfile.js'></script>
d) then test for the value of myFlag


Vinny
0
 

Author Comment

by:ssenior
ID: 9746942
Vinny,

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
etc..
etc..

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:

-----risk1--------risk2--------risk3------etc...
----red-img---green-img---amber-img---etc...

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!


0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9747741
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

Vinny
0
 

Author Comment

by:ssenior
ID: 9749576
Thanks to all of you for the help, I've cracked it!

Here is the code out of interest:

<html><head>
<title>Risk Indicators</title>

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

<script>

//var temp = "risk1";
//document.writeln(temp);

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);
            break;
      case 2:
            //status passed of 2 so change the given risk to amber
            show_amber(document, r);
            break;
      case 3:
            //status passed of 3 so change the given risk to red
            show_red(document, r);
            break;
      default:
            break;
      }
}

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

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

couldn't have done it without you.

cheers.

0
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 125 total points
ID: 9751763
Glad I helped

Vinny
0
 

Expert Comment

by:d420
ID: 10044499
PHP runs fine under apache on an unmodified NT installation... doesn't have all the bugs and security holes, either ;)

Anyways...

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.
0
 
LVL 21

Expert Comment

by:pinaldave
ID: 11411866
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.

pinaldave
EE Cleanup Volunteer
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Uploading files to the web server has become common part of almost any kind of web application. People use different technologies to solve this, but regardless of the technology used, it is always useful to have some kind of progress indicator shown…
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now