Menu
I need to write an application that accepts very simple doodles by users, kind of like in tenthousandcents and thesheepmarket.
For example, I might want users to write their name using their mouse.
Any suggestions?
I don't even need to host it myself. If there are services offered somewhere that I can just use that is fine.
524
It's not too difficult to put together a basic scribbling app using just html. I'll let you work out the details of making it production ready.
I'm using extjs here as a cross browser event framework, but you can use whatever you're comfortable with (jquery). I'm also using Raphael to get cross browser drawing functionality.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TestPage</title>
<script language="javascript" src="raphael-src.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script language="javascript">
scribbler = function (container, width, height) {
this.canvas = Raphael(container, width, height);
this.currentdraw = null;
Ext.get(container).on('mousedown', function(e) {
var el = Ext.get(container);
this.currentdraw = this.canvas.path({ stroke: "black", fill: "none", "stroke-width":4 });
this.currentdraw.moveTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}, this);
Ext.get(container).on('mousemove', function(e) {
var el = Ext.get(container);
if (this.currentdraw != null)
{
this.currentdraw.lineTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}
}, this);
Ext.get(container).on('mouseup', function(e) {
this.currentdraw = null;
}, this);
}
var scribble;
Ext.onReady( function()
{
scribble = new scribbler("container", 800,600);
}
);
</script>
</head>
<body>
<div id="container" style="position:relative;border:1px solid black;width:640px;height:400px">
</div>
</body>
</html>
You'll have to record and store the various scribble lines in a form for submission. And ensure that the mouse pointer is correct all the time (it's a text bar under IE).
Anyway, enjoy.
PS. I've uploaded a working example including raphael and complete extjs2 libraries to drop.io (3Mb, 7zip).
PPS. I've uploaded a working example which is a basic (but pretty much a complete) control. See inquisitiveturtle.
67
As the other answers state, Flash would be the easiest method.
But don't rule canvas out. Through some nifty javascript and some some proprietary MS guff (VML) you can emulate canvas behaviour in IE.
If flash aint your thing (it sure aint mine) then this could be a really neat alternative.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
