Home/ Questions/Q 176795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T13:56:27+00:00

I need to write an application that accepts very simple doodles by users, kind

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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.

    • 0