HaxeBridges – Inter-platform coding library

HaxeBridges is a library which allows a single project to be compiled into separate parts, and for separate platforms.
This is useful for many situations, including when multi-threading, client/server, etc.

The idea is that your main application should be able to naturally use objects which will be published via a different platform/compile.

The example included in the repository now is a simple example of creating a worker thread (flash only for the moment).

In the main class:

1
2
3
4
 var obj = new ObjectInsideWorker();
 obj.nonStaticMethod(function(result){
    trace("Worker result: "+result);
 });

And the class which gets compiled into the worker:

1
2
3
4
5
6
7
8
9
10
package;
class ObjectInsideWorker{
 
 public function new(){
 }

 public function nonStaticMethod():String{
    return "nonStaticMethod: "+Std.string(Math.round(Math.random() * 1000));
 }
}

Then all that’s required is a compiler argument to get things working:

1
--macro Bridge.add('ObjectInsideWorker', 'Worker')

(first argument is a comma separated list of classes to be included in the worker)

More examples and bridge-types to come.
Check out the repository here.

RD32II Action Camera AVI file issues

I recently used a small video camera for an overseas journey and realised on return that the video files generated are formatted in such a way that prevents them from being read by most professional video editing/converting software. To get around this took a little research, so for those who are having similar issues I thought I’d post how I fixed the files. These instructions are for Windows, if anyone converts for use on OSX please post in the comments.

  • First, download ffmpeg, look for the link with “Static” in the title under the correct OS type heading (32-bit or 64-bit).
  • Open this compressed file (might need to install 7zip if you can’t immediately open the archive).
  • Extract the bin/ffmpeg.exe file from the archive and copy it into the folder with your video files.
  • Create a new text file in the same folder and add this text into it:
1
2
for %%a in ("*.*") do ffmpeg -i "%%a" -c:v libx264 -preset slow -crf 20 -c:a libvo_aacenc -b:a 128k "newfiles\%%~na.mp4"
pause
  • Rename this file “Convert.bat”.
  • Double-click this file

It will create new video files (in H264 format), after which you can delete the original AVI files.
Now you should be able to move these two files into any folder with the broken video files, run the “Convert.bat” file and it fix your videos.

If, like me, you had your camera mounted upside-down for practical purpose, then use this script instead, which will also rotate the video 180 degrees.

1
2
for %%a in ("*.*") do ffmpeg -i "%%a" -c:v libx264 -vf "vflip,hflip" -preset slow -crf 20 -c:a libvo_aacenc -b:a 128k "newfiles\%%~na.mp4"
pause

SMIL test page

Export Flash to Animated SVG

While working on a project which required rich vector animations in the browser, I came across Dave Belias’ library for exporting still SVG frames from flash. I wondered if I could re-purpose it to export Animated SVGs, a relatively unknown standard for containing fully animated imagery within a single SVG file.
Continue reading

Export Illustrator Layers to SVG files

I’m currently working on an Adobe Edge job, it’s almost totally vector based, and it turned out there were few quick options for breaking Illustrator files down into multiple SVG files.

After looking around, I decided to add features to Matthew Ericson’s awesome exporter script. Adding the SVG export format was easy enough, unfortunately I ran into another problem.

The original tool was built for raster outputs, and whilst it did support EPS, each EPS file that was generated actually had all layers included (all invisible except one).
So after some reworking I got it to generate small vector SVG/EPS files, each containing only what was needed.

I also made it easier/cleaner to add new formats and added a few usability tweaks (options which don’t apply to the current output format are disabled).

Installation & Usage

Just drop this javascript file in your Illustrator scripts folder (CS6 is something like: C:\Program Files\Adobe\Adobe Illustrator CS6\Presets\en_GB\Scripts).

In Illustrator, use the File > Scripts > MultiExporter option to bring up the dialogue box, it’s all fairly self explanatory.

MultiExporterScreen

Notes

I made minimal changes to Matt’s functionality, here are his original notes with my modifications.

  • Supported formats are: PNG8, PNG24, PDF, EPS & SVG
  • You can choose whether you want to export all the artboards in the document with the currently visible layers showing, or if you want to export files for each of the layers in a document on the currently active artboard, or if you want to export a combination of all the artboards multiplied by all the layers.
  • Files are named based on their layer name. It only exports layers where their name has been changed from the default “Layer 1″, “Layer 2″ or “Artboard 1″, “Artboard 2″, etc. I removed this feature, but might add it back as a configurable option.
  • If you put a minus sign (-) in front of a layer name or artboard name, it will skip that layer or artboard. (Useful for when you no longer decide you like a particular mockup, but don’t want to delete it from the master Illustrator document.)
  • For layers only: If you put a plus sign (+) in front of a layer name, that layer will always be visible. Useful for if you want to have a layer that always appears in the background of each exported image.
  • It stores its settings in a nonvisible, nonprinting layer named “nyt_exporter_info”

  • It has an option for transparency.
  • It has an option for embedding linked imagery (EPS & SVG only).
  • It has an option for embedding fonts (EPS only).

Check out the Gist

Edits 11/04/2013 – 8/05/2013

There were some issues with the alignment of objects when multiple artboards existed, which I’ve fixed.
Also, it now avoids outputting imagery when nothing would be included, this makes the “Artboard + Layers” output much more useful (as you’d rarely have one layer which spans across multiple artboards).
I have added the functionality to trim the exported files to their visible size (as opposed to the artboard’s size), this will allow mouse interactions to pass around the visible area to regions behind the SVG.
Fixed an issue where layers containing only invisible items (e.g. Guides) were causing an exception.
Fixed an alignment issue which appeared if the artboard had been resized after creation.
Fixed cropping issue with large layers (and Trim option)

Edit 17/05/2013

Separated the artboard and layer selection, which now allows for more fine-grain set ups.
Now allows for ‘Trimmed Edges’ functionality for all output formats.

Edit 17/07/2013 – 28/08/2013

Now you can export Illustrator layers to FXG files (versions 1.0 & 2.0)
Added an option to ignore warnings.
Fixed ‘Save & Close’ button.
Empty child layer bug fix.

Edit 6/12/2013

Added a mode to avoid visual clipping of round backgrounds.
Thanks to John Ford for the input.

Edit 7/8/2014

I’ve changed the file naming system to be much more flexible, using a token pattern instead of the prefix/suffix fields. Try it out here.

NEW VERSION

There’s a brand new version of the tool, rewritten from the ground up, it’s way more powerful and allows for multiple image formats to be generated from a single execution.
Also, it avoids the group issue that was the cause of that annoying message box.
I’ll still be offering this version, but if you get a lot of use out of it, buying the power version would be much appreciated.

Check it out at Adobe Exchange.

In Defense of XML

Over the last few years XML has become a very unfashionable standard and especially in the Haxe world has drawn a lot of fire for being too verbose and containing too much redundancy.
I still use XML when I feel it’s appropriate, and I wanted to explain why.

When is XML the wrong choice?

In the past, XML has been used as a way of serialising data as input for a known web application (either from the back-end or from a file). I see this as a misuse of the technology. If it is not a public service, it has no reason to be be easily human readable and deserialising XML at runtime is wasteful. Ironically, this is what happens every time your browser loads a page and no-one seems too concerned about that.

Syntax problems with XML

I will also happily admit that the closing tag in XML is absolutely useless. Some might argue that it adds checkable redundancy to the file and avoids misspelling an opening tag, but that begs the question; Why not make all XML structures have redundancy? (Anyone think closing an attribute by retyping it’s name sound good?)

This could also be argued of the CDATA tag, which seems to be avoided simply because of it’s utter ugliness.

YAML?

YAML is like Brittany Murphy (was), it’s pretty, but it has some problems. Firstly, it doesn’t scale well, because it uses indentation as syntax, the deeper your heirarchies become the heavier each individual item is (so that a simple piece of information can use 10x the necessary characters, if deep enough). Sometimes removing indentations can make code more readable, and XML allows this (as does JSON), or it can be removed all-together when needed. In XML and JSON, you may choose to put several bits of information on the same line for brevity (normally as attributes), but YAML does not allow this behaviour.

This is not to say YAML does not have it’s uses. I believe it will find it’s place representing small pieces of structured data in broadly editable systems (like Wikipedia or something).

JSON?

In my opinion JSON is a strong contender to topple XML, and should be used in many public web-services instead of XML/SOAP. It’s human-readable and light on it’s feet. I have had many more issues resolving JSON serialisation incompatibilities than XML, but this is probably a result of it’s more organic evolution into a standard.

Where I see XML rise above JSON is when it comes to namespaces. Lots of developers will go their whole careers without needing to understand XML namespaces, but once you do, you’ll realise that XML is a little more than serialisation format. It allows different nodes to be scoped differently and to avoid any naming collisions. This might sound trivial but it means that XML data-sources can be annotated with tags from multiple different systems each of which can process the file without disturbing the other nodes, all without any need for delimiting anything (as in some template languages).

I’ll give you an example, you could use XSLT(an XML based language) to transform Android layout files (another XML based language) into XHTML. Neither of these standards were build to be aware of the other. And the output XHTML tags within your XSLT files can live as first class citizens alongside your transformation tags only because of namespaces. In this scenario, the resulting format does not even have to use namespaces to benefit from having them. So by using XML as an input for your application, you will have made it many times more flexible than otherwise.

When is XML appropriate?

When interpreted at compile-time, XML performance issues all but disappear, and the opportunities in pre-processing the XML add a huge degree of flexibility to a system.
I would argue that this is where XML belongs and will hopefully thrive as it’s misuse recedes.

Guise: Unified UI for Haxe

Haxe is a great platform for future-proofing your work, and with NME it provides a solid tool-chain for cross-platform native development.

Unfortunately, it lacks a real solution for the issue of user interfaces.
That’s why I’ve been building Guise, a UI library for native and non-native user interfaces.

Ideally, Haxe should have a UI system that does the following:

  • Should be able to be dropped in quickly and easily, with little setup code.
  • Allows the use of native controls where desired.
  • Allows the developer to switch to non-native (i.e. drawn) controls when the design requires.
  • Future display libraries should be able to be implemented quickly so that non-native controls are portable.

Guise attempts to solve each of these issues.
Note: Guise is just a working title, if anyone has a better name, comment at the bottom.

Guise is not Haxe 3 ready yet, only 2.10 (although there is a branch being worked on)

Check out the repository here.

Current usage types

Before getting into the details, I’ll show a few examples of Guise using different platforms/styles.
You’ll notice that I’ve only implemented a handful of controls so far, this has been done to keep the codebase flexible while the core architecture is still being finalised.

Graphics API in NME

Graphics API Style

This style uses a flash-type graphics API to draw UI elements to screen.
Skins are written in XML which is interpreted at compile-time (no loading/parsing XML needed).
Transitions between skin states are generated automatically based on the skin (although would probably be customisable in future).

Currently it is using NME, although it can support any number of drawing APIs (and did support CreateJS at one point).

Note: The skin used here is based on Allan Knutson’s Chutzpah style.

Bitmap API in Starling

Bitmap API Style

This style uses a texture-based bitmap API to draw styles on the GPU.
Currently it’s using Starling as it’s underlying display platform, but we anticipate dropping Starling support in favour of Nicolas’ H2D library (when it is a little more mature and supports a few more platforms).

There is also no reason that NME couldn’t support this type of skin, so expect to see that in the future (this would allow use alongside the graphics-type API above).

Note: The skin used here is based on Mani’s UI style.

HTML5 in Chrome

HTML5 Wrapper

We see this wrapper coming in handy when a native app needs to be pushed to the web.
Obviously you’d want to get some CSS in there as well.

I’ve just included here as an image for those on old browsers (sliders are very weird in IE9 btw).

Waxe on Windows

Waxe Wrapper

Waxe is a Haxe wrapper for wxWidgets, a native UI binding library for Windows, OSX and Linux. Unfortunately the project seems to have stalled (Hugh?), but I still believe it’s a good starting point for native UIs (especially for OSX).

The wrapper classes made for Waxe would hopefully provide the base for wrapping a similar solution for mobile, wrapping a library like Basis or MoSync NativeUI (with a set of externs), which would then open up support for iOS, Android and WP7 native controls.

Disclaimer

Whilst I haven’t pushed anything to haxelib yet, I’ll include the information below for anyone who wants to poke around the repository and test it out.

Setup

To use Guise with a native UI wrapper, you’d do something like this (file paths will have to be relative to calling class):

1
2
3
var root = new ComposeRoot();
root.addTraits([WindowTag, StageTag]);
XmlToCode.path("guise/Platforms/Waxe.xml").install(root);

And if you were using Guise with non-native controls, you’d set up like this:

1
2
3
4
var root = new ComposeRoot();
root.addTraits([WindowTag, StageTag]);
XmlToCode.path("guise/Platforms/NME.xml").install(root);
XmlToCode.path("guise/Styles/Chutzpah.xml").install(root);

All of these XML files get turned into classes at compile-time by the XmlToCode macro I built recently.

Adding controls

You can add a Text Button like this:

1
2
3
4
var item:ComposeItem = new ComposeItem();
item.addTraits([new TextButtonTag("Text Button"),
                new BoxPos(0,0,100,30)]);
root.addChild(item);

And a text input:

1
2
3
4
var item:ComposeItem = new ComposeItem();
item.addTraits([new TextInputTag("Type here"),
                new BoxPos(0,0,100,30)]);
root.addChild(item);

The code is exactly the same regardless of the intended platform, just the initial install call changes.

Skinning

The skinning system is very flexible and doesn’t push an anticipated structure on the developer. For example, a TextInput control can be skinned to have no text field, or ten of them, or an icon, or whatever your designer desires.
Each control has states, these are like MouseOver, Inactive or Focused; multiple states can be active at once. Each control also has layers and these layers can take on a different appearance based on which states are active. Each layer can also change it’s size and position based on which states are active (and transitions between these positions will be generated).

Future?

As mentioned above, we’re waiting for a few other haxe libraries to stabalize before integrating them, but once they have been integrated we’ll have all popular platforms covered in one way or another.

Native Layouts

Currently Guise has a few Haxe-based layouts and I intend to expand on this, but sometimes there is no substitute for native layouts. Supporting these would be a matter of providing some sort of NativeLayout class which would read a platform-specific layout file (XIB for iOS/OSX, Layout XML for Android, XAML for windows). The generation of all of these layout files from a common source file is the subject of another research project I’m working on (slowly).

Skin editor

As skinning is done in XML, I will at some point look at the viability of building a visual editing tool. This would use vector based drawing tools which could then be exported as either Graphics skins or Bitmap skins (with scale-9, bitmap fonts, etc).

XInclude for Haxe

When working with XML files, it’s often convenient to break the data structure down into smaller parts, each saved within a separate file.
There is a standard called XInclude which allows XML sources to reference other XML sources which can help reassemble your separate files into one structure.

As part of my XML Tools library, I’ve implemented an XInclude system which takes in a root XML file, loads in any referenced XML files and returns the complete XML structure.

Note: I’m well aware that XML has become the whipping boy of the web-dev world, but despite it’s verbosity we still have to deal with it.

Structuring your XML

To reference a file from within your root XML file (or any subsequent file), use the ‘include’ element like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// root.xml
<root>
    <include href="child.xml"/>
</root>

// child.xml
<child>
    <grandchild/>
</child>

// results in
<root>
    <child>
        <grandchild/>
    </child>
</root>

Or if you’re already using elements with the name ‘include’, you can use the XInclude namespace:

1
2
3
<root xmlns:xi="http://www.w3.org/2001/XInclude" >
    <xi:include href="child.xml"/>
</root>

As per the spec, if you want the referenced file to be added as a text node, you can specify using the ‘parse’ attribute:

1
<include href="child.xml" parse="text"/>

I’ve also added a feature which is not in the spec but I have found useful in the past. Using the ‘inParent’ attribute, you can have the root element of the referenced XML file ignored, with all of it’s attributes and chidl nodes being added directly to the parent node of the ‘include’ element. Here’s an example of the results:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// root.xml
<root>
    <include href="child.xml" inParent="true"/>
</root>

// child.xml
<child attribute="test">
    <grandchild/>
</child>

// results in
<root attribute="test">
    <grandchild/>
</root>

Installataion

As per usual, you have to install the xmlTools library from haxelib like this:

1
haxelib install xmlTools

And then include this library in your project settings.

Usage

Scroll to the bottom if you’re interested in using the tool from the Command line.
By default it uses the ‘mloader’ haxelib for all of it’s file-system access (you can use your own I/O system by implementing the org.tbyrne.io.IInputProvider interface).

1
2
3
var xmlIncluder = new XmlIncludeManager(new MLoader());
var task:IXmlIncludeTask = xmlIncluder.add("root.xml", "C:/xml/folder");
task.startInclude();

The first parameter here is the name of the root XML file, the second is the folder where all of the XML files are located.
The XML file-paths can include sub-directories of the root directory passed through.

You can then monitor the progress of the task like this:

1
2
3
4
5
6
7
8
9
xmlIncluder.progressChanged.add(onProgressChanged);
xmlIncluder.completeChanged.add(onCompleteChanged);

function onProgressChanged(from:XmlIncludeManager):Void{
    trace("progress: "+from.getProgress()+"/"+from.getTotal());
}
function onCompleteChanged(from:XmlIncludeManager):Void{
    trace("is complete: "+from.getComplete());
}

Command Line interface

I’ve also wrapped this code in an executable shell so that it can be used from the command line.

1
2
3
4
5
// as an executable
XmlIncluderShell root-file.xml -d C:/xml-directory/ -o C:/output-file.xml

// or as a neko executable
neko XmlIncluder.n root-file.xml -d C:/xml-directory/ -o C:/output-file.xml

The first argument is always the root XML file to operate on.
The second argument (-d) is the root directory that contains all of the XML files.
The third argument (-o) is the output file to write the result to.

Multiple executions can be done with one command using the ‘–‘ separator:

1
XmlIncluderShell root-file.xml -d C:/xml-directory/ -o C:/output-file.xml -- root-file2.xml -d C:/xml-directory2/ -o C:/output-file2.xml

Download executable here
Download Neko executable here

E4X Macro for Haxe

I recently needed to navigate some XML in Haxe and noticed that there were few options for doing this quickly and easily in Haxe.

I did notice Oleg’s Walker class which brings some of the E4X functionality of AS3 to Haxe.
While the resulting code was more elegant than hand-writing loops and tests, it still felt too verbose, and I decided to add some macro sugar to it to cut down the syntax (and bring it closer in line with the E4X spec).

The result is the E4X class, which reduces the amount of code by 2-3 times (in comparison to a fully runtime, function-based solution). Due to haxe language restrictions, the resulting syntax is not quite as compact as the AS3 equivalent, but it’s close.

Usage

E4X expressions must be wrapped in the macro call, and they return an iterator of values (the type of which is based on the last part of the expression).

To get all children:

1
var nodes:Iterator<Xml> = E4X.x(xml.child());

Here are some different ways to get a list of all the child nodes with the name “node”:

1
2
3
4
5
6
7
8
9
10
11
var xml:Xml;
var nodes:Iterator<Xml> = E4X.x(xml.node);

// or (for example)
var nodes:Iterator<Xml> = E4X.x(xml.child("node"));

// or (using an expression which will be wrapped in a function call)
var nodes:Iterator<Xml> = E4X.x(xml.child(nodeName=="node"));

// all of which are shortcuts for this filter expression
var nodes:Iterator<Xml> = E4X.x(xml.child(function(xml:Xml, _i:Int):Bool{return xml.nodeName=="node";}));

To get the text of a node use the text() method:

1
var nodes:Iterator<String> = E4X.x(xml.text());

To access descendants, use the “desc()” method, or the underscore shortcut:

1
2
3
4
5
var nodes:Iterator<Xml> = E4X.x(xml.desc());
// or
var nodes:Iterator<Xml> = E4X.x(xml._());
// or just
var nodes:Iterator<Xml> = E4X.x(xml._);

Here are some different ways to get a list of all the descendant nodes with the name “node”:

1
2
3
4
5
6
7
8
9
10
11
var xml:Xml;
var nodes:Iterator<Xml> = E4X.x(xml._("node"));

// or (for example)
var nodes:Iterator<Xml> = E4X.x(xml.desc("node"));

// or (using an expression which will be wrapped in a function call)
var nodes:Iterator<Xml> = E4X.x(xml.desc(nodeName=="node"));

// all of which are shortcuts for this filter expression
var nodes:Iterator<Xml> = E4X.x(xml.desc(function(xml:Xml):Bool{return xml.nodeName=="node";}));

Getting a list of descendants that have an “id” attribute would be done like this (the a(“id”) call acts like a filter):

1
2
3
4
5
6
7
var nodes:Iterator<Xml> = E4X.x(xml._(a("id")));

// which could also be written as
var nodes:Iterator<Xml> = E4X.x(xml._(a(attName=="id")));

// both of which will be expanded to
var nodes:Iterator<Xml> = E4X.x(xml._(a(function(attName:String, attValue:String, xml:Xml):Bool{return attName=="id";})));

Whereas, if you wanted to get the “id” attributes themselves, you could do this:

1
var nodes:Iterator<Hash<String>> = E4X.x(xml._.a("id"));

To get all of the ancestors of any nodes with an “id” attribute equal to “test”, you could do this:

1
2
3
var nodes:Iterator<Xml> = E4X.x(xml._(a("id")=="test").ances());
// or (a little less legible, but will perform slightly better)
var nodes:Iterator<Xml> = E4X.x(xml._(a(attName=="id" &amp;&amp; attValue=="test")).ances());

 

Comparison with AS3 E4X

Getting children with a specific node name (i.e. “node”)
AS3 E4X xmlRoot.node
Haxe E4X xmlRoot.node
Getting descendants with a specific node name (i.e. “node”)
AS3 E4X xmlRoot..node
Haxe E4X xmlRoot._(“node”)
Getting an attribute
AS3 E4X xmlRoot.@id
Haxe E4X xmlRoot.a(“id”)
Getting all descendants with a “id” attribute
AS3 E4X xmlRoot..(@id.length())
Haxe E4X xmlRoot._.(a(“id”))

Note that all of these examples should be wrapped in the E4X.x() call, as in the code snippets above.

 

Performance

I also ran some performance tests for several targets (and the equivalent tests in AS3 E4X), the results of which are below.
This helped me make some performance improvements to Oleg’s original code, and I managed to squeeze an extra 25-30% increase in performance out of it.

Surprisinigly, the JS target seems to perform best overall (although this is probably more as a result of Chrome’s JS engine).
Even after my improvements, the AS3 target was woefully slow in comparison to it’s native counterpart, although all of the other targets seemed to hold their own, with more complex expressions becoming faster than the AS3 E4X equivalent (if anyone knows why this performs so poorly, let me know).

AS3 E4X Hx > Flash Hx > JS Hx > C++ Hx > Neko
Get Children 0.00 0.21 0.03 0.22 0.03
Get Children With Attrib 0.08 1.02 0.24 0.10 0.31
Get Descendants 0.92 7.20 0.52 0.57 0.94
Get Descendant Text 1.48 19.40 1.97 1.83 3.22
Get Descendants by Name 2.33 11.05 0.24 0.51 1.42
Get Descendants with matched Attrib. 2.70 30.10 1.20 2.23 7.51
Measurements are in seconds per 1000 calls
JS tests done in Chrome 24 Win64

If anyone has any idea how to use the @ symbol in method names in haxe (without the compiler complaining), let me know and I’ll make attribute accessors match the spec.

I will be releasing this code as part of an upcoming haxe library called “xml-tools”, but until then, feel free to download the E4X class here.

Shout out if have any issues.

Fitting Text into a Box

On a recent job I was tasked with creating a visually elegant replacement for an image out of some text (when an image was unavailable).
I decided to adjust the font-size of each line of text in a block to fill a box.

The result is the TextBoxTest class.
To use it, you create a text field, set it’s properties (text/size/multiline etc), then send it to the TextFitter class like this:

1
2
3
4
5
var field:TextField = new TextField();
field.text = "THIS IS SOME DEMO TEXT.";
field.width = field.height = 50;
field.multiline = field.wordWrap = true;
TextFitter.fit(field);

The second parameter is ‘defaultSize’, this gives the TextFitter a starting point when resizing the text and does affect the end result. If ommitted, the font-size from the ‘defaultTextFormat’ will be used.

If wordWrap is set to false, you’ll have to manually add line-breaks. In this mode lines of text will simply be resized until they’re the same width as the field itself (the height of the field will be ignored).

If wordWrap is set to true, the height of the field will be taken into account, and the text will be reduced in size until it all fits within the field. If ‘defaultSize’ is ommitted and ‘wordWrap’ is true, TextFitter will first attempt to maximise defaultSize so that it always fills the field (even if the defaultTextFormat.size property wouldn’t ordinarily fill the field).

It’s worth noting that the code uses multiple while loops and while it has internal limits on iterations, I’d recommend using it up once and then generating images from the output.

Click flash to focus, Orange circles resize boxes

Download the demo source here

Haxe Lazy Instantiation Macro

After finally settling on msignals as the event system used in my libraries, I turned my attention to cutting down the amount of code required to use it.

To minimise the memory overhead (and dispatching performance) of signals, I prefer to use lazy instantiation. But this can make the implementation a bit verbose.

Hence my lazy instantiation macro, it only cuts out 3 lines per signal, but makes the code considerably more legible.

Continue reading

Space Junkie update

In my spare time I’ve been working on a game for mobile.
It’s based on Haxe/NME and Nape Physics.

In this demo you can also catch a tiny glimpse of my upcoming GUI library (using the Chutzpah skin by Morgan Allan Knutson).

[kml_flashembed publishmethod=”static” fversion=”11″ movie=”http://www.tbyrne.org/wp-content/uploads/2012/09/SpaceJunkie.swf” width=”660″ height=”530″ targetclass=”flashmovie”]

Get Adobe Flash player

Click flash to focus, Arrows to move

Generating Docs for Github Wiki from Haxe code

Following some pretty good feedback on Composure, the composition library for Haxe, I decided to get some code documentation published.

The result was a batch file which would generate documentation in Markdown format, which can then be manually committed and pushed to the github wiki. You can check out some examples of the results here, here & here.

The Documentation system

I wanted to have something generated directly from the code, and I had a preference for having it hosted within the Github Wiki system (for the simplicity of having code and docs accessible from the same place).

When a repository is created in Github, the system automatically creates a second repository to store the wiki files, which can be edited via the Github web interface or by cloning this wiki repository onto your local hard-drive and manually editing the files, which are in Markdown format, a simplified formatting language which gets converted to html by the github back-end.

I’d need to generate Markdown from my code and have it placed into wiki repository. I only found a few documentation systems which processed haxe code, and only one of them which allowed for custom templates, this was ChxDoc.

There were a few limitations to ChxDoc, specifically, that you have no control over what files get generated, or what file type it spits out. I’d have to reorganise and rename the ouput files as part of my batch file. ChxDoc works by processing an xml representation of the code, which is created by running the haxe compiler with the -xml flag, I’d include this step in my batch file as well.

The Templates

I copied the default ChxDoc template and stripped all of the html tags out then added in the Markdown syntax. I didn’t need several of the output html files, so some of the template files remained untouched (deleting them caused ChxDoc to fail).

ChxDoc (and my template) supports the following tags:

1
2
3
4
5
6
7
8
9
10
@author
@deprecated
@param
@private
@requires
@return (or @returns)
@see
@throws
@todo
@type

If you just want the template files, you can grab them here.

Setting up the Repositories

To streamline the documentation process, I added the wiki repository as a submodule to the main repository, this means that the wiki files would always sit in the same relative position to the main source code (i.e. in a ‘github-wiki’ folder).

In the ‘build’ directory, I created a batch file which does the following:

  • Generates the XML representation of the code using the haxe compiler.
  • Deletes the old documentation folder.
  • Regenerates the documentation using the chxdoc program, my templates and the xml code graph.
  • Deletes irrelevant generated files.
  • Renames the ‘All Classes’ file (changing the file type from html to md).
  • Changes the remaining html files to md files.

The batch file, template and ChxDoc are all included in the Composure repository (don’t tell me that binary files don’t belong in a repository you nazis) or you can just check out the batch file here (which will obviously only function on Windows).

Edit: 06/02/2013

I have updated the templates for the latest ChxDoc version (1.2.0).

Introducing Composure for Haxe (with Dependency Injection)

Over the years I have realised that inheritance is massively overused by developers, and that by replacing it with a solid composition design, a lot of code becomes a lot more reusable.

Some languages and platforms have native support for composition (e.g. Unity3D), but for the languages I use there was nothing, so about two years ago I built a lightweight composition framework for AS3 called Composure, I’ve recently completely rebuilt it for Haxe, utilising Haxe’s awesome typing and macro systems to make this small library really powerful.
Continue reading

Internet Archive Android App

I’ve just released a new Android App.
It allows you to watch out-of-copyright videos from the Internet Archive Database on your phone or tablet.
It’s currently early days and it doesn’t really have any browse functionality yet, just search fields.

An iOS version will be coming soon also.

Evolvex Furniture Builder

In this flash app I built for Evolvex, users can assemble furniture from different components in a 3D environment. When finished the furniture can be purchased, all of the components, along with a diagram of the furniture gets sent to the user.
Continue reading

SWC packaging ANT Task for Flash Builder

Download the SWC Packager ANT task here (source included)

Often, my project workflows include checkouts of other remote code repositories. This means I can directly edit the code and have it immediately compiled into my project, without having to compile an SWC and copy it into my project. This can lead to problems when the project needs to be rolled back to a previous revision (there is no easy way of knowing which revision the remote repositories shuold be checked out at), and issues with remote repositories that are moved/removed.

In the past I have used the SVN externals to achieve this (including using the ‘-r’ option to pin externals to specific revisions), but this solution still didn’t get around repositories that are moved/removed.

I ended up writing an ANT task which can build an SWC based on a Flash Builder project file. This way I could integrate regular SWC creation into my deployment process, backing up all external code.
The ANT task also has the option to export a manifest XML file detailing all of the classes included in the SWC.

These are the compilation arguments taken from the project file:

  • All classpaths & SWC paths
  • Accessibility setting
  • Target flash player

These are the additional options:

  • sdk – a path to the sdk folder. This is used to find the frameworks directory and the compiler.
  • projectPath - a path to the root folder of the project.
  • sourceExceptions (optional) – a comma separated list of source paths to exclude from the SWC (they will still be compiled against, just not included)
  • linkReport (optional) – a path to a link report XML file (as output by the mxmlc compiler), this can be used to specify a list of classes to include. By including the link-report argument in your main project then passing this path to the SWC Packager your SWC will only include classes currently used in your project.
  • includeMainSource (optional) – a boolean specifying whether the main source path should be included in the SWC. Defaults to false.
  • manifestOutput (optional) – a path specifying where the manifest XML file should be saved.
  • computeDigest (optional) – a boolean specifying whether a catalog.xml file should be generated (for use by RSL). Defaults to false.
  • outputAsDirectory (optional) – a boolean specifying whether the compiler should output a folder with AS files instead of an SWC file. Defaults to false.
  • additionalArgs (optional) – additional compiler arguments can be passed through here.
  • configXML (optional) – a string pointing to an additional config XML file.
  • compileDebug (optional) – a boolean specifying whether the debug compiler option should be used. Defaults to false.
  • verbose (optional) – setting this to true will make the SWC Packager print out the full compiler command before executing it. Defaults to false.

When includeMainSource is set to true and a link-report is specified, only classes that meet both conditions will be included.

Here is an example of how the task can be used in your ANT script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<project name="SWC Packager" basedir="../">
    <property name="FLEX_HOME" value="C:\FlexSDKs\4.5.0" />

    <taskdef name="swcPackager" classpath="${basedir}\build\SWCPackager.jar" classname="org.farmcode.antTasks.SWCPackager"/>
   
    <target name="Package All Source" description="Builds all AS code into an SWC.">
        <swcPackager sdk="${FLEX_HOME}" projectPath="${basedir}"
                includeMainSource="true" swcOutput="${basedir}/build/allCode.swc" configXML="config.xml"/>
    </target>
   
    <target name="Package All Third-party Source" description="Builds all AS code except main src dir into an SWC.">
        <swcPackager sdk="${FLEX_HOME}" projectPath="${basedir}" includeMainSource="false"
                includeMainSource="true" swcOutput="${basedir}/build/thirdPartyCode.swc" configXML="config.xml"/>
    </target>
   
    <target name="Package All Referenced Source" description="Builds all referenced AS code except main src dir into an SWC.">
        <swcPackager sdk="${FLEX_HOME}" projectPath="${basedir}" linkReport="${basedir}/build/linkReport.xml"
                includeMainSource="true" swcOutput="${basedir}/build/allReferencedCode.swc" configXML="config.xml"/>
    </target>
</project>

Download the SWC Packager ANT task here (source included)

Nokia Bill Exchange

This is a microsite I built for Nokia with the great group at JWT.

I built the physics portion of the site, all of the items and navigation moving around in the background using Box2D. I also built several of the pages.


Continue reading

The Bad Eggs

I’ve been doing some work down at JWT recently and found myself building this silly physics prototype.
You can add eggs and then smash them against one another or the walls.

Get Adobe Flash player

A more general CSS

As a language, I like CSS, it has a simple elegance that achieves it’s humble goals very nicely.
It’s these humble goals that bother me.

HTML is an XML based language, and fundamentally, all CSS is doing is targeting nodes within this XML and modifying their attributes. Of course, it’s not possible to, for example, modify the href property in an anchor tag, and this shows that the implementation of CSS is stifled by it’s modest goals.

Also, CSS’ ever-growing list of selectors shows a fundamental inflexibility in it’s syntax. Selectors basically target specific nodes within your HTML, this sounds to me an awful lot like the job for XPath.

Imagine a CSS where XPath statements replace selectors and a generalised set of property modifiers replaced style declarations.
In this way you could (for example) set all the target attributes within all anchor tags to "_self".

1
2
3
//a {
    target:set("_self");
}

Or you could remove all the width and height attributes from img tags that don’t have a src attribute.

1
2
3
4
//img[not(@src)] {
    width:remove();
    height:remove();
}

Or you could add some copyright info to the alt attribute of any img tags within any div tags with class="portfolio".

1
2
3
//div[@src="portfolio"]//img {
    alt:append(" © 2010");
}

The biggest issue I can see arising from this is that styles on HTML elements are not individual attributes but a collection of declarations compiled into a single attribute.
To get around this I have a few solutions.
Firstly we could create a Regular Expression based string modifier which gets executed on the specified attribute of the targeted nodes (in this case the ‘style’ node), something like this (here I’m setting line-height=20px; on all p tags).

1
2
3
//p{
    alt:mod("line-height\:.*;", "line-height:20px");
}

I think you can probably see that this is not ideal though, it is very verbose, difficult to read and would make cascading declarations a nightmare for the browsers reading this code.

The ideal system (IMO) would unfortunately require a modification to the HTML spec, it would require styles to be broken out into their own child node, for example:

1
2
3
4
5
6
<p>
    <style display="block" float="left"/>
</p>
<a>
    <style color="#00ff00"  color.hover="#00ffff"/>
</a>

And then, to set our style would be a normal attribute setting modifier.

1
2
3
//p.style {
    line-height:set("20px");
}

Alternatively, we could create a style specific attribute modifier. I am reluctant to vouch for this because it is a special case but it could be the more feasible (as it doesn’t require changes to the HTML spec). It’d look something like this:

1
2
3
//p{
    style:setStyle("line-height", "20px");
}

You can see that vastly broadens the scope of CSS to the point that Cascading Style Sheets is no longer an appropriate title (maybe XMod or something is better).
Here are several situations I can think of where such a system could be useful (outside of styling). Remember, none of these permanently affect the underlying XML, they’re more of a filter through which XML can be viewed.

  • Applying formatting to Word documents using the XDOC file format.
  • Creating a mobile friendly version of flash files using the XFL file format (i.e. removing filter effects, removing embedded fonts, etc).
  • Modifying the Firefox UI using the XUL interface files (as if we need another way to customise Firefox).

© 2014 Thomas Byrne

Theme by Anders NorenUp ↑