TinyDoodle Code
Simplistic sketching program for J2ME platform
Status: Beta
Brought to you by:
xwindows
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <meta name="author" content="Nutchanon Wetchasit"> <title>TinyDoodle</title> </head> <body> <h1>TinyDoodle</h1> <p> TinyDoodle is a simplistic sketching program for <a href="http://en.wikipedia.org/wiki/Java_Platform%2C_Micro_Edition">J2ME platform</a>, geared toward low resolution display, support all sort of touchscreen (non-touch screen is also supported). It saves and loads sketch image in <a href="http://en.wikipedia.org/wiki/Wireless_Application_Protocol_Bitmap_Format">Wireless Bitmap (WBMP)</a> format. </p> <p> This program provides just minimal function required for sketching: 3 sizes of black pen tool and white eraser tool, with a fixed-size white canvas. (Just like pencils, erasers and paper in real life). </p> <p> Project website: <a href="http://tinydoodle.sourceforge.net/">http://tinydoodle.sourceforge.net/</a> </p> <h3>Contents</h3> <ul style="list-style-type:none"> <li><a href="#background">1. Background</a> <li><a href="#install">2. Installation</a> <ul style="list-style-type:none"> <li><a href="#requirement">2.1 System Requirement</a> <li><a href="#compile">2.2 Compiling</a> <li><a href="#installing">2.3 Installing</a> </ul> <li><a href="#run">3. Running</a> <ul style="list-style-type:none"> <li><a href="#canvas">3.1 The Main Canvas</a> <li><a href="#drawingmode">3.2 Drawing Modes</a> <li><a href="#save">3.3 Saving a Doodle</a> <li><a href="#open">3.4 Opening a Doodle</a> </ul> <li><a href="#author">4. Author</a> </ul> <h2><a name="background"></a>1. Background</h2> <p> As I like to draw whenever I got bored, carrying papers or sketchbook around becomes more a burden (especially when I want to keep some of sketches only to myself). I turned toward stylus-based PDA phone I have, and write a program that allows me to draw doodles on it instead. It saves to file, so I can pick up and continue drawing, or delete them whenever I want. After several revision, this program became a release version, and I named it TinyDoodle. </p> <p> For a particular reason that this program is implemented as J2ME application rather than Android application is, I don't want to throw away those old (but otherwise fully-functional) mobile device which would contribute to electronic wastes, and I think Android platform already have plenty of applications that do this task. </p> <h2><a name="install"></a>2. Installation</h2> <h3><a name="requirement"></a>2.1 System Requirement</h3> <p> TinyDoodle runs on mobile devices (phone, PDA, etc.) that supports at least J2ME MIDP 2.0 CLDC 1.0 with <a href="https://jcp.org/en/jsr/detail?id=75">PDA Profile (JSR 75, for file access)</a>. Touch screen with pointer dragging support is recommended, but optional. Any screen resolution will do, but high resolution (higher than 800x480) is <em>not recommended</em> as you'll have difficulties with small-sized tools. </p> <p> Drawing modes available for different kinds of screen: </p> <ul> <li>Touch screen with pointer dragging: <a href="#freehand">Freehand</a>, <a href="#linedraw">Line drawing</a>, <a href="#etchasketch">Etch A Sketch</a> <li>Touch screen without pointer dragging: <a href="#linedraw">Line drawing</a>, <a href="#etchasketch">Etch A Sketch</a> <li>Non-touch screen: <a href="#etchasketch">Etch A Sketch</a> </ul> <p> TinyDoodle binary release is compiled on Sun's <a href="http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javame-419430.html#j2me_wireless_toolkit-2_2-oth-JPR">J2ME Wireless Toolkit 2.2</a>, and mainly tested with Sun's <a href="http://davy.preuveneers.be/phoneme/">PhoneME Feature MIDP</a> runtime on <a href="http://en.wikipedia.org/wiki/HTC_Touch_HD">HTC Touch HD</a> (<a href="http://en.wikipedia.org/wiki/Windows_Mobile">Windows Mobile</a> 6.1 Professional). </p> <h3><a name="compile"></a>2.2 Compiling</h3> <p> If you downloaded source code version of TinyDoodle, you can just unpack the archive to "<code>apps</code>" subfolder of your J2ME Wireless Toolkit 2.2 directory (On Microsoft Windows, it's <code>C:\WTK22\apps</code> by default). Then start J2ME Wireless Toolkit, and choose "Open Project", you'll see that <code>tinydoodle</code> was listed among other projects. Then you could build TinyDoodle and run them in emulators, or create a package for running on a real device (<em>Project > Package > Create Package</em>). </p> <p> If you used later version of J2ME Wireless Toolkit like <a href="http://www.oracle.com/technetwork/java/download-135801.html">2.5.2</a>, the process is pretty much the same. But I can't say much about Oracle's <a href="http://www.oracle.com/technetwork/java/embedded/javame/javame-sdk/downloads/java-me-sdk-3-0-1849684.html">Java ME SDK 3.0</a> which I've never used. J2ME Wireless Toolkit 1.x cannot be used, since it supports only MIDP 1.0. </p> <p> Although it might be possible to build and package TinyDoodle manually using only free software <a href="http://openjdk.java.net/">OpenJDK</a>/<a href="http://icedtea.classpath.org/">IcedTea</a> or even with <a href="http://gcc.gnu.org/java/">GCJ</a> (and use <a href="http://proguard.sourceforge.net/">ProGuard</a> for class pre-verification), I have not tested this method, so I won't elaborate them here. </p> <h3><a name="installing"></a>2.3 Installing</h3> <p> Once you have a hand on <code>tinydoodle.jad</code> and <code>tinydoodle.jar</code> (by building them yourself, or downloading from project website), you can upload these two file to your phone or PDA via any convenient means (but save both file to the same location). Then, you can launch your phone's file browser, browse to these file, then select <q><code>tinydoodle.jad</code></q>. If your phone is configured correctly, it will begin the installation process. </p> <p> But if your device is some kind of PDA or smartphone, make sure that you have a proper J2ME runtime environment first. (It should be named <q><em>MIDlet Manager</em></q>, <em>MIDlet</em>-something, <em>MIDP</em>-something or <em>J</em>-something in your program list. If your device uses Windows Mobile or Windows CE, you could use PhoneME, see above) Then start your J2ME runtime environment program, choose something like <em>Browse</em> or <em>Install</em>, browse to the <code>tinydoodle.jad</code> you uploaded, and choose it. It should start the installation. </p> <p> If you are sure that your phone has J2ME support, but it happened to be a stubborn type that won't allow you to install applications locally (some of feature phones are). You can alternatively open your phone's web browser to <code><a href="http://tinydoodle.sourceforge.net/0.2.0/tinydoodle.jad">http://tinydoodle.sourceforge.net/0.2.0/tinydoodle.jad</a></code> and it will start the installation. </p> <h2><a name="run"></a>3. Running</h2> <p> Although you shouldn't need a manual to use TinyDoodle. It will always be here for reference. </p> <h3><a name="canvas"></a>3.1 The main canvas</h3> <p> Once you started TinyDoodle, you will be presented with a blank white canvas, with a blinking black pixel (<em>cursor</em>) at middle of the screen. For non-touch device (or if you planned to use <a href="#etchasketch">Etch A Sketch</a> way of drawing) this cursor shows the current position of your <em>tool</em>, which could be a <em>pen</em> (default) or an <em>eraser</em>, with a width of 1, 3, or 5 pixels (default is 1 pixel). For touch device, the cursor will follow your stylus' touch location, you don't need to pay much attention to it. </p> <p> Now, if you're using touch screen, you can <a href="#freehand">just draw</a>. If your phone is non-touch, <a href="#etchasketch">use keypad</a>. <em>Pen</em> tool will draw in black color, <em>eraser</em> tool will draw in white color, you can change current tool using menu. </p> <p> To discard current doodle, if this is a new doodle (not saved), just use <em>Reload</em> menu. If you already <a href="#open">loaded</a> a doodle from file (or already <a href="#save">saved</a> to file), and want to start with a new one, just exit and start TinyDoodle again. </p> <p> <strong>Note:</strong> Canvas size will be fixed to your device's screen area. If you <a href="#open">loaded</a> a doodle from a device with different resolution, it will be expanded or cropped to fit in current screen. If you <a href="#save">re-save</a> it, the output will be expanded/cropped like what you saw on the screen, beware. </p> <h4>Menu Items</h4> <ul> <li><em>Eraser</em> - it will change current tool to an eraser. (Default is a pen) If current tool is an eraser, this menu will be <em>Pen</em> instead, and selecting it will change current tool to a pen. <li><em>Stroke Size (1px)</em> - it will change current tool's stroke size to 3 pixels. Once selected, this menu will be <em>Stroke Size (3px)</em>. Selecting it again will change stroke size to 5 pixels and change the menu to <em>Stroke Size (5px)</em>. Selecting it third time will change stroke size back to 1 pixel. When the tool was changed, stroke size will be remembered separately for each tool. <li><em>Save</em> - this will <a href="#save">save current doodle</a> to file. <li><em>Load</em> - this will <a href="#open">load a new doodle</a> from file. <li><em>Reload</em> - this will reload current doodle from file, discarding all your changes after the last save. If the current doodle was never saved to file (and was not <a href="#open">loaded from file</a>), it will reload a blank canvas. <li><em>Line drawing mode</em> - this will activate <a href="#linedraw">Line Drawing Mode</a>, use this if your device don't have pointer dragging support. If you're already in Line Drawing Mode, this menu will be <em>Freehand mode</em> instead, and selecting it will turn off the Line Drawing Mode. <li><em>Invert</em> - this will invert colors in the doodle, turning black area to white and white area to black. <li><em>About</em> - show TinyDoodle version, canvas information, and your device's capabilities. <li><em>Exit</em> - exit from TinyDoodle. </ul> <h3><a name="drawingmode"></a>3.2 Drawing Modes</h3> <h4><a name="freehand"></a>Freehand Mode</h4> <p> This is a default mode on touch screen. You can use your stylus to draw on the screen as if it was a pencil. </p> <h4><a name="linedraw"></a>Line Drawing Mode</h4> <p> If your touchscreen don't work with Freehand Mode (or you want to draw some straight lines), select <em>Line drawing mode</em> on the menu. Then you can tap at where the line would start, then another tap at where the line would end, and a line will be drawn for you. </p> <h4><a name="etchasketch"></a>Etch A Sketch Mode</h4> <p> This exists as a main drawing mode for non-touch device (or for ones who want to turn drawing into some kind of adventure). This mode is always available and doesn't need a menu to activate. You can just use <kbd>Up</kbd>, <kbd>Left</kbd>, <kbd>Right</kbd> and <kbd>Down</kbd> key to move the cursor, and <kbd>Fire</kbd> (or <kbd>Enter</kbd>) key to toggle on/off your tool. (On devices with phone keypad, these keys will be number <kbd>2</kbd>, <kbd>4</kbd>, <kbd>6</kbd>, <kbd>8</kbd> and <kbd>5</kbd> respectively) </p> <h3><a name="save"></a>3.3 Saving a Doodle</h3> <p> When you want to save the doodle you made, you can select <em>Save</em> menu from the canvas. Then you will be presented with a screen listing files and folders on the device. Items trailing with <q><code>/</code></q> means folder, which you can go inside it using <em>Select</em> menu. Screen's title will be the name of current folder you're in. Menus available in this screen are: </p> <ul> <li><em>Select</em> - get inside the selected folder. If selected item is not a folder, it will behave like <em>Save</em>. <li><em>Save</em> - save the doodle to current folder. <li><em>Up</em> - get out of current folder. If you're already backed off from all folders, you will see <em>Cancel</em> instead, which will lead you back to <a href="#canvas">the canvas</a>. </ul> <p> Once you used <em>Save</em> menu (or used <em>Select</em> on non-folder item) from this screen, you'll be asked to enter the file name to save doodle to. Once you're done, select <em>Save</em> again which will (obviously) save your doodle and take you back to the canvas. If you changed your mind, you can select <em>Cancel</em> and you'll be back at the folder view. <p> <strong>Note:</strong> you don't need to enter <code>.wbmp</code> file extension; TinyDoodle will do that automatically. But if you <em>insist</em> to save the doodle with different file extension or no extension at all, you can. Just uncheck <em>Add .wbmp extension</em> option under filename prompt before selecting <em>Save</em>. (You're weird, man) </p> <p> If you have already saved the doodle once (or <a href="#open">loaded</a> from an existing file), you won't be asked to browse through file system again. Instead, you will be directed to that very folder you last saved the doodle, and that doodle file will be selected for you. If you want to save to the same file, just select <em>Select</em> or <em>Save</em> menu, the filename will be already filled, and select <em>Save</em> again to save the file. If you want to save as another file, just browse to another folder, or change filename to a differrent one once prompted. (But don't remove <code>.wbmp</code> suffix unless you meant to) </p> <h3><a name="open"></a>3.4 Opening a Doodle</h3> <p> When you want to continue drawing on a doodle that you <a href="#save">saved</a>, or just want to look at your own handiwork, you can load a doodle from file using <em>Load</em> menu from the canvas. Then you will be presented with a screen listing files and folders on the device. (Similar to the screen appeared on using <em>Save</em> menu) Items trailing with <q><code>/</code></q> means folder, which you can go inside it using <em>Select</em> menu. Screen's title will be the name of current folder you're in. Menus available in this screen are: </p> <ul> <li><em>Select</em> - load a doodle from the selected file. If selected item is a folder, get inside the selected folder instead. <li><em>Up</em> - get out of current folder. If you're already backed off from all folders, you will see <em>Cancel</em> instead, which will lead you back to <a href="#canvas">the canvas</a>. </ul> <h2><a name="author"></a>4. Author</h2> <p> TinyDoodle is written by Nutchanon Wetchasit, released as <a href="http://www.gnu.org/philosophy/free-sw.html">Free Software</a> under <a href="http://www.gnu.org/licenses/gpl.html">GNU GPL</a>.<br> For legal information, see <a href="LICENSE.html">LICENSE.html</a> and <a href="COPYING.html">COPYING.html</a>. </p> </body> </html>