Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Allow user to save image from whiteboard drawing via form processing

    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:

    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.
    Last edited by kittrellbj; 07-22-2009 at 02:26 AM. Reason: P.S.

  • #2
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    // 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?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    kittrellbj (07-22-2009)

  • #4
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •