Getting ready for the early beta of the iterate tool, sign up at http://it3rate.com if you are interested : ). It should be in a few weeks I hope.

To be useable, it’s really important this works well with other design tools, not just other code tools (and eventually, with management tools). The new ‘update’ feature is the first UI step here, it checks the working folder for changes every time the It3rate program regains focus. If it has, a little ‘update’ icon appears next to the file in the library. Clicking it updates the library as well as all uses.

(Click for video)

I’ve designated a folder where these source files should go, or at least their exports, called filename_working. I’m always unsure about this kind of thing – you don’t want to force a workflow, but there is also a huge problem with assets sources that lose their mappings when moving to a coworkers machine. These are the kind of raw files that don’t always need to be in source control, but things can get out of sync if updates aren’t done through them (eg, fla, swf, psd..). As it is, the update feature only works if the files are there – maybe that is a way to encourage but not require it’s use. I suppose that folder will be settable per project eventually, for those who use network drives.

There is also a rudimentary property bar now. It is only hooked up for on screen assets atm, but eventually it should be very context sensitive.

Other news, the It3rate tool’s binary export format now runs in both iOS and html Canvas, Android next up. The code for this is online at github (the VexDraw ones). There was a video about this as well, at http://www.youtube.com/watch?v=lwhFQqCPNLU

Here is an update on the ‘draw’ export of the It3rate tool. It now exports in an nBit compressed binary format (aka a very small file). This can be loaded and rendered by any platform that has a drawing context. In this case it is coming in to html canvas.

The cool thing with that is it can now come in asynchronously as a binary file using XmlHttpResponse. So it is essentially the graphic part of a swf file, but available natively in the browser. Because you control the render, this also means everything is runtime editable – colors, vectors, symbols, timelines etc.

There are a lot of possibilities with this kind of thing I think, the core of Flash without the plugin for a start.

(click for video)

The full haxe project on github:
https://github.com/debreuil/VexDrawCanvas

The binary file format so far:
https://github.com/debreuil/VexDrawCanvas/wiki/BinaryVexDrawFormat

Not sure why I never noticed this before, but in the left most column VS marks changes (yellow) and saved changes (green). This is really handy when bouncing around between areas in a class. I usually use ctrl-/+ or bookmarks, but this are great low friction markers — once you see them : )

An update on the UI Layout tool, the ‘bond’ features are nearly done. It will remember (and export to the runtime) your constraints for:

- snap to objects
- snap to guides
- align
- distribute
- aspect constraints

I’m still settling on how the flow should work ‘algebraically’ but it is getting close. Also I’ve tried about 5 different approaches to storing and flowing the bonds. The current format works and is fairly flexible for testing, but I’m thinking it needs more of a grammar/parser approach (that may be tricky because it is a combo of recursively finding and flowing elements, avoiding circular loops etc, but it ‘feels’ like it should be that).

This ’should’ help bringing the intent of your design automatically onto different devices. The upcoming ’screens’ and ‘priority’ features will supplement this kind of metadata. Then whole thing translates fairly well downwards into symbols, which hopefully will work well for component type UI elements (at design time and runtime).

(click for video)

Been posting this on Google+, putting it all together here for my easy reference : )

9 Box

Rough plan of the ‘9box’ symbol. It should allow guides if needed, but autodetect your intentions if it can do that correctly. Potentially even autodetect the 9box (or nBox) from a bitmap. A true 3box (where the tl and bl are not symmetrical) would need to be specified in the properties.

It also needs layers for things that cover the whole box, like a shadow or highlight. These things can scale based on their locks and springs – so eg a highlight on the entire box, or textbox with it’s top left corner locked to the top left box’s center point.

Docking/Templates

Templates

- templates are per device or per screen (template is created for each target screen, all common devices have prebuilt templates).
- some devices (like XBoxes) have an unknown screen, so you can target multiple screen (eg: put unimportant graphics in the 16:9 area).
- guides are attached to the template, not the rulers.
- guides are locked to the template, and move/grow proportionally as the template changes.
- There is a view mode for each targeted template. Automated positions can be overridden in those, but not in the ‘master’ template (some kind of broken icon for the overridden handle).

Handles

- handles are normally box (or rotation) allowing the designer free control of the object.
- anything with box icons (default) will behave as normal, and will be positioned in absolute coordinates on export.
- a lock icon always locks to the template (or guides).
- a pin icon locks to the paper (which grows and shrinks per device template
- an anchor locks to objects
- a spring locks to objects or templates/guides

Button One

- if a side is locked (like button 1 top), then not only is its position locked to the template, but the designer can not scale in that direction without removing the lock.
- in the case of button 1, the top corner boxes will only allow horz scaling, thus they are greyed out a bit.
- whenever something is moved to ’snap’ to a guide/template, it automatically locks in that direction. If moved or keyboard nudged, it keeps the lock, but it becomes distance bound.
- locks can be cleared with a shortcut (perhaps ctrl/shift/Z, clear all transforms also breaks custom icons?).

Button Two

- in button two (bottom left image), the item is locked 5 pixels from the bottom left title safe area (this may be better accomplished with guides?). It is also pinned to the paper on the right. Thus it will grow horizontally to the right. It does this when the designer drags it, per template, and when the width is set in code. The top is not set, therefore it will not change per template (constant height), however it could change with code or by designer adjustment.

Center Group

- the center icon group is pinned to the center (center icons can be set). In the center this has the same effect as being locked to the center, but had it been offset, the offset would be proportional the the template size.
- these icons are separated by springs. This can be set manually, but it is automatically set when something is distributed.
- Spring or anchor joined objects become a ‘weak’ group. In the center icons case, you could move the third icon independently, but the second would move to keep the distances equal, and pin would change locations. Had the pin been a lock, the first icon would move left to keep distances equal.

Bottom Right Set

- the second icon set (bottom right) has been top aligned. This automatically anchored to tops to each other. moving one icon up or down will move them all, but moving them left or right will be the spring behaviour.
- they are locked to the guide on the right. Moving this guide will move the group (and anything else attached to it). Probably that would move the group ‘as is’ rather than affecting the springs.
- the guide is locked to the template, so as the template grows, the guide will as well.

Templates in Symbols

- templates can be used internally to define symbols. The allow things like minimum size, flow handling, stretch logic etc. So when scaling a symbol defined with a template, you will not necessarily get the regular stretch – eg a grid defined this way may space the icons differently (or even add icons if it is so defined).

Edit in Place

The green outline is the bounds, but it isn’t a template/guide bounds so you can’t lock objects to it. It auto grows and shrinks as you transform objects like normal, but distinguishes from Flowable objects (next). When used, this type of symbol scales like normal objects in Flash do, where flowable objects can have specific flows.

Flowable Symbol – Kern

This is editing an Array or Flowable symbol (not sure what to call these yet, they are like primitives that you use for components, with specific flows and can be made of collections).

This shows a grid of objects, but it could also be used to specify a table row of multiple elements, or a whole table where each row is grouped (that may be separate versions of the same type of element).

The elements have been separated by springs (selecting the first two elements and ‘distributing’ would give this setup for everything). The number of elements can be set with the slider. The designer can drag in different types of symbols and they will be added to the possible symbol types. For auto added types, the user can specify on the property bar whether to add randomly or in order added.

These types can be marked ‘Creatable’, where it is empty at start up and is dynamically filled at runtime (the object is a collection in code, and syntax is basically xx.Add() or xx.Add(Type) if the developer wishes to add different types of objects). This can be restricted by specifying ‘named types’ – eg: only allow symbols with at least an element named ‘bkg’ and a text field named ‘label’. This can be set in the ide as well.

When the blue handle at the bottom right is moved in, the objects compess their width based on the regular handle icon rules.

This version flows down, as indicated by the top left icon, and the arrow at the bottom of the first icon. The elements of the first row are therefore indexed 0,2,4,6.

The blue outline box indicates this is a templated component, so it flows when scaled. When finishing editing the component will retain its set bounds, but if it is scaled later on stage it will flow the same way it did when edited.

Floawable Symbol – Wrap

This is similar to the kern object, but it is set to wrap. Kern or wrap will need to be able to be manually specified, probably if the row count or column count is manually set then it must be a kern object, if not it is a ‘wrap at bounds’ object. That level of specification probably needs to be discovered through use…

A quick demo of how the rulers are working in the UI Layout tool. Wondering about a few things…

What is your opinion of selection markers rather than pixels in the ruler?
Should the center of the selection markers be width/height, or the center location in pixels?
Does the cursor need it’s own selection marker? Maybe only when there is no selection?
Are divisions more useful than pixels (assuming pixels happen on the selection markers)?
Does there need to be ticks off page?
Should rulers be tied to guidelines?
If not, should show guides be tied to ’snap to guides’ (and the same with grid show/snap)?

(click for video)

Some of the new features in the UI Layout tool. Menus are hooked up, and more or less are active/inactive at the right times. The core of it is now pretty robust as far as stressing it.

New Features:
Custom Cursors (ooohh, aaahhh)
Duplicate
Zoom to Fit/Selection/100%
Rotate 15 Degrees on < > Keys
Flip horizontal/vertical
Remove Transforms
Align and Distribute
Order (to top, up one etc)
Create Symbol, Break Apart
Clickable Breadcrumb Indicators when editing nested symbols
Repeat command

Forgot to demo remove transforms and breadcrumbs (when you are editing a ’symbol’ you can click your way up and down the nesting on the toolbar). You can sort of see the breadcrumbs when editing a symbol, if you look real fast : ).

(click for video)

All transforms are now running on nested matrices, this should make zooming, panning, and symbol editing fairly straightforward (next).

There are a lot of edge cases with this. Mostly they come from two places:

1) as you select multiple things, you have to choose to either make them a temporary single symbol, or treat them as just a collection of individual objects. Doing the former would mean selected objects are no longer directly on the stage, so I went with the latter. This means once you rotate a selection, the objects rotate, but the transform handles need to keep track of where the selected group started and have a second matrix. Among other things.

2) Single object selection and multiple selection are treated differently – the transform matrix from a single object comes from the instance itself, for multiple objects you need a temporary matrix. This causes scaling to work differently – single objects scaling will never affect the rotation portion of the matrix, multiple objects may.

(click for video)

Had a little more time this maylong (that is the ‘May Long’ weekend for all you non-Canuckians). I think another week or two and I’ll be able to start adding the non-generic features I’ve wanted in a UI tool. Hope I’m not too disappointed : ).

New features since last time:
Full vector renders, smarter caching
Scaling from transform handles
Create symbol from selection
Symbol renaming
Debug mode

(click for video)

This is a quick test app to see what all is involved with making a layout tool. It is actually quite a bit easier that I feared. I’m using a greyscale backing image to figure out what is clicked and dragged, and the swf2xna base libraries for swf vector support. I have a long list of things I’d like to see in a UI tool, this is basically a shell I can use to try them out. I had started this in QT but switched to C# to use the swf libraries (I wish I was more experienced with QT, it seems awesome).

(click for video)