blog.joa-ebert.com – Blog of Joa Ebert

Talking about FUI. What is FUI? It is a framework for fast device GUI creation. This means it does not imply a fancy ComboBox or stuff like that. Sliders, Knobs, Triggers and LEDs is what FUI is about. Originally André Michelle had the idea to create a tile-based and skinable system which uses a simple editor that outputs you a file. You load the file, connect the parameters with your visible elements and that’s it.

Now we are getting closer to a final version and this is why I want to show a little preview. It looks currently not very attractive but that is what the skins are good for. So to get the idea imagine you have a filter. This filter has a parameter like gain. This parameter goes from 0 to 0.5. The Parameter framework André already built allows you to do anything you want in a clean and easy way using new Parameter( new MappingNumberLinear( 0, 0.5 ). Now to change this parameter you can connect it to a FUI element like fui.connect( 'gainSlider', gainParameter ). The user will see a slider he can drag around, you saved a lot of work and can concentrate on the fun part (…the filter!).

The example is built using the following code:
[as][SWF(width='288',height='384',backgroundColor='0xeeeeee',frameRate='255')]
public class FuiTest extends Sprite
{
private const param0: Parameter = new Parameter( new MappingNumberLinear( .25, .75 ), .5 );
private const param1: Parameter = new Parameter( new MappingBoolean(), false );
private const inter0: InterpolationLinear = new InterpolationLinear( new MappingNumberLinear() );

private var point: ControlPoint;

public function FuiTest()
{
param0.addChangedCallbacks( onParameterChanged );

inter0.addControlPoint( new ControlPoint( 0, 0 ) );
inter0.addControlPoint( point = new ControlPoint( .5, .5 ) );
inter0.addControlPoint( new ControlPoint( 1, 1 ) );

var fui: Fui = Fui.build( ByteArray( new FURNACE ) );

fui.connect( ’slider0′, param0 );
fui.connect( ’slider1′, param1 );
fui.connect( ’slider2′, param0 );
fui.connect( ’slider3′, param0 );

fui.connect( ‘knob0′, param0 );
fui.connect( ‘knob1′, param1 );

fui.connect( ‘label0′, new Formatter( ‘P0: %04.2f, P1: % 4i’, param0, param1 ) );
fui.connect( ‘label1′, ‘Just a label’ );

fui.connect( ’switch0′, param1 );
fui.connect( ‘trigger0′, param1 );

fui.connect( ‘interp0′, inter0 );
fui.connect( ‘interp1′, inter0 );

fui.x = 64;
fui.y = 64;

addChild( fui );
}

private function onParameterChanged( p: Parameter, old:*, newV:* ): void
{
point.x = p.getValue();
}
}[/as]

It is easy, clean and will save you (and us) hours of boring stuff. The framework is designed in a way that a skin can do whatever the developer wants. Currently we are missing some of the last components and then of course an editor written in AS3 using AIR.

Update: I just added Group support. This way you can connect a Parameter that is using MappingValues with a set of SwitchButton objects for instance. You can connect any set of values this way with any set of components. It looks like this:

[as]private const param2: Parameter = new Parameter( new MappingValues( [ 'FUI', 'GROUPS', 'EXAMPLE' ] ), ‘FUI’ );
//…
fui.connect( ‘label1′, new Formatter( ‘P2: %s’, param2 ) );

var group: Group = new Group( fui );
group.addComponent( ‘group0′, ‘FUI’ );
group.addComponent( ‘group1′, ‘GROUPS’ );
group.addComponent( ‘group2′, ‘EXAMPLE’ );

group.connect( param2 );[/as]