Help with idea

herghost · August 18, 2011

Hi all

I am looking for some help on how to achieve something. Basically I want a 50x50 square on a page where each 'square' can have its color changed. Once each colour has been changed I need to be able to count how many squares have there colour changed and save the new 50x50 square to a database.

How do I go about achieving the square to start with!

Cheers

xyph · August 18, 2011

Javascript is what you want.

Have a table, and on click, call a JS function that changes the bgcolor of that cell

Alternately, have a bunch of 50x50 gifs of different colors, and swap the src of that image onclick.

herghost · August 18, 2011

Thanks xyph

How easy would it be to save the whole image afterwards? squares that have not been changed would need to be able to be edited, while squares that have already been changed must be locked.

Psycho · August 18, 2011

How many colors are you allowing the user to select? Just one or are you going to have an advanced color picker. Also, what is the default color?

herghost · August 18, 2011

Hi Mjdamato, the color choice is not set yet, but I imagine its going to be around 64, with the default colour of white.

xyph · August 18, 2011

Fairly easy, are you wanting to store a picture on a per-user level?

xyph · August 18, 2011

Works a little slow right now, so I decided to take this one up on my own. Here's a complete script with database dump that'll track a user's choice.

I decided to go with a text column, so the actual grid count can be variable, and you don't have to deal with 2500 rows/columns per user.

<?php 

// This would obviously be generated from a login form or something
$userID = 1;
$db = new mysqli( 'localhost', 'root', '', 'db' );
$cells = 2500;
$cols = 50;

if( !empty($_POST['color']) && is_array($_POST['color']) ) {
$data = $db->escape_string( implode('|',$_POST['color']) );
$q = 'REPLACE INTO `grid` (`userid`,`data`) VALUES ("'.$userID.'","'.$data.'")';
if( !$db->query($q) ) $msg = 'Update query error';
}

?>
<html>
<head>
<script type="text/javascript">
	function changeColor( cell ) {
		switch (cell.style.backgroundColor) {
			case 'blue':
				cell.style.backgroundColor = 'yellow';
				break;
			case 'yellow':
				cell.style.backgroundColor = 'green';
				break;
			case 'green':
				cell.style.backgroundColor = 'white';
				break;
			default:
				cell.style.backgroundColor = 'blue';
		}
	}
	function changeMouse( cell ) {
		cell.style.cursor='pointer';
	}
	function submitGrid() {
		var form = document.getElementById('gridForm');
		var table = document.getElementById('grid');
		form.elements[0].disabled = true;
		form.elements[0].value = 'Please wait...';
		for ( var i = 0, row; row = table.rows[i]; i++ ) {
			var cells = row.getElementsByTagName('td');
			for( var j = 0; j < cells.length; j++ ) {
				var color, input = document.createElement('input');
				if( cells[j].style.backgroundColor == '' ) {
					color = 'white';
				} else {
					color = cells[j].style.backgroundColor;
				}
				input.setAttribute( 'type', 'hidden' );
				input.setAttribute( 'name', 'color[]' );
				input.setAttribute( 'value', color );
				form.appendChild(input);
			}
		}
		document.forms['gridForm'].submit();
	}
</script>
<style type="text/css">
	#grid td {
		width: 10px;
		height: 10px;
		border: 1px solid black;
		font-size: .1 em;
	}
</style>
</head>
<body>

<table id="grid"><tr>
<?php

$q = 'SELECT `data` FROM `grid` WHERE `userid` = "'.$userID.'"';
$c = array();
if( ($r = $db->query($q)) === FALSE ) $msg = 'Select query error';
else {
$row = $r->fetch_assoc();
$c = explode('|',$row['data']);
$r->free();
}
for( $i = 1; $i <= $cells; $i++ ) {
echo '<td ';
echo ( !empty($c[$i-1]) ) ? 'style="background-color:'.$c[$i-1].'" ' : '';
echo 'onmouseover="changeMouse(this)" onclick="changeColor(this)"> </td>';
if( $i % $cols == 0 && $i != $cells )
	echo '</tr><tr>';
}
?>
</tr></table>
<form id="gridForm" method="post" action="#">
<input type="button" value="Submit Grid" onclick="submitGrid()">
</form>
<?php if( !empty($msg) ) echo $msg; ?>
</body>
</html>
<?php 

/* DATABASE DUMP

CREATE TABLE IF NOT EXISTS `grid` (
  `userid` int(11) NOT NULL,
  `data` text NOT NULL,
  UNIQUE KEY `userid` (`userid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

*/

?>

herghost · August 18, 2011

Hi xyph, wow, thanks! Thats definitely above and beyond what I expected to get!

Thanks for getting me started, I will see what I can do with it from here, if I get stuck with some simple stuff ill post on here, however if it goes way over my knowledge are you available for some freelance work?

xyph · August 19, 2011

Always available for work, as long as your timeline isn't insanely strict... my job here take priority, but I don't mind working through the evening/weekends, especially with the summer we've been having here

PM me for that kind of stuff though. If you need more help, I can try to explain. Sorry the example isn't commented.

Glad I could help. Seemed like a fun challenge

MasterACE14 · August 19, 2011

I've tested out your script xyph out of curiosity, and just noticed a minor glitch(in Chrome anyway), if you click a square repeatedly very quickly, you can get the colour cyan, or sometimes the colour cyan with a yellow border.

xyph · August 19, 2011

That's you attempting to select the text in the cell with a double-click

This _can_ be disabled, but each browser does this slightly differently from what I understand. I like to avoid removing functionality anyways

Regardless, this was just a proof of concept. If I were coding this for production, I would probably have the user drag a color from a palette on to a square, or use a blank 1x1 GIF rather than a inside the cells.

Now that I think about it, you can probably just have an empty cell. I like to avoid empty cells, as the HTML spec doesn't say they need to be drawn, but I suppose once you style them, it's forced out. Removing the seems to have fixed the issue.

Edit - I take that back, IE9 won't draw the borders without the

Sign In

Help with idea

Recommended Posts

herghost

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

herghost

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

herghost

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

herghost

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

MasterACE14

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information