### Install dependencies

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/README.md

Run this command to install the project dependencies.

```bash
npm ci
```

--------------------------------

### Serve files with NPM

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Install and run the serve package globally.

```bash
yarn global add serve
serve
```

--------------------------------

### Serve files with Erlang

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Start the inets httpd service with specific configuration parameters.

```bash
erl -s inets -eval 'inets:start(httpd,[{server_name,"AUXExamples"},{document_root, "."},{server_root, "."},{port, 8000},{mime_types,[{"html","text/html"},{"js","text/javascript"},{"css","text/css"},{"svg","image/svg+xml"}]}]) .'
```

--------------------------------

### Initialize Slider Widget

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Slider.html

Basic setup for the slider component.

```html
<div id="slider"></div>
<script>
  new Slider('#slider');
</script>
```

--------------------------------

### Standard Code Formatting Example

Source: https://github.com/deutschesoft/aux-widgets/blob/master/STYLEGUIDE.md

Demonstrates the project's standard function definition, array declaration, and string quoting style.

```javascript
function myFunction(foo, bar) {
  return foo + bar;
}

const my_array = [1, 2, 3, 4];
const myString = 'foobar';
```

--------------------------------

### Initialize Slider Widget

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Slider.html

Basic setup for the Slider component using the provided HTML structure.

```html
<div class="slider-container">
  <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
</div>
```

--------------------------------

### Using Icons in Widgets

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Theming.md

Examples of how to use icons directly within the Icon and Button widgets.

```html
<awml-icon icon=play></awml-icon>
```

```html
<awml-button icon=question></awml-button>
```

--------------------------------

### Autosizing DOM nodes

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Rendering.md

Example demonstrating how sequential DOM reads and writes can trigger multiple reflows, potentially degrading performance in large-scale applications.

```javascript
function autosize(node) {
    // might trigger reflow
    var size = Math.min(node.parentNode.innerWidth,
                        node.parentNode.innerHeight);

    // invalidates the DOM
    node.style.width = size + "px";
    node.style.height = size + "px";
}

function autosize_all(nodes) {
    for (var i = i; i < nodes.length; i++)
        autosize(nodes[i]);
}
```

--------------------------------

### Initialize and Configure AUX Matrix

Source: https://github.com/deutschesoft/aux-widgets/blob/master/src/matrix/index.html

Sets up the matrix data structure, populates it with hierarchical groups and ports, and initializes the DOM event listeners for connection toggling.

```javascript
import { MatrixData } from './models/matrix.js'; const sort = (a, b) => { const la = a.id; const lb = b.id; if (la === lb) return 0; return la > lb ? 1 : -1; }; window.matrix = new MatrixData(); const ports = ['L', 'C', 'R', "L'", "R'", 'LF']; const outputs = matrix.addGroup({ label: 'Outputs', icon: 'speaker' }); for (let i = 0; i < 100; i++) { const group = outputs.addGroup({ label: 'Output #' + (i + 1), icon: 'mc5_1', }); for (let j = 0; j < 6; j++) { const port = group.addPort({ label: 'Channel ' + ports[j], icon: 'disconnected', }); } } document.addEventListener('DOMContentLoaded', () => { const aux_matrix = document.querySelector('aux-matrix'); aux_matrix.sources = matrix.createVirtualTreeDataView(0, null, sort); aux_matrix.sinks = matrix.createVirtualTreeDataView(0, null, sort); aux_matrix.auxWidget.on('toggleConnection', (port1, port2) => { console.log('wants to toggleConnection', port1, port2); const connection = matrix.getConnection(port1, port2); if (connection) { matrix.deleteConnection(connection); } else { matrix.connect(port1, port2); } }); });
```

--------------------------------

### Approve reference files

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/README.md

Generates the initial set of reference screenshots for visual testing.

```bash
node run.js approve
```

--------------------------------

### Build Documentation

Source: https://github.com/deutschesoft/aux-widgets/blob/master/README.md

Generate API documentation from source code using JSDoc 3.

```bash
npm run build
```

--------------------------------

### Initialize and Load AUX Widgets

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/index.html

The core logic for fetching, rendering, and managing the state of AUX widgets based on URL hash parameters.

```javascript
const examples = [ 'Bitstring', 'Button', 'Buttons', 'Chart', 'Clock', 'ColorPicker', 'ColorPickerDialog', 'ComboBox', 'Compressor', 'ConfirmButton', 'Crossover', 'Dialog', 'Drag3D', 'Dynamics', 'Equalizer', 'Expander', 'Fader', 'FileSelect', 'FrequencyResponse', 'Gate', 'Gauge', 'Knob', 'LevelMeter', 'Limiter', 'Marquee', 'Meter', 'MultiMeter', 'Navigation', 'Pager', 'Pages', 'Panorama', 'PhaseMeter', 'ProgressBar', 'Reverb', 'Scale', 'Scroller', 'Select', 'Slider', 'Spread', 'State', 'Toggle', 'Value', 'ValueButton', 'ValueKnob', ]; import { HTML } from './src/utils/dom.js'; function isint(v) { return ( typeof v !== 'undefined' && parseInt(v).toString() === v.toString() ); } async function loadExample(widget) { var file = widget + '.html'; const header = document.createElement('h3'); header.innerHTML = widget; const cont = document.createElement('aux-container'); const res = await window.fetch('./' + file); cont.appendChild(HTML(await res.text())); const scripts = cont.querySelectorAll('script'); return (root) => { root.appendChild(header); root.appendChild(cont); scripts.forEach((script) => { eval(script.innerText); }); window.dispatchEvent(new UIEvent('resize')); }; } function decodeHash() { const atoms = window.location.hash.substring(1).split(','); let widgets = []; let scroll = 0; let all = false; for (var i = 0; i < atoms.length; i++) { var a = atoms[i]; if (a === '*') { widgets = examples; all = true; } else if (!all && examples.indexOf(a) >= 0) widgets.push(a); else if (isint(a)) scroll = parseInt(a); } return [all, scroll, widgets]; } let expectedHash; function updateHashSilent(hash) { if (expectedHash === undefined) { setTimeout(() => { window.location.hash = expectedHash; expectedHash = undefined; }, 500); } expectedHash = hash; } function updateScroll() { const [all, scroll, widgets] = decodeHash(); const root = document.querySelector('aux-root'); let s = parseInt(root.scrollTop); var h = '#' + s + ','; if (all) h += '*'; else h += widgets.join(','); updateHashSilent(h); } function buildListEntry(item, name, is_active) { var li = document.createElement('li'); li.innerHTML = name ? name : item; li.addEventListener('click', function (e) { window.location.hash = item; }); if (is_active) { const toggle_active = (current) => { const v = is_active(current); li.classList.toggle('active', v); if (v) li.scrollIntoView({ block: 'nearest' }); }; current_subscribers.push(toggle_active); } return li; } const current_subscribers = []; function cmp(name) { return function (v) { return name === v; }; } function buildNavigation(list) { var ul = document.createElement('ul'); ul.setAttribute('id', 'navigation'); const home = buildListEntry( '', 'Home', (current) => current === void 0 ); ul.appendChild(home); ul.appendChild( buildListEntry('*', 'All', (current) => current === null) ); for (var i = 0; i < list.length; i++) { const li = buildListEntry(list[i], '', cmp(list[i])); ul.appendChild(li); } return ul; } let last_info = null; function loadExamples() { const root = document.querySelector('aux-root'); const [all, scroll, widgets] = decodeHash(); if (last_info) { if ( last_info[0] === all && JSON.stringify(last_info[2]) === JSON.stringify(widgets) ) return; } last_info = [all, scroll, widgets]; const introduction = root.querySelector('#introduction'); while (introduction.nextSibling) introduction.nextSibling.remove(); introduction.style.display = widgets.length ? 'none' : null; const tasks = widgets.map(loadExample); Promise.all(tasks).then((cbs) => { cbs.forEach((cb) => cb(root)); setTimeout(function () { root.scrollTo(0, scroll); root.addEventListener('scroll', function () { updateScroll(root.scrollTop); }); document.querySelectorAll('.aux-widget').forEach((node) => { if (!node.tagName.startsWith('AUX')) return; node.addEventListener('dblclick', (ev) => { console.log(node.tagName); node.constructor.observedAttributes.forEach((name) => { if (!node.hasAttribute(name)) return; const widget = node.auxWidget; console.log( '%s %o %o', name, node.getAttribute(name), widget.get(name) ); }); ev.stopPropagation(); }); }); }, 100); }); const current = widgets.length === examples.length ? null : widgets[0]; current_subscribers.forEach((cb) => cb(current)); } window.addEventListener('hashchange', function () { loadExamples(); }); window.addEventListener('load', function () { const ul = buildNavigation(examples); document.body.appendChild(ul); loadExamples(); });
```

--------------------------------

### Serve files with Ruby

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Use the Ruby standard library httpd utility.

```bash
ruby -run -ehttpd . -p8000
```

--------------------------------

### Initialize AUX Matrix and Data Views

Source: https://github.com/deutschesoft/aux-widgets/blob/master/src/matrix/examples/1.2/index.html

Sets up the matrix data structure, populates input and output groups, and binds them to the aux-matrix component upon DOM content load.

```javascript
import { MatrixData, VirtualTreeDataView } from '../../models.js'; const sort = (a, b) => { const la = a.id; const lb = b.id; if (la === lb) return 0; return la > lb ? 1 : -1; }; window.matrix = new MatrixData(); const ports = ['L', 'C', 'R', "L'", "R'", 'LF']; const inputs = matrix.addGroup({ label: 'Inputs', icon: 'speaker' }); const outputs = matrix.addGroup({ label: 'Outputs', icon: 'speaker' }); for (let i = 0; i < 100; i++) { const ogroup = outputs.addGroup({ label: 'Output #' + (i + 1), icon: 'mc5_1', }); const igroup = inputs.addGroup({ label: 'Input #' + (i + 1), icon: 'mc5_1', }); for (let j = 0; j < 6; j++) { const iport = igroup.addPort({ label: 'Channel ' + ports[j], icon: 'disconnected', }); const oport = ogroup.addPort({ label: 'Channel ' + ports[j], icon: 'disconnected', }); } } document.addEventListener('DOMContentLoaded', () => { const aux_matrix = document.querySelector('aux-matrix'); aux_matrix.sources = new VirtualTreeDataView(inputs, 10, null, sort); aux_matrix.sinks = new VirtualTreeDataView(outputs, 10, null, sort); // aux_matrix.sinks = matrix.createVirtualTreeDataView(0, null, sort); aux_matrix.auxWidget.on('toggleConnection', (port1, port2) => { console.log('wants to toggleConnection', port1, port2); const connection = matrix.getConnection(port1, port2); if (connection) { matrix.deleteConnection(connection); } else { matrix.connect(port1, port2); } }); });
```

--------------------------------

### Serve files with Python 2

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Use the built-in SimpleHTTPServer module to serve the current directory.

```bash
python -m SimpleHTTPServer
```

--------------------------------

### Import AUX Widgets

Source: https://github.com/deutschesoft/aux-widgets/blob/master/README.md

Import all components into your web application using npm.

```javascript
import '@deutschesoft/aux-widgets';
```

--------------------------------

### Serve files with Python 3

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Use the built-in http.server module to serve the current directory.

```bash
python -m http.server
```

--------------------------------

### Serve files with Pike

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Use the Pike built-in httpserver module.

```bash
pike -x httpserver
```

--------------------------------

### Serve files with webfs

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Run the webfsd daemon in the foreground on port 8000.

```bash
webfsd -F -p 8000
```

--------------------------------

### Serve files with PHP

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Use the PHP built-in web server on port 8000.

```bash
php -S 0.0.0.0:8000
```

--------------------------------

### JavaScript Initialization for aux-scale

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ManyScales.html

Dynamically appends 200 instances of the aux-scale template to the document body upon window load.

```javascript
window.addEventListener('load', () => { const scale = document.querySelector('template'); for (let i = 0; i < 200; i++) { document.body.appendChild(document.importNode(scale.content, true)); } });
```

--------------------------------

### Using auxObserveAll Directive

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Reacts to all changes, including programmatic updates, and emits the current value initially.

```html
<aux-fader min=-96 max=6 [auxObserveAll]="{ value: value_subject }">
</aux-fader>
```

--------------------------------

### LevelMeter Initialization and Update

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/LevelMeter.html

Initializes multiple meters and updates their values at a set interval.

```javascript
function runMeter(meter) { meter = meter.auxWidget; const min = meter.get('min'); const max = meter.get('max'); window.setInterval(() => { meter.set('value', Math.random() * (max - min) + min); }, 250); } function init() { const meters = document.querySelectorAll('.aux-meter'); console.log('init', meters); meters.forEach(runMeter); } setTimeout(init, 3000); document.addEventListener('DOMContentLoaded', init);
```

--------------------------------

### Run tests

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/README.md

Executes the visual regression test suite.

```bash
node run.js test
```

--------------------------------

### Initialize Slider Widget

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Slider.html

Basic implementation of the Slider widget in an HTML environment.

```html
<div class="slider"></div>
```

--------------------------------

### Configure AUX Fader Attributes

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Demonstrates setting static and dynamic attributes on the aux-fader component.

```html
<aux-fader min=-96 max=6></aux-fader>
```

```html
<aux-fader min=-96 max=6 [attr.value]="myValue"></aux-fader>
```

```html
<aux-fader min=-96 max=6 [value]="myValue"></aux-fader>
```

--------------------------------

### Signal and Configuration Icons

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXIcons.html

Icons for signal types, shapes, and matrix configurations.

```html
<span class='aux-icon rectangular'></span>
<span class='aux-icon rect'></span>
<span class='aux-icon rectangle'></span>
```

```html
<span class='aux-icon whitenoise'></span>
```

```html
<span class='aux-icon pinknoise'></span>
```

```html
<span class='aux-icon sweep'></span>
```

```html
<span class='aux-icon mcmono'></span>
<span class='aux-icon mc1_0'></span>
<span class='aux-icon dd1_0'></span>
```

```html
<span class='aux-icon mcstereo'></span>
<span class='aux-icon mc2_0'></span>
<span class='aux-icon dd2_0'></span>
```

```html
<span class='aux-icon mc3stereo'></span>
<span class='aux-icon mc3_0'></span>
<span class='aux-icon dd3_0'></span>
```

```html
<span class='aux-icon mc2_1'></span>
```

```html
<span class='aux-icon dd2_1'></span>
```

```html
<span class='aux-icon dd2_1_1'></span>
```

```html
<span class='aux-icon mc3_1'></span>
```

```html
<span class='aux-icon mc4_0'></span>
<span class='aux-icon quadro'></span>
<span class='aux-icon dd2_2'></span>
```

```html
<span class='aux-icon mc4_1'></span>
<span class='aux-icon dd2_2_1'></span>
```

```html
<span class='aux-icon dolbydigital'></span>
<span class='aux-icon dolbystereo'></span>
<span class='aux-icon dd3_1'></span>
<span class='aux-icon museld'></span>
<span class='aux-icon dolbyprologic'></span>
```

```html
<span class='aux-icon dd3_1_1'></span>
```

```html
<span class='aux-icon mc5'></span>
<span class='aux-icon dd3_2'></span>
```

```html
<span class='aux-icon mc5_1'></span>
<span class='aux-icon dd3_2_1'></span>
<span class='aux-icon dolbyprologic2'></span>
```

```html
<span class='aux-icon mc6_1'></span>
<span class='aux-icon ddex'></span>
```

```html
<span class='aux-icon mc7_1'></span>
<span class='aux-icon dolbyprologic2x'></span>
```

```html
<span class='aux-icon matrixselectdiagonal'></span>
```

```html
<span class='aux-icon matrixdeselectdiagonal'></span>
```

```html
<span class='aux-icon matrixselectall'></span>
```

```html
<span class='aux-icon matrixdeselectall'></span>
```

--------------------------------

### LevelMeter Simulation Logic

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/LevelMeter.html

Sets up a global interval to update the LevelMeter value with random data.

```javascript
if (!('levelMeterSimulation' in window)) { let levelMeterSimulation = function () { const value = Math.random() * 120 - 96; const demoMeter = document.getElementById('demometer'); if (!demoMeter) return; demoMeter.auxWidget.set('value', value); }; window.levelMeterSimulation = levelMeterSimulation; window.setInterval(levelMeterSimulation, 2000); }
```

--------------------------------

### Registering listeners with GlobalResize

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ManyEventListeners.html

Uses the GlobalResize utility to manage multiple resize callbacks efficiently.

```javascript
import { GlobalResize } from '../../src/utils/global_resize.js'; function fun2() { let count = 0; for (let i = 0; i < 10000; i++) { GlobalResize.add(() => { count++; }); } GlobalResize.add(() => { console.log('count2:', count); }); }
```

--------------------------------

### Serve files with Plack (Perl)

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/README.md

Requires the Plack module from CPAN to serve the directory.

```bash
cpan Plack
plackup -MPlack::App::Directory -e 'Plack::App::Directory->new(root=>".");' -p 8000
```

--------------------------------

### Audio and Media Device Icons

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXIcons.html

Icons for audio hardware and media management.

```html
<span class='aux-icon headphones'></span>
<span class='aux-icon headphonesactive'></span>
```

```html
<span class='aux-icon headphonesmute'></span>
```

```html
<span class='aux-icon microphone'></span>
<span class='aux-icon mic'></span>
<span class='aux-icon micro'></span>
```

```html
<span class='aux-icon microphonemute'></span>
<span class='aux-icon micmute'></span>
<span class='aux-icon micromute'></span>
```

```html
<span class='aux-icon trash'></span>
<span class='aux-icon delete'></span>
```

```html
<span class='aux-icon save'></span>
<span class='aux-icon diskette'></span>
```

```html
<span class='aux-icon load'></span>
<span class='aux-icon folder'></span>
<span class='aux-icon open'></span>
```

--------------------------------

### Performance measurement execution

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ManyEventListeners.html

Executes both listener registration functions and logs the time taken for each.

```javascript
const t1 = performance.now(); fun1(); console.log('fun1', performance.now() - t1); const t2 = performance.now(); fun2(); console.log('fun2', performance.now() - t2);
```

--------------------------------

### Registering for window resize events

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Widgets.md

Use this pattern to update widget dimensions dynamically when the window size changes.

```javascript
chart.add_event('resize', function() {
        var width, height;
        /* calculate new size */

        this.set_style('width', width);
        this.set_style('height', height);
    });
```

--------------------------------

### Subscribe to AUX Widget Events

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Handles the useraction event by passing the detail arguments to a component method.

```html
<aux-fader min=-96 max=6 (useraction)="onValueChanged($event.detail.args)">
</aux-fader>
```

--------------------------------

### CSS Styles for AUXShapes Documentation

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXShapes.html

Basic CSS styling used for the documentation page layout.

```css
body { background: white; color: #222; font-family: sans-serif; } table { border-spacing: 0; margin: 20px 0; width: 100%; } th, h1 { background: #ddd; padding: 4px; font-weight: normal; } td { padding: 6px; } tr:nth-child(odd) { background: #f5f5f5; }
```

--------------------------------

### Configure AUX Fader Component Attributes

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Components.md

Demonstrates setting numeric attributes on an aux-fader component using the number prefix.

```html
<aux-fader min='number:-20' max='number:6'></aux-fader>
```

--------------------------------

### Initialize and Update AUX Level Meters

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ManyLevels.html

Clones a template element 200 times and updates the value of each aux-levelmeter component every 100 milliseconds.

```javascript
window.addEventListener('load', () => { const meter = document.querySelector('template').content; for (let i = 0; i < 200; i++) { const clone = document.importNode(meter, true); document.body.appendChild(clone); } const meters = Array.from(document.querySelectorAll('aux-levelmeter')); setInterval(() => { meters.forEach((meter) => { meter.value = Math.random() * 100; }); }, 100); });
```

--------------------------------

### Environment and Status Icons

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXIcons.html

Icons representing environmental states and connectivity status.

```html
<span class='aux-icon day'></span>
<span class='aux-icon sun'></span>
<span class='aux-icon daylight'></span>
<span class='aux-icon light'></span>
```

```html
<span class='aux-icon night'></span>
<span class='aux-icon moon'></span>
<span class='aux-icon dark'></span>
```

```html
<span class='aux-icon connected'></span>
```

```html
<span class='aux-icon disconnected'></span>
```

--------------------------------

### Define AUX Matrix Styles

Source: https://github.com/deutschesoft/aux-widgets/blob/master/src/matrix/index.html

CSS rules for sizing the matrix container and ensuring the root element occupies the full viewport.

```css
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: sans-serif; } .aux-root { width: 100%; height: 100%; margin: 0; } .aux-matrix { display: block; width: 100%; height: 480px; }
```

--------------------------------

### Initialize ScrollArea and LevelMeters

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ScrollAreaMeters.html

Populates the scroll area with cloned template elements and sets an interval to randomize level meter values.

```javascript
window.addEventListener('load', () => { const meter = document.querySelector('template').content; const scroller = document.querySelector('aux-scrollarea'); for (let i = 0; i < 200; i++) { const clone = document.importNode(meter, true); scroller.appendChild(clone); } const meters = Array.from(document.querySelectorAll('aux-levelmeter')); setInterval(() => { meters.forEach((meter) => { meter.value = Math.random() * 100; }); }, 100); });
```

--------------------------------

### Binding options with auxBind

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Use auxBind to prevent UI jumps by debouncing backend updates while the user is interacting with the widget.

```html
<aux-fader min=-96 max=6 [auxBind]="{ value: value_observable }">
</aux-fader>
```

--------------------------------

### Test Runner Logic

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/standalone/index.html

Handles test execution, logging, and iframe communication. Requires an element with id 'log' and an iframe element in the document.

```javascript
const tests = ['loading_order.html']; function _log(msg) { const span = document.createElement('span'); const text = document.createTextNode(msg); const log = document.querySelector('#log'); span.appendChild(text); log.appendChild(span); return span; } function log(msg) { return _log(msg + '\n'); } function error(msg) { const span = log(msg); span.className = 'error'; return span; } function warn(msg) { const span = log(msg); span.className = 'warn'; return span; } function runTest(url, timeout) { if (!timeout) timeout = 2000; const iframe = document.querySelector('iframe'); return new Promise((resolve, reject) => { const onmessage = (ev) => { const data = ev.data; window.removeEventListener('message', onmessage); if (data.ok) { resolve(data.count); } else { reject(data.error); } }; window.addEventListener('message', onmessage); iframe.src = url; }); } window.addEventListener('load', async () => { log('Running ' + tests.length + ' test files.'); let count = 0; for (let i = 0; i < tests.length; i++) { const url = tests[i]; const t1 = performance.now(); try { _log('Running test ' + url + ' ... '); const n = await runTest(url); const time = performance.now() - t1; log(['OK ( ', n, ' tests, ', time.toFixed(0), 'ms )'].join('')); count += n; } catch (err) { error('Failed: ' + err.toString()); } } log('Done ' + count + ' tests.'); });
```

--------------------------------

### Include AUXShapes CSS

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXShapes.html

Standard HTML link tag to include the AUXShapes stylesheet.

```html
<link href="AUXShapes.css" rel="stylesheet" type="text/css">
```

--------------------------------

### Test Runner Styles

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/standalone/index.html

CSS rules for hiding the test iframe and styling the log output.

```css
iframe { visibility: hidden; position: fixed; } #log { width: 100%; font-family: monospace; white-space: pre; } #log > .error { color: red; }
```

--------------------------------

### Basic Navigation Icons

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXIcons.html

Icons for standard navigation controls.

```html
<span class='aux-icon home'></span>
<span class='aux-icon start'></span>
```

```html
<span class='aux-icon rewind'></span>
<span class='aux-icon rew'></span>
```

```html
<span class='aux-icon pause'></span>
```

```html
<span class='aux-icon play'></span>
```

```html
<span class='aux-icon stop'></span>
```

```html
<span class='aux-icon record'></span>
<span class='aux-icon rec'></span>
```

```html
<span class='aux-icon eject'></span>
```

```html
<span class='aux-icon fastforward'></span>
<span class='aux-icon ffwd'></span>
```

```html
<span class='aux-icon end'></span>
```

```html
<span class='aux-icon repeat'></span>
```

```html
<span class='aux-icon random'></span>
```

--------------------------------

### Configure Simple Slider CSS

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Slider.html

Defines the dimensions and background image for the aux-slider element.

```css
aux-slider { width: 64px; height: 64px; background-image: 
```

--------------------------------

### Using auxObserve Directive

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Reacts to value changes triggered by user interaction only.

```html
<aux-fader min=-96 max=6 [auxObserve]="{ value: value_subject }">
</aux-fader>
```

--------------------------------

### Apply attributes in order for Angular components

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Ensure min and max attributes are defined before the value attribute to prevent incorrect clipping during component initialization.

```html
<aux-fader min=-96 max=6 value=3></aux-fader>
```

--------------------------------

### Initialize aux-chart range

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/tests/chart/dynamic_range.html

Sets the X-axis range for the aux-chart component after the window has loaded.

```javascript
window.addEventListener('load', function () { const chart = document.querySelector('aux-chart'); id = setTimeout(() => { chart.range_x = { scale: 'linear', min: -60, max: 0, base: 0, }; }, 50); });
```

--------------------------------

### Initialize and Update Drag3D Readout

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Drag3D.html

Initializes the Drag3D widget once defined and sets up event listeners to update DOM elements with current coordinate values.

```javascript
customElements.whenDefined('aux-drag3d').then(function () { const el = document.getElementById('drag3d-readout'); if (!el || !el.auxWidget) return; const drag3d = el.auxWidget; const xEl = document.querySelector('.drag3d-readout [data-x]'); const yEl = document.querySelector('.drag3d-readout [data-y]'); const zEl = document.querySelector('.drag3d-readout [data-z]'); function updateReadout() { xEl.textContent = drag3d.get('x').toFixed(3); yEl.textContent = drag3d.get('y').toFixed(3); zEl.textContent = drag3d.get('z').toFixed(3); } drag3d.on('set', function (key) { if (key === 'x' || key === 'y' || key === 'z') updateReadout(); }); updateReadout(); });
```

--------------------------------

### Rendering Individual Curves for Equalizer Bands

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Equalizer.html

Configures the equalizer to display individual curves for each band with specific opacity and interaction states.

```css
.aux-graph.individual { opacity: 0.2; stroke: white; }
.aux-graph.interacting { opacity: 0.8; }
```

```javascript
const eq = document.querySelector('aux-equalizer.individual_curve').auxWidget; const EqualizerGraph = eq.baseline.constructor; eq.getBands().forEach((band) => { let graph = new EqualizerGraph({ class: 'individual' }); graph.addBand(band); eq.addGraph(graph); band.on('set_interacting', (interacting) => { graph.element.classList.toggle('interacting', interacting); }); });
```

--------------------------------

### Registering many standard event listeners

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ManyEventListeners.html

Registers 20,000 total event listeners (load and resize) to the window object.

```javascript
function fun1() { let count = 0; for (let i = 0; i < 10000; i++) { const cb = () => { count++; }; window.addEventListener('load', cb); window.addEventListener('resize', cb); } window.addEventListener('load', () => { console.log('count1', count); }); }
```

--------------------------------

### None Icon Usage

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXShapes.html

HTML span elements for the none, null, and clear icons.

```html
<span class='aux-icon none'></span>  
<span class='aux-icon null'></span>  
<span class='aux-icon clear'></span>
```

--------------------------------

### Style the Aux-Gauge Component

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Gauge.html

Use these CSS rules to define the dimensions, background, and text styling for the aux-gauge component.

```css
aux-gauge.styled.aux-gauge > svg { width: 200px; height: 200px; background: var(--aux-contrast-base); fill: var(--aux-contrast-text); } aux-gauge.styled.aux-gauge > svg > .aux-circular { font-size: 4px !important; } aux-gauge.styled.aux-gauge .aux-label { fill: var(--aux-contrast-text) !important; }
```

--------------------------------

### Using auxIntercept Directive

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Reacts to user-triggered changes and prevents them from being applied to the widget.

```html
<aux-fader min=-96 max=6 [auxIntercept]="{ value: clip_value }">
</aux-fader>
```

--------------------------------

### Style aux-pages container

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Pages.html

Sets the dimensions and background color for the aux-pages component.

```css
aux-pages { width: 100%; height: 240px !important; background: rgba(0, 0, 0, 0.1); }
```

--------------------------------

### Batching DOM measurements and resizes manually

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Rendering.md

Reduces reflows by performing all measurements before applying any style changes to the nodes.

```javascript
function measure(node) {
    return Math.min(node.parentNode.innerWidth,
                    node.parentNode.innerHeight);
}

function resize(node, size) {
    node.style.width = size + "px";
    node.style.height = size + "px";
}

function autosize_all(nodes) {
    var sizes = [];

    for (var i = i; i < nodes.length; i++)
        sizes[i] = measure(nodes[i]);

    for (var i = i; i < nodes.length; i++)
        resize(nodes[i], sizes[i]);
}
```

--------------------------------

### CSS Styles for AUX Components

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/HidingTest.html

Defines layout and animation properties for aux-pager, aux-fader, and page transition states.

```css
aux-pager { width: 48% !important; height: 240px !important; display: inline-flex !important; border: 1px solid black; } aux-pager aux-pager { width: 90% !important; height: 90% !important; display: inline-flex !important; } aux-fader { width: 215px; } .aux-pages.aux-forward.aux-vertical > .aux-page.aux-hiding { animation: aux-page-vertical-out-forward 5s ease-in-out; transform: translateY(-100%); } .aux-pages.aux-forward.aux-vertical > .aux-page.aux-showing { animation: aux-page-vertical-in-forward 5s ease-in-out; } .aux-pages.aux-backward.aux-vertical > .aux-page.aux-hiding { animation: aux-page-vertical-out-backward 5s ease-in-out; transform: translateY(100%); } .aux-pages.aux-backward.aux-vertical > .aux-page.aux-showing { animation: aux-page-vertical-in-backward 5s ease-in-out; } .aux-pages.aux-forward.aux-horizontal > .aux-page.aux-hiding { animation: aux-page-horizontal-out-forward 5s ease-in-out; transform: translateX(-100%); } .aux-pages.aux-forward.aux-horizontal > .aux-page.aux-showing { animation: aux-page-horizontal-in-forward 5s ease-in-out; } .aux-pages.aux-backward.aux-horizontal > .aux-page.aux-hiding { animation: aux-page-horizontal-out-backward 5s ease-in-out; transform: translateX(100%); } .aux-pages.aux-backward.aux-horizontal > .aux-page.aux-showing { animation: aux-page-horizontal-in-backward 5s ease-in-out; }
```

--------------------------------

### Include AUXIcons Stylesheet

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXIcons.html

Add this link tag to the head of your HTML document to load the icon font.

```html
<link href="AUXIcons.css" rel="stylesheet" type="text/css">
```

--------------------------------

### Display AUXIcons

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXIcons.html

Use a span element with the 'aux-icon' class followed by the specific icon name class to render an icon.

```html
<span class='aux-icon warning'></span>
```

```html
<span class='aux-icon information'></span>
<span class='aux-icon info'></span>
```

```html
<span class='aux-icon error'></span>
```

```html
<span class='aux-icon message'></span>
```

```html
<span class='aux-icon close'></span>
```

```html
<span class='aux-icon success'></span>
```

```html
<span class='aux-icon hourglass'></span>
<span class='aux-icon loading'></span>
```

```html
<span class='aux-icon questionmark'></span>
```

```html
<span class='aux-icon screensize'></span>
```

```html
<span class='aux-icon windowminimize'></span>
<span class='aux-icon winmin'></span>
```

```html
<span class='aux-icon windowclose'></span>
<span class='aux-icon winclose'></span>
```

```html
<span class='aux-icon windowmaximize'></span>
<span class='aux-icon winmax'></span>
```

```html
<span class='aux-icon windowmaximizevertical'></span>
<span class='aux-icon winmaxvert'></span>
```

```html
<span class='aux-icon windowmaximizehorizontal'></span>
<span class='aux-icon winmaxhoriz'></span>
```

```html
<span class='aux-icon windowshrink'></span>
<span class='aux-icon winshrink'></span>
```

```html
<span class='aux-icon windowresize'></span>
```

```html
<span class='aux-icon unchecked'></span>
```

```html
<span class='aux-icon checked'></span>
```

```html
<span class='aux-icon speaker'></span>
<span class='aux-icon speakeractive'></span>
<span class='aux-icon sound'></span>
```

```html
<span class='aux-icon speakermute'></span>
<span class='aux-icon mute'></span>
```

```html
<span class='aux-icon gear'></span>
<span class='aux-icon cogwheel'></span>
<span class='aux-icon cog'></span>
```

```html
<span class='aux-icon power'></span>
```

```html
<span class='aux-icon phase'></span>
<span class='aux-icon phaseinvert'></span>
```

```html
<span class='aux-icon arrowdown'></span>
```

```html
<span class='aux-icon arrowup'></span>
```

```html
<span class='aux-icon arrowleft'></span>
```

```html
<span class='aux-icon arrowright'></span>
```

```html
<span class='aux-icon hide'></span>
```

```html
<span class='aux-icon show'></span>
```

```html
<span class='aux-icon highpass'></span>
<span class='aux-icon hipass'></span>
```

```html
<span class='aux-icon lowpass'></span>
<span class='aux-icon lopass'></span>
```

```html
<span class='aux-icon highshelf'></span>
<span class='aux-icon hishelf'></span>
```

```html
<span class='aux-icon lowshelf'></span>
<span class='aux-icon loshelf'></span>
```

```html
<span class='aux-icon bandpass'></span>
```

```html
<span class='aux-icon bandreject'></span>
```

```html
<span class='aux-icon notch'></span>
```

```html
<span class='aux-icon parametric'></span>
```

```html
<span class='aux-icon sine'></span>
```

```html
<span class='aux-icon pulse'></span>
```

```html
<span class='aux-icon sawtooth'></span>
<span class='aux-icon saw'></span>
```

```html
<span class='aux-icon triangle'></span>
<span class='aux-icon triangular'></span>
<span class='aux-icon tri'></span>
```

```html
<span class='aux-icon bypass'></span>
```

```html
<span class='aux-icon stairs'></span>
<span class='aux-icon aliased'></span>
```

```html
<span class='aux-icon stereo'></span>
```

```html
<span class='aux-icon mono'></span>
```

```html
<span class='aux-icon zoom'></span>
<span class='aux-icon magnifier'></span>
```

```html
<span class='aux-icon zoomin'></span>
```

```html
<span class='aux-icon zoomout'></span>
```

--------------------------------

### CSS Styling for aux-scale

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ManyScales.html

Sets the height for the aux-scale component.

```css
aux-scale { height: 300px; }
```

--------------------------------

### Mocha Test Suite Initialization

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/index.html

Initializes the Mocha test runner with BDD interface and leak checking enabled.

```javascript
mocha.setup('bdd'); mocha.checkLeaks(); mocha.run();
```

--------------------------------

### Configuring tsconfig.app.json

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Angular.md

Include the AUX Angular directive files in the tsconfig.app.json to ensure the compiler can locate them.

```json
"include": [
  "src/**/*.ts",
  "node_modules/@deuso/aux/angular/*.ts"
]
```

--------------------------------

### Branch Icon Usage

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXShapes.html

HTML span element for the branch icon.

```html
<span class='aux-icon branch'></span>
```

--------------------------------

### Scheduling DOM operations with DOMScheduler

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Rendering.md

Uses a global scheduler to queue DOM modifications with specific priorities, ensuring reflow-triggering operations are batched.

```javascript
var S = new DOMScheduler();

function autosize(node) {
    // might trigger reflow
    var size = Math.min(node.parentNode.innerWidth,
                        node.parentNode.innerHeight);


    // run the following with priority 1
    S.add(function() {
        // invalidates the DOM
        node.style.width = size + "px";
        node.style.height = size + "px";
    }, 1);
}

function autosize_all(nodes) {
    for (var i = i; i < nodes.length; i++)
        S.add(autosize.bind(window, nodes[i]), 0);

    S.run();
}
```

--------------------------------

### Trunk Icon Usage

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXShapes.html

HTML span elements for the trunk, stem, and pipe icons.

```html
<span class='aux-icon trunk'></span>  
<span class='aux-icon stem'></span>  
<span class='aux-icon pipe'></span>
```

--------------------------------

### Highlighting Interacting Bands in Equalizer

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Equalizer.html

Applies a red stroke to the equalizer graph when a band is being interacted with.

```css
.aux-graph.highlite { stroke: red; }
```

```javascript
{ const eq = document.querySelector('aux-equalizer.extra_curve').auxWidget; const EqualizerGraph = eq.baseline.constructor; eq.getBands().forEach((band) => { let graph; band.subscribe('set_interacting', (interacting) => { if (!!graph === interacting) return; if (interacting) { graph = new EqualizerGraph({ class: 'highlite' }); graph.addBand(band); eq.addGraph(graph); } else { eq.removeGraph(graph); graph.removeBand(band); graph = null; } }); }); }
```

--------------------------------

### JavaScript Animation Sequence

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/tests/meter/animated_size.html

Orchestrates the meter value updates and triggers the widget resize event after a delay.

```javascript
const run = async () => { const delay = (n) => new Promise((resolve) => setTimeout(resolve, n)); const meter = document.querySelector('#animated_size'); await delay(50); meter.value = 60; document.querySelector('.aux-frame').classList.add('scale'); await delay(50); meter.auxWidget.triggerResize(); meter.value = 40; await delay(50); meter.value = 20; await delay(50); meter.auxWidget.triggerResize(); }; document.addEventListener('DOMContentLoaded', run);
```

--------------------------------

### Verify Aux-Widget Parent-Child Relationships

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/standalone/loading_order.html

Use this test to ensure that aux-fader and aux-levelmeter components correctly identify their parent widgets after initialization.

```javascript
import { define, assertEqual } from './testing.js'; define(() => { const faders = document.querySelectorAll('aux-fader'); const levelmeter = document.querySelector('aux-levelmeter'); // check that parent-child relationships are correct assertEqual(faders[0].auxWidget.parent, null); assertEqual(levelmeter.auxWidget.parent, faders[0].auxWidget); assertEqual(faders[1].auxWidget.parent, levelmeter.auxWidget); });
```

--------------------------------

### LevelMeter CSS Styling

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/LevelMeter.html

Defines fixed dimensions for vertical and horizontal LevelMeter layouts.

```css
aux-levelmeter.aux-vertical { height: 300px; } aux-levelmeter.aux-horizontal { width: 300px; }
```

--------------------------------

### Configure ScrollArea CSS

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/ScrollAreaMeters.html

Defines the dimensions and overflow behavior for the aux-scrollarea container.

```css
aux-scrollarea { height: 400px; width: 400px; overflow-y: scroll; border: 1px solid black; }
```

--------------------------------

### CSS Styles for AUX Frame

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/htdocs/frame.html

Defines the visual appearance of the body, root element, and the aux-frame component.

```css
body { background: #ddd; color: #333; font-family: sans-serif; font-size: 14px; } aux-root { margin: 0 !important; } #wrapper { } #wrapper > aux-frame { display: block; background: rgba(255, 255, 255, 0.5); border-radius: 6px; margin: 12px; padding: 32px 8px 8px 8px; min-width: 128px; min-height: 64px; } #wrapper > aux-frame > .aux-framelabel { top: 4px; font-weight: normal; font-size: 20px; }
```

--------------------------------

### Style aux-chart dimensions

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/tests/chart/dynamic_range.html

Defines the width and height for the aux-chart element.

```css
.aux-chart { width: 300px; height: 150px; }
```

--------------------------------

### JavaScript Level Meter Update Logic

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/manual/HidingTest.html

Initializes an interval to randomly update the value of all aux-levelmeter elements on the page.

```javascript
window.addEventListener('load', () => { const meters = document.querySelectorAll('aux-levelmeter'); setInterval(() => { meters.forEach((meter) => { meter.value = Math.random() * 100; }); }, 100); });
```

--------------------------------

### Slider HTML Structure

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Slider.html

The basic HTML structure required to render the slider component.

```html
<div class="slider">
  <div class="slider-track"></div>
  <div class="slider-thumb"></div>
</div>
```

--------------------------------

### Mocha Test Report CSS Styles

Source: https://github.com/deutschesoft/aux-widgets/blob/master/testsuite/index.html

Defines the layout for the mocha-report container and its list items to ensure proper display order.

```css
#mocha-report { display: flex; flex-direction: column-reverse; } #mocha-report > li { display: flex; flex-direction: column-reverse; } #mocha-report > li > h1, #mocha-report > li > h2 { order: 20000000; }
```

--------------------------------

### Manually triggering widget resize

Source: https://github.com/deutschesoft/aux-widgets/blob/master/doc/docs/Widgets.md

Call the resize method on a widget tree after manual style changes to ensure children redraw correctly.

```javascript
function shrink_chart() {
        chart.set_style('width', 400);
        chart.set_style('height', 200);

        chart.resize();
    }

    function grow_chart() {
        chart.set_style('width', 400);
        chart.set_style('height', 400);

        chart.resize();
    }
```

--------------------------------

### End Icon Usage

Source: https://github.com/deutschesoft/aux-widgets/blob/master/styles/fonts/AUXShapes.html

HTML span element for the end icon.

```html
<span class='aux-icon end'></span>
```

--------------------------------

### CSS Styling for aux-pager

Source: https://github.com/deutschesoft/aux-widgets/blob/master/examples/Pager.html

Defines layout and appearance overrides for the aux-pager and aux-fader components.

```css
aux-pager { width: 48% !important; height: 240px !important; display: inline-flex !important; } aux-pager .aux-pages { background: rgba(0, 0, 0, 0.1); } aux-pager .aux-page { padding: 8px; } aux-pager aux-pager { width: 100% !important; height: 100% !important; display: inline-flex !important; margin: 0 !important; } aux-fader { width: 215px; }
```

--------------------------------

### CSS Scaling and Coloring Rules

Source: https://github.com/deutschesoft/aux-widgets/blob/master/backstop/tests/scale/fixed_scale.html

Defines color overrides for labels and dots, and applies a fixed scale transformation to elements with the large class.

```css
.aux-scale .aux-label.red { color: red; } .aux-scale .aux-dot.green { background-color: green; opacity: 1; } .aux-scale .aux-label.green { color: green; opacity: 1; } .aux-scale .large { transform: scale(1, 5) !important; }
```