NUIpad : Multitouch Editor v 0.1

N.B : If you dont want to go through the gossip and just try it please see the end of the post where i have links

Well I was away for quite a few days and was out of any work . So i decided to create something simple and got this idea. I don’t know if someone else has done something like this or not but I am quite happy that I was able to do this  .I dont tell that this is a great application but as for me as new to Actionscript 3.0 and multitouch world this is great .

So enough boasting   . Coming over to the application this is basically an multitouch editor which has an text area where we insert text using a Multitouch Keyboard . this is how it looks

Well as you open difference instances of this you will get the MTPad with different colors (because i could not decide which color will be the best i put it random ) . Let me know if you want it to be of a particular color ( give me the uint code of the color if possible ).  In this editor you can change the font size and also the format with which you can write (i.e make it bold or italic or underlined or a combo of all these ) . The information of the text will appear in the textboxes with Grey background ( The ones with containing “A” and 20 in the figure ) . The “Keyboard” key will toggle the visibility of the keyboard . The “X” button at right bottom corner will close (of course) . For now the Caps key will substitute the work of the SHIFT key.The keyboard and the editor can be re-sized to any extent (Hail RotableScalable).the class RotatableScalable may not be bug free(I have to find one yet) but surely is very useful class in AS3 programming in multitouch.It really cuts down your work.

Well for now these are the features yet to be implemented and i know it lacks many features .

Features it does not have yet :

• Ths shift key in the keyboard is missing. This is because of the bug i discussed in this thread . Well I think i can fix it now . If possible will fix it in next release .
• some of the combination of keys do not work like “ctrl+A” , “alt+f4″ .
• A scroller.
• You can not insert in the middle of any place (There is no work of the up,down,left right key as there is no cursor/carat) .
• Also we can set the paragraph style which is not implemented yet .
• Saving into text file . Of course there is no meaning in creating a text file unless until i can save it to somewhere . Well i have implemented (and removed) a system where i can save the file to text file because that needs the mouse interaction (so removed). Till nowi dont understand how to do this . I am thinking of executing a batch file or shell script with the whole text as argument . Well but this will create a number of files  If anyone has any other idea please welcome .(Language : AS3)

• I am thinking of having an icon of MTPad, which on click we can have multiple instances of this editor running .

Till now I have done this much. I have tried and fixed any bug I found . Still I can not guarantee that this will be bugfree. So any bugs found please let me know . Will try to fix that .

Basically there is something i want to tell you why i chose to keep this name.First i thought i will keep it viMT but then thought well if i do tat half the vi supporter will kill me as it is nothing in front of that . Then i thought the name as MTEdit which sounds quite like gedit (gnome text editor) . But gedit has quite nice facilities  like indenting and highlighting then suddenly i thought of the notepad (Windows notepad) . I think this was a suitable name and so kept it MTPad . Like notepad i can change the text size (of course with much ease). Of course this is not nearer to notepad (given it can select text and replace, save,open and you can change the text color and font) but it surely is closer to notepad. (NO OFFENCE)

Regarding the code part I will share them once i have documented them properly (will require 1 or 2 days at max). But now i surely want to tell that i have made a MTButton class, a MTCustomKeyboard class,a MTFullKeyboard class and an MTEditor class. I have tried to make these classes very configurable . I will discuss about the code and how to use all these classes in your application .

Also i wanted to tell you that the whole application was developed with pure code using FlashDevelop and i never used the flash IDE. FlashDevelop is a great IDE and is very fast compared to flash.I just want to tell everyone who works with flash please try FlashDevelop an opensource and free IDE for ActionScript.

I would like people to try it out on their MT setup if they can as i dont have one till date (Tell me any change i need to make).Please let me know what you feel about the application (may be good or bad ,both are welcome,Also bugs and what more can be done) through comments. Of course your comment will surely be helpful  and encourage me to work harder on it .

DOWNLOAD THE APPLICATION

download swf : Need to set the flash player security settings

download exe: Click on free download (wait for 60 secs that sucks).Just run and enjoy

The sourcecode with all the classes will be shared in a day or two after documenting it properly with instruction how to use them properly in your work .

Getting Started with MultiTouch ActionScript 3.0 Programming in FlashDevelop

Hello everyone , as I have said I have a lot of interest in programming for MultiTouch applications . Thats why i got started off with ActionScript 3.0 programming and also with python (PyMT framework). Both are really sweet . But as i know java and javascript I am a little biased towards ActionScript now . I have started programming in both. If you are also new to this and want to get a kick start then nuigroup.com/forums would be the best place for you(check all the sticky posts).

In this post I will be writing about the ActionScript 3.0 programming . If you have a flash IDE(CS3 or CS4) and want to get started off then check this. There check all the sticky posts , they surely will be very helpful. Also you may be interested in the wiki entry where it is well explained step-by-step.

Well as professionals suggest to start with Flash Develop and everyone will not be able to use flash CS4 or CS4(looking at its cost) I have got started with FlashDevelop .This post by Christian Moore got me started with Flash-Develop’s environment .But I was not able to start with the touchlib’s programming . After some issues and changes It all works fine for me now. So i decided to post a tutorial on this, so that other newbies like me do not get into same trouble .

So to get the touchlib’s AS3 library for multi-touch go to this page and download the /AS3 folder to your computer as per the steps mentioned there. Let us called the folder MTProject. So now my MTProject folder will have the folders named “ext“,”int” and “src” and a file called flashapp.flp . Then start a new AS3 project in flashDevelop and give the location as the MTProject folder. Now check that your project contains all the folders(i.e ext,int,src and some extra made by FLashDevelop).So now right-click on the src folder.Add a new class and give it a name “MyTouchApp”.Now go to project->properties->Add Classpaths and then add the “int” and “ext” folders. This is the step 7 in this post. Now you can paste the codesnippets in the post and change the package statement i.e make the statement package app.demo.MyTouchApp as only package. Now right click on the file and select “Always Compile” . Now if out of curiosity if you run the project , you will find it working fine but not reacting to the touch events (i.e circles will not appear in the very first code). This is where i got stuck.Then i found out that we have not done the step 14,15 and 16.So to solve the problem you have to create a new Sprite which is same as the rectangle drawn in flash. The code snippet for adding a rectangle is

var rect:Sprite    = new Sprite();
rect.graphics.beginFill(0x000000,1);
rect.graphics.drawRect(0,0,1024,768);
this.addChild(rect);

Now if you run the program it should run fine. Now if you also want to follow the step 4 of the original post you can use the code

[SWF(width="1024", height="768", frameRate="31", backgroundColor="#FFFFFF")]

Now you should have no problem with the FlashDevelop . So i will conclude by posting the full code of the MyTouchApp.as .

package { //adds a circle where you touch (no resize)

import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.geom.*;

[SWF(width="1024", height="768", frameRate="31", backgroundColor="#FFFFFF")]

public class MyTouchApp extends Sprite {

public function MyTouchApp() {

//--------connect to TUIO-----------------
TUIO.init(this,'localhost',3000,'',true);
trace("MyTouchApp Initialized");
//----------------------------------------

var bg:Sprite    = new Sprite();
bg.graphics.beginFill(0x000000,1);
bg.graphics.drawRect(0,0,1024,768);
this.addChild(bg);

addEventListener(TouchEvent.MOUSE_DOWN, touchDown); //run touchdown, when touched
}

public function touchDown(e:TouchEvent):void{

var curPt:Point = parent.globalToLocal(new Point(e.stageX, e.stageY)); //convert touch points to x,y

var circle:Sprite = new Sprite(); //create a new sprite

circle.graphics.lineStyle(10, 0xff0000); //set line width to 10px and red
circle.graphics.drawCircle(0,0,40); // draw a 40px circle
circle.x = curPt.x; //put it where touch is (x cord)
circle.y = curPt.y; //put it where touch is (y cord)

addChild(circle); //add the circle where touch happened

}
}
}

Please suggest to improve and if any problems in following the post ,feel free to ask . Thanks Everybody.Even i am a newbie and I need suggestion .