nobigwords.ntxt.net » flex

playing AIR on Android

Piotr Tomaszewski — Thu, 19 Aug 2010 09:37:25 +0000

Keeping on with the simplest stuff and having innocent fun with touching a device :)

Multitouch in AIR 2.5 for Android

Piotr Tomaszewski — Mon, 16 Aug 2010 22:39:06 +0000

Quick and dirty test, which surprisingly says my Wacom/Win7 do not support multitouch, but the HTC Desire does. And that is where I meant it.
This app shows red circles, each under its finger. In my case, maximum two at the same time.

package
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TouchEvent;
	import flash.text.TextField;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;
 
	import mx.events.ResizeEvent;
 
	public class Android extends Sprite
	{
		private var lx:Number;
		private var ly:Number;
		private var bg:Sprite;
		private var sprites:Array = [];
		private var last:Sprite;
		private var tf:TextField;
 
		public function Android()
		{
			bg = new Sprite;
			addChild(bg);
 
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;			
			addEventListener(Event.RESIZE, handleStageResize);
 
 
 
			Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
			trace('multitouch support: ' + Multitouch.supportsTouchEvents);
 
			bg.addEventListener(TouchEvent.TOUCH_BEGIN, handleTouchBegin);
			bg.addEventListener(TouchEvent.TOUCH_END, handleTouchEnd);
			bg.addEventListener(TouchEvent.TOUCH_MOVE, handleMove);
 
 
			lx = this.stage.stageWidth * 0.5;
			ly = this.stage.stageHeight * 0.5;
 
			tf = new TextField;
			tf.mouseEnabled = false;
 
			tf.width = 400;
			tf.height = 200;
			tf.y = ly;
 
			addChild(tf);
			tf.text = 'multitouch support: ' + Multitouch.supportsTouchEvents;
 
			layout();
		}
 
		private function handleStageResize(e:Event):void
		{
			layout();			
		}
 
		private function layout():void
		{
			var g:Graphics = bg.graphics;
			g.clear();
 
			g.beginFill(0xAAAAA0,1);
			g.drawRect(0,0,stage.stageWidth, stage.stageHeight);
			g.endFill();			
 
		}
 
		private function getNewSprite():Sprite
		{
			var s:Sprite = new Sprite;
			s.graphics.beginFill(0xff3333,1);
			s.graphics.drawCircle(0,0,50);
			s.graphics.endFill();
			s.mouseEnabled = false;
 
 
			last = s;
			return s;
		}
 
		private function handleClick(e:MouseEvent):void
		{
			trace('asdasd');
			lx = e.localX;
			ly = e.localY;
			//layout();
		}
 
		private function handleTouchBegin(e:TouchEvent):void
		{
			tf.text = 'id ' + e.touchPointID + ' t: ' + e.target;
			var s:Sprite;
			if(sprites[e.touchPointID]){
				s = sprites[e.touchPointID];
			}else{
				s = getNewSprite();
				sprites[e.touchPointID] = s;
			} 
			s.x = e.localX;
			s.y = e.localY;
			bg.addChild(s);
		}
 
		private function handleMove(e:TouchEvent):void
		{
			var s:Sprite = sprites[e.touchPointID];
			tf.text = 'id ' + e.touchPointID + ' t: ' + e.target;
			s.x = e.localX;
			s.y = e.localY;
		}				
 
		private function handleTouchEnd(e:TouchEvent):void
		{
			var s:Sprite = sprites[e.touchPointID];
			tf.text = 'id ' + e.touchPointID + ' t: ' + e.target;
		}		
	}
}

Air for my Desire

Piotr Tomaszewski — Sun, 15 Aug 2010 22:27:21 +0000

Now I’m proud. Setting up everything was quite a pain, and I still do not grasp the whole process. Nevertheless, the first interactive app, written in AS3, using Flash Builder, works fullscreen on my HTC Desire! The secret plan is to make an eye-and-ear-catching app that my 7-months baby girl could not turn off by random hand events… For now, the code was that simple:

package
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TouchEvent;
 
	import mx.events.ResizeEvent;
 
	public class Android extends Sprite
	{
		private var lx:Number;
		private var ly:Number;
		private var bg:Sprite;
 
		public function Android()
		{
			bg = new Sprite;
			addChild(bg);
 
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;			
			addEventListener(Event.RESIZE, handleStageResize);
			bg.addEventListener(MouseEvent.CLICK, handleClick);
			bg.addEventListener(TouchEvent.TOUCH_TAP, handleTap);
 
			lx = this.stage.stageWidth * 0.5;
			ly = this.stage.stageHeight * 0.5;
 
			layout();
		}
 
		private function handleStageResize(e:Event):void
		{
			layout();			
		}
 
		private function layout():void
		{
			var g:Graphics = bg.graphics;
			g.clear();
 
			g.beginFill(0x003333,1);
			g.drawRect(0,0,stage.stageWidth, stage.stageHeight);
			g.endFill();			
 
			g.beginFill(0xff0000,1);
			g.drawRect(lx - 50, ly - 50, 100,100);
			g.endFill();
 
			g.beginFill(0xffff00,1);
			g.drawRect(Math.random() * stage.stageWidth, Math.random() * stage.stageHeight, 5,5);
			g.endFill();			
		}
 
		private function handleClick(e:MouseEvent):void
		{
			trace('asdasd');
			lx = e.localX;
			ly = e.localY;
			layout();
		}
 
		private function handleTap(e:TouchEvent):void
		{
			trace('asdasd');
			lx = e.localX;
			ly = e.localY;
			layout();
		}		
	}
}

Market Data Perspective

Piotr Tomaszewski — Thu, 29 Jul 2010 11:05:39 +0000

Here is the first post in English, as its target is perhaps a bit wider than for my usual gibberish.

The nine month now work for Symagon GmBH (subsidiary of Nagler & Company) has its fruit. Or even a few. The first and what took the most effort is a Flex GUI for investment strategy backtesting and market data review. This was done with Rafał Sytek from Symagon. Backend is kdb+, a vector-oriented, fast database which I know little about ;) and a little Java/Blaze DS middleware. The second is a 3D visualisation tool for order book series. The 3D tool is only a little ‘Flexish’. The main 3D component is a pure Actionscript thing, with layers, 3D-2D and back transformations, etc. And here is what I find cool enough to show off.

An order book is a snapshot of a market, with (almost) all buy and sell offers for a single financial instrument. I pictured a series of order books as a sloped river bank, with the transaction at water’s level. The ground above is a cumulated size of ask orders beginning from the transaction. The green part is going deeper as the bid orders cumulate. Time axis is horizontal, and Y-axis shows price levels. I believe this visualisation gives a lot more information in a simple manner. Now looking forward to the expert opinion… see what is coming.

Backtesting GUI

This was a good lesson. Series renderers, chart extensions, live scrolling, zooming, syncing between the charts show the real flex guts. Sometimes I felt like writing it from the scratch myself… It was not anything about Flex itself, rather my understanding the complexity of its components. As it turned out, it was usually better to study a bit more the originals rather than implementing one’s own solutions. Some of the comps developed at the beginning look completely naive and weird now. The motto of future Flex chart works is:

ChartElement class is essential to almost all you.

And the big application for testing investment strategies looks like this:

set selectedItem w ComboBox Flexa

Piotr Tomaszewski — Mon, 04 Aug 2008 22:54:36 +0000

Kiedy z bazy danych pobieramy hm, dane, a któraś z kolumn przybiera wartości z pewnego niewielkiego zbioru (jak np. dla typu ENUM w MySQL), to w formularzu edycji rekordu chcielibyśmy zwykle użyć komponentu ComboBox do edycji tej kolumny. Problem polega na tym, że ComboBox nie ma prostej metody do ustawiania zadanej wartości. Można owszem ustawić selectedItem, ale tylko przekazując jeden z obiektów z dataProvidera Combo. Nie taki sam obiekt, ale ten sam. Tyle że wygodniej jest przekazać wartość, np. pobraną ze wspomnianej bazy. No i niech etykieta (label) Combo ustawi się sama. Oto rozszerzenie ComboBoksa, które robi co trzeba:

AMFPHP i błąd 403 – Forbidden

Piotr Tomaszewski — Wed, 30 Jul 2008 21:54:09 +0000

Długo szukałem rozwiązania problemu, jaki pojawił się po przeniesieniu aplikacji AMFPHP z Windows na Linuksa. Skrypt gateway.php wywoływany z ‘palca’, czyli z URLa http://serwer/gateway.php odpowiadał prawidłowo. Browser już gorzej – nie wyświetlał prawego panelu z listą metod, a FireBug poproszony o przedstawienie odpowiedzi serwera napisał o błędzie 403 – Forbidden. Ciekawe, że w Google nie znalazłem nic konkretnego, na jednym tylko forum wskazówkę, że chodzi o prawa dostępu. To akurat było łatwe do wydedukowania. Śledztwo wykazało winnego – w skrypcie /core/shared/util/MethodTable.php, w linii 164 wywoływana jest funkcja touch($sourcePath) , gdzie $sourcePath wskazuje na nazwę uruchamianej usługi. Wystarczy ustawić Apaczowi prawo do zapisu pliku usługi (np. /services/Usluga.php) i od razu jest lepiej.

Piszą o AMFPHP na flashzone.pl.

flextech: coraz więcej się dzieje

Piotr Tomaszewski — Tue, 04 Mar 2008 22:42:33 +0000

Dziś znalazłem ciekawy portal, jeden z niewielu polskich o Fleksie. Kiedy będzie pierwsza książka?

Upload plików we Fleksie

Piotr Tomaszewski — Mon, 04 Feb 2008 11:43:18 +0000

Prosta sprawa, ale postanowiłem zacząć od Google. Znalazłem fajny, gotowy komponent do uploadu całej listy plików, ale… trochę nie działał. Przestudiowałem dokumentację, potem kilka forów i wreszcie na CodingCowboys: jest. Okazało się, że Flex ma błąd w uploadzie i wysyła plik bez kończącego znacznika MIME. Aby to obejść wystarczy dodać plik .htaccess, a w nim dwie linijki (dla Apache/Linux):

SecFilterEngine Off SecFilterScanPOST Off

Działa. Załączam lekko skorygowane pliki Flex i PHP. W aplikacji wstawiamy coś takiego:

width="100%" height="100%" uploadUrl="http://nucom.ntxt.net/upload.php" uploadComplete="Alert.show('File(s) have been uploaded.', 'Upload successful')" uploadIOError="Alert.show('IO Error in uploading file.', 'Error')" uploadSecurityError="Alert.show('Security Error in uploading file.', 'Error')"/>