If you wonder if there is a way to run or debug your LG Smart TV application outside of LG IDE, lets say from command line (or Ant), I have some good news for you. It took me some time to discover the necessary requirements but thanks to WMIC and some luck I was able to run and debug the app in emulator with the web inspector.

Requirement for this process is to have LG SDK/IDE including Emulator properly installed. Natively LG IDE (eclipse) handles the process of running or debugging the app in emulator pretty smooth. Once you click run or debug button the eclipse starts local server listening on port 8080 (root is c:/*ECLIPSE-WORKSPACE*/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/*PROJECT*/), starts Safari (installed with LG SDK) within a debug perspective and opens an emulator…

All of these steps can be done manualy from command line:

• lets consider you already have an local server installed, keep in mind that emulator can target your local server at IP 10.0.2.2
• Web inspector is a javascript application (part of LG SDK) that can remotely listen and debug a html app running in emulator. You can run it as simple as open it in any browser (chrome worked for me)
• emulator is an executable file that takes some arguments

Run In Emulator

To run the application in emulator use following .bat

SET "SDK_PATH=C:/Program Files (x86)/LG_Smart_TV_SDK"
SET APP_PATH=http://google.com

"%SDK_PATH%/Resources/jre64/launch4j-tmp/LG_Smart_TV_Emulator_2013.exe" ^
-classpath "%SDK_PATH%/LG_Smart_TV_Emulator_2013/LG_Smart_TV_Emulator_2013.exe;.;lib/vboxjmscom_4.1.jar;lib/vboxjmscom_4.2.jar;lib/jacob.jar;lib/commons-compress-1.3.jar;lib/log4j-1.2.16.jar" ^
com.dtvsdk.emul.VmEmulatorManager -b ^
%APP_PATH%

Debug In Emulator

Prior being able to use web inspector console for debugging javascript, you need to download jWebSocket and run it with proper config.

1. visit jwebsocket.org and download “Server” version
2. unzip somewhere on your drive
3. merge default jWebServer/conf/jWebServer.xml config file with the one from LG_Smart_TV_SDK/Resources/jWebSocket-1.0/conf/jWebServer.xml
4. run jWebServer
5. run web inspector
6. run emulator

It seems to be sufficient to merge following lines in default jWebServer.xml file:

somewhere around lne 110 add

<domain>null</domain>
<domain>file://*</domain>
<domain>http*://*</domain>

line 906, 910

<loginname>LG_IDE</loginname>
<password>LG_IDE</password>

line 921, 924 replace

<loginname>LG_DTV</loginname>
<password>LG_DTV</password>

Now run the jWebServer with following attributes

SET "SDK_PATH=C:/Program Files (x86)/LG_Smart_TV_SDK"
SET "JWEBSOCKET_PATH=c:/Program Files (x86)/jWebSocket/jWebSocket-1.0"

java -jar "%JWEBSOCKET_PATH%/libs/jWebSocketServer-1.0.jar" ^
-home "%JWEBSOCKET_PATH%" ^
-bootstrap "%SDK_PATH%\Resources\jWebSocket-1.0\conf\Resources\bootstrap.xml" ^
-config jWebSocket.xml

To debug the application in emulator using web inspector use:

SET "SDK_PATH=C:/Program Files (x86)/LG_Smart_TV_SDK"
SET APP_PATH=http://10.0.2.2/your/app/index.html

"%SDK_PATH%/Resources/LGInspectorForIDE/NetCast4/inspector.html"

"%SDK_PATH%/Resources/jre64/launch4j-tmp/LG_Smart_TV_Emulator_2013.exe" ^
-classpath "%SDK_PATH%/LG_Smart_TV_Emulator_2013/LG_Smart_TV_Emulator_2013.exe;.;lib/vboxjmscom_4.1.jar;lib/vboxjmscom_4.2.jar;lib/jacob.jar;lib/commons-compress-1.3.jar;lib/log4j-1.2.16.jar" ^
com.dtvsdk.emul.VmEmulatorManager -d ^
%APP_PATH%

Once the application runs in emulator, your web inspector console should be able to connect. Basicaly you can remotely debug any html app running in emulator with web inspetor (e.g. google.com). For debugging the app on real TV device it may require some different steps but I will cover that in another blog post.

Where to go from here:

• WebKit Remote Debugging
• Remote Debugging Protocol v1.0

Next step with my project was to implement MVC framework. The most popular one called mmvc provided by massive interactive seemed a bit broken when used with HaXe 3 RC, but as all those sources are available, I managed to do some small updates in order to compile it without errors. Normaly you would just install the mmvc library using haxelib and the install process grabs the necessary dependencies like msignal, minject, mcover, mcore… But in order to fix HaXe 3 issues, I decided to just download it into my projects src folder.

mmvc reuse a lot of patterns and naming conventions from RobotLegs framework I believe all ActionScript 3 developers are familiar with already. However, events has been completely replaced by signals. Signals are as well rewritten from its ActionScript brother. You can also benefit from dependency injections using HaXe metadata.

Once I got rid of compilation errors regarding HaXe 3 compiler changes, everything ran smooth out of the box for my JavaScript project on emulator as well as on TV device. One thing that was not that obvious was signal mapping within context, e.g. if you map signal into a command

commandMap.mapSignalClass(DemoSignal, DemoSignalCommand);

Then you have to make sure you use the injected DemoSignal instance in your mediator:

class MainViewMediator extends Mediator<MainView>
{
	@inject
	public var demoSignal:DemoSignal;
	
	override function onRegister()
	{
		super.onRegister();
		
		//demoSignal.completed.add(onSignalCompleted);
		demoSignal.dispatch();
	}
}

It is also suggested to have a completed property-signal in your signal class in order to get notified once the command has executed the signal. I guess this may result in some issues in case you reuse the signal in multiple mediators.

There is an example project provided with mmvc repository that will help you get started. You can find my project sources including updated mmvc sources in the repository. Make sure to checkout for latest changes from original repos.

Where to go from here:

• mmvc – HaXe IOC framework utilizing Signals and macro based injectionk
• msignal – HaXe port of the ActionScript 3 Signals library that leverages Haxe type parameters.
• minject – HaXe port of the ActionScript 3 SwiftSuspenders IOC library with efficient macro enhanced type reflection
• RobotLegs – an ActionScript Application Framework. It offers: Dependency, Module, Command and View management.
• Signals – ActioScript approach for AS3 events, inspired by C# events and signals/slots in Qt

Today I continued to progress on my Samsung Smart TV project with unit test implementation. My aim is to prepare smooth process for automated builds. First, I tought I would struggle with it much more but at the end it appeared that necessary tools already exists.

My first sreps led me to “Writing Unit Tests” article about resources available directly with HaXe, however it seemed that JavaScript testing was not available. The article also referenced MUnit a cross-platform haxe unit testing framework, which looked to have more capabilities.

MassiveUnit is a metadata driven unit testing framework for cross-platform Haxe development and it pretty much covers all the functionality I need. Kudos to MassiveInteractive for contributing so much for HaXe community. I am not going to explain how to get started with MUnit or how to compile and run tests as it is well described in wiki and on some other webs. But I will rather share some of my findings, and best practices I decided to use for continous integration.

It seems that MUnit requires both test.hxml and .munit config files to exist prior running unit tests. But while I do not want to have configs in any other place than build.xml, I decided to generate these dynamicaly. MUnit can dynamically create config for you so lets do some Ant:

<exec executable="haxelib">
	<arg value="run"/>
	<arg value="munit"/>
	<arg value="config"/>
	<arg value="-src"/><arg value="src/test/haxe"/>
	<arg value="-bin"/><arg value="${TARGET_TEST}"/>
	<arg value="-report"/><arg value="${TARGET_TEST}/report"/>
	<arg value="-classPaths"/><arg value="src/main/haxe,../lib"/>
	<arg value="-hxml"/><arg value="test.hxml"/>
</exec>

…but it generates some Example* files I am not interested in testing:

<delete file="src/test/haxe/ExampleTest.hx"/>

…so once I have only stuff I need in my classPath, lets test:

<exec executable="haxelib">
	<arg value="run"/>
	<arg value="munit"/>
	<arg value="test"/>
	<arg value="-js"/>
	<arg value="-kill-browser"/>
</exec>

My project is JavaScript only so we can filter target by -js flag, and the automated build machine should close testing browser (tab) once done – resolved by -kill-browser. Ok, still some files left I am not interested in versioning:

<delete file="src/test/haxe/TestSuite.hx"/>
<delete file="test.hxml"/>
<delete file=".munit"/>

…and finally break Ant if tests failed:

<fail message="Tests failed">
	<condition>
		<resourcecontains resource="${TARGET_TEST}/report/test/results.txt" substring="FAILED"/>
	</condition>
</fail>

As our CI management system plays nice with JUnit, lets update generated TestMain.hx file

public function new()
{
	var suites = new Array<Class<massive.munit.TestSuite>>();
	suites.push(TestSuite);
	
	var runner:TestRunner = new TestRunner(new RichPrintClient());
	runner.addResultClient(new HTTPClient(new JUnitReportClient()));
	runner.completionHandler = completionHandler;
	runner.run(suites);
}

so it produces formatted results in:

test/report/test/junit/js/xml/TEST-sk.yoz.tv.samsung.demo.test.SomeTest.xml

All the sources are available on github tag tests.

You have propably already heard about smart TVs can run applications. However, the app market is very fragmented, some vendors support AIR apps or Flash Player but the runtime versions are just too old, so HTML apps seems to be a better solution these days. Decision has been made and my next project is going to be HTML/JavaScript based Samsung smart TV app and I need to prepare comfort environment to work in (click and run just like Flash Builder does). I have doubts that language like JavaScript by its nature can be easily used on enterprise projects, where multiple team members cooperate and it seems like numbers of apps already struggled to see a daylight. Luckily, there are languages like HaXe, that compiles into clean JavaScript while still offering advanced features like strong typing. In this article, I would like to share my initial steps and successes with Samsung project on HaXe.

Samsung SDK

First steps led me to download and install Samsung SDK. I was prompted to install DirectX End-User Runtime (search on google) during the SDK installation. Both installs went smooth. At the end I was requested to install apache server but I already had one http service installed so I skipped. Local server is necessary just in order to install the app into TV device. Samsung SDK contains TV emulator and an Eclipse with some custom plugins allowing you to run and debug TV app on emulator or package the app for release to a device. The catch with emulator is, the real TV device works a bit different than emulator and some sdk APIs would just not work.

Samsung does a good job with docummentation, you just have to get used with the navigation. E.g. as of today they list 263 guide documents (Resource / API reference / SEF Plugin API / Player) and tutorials usualy with examples (Resource / Tutorial). Also a lot of APIs is being discussed on forum.

What I was interested was, what APIs my dev device (UE55D7000) supports. Here is a nice platform features table, but in order to find out what type (year) my device was I had to deserialize the model info:

Device model usually like this ==> UA 55 ES 8000
- ‘U’ more likely device type (LED/LCD/Plasma) Plasma use ‘P’
- ‘A’ more likely the region of device, mine is ‘A’ (Asia i think) and some in Europe and USA use ‘E’
- 55 is the TV Inch, in BD player you won’t see this code above, only E5900 for example
- ‘E’ is the device release year, E = 2012, D = 2011, C = 2010, and latest F = 2013
- ‘S’ is just the flag to show this is Slim model
- 8000 is the device series and if in the market, Series 8 means the leading number there ’8’000, ES7500 is Series 7

According to this, my device should be able to play PlayReady protected media (no smooth streaming though), but after spending 3 days failing to play any video with PlayReady DRM, even those examples on forum or creating it according to official tutorial, I started to think the device is just not capable. If you have any idea why I am failing, please let me know.

Working with Eclipse is pretty much smooth:

1. create samsung project from top menu Samsung: Smart TV SDK / Create …
2. select project folder in package explorer and click run or debug app on emulator icons …
3. once you want to test your app on a real device, you have to follow some cofig steps, then click package icon, and install the app on the TV.

HaXe

I have already used HaXe some time ago, so I was able to catch faster with this. Also installing it is pretty smooth, just downloaded HaXe 3.0 RC and followed the instructions. Previously I used HaXe with FlashDevelop, where it has better support. But now I was interested to integrate it with Samsung Eclipse using eclihx (HaXe plugin). Its not perfect and seems to be a bit outdated, however it still seems to work for some code completion and compilation.

Merging

So I was able to create Samsung Smart TV project with fancy run, debug, package buttons or HaXe project with compile button, but I wanted both at the same time! No problem for eclipse. My plan was to stick with HaXe / eclihx project (so I have autocompletion) while creating some external build configuration for running, debugging and packaging the project for emulator and device. As the Samsung Eclipse seems to be a port of some basic Eclipse and misses Ant I needed for some automation, I had to install it first:

1. click Help / Install New Software
2. chose work with “Indigo – http://download.eclipse.org/releases/indigo”
3. expand “Web, XML, Java EE…” option
4. select “Eclipse Java EE Developer Tools”
5. and finish the install process
6. Ant is now installed in eclipse

I have created a Sample eclihx project while switched back to “Samsung Smart TV Perspective” as this one contains “run” button I need for my one-click operations.

In order to compile HaXe with ant, I have installed AntHX using command line:

haxelib install anthx

I have created a build.xml file that would compile the HaXe sources, using AntHX taskdef. Then created external build:

1. clicked Run / External Tools / External Tools Configuration
2. created new Ant Build
3. added AntHX.jar into classpath

Thing I was still missing was the ability to run Samsung emulator with my app from ant. Emulator is an .exe-cutable installed with Samsung SDK, but while Samsung doccumentation says nothing about emulator command line arguments, the dark magic windows-fu came handy especialy command WMIC. I used the original Samsung project and clicked run-in-emulator button to make the emulator open, then executed WMIC:

WMIC /OUTPUT:C:\ProcessList.txt PROCESS get Caption,Commandline,Processid

to find out that emulator was executed with following arguments:

"C:\Program Files (x86)\Samsung\Samsung TV SDK 4\Emulator\Emulator2013_v4\bin\Emulator2.exe" kEclipse "_temp_20100108_"
"C:\Program Files (x86)\Samsung\Samsung TV SDK 4\Emulator\Emulator2013_v4\bin\Emulator2.exe" kEclipseWI "_temp_20100108_"

Now I was able to finish the ant script with targets for running and debugging in emulator and I have also implemented package target for one-click packaging (nothing else then zipping sources), instad of using the original packaging button. At the end of the day, Ant script is able to:

• compile HaXe sources
• run the project in emulator
• debug the project in emulator
• package the app
• depploy the app (to http server, to be installed on device)

I have commited my Sample project with build.xml on github for my future reference and for anyone who is interested using HaXe for Samsung Smart TV development. I have also started to create some HaXe externs for samsung SDK APIs, and I will add more when needed.

Where to go from here

• Samsung Forum
• HaXe Community

It may be a little tricky to setup “Native Android App” section for your Facebook application. Especially the field “Key Hashes”. Facebook provides instructions for acquiring debug version hash but is not very clear about how to get one for signed application. There is a lot of valid answers around the internet, but the one I needed was still missing. Imagine this simple scenario where you export and sign (using .p12 cert) your AIR Android project, you have an .apk file and want to get a key hash for facebook. Then I finally found the answer:

1. Unzip .apk file and extract META-INF\CERT.RSA file
2. run keytool -printcert -file CERT.RSA
3. notice SHA1 bytes are printed like 29:37:F1:CB:06…
4. copy SHA1 bytes into HEX to BASE64 converter
5. see your BASE64 key hash in output field

Train Lord is a live massively multiplayer game (MMOG) using real world data and maps. The goal is simple. Become the richest lord in the world by buying rails, stations, trains, creating rail sets and dispatching trains. I have been developing this game and learning a lot of technologies to put all the stuff together since February 2012. Starting November I was able to release the first version live. Click here to play, here to see help page, or here for Communuty page. I would like to describe and give credits to some technologies I have used, so it may help other developers as well as myself somewhere in the future .

First, I would like to share gameplay / manual screencast video with captions. In this video you can see the main objectives you have to accomplish in order to rule the game.

Client

The client application (game) was completly written in ActionScript. I am using a Flex framework for ui components and for performance reasons I write directly .as (no .mxml) even for components and skins.

I have utilized my YCanvas project – an open source ActionScript 3 library that provides stage3D (GPU) engine for perfectly overlapping grid based zooming projects like world maps or onBoard or simply a tile maps renderer.

YCanvas is based on Starling – The Open Source Game Engine for Flash. Using stage3D you can achieve really smooth 60fps gaming experience.

Once experienced I never start a project with IoC other than Robotlegs – a pure AS3 micro-architecture (framework) with a light footprint and limited scope. Simply put, Robotlegs is there to help you wire your objects together. It provides the glue that your application needs to easily function in a decoupled way. Through the use of automated metadata based dependency injection Robotlegs removes boilerplate code in an application.

Most of the eventing is handled by Signals – a new approach for AS3 events, inspired by C# events and signals/slots in Qt.

A great lightweight and fast tweening lib you all already know is from Greensock.

While looking for train models all over the internet I found there are a lot of available already for Microsoft Train Simulator created by indie modellers. Here are some of them in Czech Republic doing a great job – Skura, Duuso, Jacek, Ondraj, Kank…

As I only needed a top view and a side view, I used Shape Viewer – displays an entire shape on screen without having to load up MSTS itself enabling you to examine the entire model and lets you see exactly what it looks like in the sim.

As often as I work with services I always use Charles Proxy – an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information). If you have not had the pleasure to meet this tool, now its right time to do so.

Server

The game uses a real world data from OpenStreetMap project, especialy I took advantage of Planet.osm – an XML file that contains all the data you can see on the generated maps (streets, buildings, lakes, countries…). Currently it contains more than 25GB of bz-ed data in total. I recommend downloading the file via torrents from torres.voyager.hr.

To parse that much data and extract just rails and stations takes some time. There is a great tool for this called Osmosis – a command line Java application for processing OSM data. The tool consists of a series of pluggable components that can be chained together to perform a larger operation. For example, it has components for reading from database and from file, components for writing to database and to file, components for deriving and applying change sets to data sources, components for sorting data, etc. Even with this tool it takes hours to parse a whole world. There is a way osmosis would pass the data directly into database, but I did not have that luck to make it running.

To put this data from .osm file to a database I tried XSL – Extensible Stylesheet Language (XSL) is used to refer to a family of languages used to transform and render XML documents. But it soon appeared that it can not handle big files.

So I discovered STX – Streaming Transformations for XML (STX) is a one-pass transformation language for XML documents. STX is intended as a high-speed, low memory consumption alternative to XSLT, using the W3C XQuery 1.0 and XPath 2.0 Data Model. Since STX does not require the construction of an in-memory tree, it is suitable for use in resource constrained scenarios. Oh yeah this beast can handle 4GB .osm file like nothing!

Once my .osm is parsed into .sql, I use MySQL database to store the data. OpenStreetMap recomends to use Postgre though.

To transfer the data to client I decided to use AMF – a binary format used to serialize objects graphs such as ActionScript objects and XML, or send messages between an Adobe Flash client and a remote service. At first I tried ZendAMF but I did not get the performance as good as what AMFPHP provides. It seems this project has been reborn after few years of hibernating. It appeared that none of amf libs in php were capable of handling large datasets and while I ended up exceeding php memory limits too often I decided to switch to JSON gateway.

I decided to implement 3rd party login services so users do not have to create an account (and forget a password every time) when playing. Facebook, Twitter and Google logins are implemented for a better comfort and running nicely on the backend.

… almost forgotten to mention Ip Address Locator – a service (IP Address Map lookup service) provided by Geobytes, inc to assist you in locating the geographical location of an IP Address. It does the black magic behind locating the initial position on the map – your home city.

As you can see a lot of technologies were involved to prepare and run the game. And I did not even mention the common ones. Having smooth user experience playing a game with real world data, flash remains to be a perfect technology. I hope you like the game and please leave me some feedback.

There is a lot of flex preloader tutorials all over the internet. If you take a closer look at each, you may notice those all extends DownloadProgressBar or SparkDownloadProgressBar classes. You may decide that these classes do not fit your needs, and it that case you can extend regular Sprite with IPreloaderDisplay implementation. Soon you realize there is some other Preloader in use, that communicates with your custom one through events. Following example contains a preloader implementation that renders a filled arc based on application load progress and RSL load progress. Lets have a look how to handle it properly.

This is an example of Preloader.as file

package sk.yoz.rtw.skins.white.components
{
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    
    import mx.events.FlexEvent;
    import mx.events.RSLEvent;
    import mx.preloaders.IPreloaderDisplay;
    
    import sk.yoz.rtw.view.utils.GraphicsUtils;
    
    public class Preloader extends Sprite implements IPreloaderDisplay
    {
        private var progressShape:Shape = new Shape;
        private var _preloader:Sprite;
        
        private var progress:Number = 0;
        private var rslProgress:Number = 0;
        
        public function Preloader()
        {
            super();
            
            addChild(progressShape);
            
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }
        
        public function get backgroundAlpha():Number
        {
            return 1;
        }
        
        public function set backgroundAlpha(value:Number):void
        {
        }
        
        public function get backgroundColor():uint
        {
            return 0;
        }
        
        public function set backgroundColor(value:uint):void
        {
        }
        
        public function get backgroundImage():Object
        {
            return null;
        }
        
        public function set backgroundImage(value:Object):void
        {
        }
        
        public function get backgroundSize():String
        {
            return "100";
        }
        
        public function set backgroundSize(value:String):void
        {
        }
        
        public function set preloader(value:Sprite):void
        {
            _preloader = value;
            preloader.root.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
            preloader.addEventListener(RSLEvent.RSL_PROGRESS, onRSLProgress);
            preloader.addEventListener(FlexEvent.INIT_COMPLETE, onInitComplete);
        }
        
        public function get preloader():Sprite
        {
            return _preloader;
        }
        
        public function get stageHeight():Number
        {
            return 0;
        }
        
        public function set stageHeight(value:Number):void
        {
        }
        
        public function get stageWidth():Number
        {
            return 0;
        }
        
        public function set stageWidth(value:Number):void
        {
            
        }
        
        public function initialize():void
        {
        }
        
        // END of interface
        
        private function dispose():void
        {
            preloader.root.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
            preloader.removeEventListener(RSLEvent.RSL_PROGRESS, onRSLProgress);
            preloader.removeEventListener(FlexEvent.INIT_COMPLETE, onInitComplete);
            
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
            removeEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
            
            stage.removeEventListener(Event.RESIZE, onStageResize);
        }
        
        private function draw():void
        {
            var perc:Number = (progress + rslProgress) / 2;
            progressShape.graphics.clear();
            progressShape.graphics.beginFill(0x0, 0.7);
            GraphicsUtils.drawSolidArc(progressShape.graphics, 0, 0, 10, 30, -0.25, perc, perc * 50);
        }
        
        private function center():void
        {
            progressShape.x = stage.stageWidth / 2;
            progressShape.y = stage.stageHeight / 2;
        }
        
        private function onProgress(event:ProgressEvent):void
        {
            progress = event.bytesLoaded / event.bytesTotal;
            draw();
        }
        
        private function onRSLProgress(event:RSLEvent):void
        {
            rslProgress = (event.bytesLoaded / event.bytesTotal) / event.rslTotal
                + (event.rslIndex / event.rslTotal);
            draw();
        }
        
        private function onAddedToStage(event:Event):void
        {
            center();
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
            stage.addEventListener(Event.RESIZE, onStageResize);
            addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
        }
        
        private function onRemovedFromStage(event:Event):void
        {
            stage.removeEventListener(Event.RESIZE, onStageResize);
            removeEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
        }
        
        private function onStageResize(event:Event):void
        {
            center();
        }
        
        private function onInitComplete(event:Event):void
        {
            dispose();
            dispatchEvent(new Event(Event.COMPLETE));
        }
    }
}

… drawing arcs with fill inspired by PiXELWiT:

package sk.yoz.rtw.view.utils
{
    import flash.display.Graphics;
    
    public class GraphicsUtils
    {
        public static function drawSolidArc(graphics:Graphics, centerX:Number,
            centerY:Number, innerRadius:Number, outerRadius:Number, 
            startAngle:Number, arcAngle:Number, steps:uint):void
        {
            // Used to convert angles to radians.
            var twoPI:Number = 2 * Math.PI;
            
            // How much to rotate for each point along the arc.
            var angleStep:Number = arcAngle / steps;
            
            // Variables set later.
            var angle:Number;
            
            // Find the coordinates of the first point on the inner arc.
            var xx:Number = centerX + Math.cos(startAngle * twoPI) * innerRadius;
            var yy:Number = centerY + Math.sin(startAngle * twoPI) * innerRadius;
            
            // Store the coordiantes in an object.
            var startPointX:Number = xx;
            var startPointY:Number = yy;
            
            // Move to the first point on the inner arc.
            graphics.moveTo(xx, yy);
            
            // Draw all of the other points along the inner arc.
            for(var i:uint = 1; i <= steps; i++)
            {
                angle = (startAngle + i * angleStep) * twoPI;
                xx = centerX + Math.cos(angle) * innerRadius;
                yy = centerY + Math.sin(angle) * innerRadius;
                graphics.lineTo(xx, yy);
            }
            
            // Determine the ending angle of the arc so you can
            // rotate around the outer arc in the opposite direction.
            var endAngle:Number = startAngle + arcAngle;
            //
            // Start drawing all points on the outer arc.
            for(i = 0; i <= steps; i++)
            {
                // To go the opposite direction, we subtract rather than add.
                angle = (endAngle - i * angleStep) * twoPI;
                xx = centerX + Math.cos(angle) * outerRadius;
                yy = centerY + Math.sin(angle) * outerRadius;
                graphics.lineTo(xx, yy);
            }
            
            // Close the shape by drawing a straight
            // line back to the inner arc.
            graphics.lineTo(startPointX, startPointY);
        }
    }
}

…and a main application.mxml file:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               preloader="sk.yoz.rtw.skins.white.components.Preloader">
...

Where to go from here:

• Using Metadata Frame for a Preloader

In case you are using flexunit ant task with your flex builds and you are used to failed builds with haltonfailure=”true”, you may notice that junitreport task is not executed when unit tests fails. Without having test reports, it does not give you much info about what went wrong. Fortunately, there is a solution using attribute failureproperty and fail ant task. Here is a quick ant build config to generate junitreport report for failed unit tests followed by build fail.

<flexunit toDir="${basedir}/${OUTPUT_DIRECTORY}"
    workingDir="${basedir}/${OUTPUT_DIRECTORY}"
    haltonfailure="false" verbose="true" localTrusted="true"
    failureproperty="flexunit.failure"
    swf="${basedir}/${OUTPUT_DIRECTORY}/TestRunner.swf"/>

<mkdir dir="target/surefire-reports" />

<junitreport todir="target/surefire-reports">
    <fileset dir="${basedir}/${OUTPUT_DIRECTORY}">
        <include name="TEST-*.xml"/>
    </fileset>
    <report format="frames" todir="target/surefire-reports/html"/>
</junitreport>

<fail if="flexunit.failure" message="Unit test(s) failed. See reports!"/>

Notice: haltonfailure, failureproperty, fail

Where to go from here:

• Quick Tip: FlexUnit & ANT

At the same time I released YCanvas, I have spotted an interesting starling experiment. I realized I can do this for YCanvas easily with Remotair. Remotair is a concept of transmitting device inputs (gestures, accelerometer, camera etc.) into receiving flash or AIR application. Consists of one transmitting app installed on a mobile device or a tablet and one receiving app running on a PC. In order to pair transmitting and receiving application, RTMFP protocol is used. Implementing remotair reciever into any flash application takes only a few minutes, I spent much more time on touch + multitouch implementation with transitions. At the end of the day, I was able to remote controll YCanvas application with BlackBerry Playbook.

If you want to try it yourself, YCanvas application is available on ycanvas.yoz.sk/remotair, and you can download free Remotair app for Playbook or Android devices from markets. Source is available on ycanvas.yoz.sk.

1. download Remotair application to your device
2. open and click connect, you should recieve a channel id (e.g. 1008)
3. open ycanvas.yoz.sk/remotair on your pc
4. notice white TextInput on top-right position, insert channel id (e.g. 1008) and press enter.
5. device get paired with your pc and after that you should se “Touch” option in Remotair application, click it to open Touch view
6. use one-finer or two-finger gestures to remotely move, rotate and scale application on a pc

Hello YCanvas, who are you? I am an open source ActionScript 3 library that provides stage3D (GPU) engine for perfectly overlapping grid based zooming projects like world maps or onBoard. What? Ok, I am the engine that statnds behind onBoard, and I can handle much more. I can implement Wall Of Fame, WebCanvas, MapQuest, ArcGIS, Open Street Map or do some experiments like Flickr gallery, all this in one flash, few lines (10-20) of specific code per mode, all running at 60 FPS. Anyhing else would you like to see implemented? Just let me know… Do you want to know more and see it in action?

Enough talking, now impress me!

This is YCanvas explorer demo (run fullscreen), you can find sources on repository.

There is also simpliest possible implementation of YCanvas available with sources as well.

FAQ:

Q: Can you run on mobile/AIR?
A: Comes hand in hand with Stage3D available in AIR for mobile.

Q: Can you run google maps?
A: Technicaly yes, on AIR there is no problem at all. In case of Flash Player, however, engine uploads BitmapData to graphic cards, in order to upload it you need the access that would be granted via crossdomain.xml, and unfortunately google maps domains do not serve one.

Q: What are the requirements?
A: wmode=direct, flash player 11.1

Q: Do you have a CPU fallback in case there is no GPU available
A: Not yet.

Q: Do you have a support for moving, rotating, zooming?
A: The YCanvas api lets you set all of these manualy, or you can use available util classes in case you want to rotate around specific point or zoom to specific place. Checkout demo and explorer sources in repository.

Q: Do you have multi touch support, gesture suppport?
A: Yes, have a look at ApplicationRemotair in sources. You can use two finger gestures to move, rotate, scale.

Q: Do you have implementation for drawing?
A: Yes! Any display object on stage can be applied/drawn as simple as by calling one function. Read more in asdoc.

Q: Can I convert points to latitude longitude?
A: Yes! Have a look at GeoUtils.as and Boundary.as.

Q: I like it and I want to support. How?
A: Cool, feel free to donate via PayPal here. Thank you.