Doodle/Notes Control for AX7

As I’m in the process of learning what can and can’t be done in AX7, I’ve started porting a cloud-based forms system over to AX. One item I require is the ability to allow users to digitally sign documents using a pen or mouse, which is then “stamped” into the PDF document they are signing.

This requires some interesting JavaScript usage within an AX7 Extensible Control and I’ve learned quite a lot about how the Extensible Control Framework hangs together while doing so. In building the signature control I thought I’d give something back to the AX community and created a control that will no doubt be used extensively during those exciting project implementation meetings – a doodle control. Feel free to embed this into your own module or hide it as an Easter Egg if you want.

The basic container form code is shown below, and does nothing but instantiate our control:

[Form]
public class DoodleForm extends FormRun
{
    DoodleControl doodle;

    public void init()
    {
        super();
        doodle = this.design().addControlEx(classStr(DoodleControl),"DoodleControl1");
    }
}

 

The control itself is very simple as well, as shown below.

[FormControlAttribute("DoodleControl","resources/html/DoodleControl", classstr(FormBuildControl))]
class DoodleControl extends FormTemplateControl
{
    public void new(FormBuildControl _build, FormRun _formRun)
    {
        super(_build,_formRun);
        this.setTemplateId("DoodleControl");
        this.setResourceBundleName("resources/html/DoodleControl");
    }
}

 

Finally, the HTML code which is stored as a resource contains the JavaScript where all the fun happens. As AX7 uses HTML5 we can use the canvas object for our drawing. I’ve embedded the CSS styling into the button, and instead of sticking the JavaScript into another resource file just embedded it at the end of the page WHICH WORKS FINE. The only trick I learned is in order for it all to work, all the HTML and JavaScript needs to be wrapped in the main control DIV element.

<div id="DoodleControl">
    <div>
        <canvas id="canvas" width="600" height="400" style="border: 1px solid #ccc;"></canvas>
    </div>
    <p>
        <button id="clearDoodle" type="button" style="background-color:#7892c2;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:4px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;">New</button>&nbsp;
    </p>

    <script type="text/javascript">
		$(document).ready(function () {

    		var canvasWidth = 600;                           
    		var canvasHeight = 400;                           
    		var canvas = document.getElementById('canvas');
    		var context = canvas.getContext("2d");           
    		var clickX = new Array();
    		var clickY = new Array();
    		var clickDrag = new Array();
    		var paint;

    		canvas.addEventListener("mousedown", mouseDown, false);
            	canvas.addEventListener("mousemove", mouseXY, false);
            	document.body.addEventListener("mouseup", mouseUp, false);
            	canvas.addEventListener("touchstart", mouseDown, false);
            	canvas.addEventListener("touchmove", mouseXY, true);
            	canvas.addEventListener("touchend", mouseUp, false);
            	document.body.addEventListener("touchcancel", mouseUp, false);

    		function draw() {
        		context.clearRect(0, 0, canvas.width, canvas.height); 
        		context.strokeStyle = "#000000";  
        		context.lineJoin = "miter";       
        		context.lineWidth = 1;            

        		for (var i = 0; i < clickX.length; i++) {
            		context.beginPath();                               
            		if (clickDrag[i] && i) {
                		context.moveTo(clickX[i - 1], clickY[i - 1]); 
            		} else {
                		context.moveTo(clickX[i] - 1, clickY[i]);     
            		}
            		context.lineTo(clickX[i], clickY[i]);              
            		context.stroke();                                  
            		context.closePath();                               
        		}
    		}

    		$('#clearDoodle').click(
    			function clearSig() {
        			clickX = new Array();
        			clickY = new Array();
        			clickDrag = new Array();
        			context.clearRect(0, 0, canvas.width, canvas.height);
		});

		function addClick(x, y, dragging) {
        		clickX.push(x);
        		clickY.push(y);
        		clickDrag.push(dragging);
    		}

		function mouseXY(e) {
		   if (paint) {
            		addClick(e.pageX - this.offsetLeft, e.pageY - (this.offsetTop * 3), true);
            		draw();
        	   }
		}

		function mouseUp() {
			paint = false;
		}

		function mouseDown(e)
		{
        		paint = true;
        		addClick(e.pageX - this.offsetLeft, e.pageY - (this.offsetTop * 3));
        		draw();
		}
		});
    </script>
</div>

 

Finally, as shown in the screen below, we can doodle away and click the New button to clear the canvas.

Doodle

Enjoy!

 

Advertisements

3 thoughts on “Doodle/Notes Control for AX7

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s