herghost Posted August 18, 2011 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/ Share on other sites More sharing options...
xyph Posted August 18, 2011 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259129 Share on other sites More sharing options...
herghost Posted August 18, 2011 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259132 Share on other sites More sharing options...
Psycho Posted August 18, 2011 Share Posted 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? Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259134 Share on other sites More sharing options...
herghost Posted August 18, 2011 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259135 Share on other sites More sharing options...
xyph Posted August 18, 2011 Share Posted August 18, 2011 Fairly easy, are you wanting to store a picture on a per-user level? Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259142 Share on other sites More sharing options...
xyph Posted August 18, 2011 Share Posted 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; */ ?> Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259184 Share on other sites More sharing options...
herghost Posted August 18, 2011 Author Share Posted 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? Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259198 Share on other sites More sharing options...
xyph Posted August 19, 2011 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259207 Share on other sites More sharing options...
MasterACE14 Posted August 19, 2011 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259216 Share on other sites More sharing options...
xyph Posted August 19, 2011 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/245141-help-with-idea/#findComment-1259233 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.