Changing colour of buttons / icons...

SteveB_NI · 17 Jan 2006 at 01:39

I was just thinking about a system I'm contemplating designing which will aid the technician team in a working environment, for example a school or university.

Anyways one of the problems I discovered whilst working as said technician was the lack of recording problems associated with a workstation - a reported broken workstation would maybe be out of service until it was reported again - as it had been forgotten about etc.

Would it be possible, within a website, to have a button, or an icon, which when clicked changed colour - i.e. have 30 buttons to represent 30 workstations, which are all initially green (working ok), but an individual button's colour can be changed to red (not working) or orange (being repaired) depending on the status.

This would allow a webpage to display each computer suite in the school with 30+ coloured squares representing the computers.

I'm also thinking of having a feature which when an individual computer is selected, technical details (computer spec etc), alongside repair notes / fault notes can be displayed alongside.

Any ideas how I can achieve the colour changing icons would be appreciated! Thanks!

Ozias · 17 Jan 2006 at 08:46

You could use either javascript or server-side scripting to update the buttons (Some level of server-side scripting will be necessary to collect the status information). The easy way to collect status info on each computer would be to use a form page to manually update the status of each computer as and when it changes (this could include text boxes for details of faults and repair actions), the hard way would be to devise some system for automatically polling each computer for its status, using a database to store the status information

The reporting page could then draw information from the status database and then set the button colours/images accordingly. You could set this page up to either refresh at regular intervals using javascript, and/or refresh when a link or button is pressed on the page.

As for changing the colour of a button when you click on it:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;}
h1 {margin:0 0 1em 0;font-size:1em;}
ul {list-style-type:none;margin:0;padding:0;}
ul li {margin:0 5px 0 0;width:50px;float:left;}
ul li a {background-color:#CCCCCC;padding:2px;display:block;text-align:center;}
ul li a:link {text-decoration:none;border:1px dashed black;}
ul li a:visited {text-decoration:none;border:1px dashed black;}
ul li a:hover {text-decoration:none;border:1px solid black;}
ul li a:active {text-decoration:none;border:1px dashed black;}
ul li a.working {background-color:#00FF00;}
ul li a.failed {background-color:#FF0000;}
</style>
<script type="text/javascript">

// following array stores status of PCs
// working = true
// failed = false
var status = new Array(0,true,true,false,true,true,false,true,true,false,true,true);

function swap_class(objectElement,objectClass)
{
	document.getElementById(objectElement).className=objectClass;
	return true;
}

function toggle_status(objectPC)
{
	pcID = objectPC.id;
	pc = pcID.substring(2,pcID.length);

	pc_index = parseInt(pc,10);
	status[pc_index] = !status[pc_index];
	update_button(pc_index);
}

function initialize_status()
{
	for(n=1;n<11;n++)
	{
		update_button(n);
	}
}

function update_button(pcIndex)
{
		pcstatus = (status[pcIndex] == 1) ? 'working' : 'failed';
		swap_class('pc'+pcIndex,pcstatus);
}
</script>
</head>

<body onload="initialize_status()">
<ul>
	<li><a href="#" id="pc1" onclick="toggle_status(this);">PC1</a></li>
	<li><a href="#" id="pc2" onclick="toggle_status(this);">PC2</a></li>
	<li><a href="#" id="pc3" onclick="toggle_status(this);">PC3</a></li>
	<li><a href="#" id="pc4" onclick="toggle_status(this);">PC4</a></li>
	<li><a href="#" id="pc5" onclick="toggle_status(this);">PC5</a></li>
	<li><a href="#" id="pc6" onclick="toggle_status(this);">PC6</a></li>
	<li><a href="#" id="pc7" onclick="toggle_status(this);">PC7</a></li>
	<li><a href="#" id="pc8" onclick="toggle_status(this);">PC8</a></li>
	<li><a href="#" id="pc9" onclick="toggle_status(this);">PC9</a></li>
	<li><a href="#" id="pc10" onclick="toggle_status(this);">PC10</a></li>
</ul>
</body>
</html>

SteveB_NI · 17 Jan 2006 at 12:43

Hi Ozias,

Thanks for your reply - the more I thought about it last night the more I swayed towards the inserting information into a form, and updating the computer records that way. Although I could also look into the automatic polling of computers - that would be a good challenge.

That code appears to throw an error - I'm trying to find out whereabouts but I can't see anything wrong at the mo!

Thanks for your help, much appreciated.

Steven

Edit: Damn copy and paste - working now Thanks!

Changing colour of buttons / icons...

SteveB_NI

SteveB_NI

Ozias

Ozias

SteveB_NI

SteveB_NI