...

View Full Version : Allow user to save image from whiteboard drawing via form processing



kittrellbj
07-22-2009, 01:35 AM
I am trying to design a system that allows users to draw on a whiteboard with different colors, save their drawing into hidden input boxes in the form on the page, then they can click Save Logo to save it to process it through PHP. I have the whiteboard that allows them to draw, but I am lost as to how to get the thing to populate the hidden input boxes.

So, I have the following code:



<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
var color = 'red'; // default color
var columns = 20; // number of colums (X)
var rows = 16; // number of rows (Y)
var mouse = 0; // pressed mouse button

// register onLoad event with anonymous function
window.onload = function (){
table_create(); // create HTML table
table_events(); // attach event on table cells
// disable drag event for IE
document.body.ondragstart = function(e){return false}
// attach event handlers for onMouseDown and onMouseUp on drawing_table div element
document.getElementById('drawing_table').onmousedown = mousedown;
document.getElementById('drawing_table').onmouseup = function(e){mouse = 0}
}

// onMouseDown handler (attached to drawing_table div and td elements)
function mousedown(e){
// define event
var evt = e || window.event;
// needed for FF to disable dragging
if (evt.preventDefault) e.preventDefault();
// set pressed mouse button
if (evt.which) mouse = evt.which;
else mouse = evt.button;
// colorize pixel on mousedown event for TD element
if (this.tagName == 'TD' && mouse == 1) { this.style.backgroundColor = color; }
}

// create table HTML and attach to the div container
function table_create(){
var tbl = ''; // initialize table string
// open loops to create table rows and table cells
for (var i=0; i<rows; i++){
tbl = tbl + '<tr>';
for (var j=0; j<columns; j++) tbl = tbl + '<td id=' + j + '_' + i + '></td><input type="hidden" name=' + j + '_' + i + '>';
tbl = tbl + '</tr>\n';
}
// get reference to the drawing table div and attach created table
var div = document.getElementById('drawing_table');
div.innerHTML = '<table cellspacing="0" cellpadding="0">' + tbl + '</table>';
}

// add events to table cells
function table_events(){
// collect table cells from the drawing_table div element
var td = document.getElementById('drawing_table').getElementsByTagName('td');
// attach onMouseDown and onMouseOver event for collected table cells
for (var i=0; i<td.length; i++){
td[i].onmousedown = mousedown;
// colorize table cell if left mouse button is pressed
td[i].onmouseover = function (e){if (mouse == 1) this.style.backgroundColor = color}
}
}

// set color (input parameter is the reference of the colored table cell)
function set_color(obj){
color = obj.style.backgroundColor;
var tbl = document.getElementById('drawing_table').firstChild;
tbl.style.borderColor = color;
}
</script>
<style>
div#drawing_table table{border:2px solid red;border-collapse:collapse;cursor:default;}
div#drawing_table table td{width:16px;height:16px;border:1px solid #fafafa;}
div#colors {margin-top:5px;}
div#colors td{width:20px;height:20px;border:1px;cursor:pointer;}
</style>
<center>
Select a color and draw on the canvas. When done, hit save logo.
<form action=<?php echo $_SERVER['PHP_SELF']; ?> method="post">
<div id="drawing_table"></div>
<div id="colors">
<table>
<tr>
<td style="background-color: black" onclick="set_color(this)"></td>
<td style="background-color: gray" onclick="set_color(this)"></td>
<td style="background-color: silver" onclick="set_color(this)"></td>
<td style="background-color: white; border: 1px solid #ddd;" onclick="set_color(this)">&nbsp;</td>
<td style="background-color: red" onclick="set_color(this)"></td>
<td style="background-color: purple" onclick="set_color(this)"></td>
<td style="background-color: fuchsia" onclick="set_color(this)"></td>
<td style="background-color: green" onclick="set_color(this)"></td>
<td style="background-color: lime" onclick="set_color(this)"></td>
<td style="background-color: olive" onclick="set_color(this)"></td>
<td style="background-color: yellow" onclick="set_color(this)"></td>

<td style="background-color: orange" onclick="set_color(this)"></td>
<td style="background-color: blue" onclick="set_color(this)"></td>
<td style="background-color: navy" onclick="set_color(this)"></td>
<td style="background-color: teal" onclick="set_color(this)"></td>
<td style="background-color: aqua" onclick="set_color(this)"></td>
</tr>
</table>
<input type="submit" name="submit_logo" value="Save Logo"></form>
</div>
</center>


What I am trying to do is use the function mousedown(e) to include an event to update a hidden input box with the value of the TD's background color that the hidden input field is attached to, so that it can be tracked when the user hits Save Logo at the bottom of the page. When they hit Save Logo, I want the form to post to itself, go through each of the input hidden fields and capture the color for each table cell, then generate an image based on the generated array, save it to a file on the server with the user's $_SESSION['userid'] as the filename + .jpg.

The problem is, though, that I do not know how to tell JavaScript to do this in the function mousedown(e) code. Also, look in the function table_create and see if I am naming the hidden input boxes correctly; not sure if it will generate the wanted result.

Just a note: I can handle all the PHP handling of the form, I just need help with the Javascript.

Thanks for all help on the matter in advance. :)

Edit: I attached the entire script/page to this post because so many functions rely on each other to operate, and I'm not exactly sure which function will need to be modified to get the desired result. Also, you can copy the code to a .php file to see what it looks like (as that may assist in demonstrating exactly what I'm trying to do, visually).

Edit 2: I suppose what I need to find is how to get the JavaScript to assign a value to the hidden input field that has the same id as the TD field that it needs to be linked to.

kittrellbj
07-22-2009, 03:40 AM
Okay, I think I have made a step forward on this, but it's not returning anything when I post the form. (I have the PHP setup correctly)

The code I have added to function(e) is:



// onMouseDown handler (attached to drawing_table div and td elements)
function mousedown(e){
// define event
var evt = e || window.event;
// needed for FF to disable dragging
if (evt.preventDefault) e.preventDefault();
// set pressed mouse button
if (evt.which) mouse = evt.which;
else mouse = evt.button;
// colorize pixel on mousedown event for TD element
if (this.tagName == 'TD' && mouse == 1)
{ this.style.backgroundColor = color;
document.getElementsByID(this.name).value = color; // added this line
}
}


Any thoughts?

vwphillips
07-22-2009, 12:51 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<BODY>
<script type="text/javascript">
var color = 'red'; // default color
var columns = 20; // number of colums (X)
var rows = 16; // number of rows (Y)
var mouse = 0; // pressed mouse button

// register onLoad event with anonymous function
window.onload = function (){
table_create(); // create HTML table
table_events(); // attach event on table cells
// disable drag event for IE
document.body.ondragstart = function(e){return false}
// attach event handlers for onMouseDown and onMouseUp on drawing_table div element
document.getElementById('drawing_table').onmousedown = mousedown;
document.getElementById('drawing_table').onmouseup = function(e){mouse = 0}
}

// onMouseDown handler (attached to drawing_table div and td elements)
function mousedown(e){
// define event
var evt = e || window.event;
// needed for FF to disable dragging
if (evt.preventDefault) e.preventDefault();
// set pressed mouse button
if (evt.which) mouse = evt.which;
else mouse = evt.button;
// colorize pixel on mousedown event for TD element
if (this.tagName == 'TD' && mouse == 1) { this.style.backgroundColor = color; }
}

// create table HTML and attach to the div container
function table_create(){
var tbl = ''; // initialize table string
// open loops to create table rows and table cells
for (var i=0; i<rows; i++){
tbl = tbl + '<tr>';
for (var j=0; j<columns; j++){
var ip=zxcFormField('INPUT',j + '_' + i,'hidden');
document.forms[0].appendChild(ip);
tbl = tbl + '<td id=' + j + '_' + i + '></td>';
}
tbl = tbl + '</tr>\n';
}
// get reference to the drawing table div and attach created table
var div = document.getElementById('drawing_table');
div.innerHTML = '<table cellspacing="0" cellpadding="0">' + tbl + '</table>';
}

function zxcFormField(tag,nme,type){
var el;
try {
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}

// add events to table cells
function table_events(){
// collect table cells from the drawing_table div element
var td = document.getElementById('drawing_table').getElementsByTagName('td');
// attach onMouseDown and onMouseOver event for collected table cells
for (var i=0; i<td.length; i++){
td[i].onmousedown = mousedown;
// colorize table cell if left mouse button is pressed
td[i].onmouseover = function (e){
if (mouse == 1){
this.style.backgroundColor = color;
document.forms[0][this.id].value=color;
}
}
}
}

// set color (input parameter is the reference of the colored table cell)
function set_color(obj){
color = obj.style.backgroundColor;
var tbl = document.getElementById('drawing_table').firstChild;
tbl.style.borderColor = color;
}
</script>
<style>
div#drawing_table table{border:2px solid red;border-collapse:collapse;cursor:default;}
div#drawing_table table td{width:16px;height:16px;border:1px solid #fafafa;}
div#colors {margin-top:5px;}
div#colors td{width:20px;height:20px;border:1px;cursor:pointer;}
</style>
<center>
Select a color and draw on the canvas. When done, hit save logo.
<form action=<?php echo $_SERVER['PHP_SELF']; ?> method="post">
<div id="drawing_table"></div>
<div id="colors">
<table>
<tr>
<td style="background-color: black" onclick="set_color(this)"></td>
<td style="background-color: gray" onclick="set_color(this)"></td>
<td style="background-color: silver" onclick="set_color(this)"></td>
<td style="background-color: white; border: 1px solid #ddd;" onclick="set_color(this)">&nbsp;</td>
<td style="background-color: red" onclick="set_color(this)"></td>
<td style="background-color: purple" onclick="set_color(this)"></td>
<td style="background-color: fuchsia" onclick="set_color(this)"></td>
<td style="background-color: green" onclick="set_color(this)"></td>
<td style="background-color: lime" onclick="set_color(this)"></td>
<td style="background-color: olive" onclick="set_color(this)"></td>
<td style="background-color: yellow" onclick="set_color(this)"></td>

<td style="background-color: orange" onclick="set_color(this)"></td>
<td style="background-color: blue" onclick="set_color(this)"></td>
<td style="background-color: navy" onclick="set_color(this)"></td>
<td style="background-color: teal" onclick="set_color(this)"></td>
<td style="background-color: aqua" onclick="set_color(this)"></td>
</tr>
</table>
<input type="submit" name="submit_logo" value="Save Logo"></form>
</div>
</center>
</body>

</html>

Note recommend that names/Ids start with a letter

kittrellbj
07-22-2009, 12:57 PM
Hi,

Just as you were posting your message, I was playing with my code, and I found an easy way to do it. I created a function:



function saveLogo(obj){
var hidden = document.getElementById('drawing_table').getElementsByTagName('input');
var td = document.getElementById('drawing_table').getElementsByTagName('td');
for (var i=0; i<td.length; i++){
hidden[i].value = td[i].style.backgroundColor;
}
}


and attached it to the submit button itself. It cycles through all fields once the user is done drawing and sets the styles that way. I have learned quite a great deal from this little problem. :) Thank you for your help. Hopefully, all of this will end up helping someone else in the same predicament.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum