HTML editor, controls and native messages

Select HTML5 parsing for the embedded document.

Declare English content, UTF-8 text and a viewport that uses the native content width.

Disable all resource loading by default; permit the local inline styles and scripts needed by this embedded page. This policy does not validate native messages.

Set the embedded document title to RAVET’s live examples.

Begin the local stylesheet; the following rules are embedded with the page.

Set the dark theme and semantic foreground/background tokens. This compact line also defines shared buttons, panels, tabs, knobs, keyboards, meters, tables and dialog styling. Knob motion uses CSS variables for sweep and indicator angle; touch-action:none prevents native scrolling from taking the drag.

Blank line separating document or script sections.

Explain why the following overrides make the full instrument fit the default/minimum content size.

Reduce text, knob and panel dimensions; bound the voice monitor’s internal scroll area. MPE mode hides secondary hints and reduces keyboard height to keep its expression controls visible.

Use one meter panel column in effect mode and enlarge the delay knobs to 80 pixels. These are mode-specific overrides, not changes to control values.

Compress meter labels/readings and cap the voice monitor height at 40 pixels.

Document the uniform 900×780 canvas scaling used with the native aspect-ratio lock.

Fill the viewport, hide outer scrolling and remove the body padding so the design canvas controls all positioning.

Fix the unscaled design at 900×780 pixels with top-left transform origin; JavaScript sets its scale and centered position.

Close the styles/head, start the body and open the design-canvas main element.

Build title/subtitle elements and explicit All notes off and Start/Stop buttons. Stable IDs let snapshot updates and event handlers address them.

Create four mode buttons with data-mode values used by the native mode action.

Blank line separating document or script sections.

Create the waveform selector with indices 0–3 and mount points for VCA and VCF knobs. The selected saw index matches the default Rust patch.

Provide the ADSR knob container and explain that one envelope controls amplitude/cutoff and edits latch at the next note.

Provide the C3–C5 shared piano container and computer-key hint; the reusable PianoKeyboard will create the actual keys.

Build the delay panel with Demo, Ping-pong and Bypass toggles plus its knob container. It starts hidden until the native snapshot selects effect mode.

Build the MPE panel with member channels 1/2 and mount points for bend, pressure and timbre. Native MIDI can use the receiver’s broader policy independently of this on-screen two-member choice.

Blank line separating document or script sections.

Build the packet inspector: group/channel 0–15, key 0–127, velocity 0–65535 and expression 0–4294967295. Rust revalidates these fields; the button only requests codec inspection.

Build voice-state and stereo-output meter panels. Each meter has a label and a separate peak/RMS text reading for the accessible control wrapper.

Close the monitor-grid wrapper opened by the preceding line.

Create the live status region, connection indicator and rendered-frame display.

Close the fixed design canvas before injected controls and scripts.

Mark where embed_web_controls injects the shared controls/settings code before the Rust owner embeds this HTML.

Begin the local example behavior script.

Define an ID lookup helper and initialize UI mode/running state. Actual native snapshots replace these defaults.

Compute the smaller width/900 or height/780 ratio, apply one uniform scale, center the resulting canvas and expose the scale for native layout tests.

Recompute layout on every viewport resize and apply the initial layout immediately.

Send an object through the WebKit ravet message handler. Return true on bridge delivery; if the bridge is absent, display an error and return false. Delivery alone does not establish successful native application.

Wrap the replaceable ravetPost function and provide an action helper that adds type:action plus optional action fields.

Create the control registry and bind waveform Choice to parameter ID 1 through the common message sender.

Define a knob factory accepting its container, stable ID, physical bounds, step/default, sender, travel mode and DOM-ID prefix.

Create the control wrapper used for the label, dial and numeric input.

Create its visible label, associate it with the dial ID and set the human-readable control name.

Create the dial element, assign its prefixed stable ID and give it the accessible name.

Add the decorative indicator; shared Knob updates CSS angle/sweep rather than moving another control.

Create the numeric input with a distinct prefixed ID and an accessible name ending in value.

Insert the label, dial and input into the wrapper, then mount that wrapper in the requested container.

Construct the reusable Knob with physical configuration and the supplied message sender. Return it for later snapshot updates.

Close the knob factory.

Create ID 2 level: linear 0–1, step 0.01, default 0.6.

Create ID 3 cutoff: 20–20000 Hz, integer step, default 800 Hz and logarithmic dial travel.

Create ID 4 resonance Q: 0.5–8, step 0.01, default 0.7.

Create ID 5 positive envelope cutoff excursion: 0–72 semitones, default 36.

Create ADSR IDs 6–9 from four records: attack/decay/release in milliseconds and sustain as a linear level. Their defaults mirror the physical Rust patch.

Create the three continuous delay knobs with delay-prefixed DOM IDs. Bind bypass to ID 4, ping-pong to ID 5 and the example’s demo switch to ID 6.

Create member expression knobs. Bend uses normalized −1..1; pressure/timbre use integer 0..127. The custom sender converts these edits into short MIDI instead of processor parameter events.

Acknowledge begin/end gesture messages without emitting MIDI; only actual value changes generate expression messages.

Read the selected zero-based MPE member and the edited physical value.

Map negative normalized bend over 8192 steps and positive bend over 8191 steps around center 8192. Encode the resulting 14-bit value as MIDI’s low/high seven-bit bytes on the selected channel.

Send channel pressure with status 0xd0 or CC74 timbre with status 0xb0, combining the zero-based member channel into the status byte.

Close the knob factory.

Wrap both output meter/readout pairs in AccessibleMeter with explicit left/right labels.

Create source-to-key and key-to-channel/reference-count maps; declare the shared piano object used during cancellation.

Wrap validated-by-Rust short-message bytes in a type:midi page request.

Refuse starts while stopped, settings are open or this source already owns a key. For a new key choose channel zero or a free MPE member, refuse a third distinct MPE key, send velocity-100 note-on, increment its shared reference count and remember the interaction source.

Look up the interaction’s key, remove source ownership and decrement its reference count. Send velocity-64 note-off and remove the key only when its last source releases.

Cancel shared piano interactions, then release any remaining source entries from a copied key list so mutation cannot disrupt iteration.

Create the shared keyboard for MIDI keys 48–72 inclusive and connect its on/off ownership callbacks.

Bind each mode tab to release current UI notes before requesting the corresponding native mode.

Register note cancellation before the injected I/O settings popup opens.

Release on-screen notes first, then request native audio stop.

Toggle between explicit stop and the injected settings/start action. All notes off releases UI ownership and sends the native panic action.

Read the inspector’s numeric/text fields into a type:packet request. Native parsing enforces integer bounds and constructs the typed UMP message.

Update textContent only when the display string changed, avoiding unnecessary DOM text replacements.

Expose the callback the native owner uses to refresh this page from its coherent presentation snapshot.

Reject an absent snapshot or non-array values field, retain the previous mode for transition detection, and copy native mode/running state.

Release UI-held notes on mode change, set the CSS mode attribute and update each tab’s active appearance.

Compute visibility categories: synth and MPE share instrument controls, effect uses delay, and MIDI 2.0 uses the inspector.

Set visibility for controls, voices, meters and actions from the active mode. The packet inspector hides audio actions because it does not synthesize.

Choose mode-specific title and signal-flow subtitle using textContent.

Refresh all physical controls from the snapshot using update methods, including delay toggles and demo state. These refreshes do not send edit feedback to Rust.

Enable the main action, display its current Start/Stop label, enable piano interaction only for a running instrument, and highlight occupied non-released voice keys.

Update meters from output entries 2/3, refresh status/frame count and mark the connection indicator active while audio is running.

Rebuild the voice table from snapshot records with channel, key, phase, bend, pressure, timbre and ADSR level. Create text nodes with textContent, including the empty-state message.

Display packet history newest first without mutating the native snapshot array; set the ready flag consumed by hardware-free UI tests.

Close the knob factory.

Close the embedded behavior script, body and document.