AWML is a web components library for building professional audio user interfaces. It has close integration with the aux-widgets library.
This introduction aims to give an overview and explain basic concepts of AWML. It provides links to more in-depth documentation of the features discussed.
Parameter Binding for connecting UI components with backend parameters,
Templating for combining pre-defined views into complex interfaces and
Protocol Backends for controlling device backends.
For binding components to backend parameters, for instance using a standard
audio control protocol such as AES70, AWML
allows backend parameters to be assigned to the DOM tree. This relies on backend
parameters being represented by some kind of hierarchical addressing scheme (e.g.
Channel1/Mute). These parameter addresses will then be used by AWML
components in order to decide which backend parameter to bind to.
In general, there can be any number of different parameter trees defined on top
of the DOM, however in basic views it will be only one. The assignment of
parameter addresses to DOM elements is done hierarchically by assigning address
prefixes to nodes. The resulting address of a given node is then the
concatenation of the prefixes of the node itself and all its parents. Parameter
trees are denoted by their unique string handle and the prefix of a node for a
given handle is set using the attribute
prefix-<HANDLE>. The default
parameter tree with handle
null uses the attribute
The documentation of collectPrefix contains more details about how prefixes are combined into a resulting address.
Backend parameter can be bound to
aux-widgets components and properties of Template Components using OptionComponent,
DOM element attributes using AttributesComponent,
CSS classes using ClassComponent,
CSS styles using StylesComponent,
the visibility of elements and widgets using HideComponent and ShowComponent,
the template name or location using CloneComponent and
the prefix of a node using PrefixComponent.
There are two main ways of templating built into AWML. The first are standard HTML templates which can be cloned into the DOM using the CloneComponent. The second are Template Components which allow building complex custom components based on HTML templates.
Basic HTML templates can either be
<template> elements with a unique
or simple HTML files. The CloneComponent can then be used to clone those
templates into the DOM. It can then be combined with e.g. the
attribute to attach it to the corresponding backend parameters.
<template id=channel> <aux-fader> ... </aux-fader> <aux-toggle label=Mute> ... </aux-toggle> </template> <awml-clone template=channel prefix='remote:Channel1/'></awml-clone> <awml-clone template=channel prefix='remote:Channel2/'></awml-clone> <awml-clone template=channel prefix='remote:Channel3/'></awml-clone>
Template components instead are Web Components which are defined using a HTML template. This HTML template contains template expressions which are mapped onto properties of the resulting component. See Template Components for an introduction.
In AWML protocol backends can be thought of conceptually as remote devices or as some kind of backend parameters. Backends are essentially parameters which can be accessed using some unique address. If a backend is registered and given a name, its parameters can be referenced by components in parameter bindings.
Backends can either be created and registered using the BackendComponent
or using the global functions registerBackend. Then a parameter with
<parameterName> in a backend registered under a name
will be available under the global address
AWML components follow several simple conventions.
A component called OptionComponent will be registered for the tag name
If a component has a property called
somePropertyit will map the attribute
some-propertyonto that same property. The conversion between the attribute value (which is a string) and the property value depends on the datatype.
AUX widgets integration¶
AWML has built-in support for interfacing with widgets from the aux-widgets library. This allows one to
connect backend parameters to aux widget options (see Parameter Binding) and
subscribe to events emitted by aux widgets (see EventComponent).