I’m doing a mock up and need to illustrate drawing signatures with the mouse within a rectangular space (OnMouseDown, draw with mouse, OnMouseUp, drawing stopped). I’m wondering if there’s a bit of code for this that could be dropped in within my project??? Also, I don’t necessarily even need to save the signature drawn… just need to allow the user to draw with the mouse. I’ll probably also include a “Clear” button to erase the signature and begin again (which I think I can figure that part out).
That sounds like an interesting prototype. Axure RP doesn’t have a built-in event that will let you draw freely in the browser output, but it looks like there are some plugins out there that do what you want:
If you’re hosting the prototype on AxShare, you can try using the AxShare Plugins feature to drop HTML or Javascript plugins into your prototype. While we can’t assist much with troubleshooting issues with custom code, we do have some basic steps available that could help you get started:
Another potential route would be to find a site that has the digital signature element ready to test, and then linking to that page with an inline frame.
I have been using AxShare, and I feel like I’m close to the solution, but I can’t quite get there. I can’t seem to get it to work inside of a dynamic panel. I’ve created a new plugin within Axshare with this content:
<canvas id=“c” width=“500” height=“300”></canvas>
Then, I have this code in the OnPageLoad event within a project:
javascript:
var el = document.getElementById(‘c’);
var ctx = el.getContext(‘2d’);
var isDrawing;
With this setup, I publish to Axure Share, and the drawing code above does actually work. It’s great, but… no matter what I try, I just can’t get the drawing to be inside of a dynamic panel. What am I missing? I’m thinking I have all the content, but I’m just not putting it in the right place. Any ideas?
I couldn’t tell you why the code doesn’t work when you point it at a dynamic panel, but I think I found a workaround. On one page, add the plugin to the end of the header and have that page’s OnPageLoad link to your javascript. Then, on the page where you want the digital signature to appear, put an inline frame inside of your dynamic panel and point it to the page where you put the OnPageLoad case. This should allow you to load that page’s digital signature canvas within the inline frame, which in turn is inside of the dynamic panel that you originally wanted to target. Hopefully that helps!
Whoa! With your tips, I’ve got it working. You’re awesome, Alyssa!
My challenge now is to reload the original page. In other words, the page that actually has the signature spot also has a “Clear” button. Clicking it should of course clear the signature. The only way I can think of performing this is to reload the original page that has the plugin and OnPageLoad event. I’ve searched around, and I’ve not spotted any good advice about how to reload one page by clicking a button that’s located on another page.
Refreshing the page with the plugin is the way that I would’ve done it if you’re trying to contain the “Clear” action within Axure RP’s built-in functionality. I took a quick look around to see if there’s a way to clear the canvas that you inserted with your AxShare plugin and it looks like the clearRect() method may be a start:
Thanks, Alyssa… I did however find a simpler solution. My “Clear” button has an OnClick event that opens my original page (that has the plugin) within the inline frame on my signature page. Re-opening this page effectively acts as a refresh and clears the canvas. Eureka!!!
@lyoung I followed the steps you indicated in your post, created plugin with canvas and copied javascript in Onpageload with the open “” case. But it doesn’t seem to work. Are there any other amendments that you have done and you might not have mentioned? If it’s not too much to ask, Is there any chance you could share the prototype?
Hello from the future! I was trying to prototype a drawable signature field myself, and really wanted to come up with a native Axure solution. I got close, and the result is kind of academically interesting but not terribly practical for my purposes. Posting it here in case it’s helpful for someone else.
Basically I’m using a repeater to populate a grid of “pixels” that can be turned on or off as the mouse cursor drags over them. It mostly works if you limit the number of repeater items and make your “pixels” large (mine are 15x15px). But since each item is responsible for checking to see whether the cursor is over it, and then turning itself on or off, it gets extremely slow the more pixels you add. So this version has kind of a retro 8-bit feel to it. It would be great if anyone has ideas for improving it!
Bare in mind the in order for the prototype to work you need to host it on axure share, and you have to add the page with the javascript to the plugin pages see attached.
Just throwing in some code I created for this previously. You can add this as an AxShare plugin or in an OpenLink action with javascript:. You also just need any widget in your project named canvas. There’s also a clear function you can call.
(() => {
var canvas = document.createElement('canvas');
var container = $axure('@canvas');
var containerEl = container.getElements()[0]
canvas.width = container.width();
canvas.height = container.height();
canvas.id = 'canvas';
containerEl.append(canvas);
var ctx = document.getElementById('canvas').getContext('2d');
var mousedown = false;
canvas.addEventListener('mousedown', ev => {
mousedown = true;
ctx.beginPath();
ctx.moveTo(ev.offsetX, ev.offsetY);
});
canvas.addEventListener('mousemove', ev => {
if (mousedown) {
ctx.lineTo(ev.offsetX, ev.offsetY);
ctx.stroke();
}
});
document.body.addEventListener('mouseup', ev => {
mousedown = false;
});
function clear() {
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.clear = clear;
})()
Hi, I tried to follow your hints adding the drawline.rp file to my project but I noticed that all the interactions of the box are set to “Nothing”; is this normal?
