# francoisgeorgy/bs2-web architecture

> Architecture diagram of the GitHub repository francoisgeorgy/bs2-web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/francoisgeorgy/bs2-web
- Repository: https://github.com/francoisgeorgy/bs2-web

## Overview

BS2-Web is a browser-based editor and controller for the Novation Bass Station 2. Users edit visible synth controls, exchange MIDI with the instrument, and manage patches through initialization, randomization, SysEx/file loading and saving, favorites, and printable patch sheets. The graph centers on the main browser app and its device model, with separate patch, settings, and print capabilities. Source excerpts are partial, so uncertain internal call links are omitted; documented capabilities without sampled implementation use supported enclosing paths.

Main entry points: [`src/bass-station-2/bass-station-2.js`](https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/bass-station-2.js) (Device model), [`src/main.js`](https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js) (Editor UI and controls), [`src/xypad/xypad.js`](https://github.com/francoisgeorgy/bs2-web/blob/master/src/xypad/xypad.js) (XY pad), [`src/bass-station-2/cc.js`](https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/cc.js) (CC definitions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Browser editor"]
  node_editor["Editor UI and controls<br/>[main.js]"]
  node_controls["Parameter controls"]
  node_xypad["XY pad<br/>[xypad.js]"]
end

subgraph group_device["Synth protocol"]
  node_midi["MIDI service"]
  node_model["Device model<br/>[bass-station-2.js]"]
  node_cc["CC definitions<br/>[cc.js]"]
  node_nrpn["NRPN handling<br/>[nrpn.js]"]
  node_sysex["SysEx handling<br/>[sysex.js]"]
  node_mappers["Value mapping<br/>[mappers.js]"]
end

subgraph group_patch["Patch management"]
  node_patchops["Patch load and save<br/>[main.js]"]
  node_favorites["Favorite patches<br/>[main.js]"]
  node_randomizer["Patch randomizer<br/>[main.js]"]
  node_print["Patch sheet rendering<br/>[print.js]"]
end

subgraph group_support["Preferences and output"]
  node_preferences["Settings persistence<br/>[preferences.js]"]
  node_midiwindow["MIDI message viewer<br/>[midi.html]"]
end

node_user(("Synth user"))
node_instrument(("Bass Station 2"))
node_browserstore[("Browser storage")]

node_user -->|"edits controls"| node_editor
node_editor -->|"updates controls"| node_controls
node_editor -->|"uses MIDI"| node_midi
node_midi -->|"sends and receives"| node_instrument
node_editor -->|"updates device state"| node_model
node_model -->|"uses definitions"| node_cc
node_model -->|"uses definitions"| node_nrpn
node_model -->|"encodes and decodes"| node_sysex
node_cc -->|"maps values"| node_mappers
node_nrpn -->|"maps values"| node_mappers
node_user -->|"manages patches"| node_patchops
node_patchops -->|"reads and updates"| node_model
node_patchops -->|"sends loaded patch"| node_instrument
node_user -->|"saves or recalls"| node_favorites
node_favorites -->|"persists favorites"| node_browserstore
node_user -->|"randomizes patch"| node_randomizer
node_randomizer -->|"updates parameters"| node_model
node_user -->|"prints patch sheet"| node_print
node_print -->|"reads patch values"| node_model
node_editor -->|"loads and saves"| node_preferences
node_preferences -->|"persists settings"| node_browserstore
node_user -->|"moves XY pad"| node_xypad
node_xypad -->|"provides positions"| node_editor
node_user -->|"views MIDI log"| node_midiwindow

click node_editor "https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js"
click node_controls "https://github.com/francoisgeorgy/bs2-web/tree/master/src/bass-station-2"
click node_xypad "https://github.com/francoisgeorgy/bs2-web/blob/master/src/xypad/xypad.js"
click node_model "https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/bass-station-2.js"
click node_cc "https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/cc.js"
click node_nrpn "https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/nrpn.js"
click node_sysex "https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/sysex.js"
click node_mappers "https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/mappers.js"
click node_patchops "https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js"
click node_favorites "https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js"
click node_randomizer "https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js"
click node_print "https://github.com/francoisgeorgy/bs2-web/blob/master/src/print.js"
click node_preferences "https://github.com/francoisgeorgy/bs2-web/blob/master/src/preferences.js"
click node_midiwindow "https://github.com/francoisgeorgy/bs2-web/blob/master/src/midi.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_editor,node_controls,node_xypad,node_user toneBlue
class node_midi,node_model,node_cc,node_nrpn,node_sysex,node_mappers,node_browserstore toneAmber
class node_patchops,node_favorites,node_randomizer,node_print toneMint
class node_preferences,node_midiwindow toneRose
class node_instrument toneIndigo
```

## Components

### Browser editor

- [Editor UI and controls](https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js): `src/main.js`
- [Parameter controls](https://github.com/francoisgeorgy/bs2-web/tree/master/src/bass-station-2): `src/bass-station-2`
- [XY pad](https://github.com/francoisgeorgy/bs2-web/blob/master/src/xypad/xypad.js): `src/xypad/xypad.js`

### Synth protocol

- **MIDI service**
- [Device model](https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/bass-station-2.js): `src/bass-station-2/bass-station-2.js`
- [CC definitions](https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/cc.js): `src/bass-station-2/cc.js`
- [NRPN handling](https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/nrpn.js): `src/bass-station-2/nrpn.js`
- [SysEx handling](https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/sysex.js): `src/bass-station-2/sysex.js`
- [Value mapping](https://github.com/francoisgeorgy/bs2-web/blob/master/src/bass-station-2/mappers.js): `src/bass-station-2/mappers.js`

### Patch management

- [Patch load and save](https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js): `src/main.js`
- [Favorite patches](https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js): `src/main.js`
- [Patch randomizer](https://github.com/francoisgeorgy/bs2-web/blob/master/src/main.js): `src/main.js`
- [Patch sheet rendering](https://github.com/francoisgeorgy/bs2-web/blob/master/src/print.js): `src/print.js`

### Preferences and output

- [Settings persistence](https://github.com/francoisgeorgy/bs2-web/blob/master/src/preferences.js): `src/preferences.js`
- [MIDI message viewer](https://github.com/francoisgeorgy/bs2-web/blob/master/src/midi.html): `src/midi.html`

### Other components

- **Synth user**
- **Bass Station 2**
- **Browser storage**

## Connections

- Synth user → Editor UI and controls: edits controls
- Editor UI and controls → Parameter controls: updates controls
- Editor UI and controls → MIDI service: uses MIDI
- MIDI service → Bass Station 2: sends and receives
- Editor UI and controls → Device model: updates device state
- Device model → CC definitions: uses definitions
- Device model → NRPN handling: uses definitions
- Device model → SysEx handling: encodes and decodes
- CC definitions → Value mapping: maps values
- NRPN handling → Value mapping: maps values
- Synth user → Patch load and save: manages patches
- Patch load and save → Device model: reads and updates
- Patch load and save → Bass Station 2: sends loaded patch
- Synth user → Favorite patches: saves or recalls
- Favorite patches → Browser storage: persists favorites
- Synth user → Patch randomizer: randomizes patch
- Patch randomizer → Device model: updates parameters
- Synth user → Patch sheet rendering: prints patch sheet
- Patch sheet rendering → Device model: reads patch values
- Editor UI and controls → Settings persistence: loads and saves
- Settings persistence → Browser storage: persists settings
- Synth user → XY pad: moves XY pad
- XY pad → Editor UI and controls: provides positions
- Synth user → MIDI message viewer: views MIDI log