Add Tone3000 integration

.github/workflows/jstest.yml

@@ -0,0 +1,19 @@
+name: jstest
+
+on: [push]
+
+jobs:
+  jstest:
+    runs-on: ubuntu-22.04
+    name: jstest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: Install dependencies
+        # npm install, not npm ci: the repo ignores package-lock.json (.gitignore), so
+        # there is no committed lockfile for ci to read.
+        run: npm install
+      - name: Run frontend tests
+        run: npm test

README.rst

@@ -58,3 +58,26 @@ And now you are ready to start the webserver::
 
 Setting the environment variables is needed when developing on a PC.
 Open your browser and point to http://localhost:8888/.
+
+Test
+----
+
+The test suite in ``test/`` contains HTTP-level characterization tests (pytest + tornado's testing tools).
+They run against a faked audio backend, so no JACK, mod-host or MOD hardware is needed.
+
+First complete the Install section above (virtualenv, python requirements and ``make -C utils`` — the tests
+import the webserver, which requires ``utils/libmod_utils.so``).
+
+On Python 3.10 or newer, the pinned tornado 4.3 needs a one-time patch (see the note in ``requirements.txt``)::
+
+    $ sed -i 's/collections.MutableMapping/collections.abc.MutableMapping/' modui-env/lib/python3.*/site-packages/tornado/httputil.py
+
+Install the test requirements and run the suite from the repository root::
+
+    $ source modui-env/bin/activate
+    $ pip3 install -r test-requirements.txt
+    $ pytest
+
+NOTE: ``test/hmi-protocol-integrationtest.py`` is not part of this suite — it is a standalone integration
+test for the HMI serial protocol that requires JACK, mod-host and a serial device, and pytest does not
+collect it.

html/css/less/main.less

@@ -72,6 +72,7 @@
 @import 'cloud_plugins.less';
 @import 'banks.less';
 @import 'file_manager.less';
+@import 'tone3000.less';
 @import 'pedalboards.less';
 @import 'nprogress.less';
 @import 'addressings.less';
@@ -350,6 +351,19 @@ hr.dotted {
       background-position: -180px bottom;
     }
   }
+  #mod-tone3000 {
+    background-image: url(../img/tone3000-icon.png);
+    background-position: center center;
+    background-size: 30px 30px;
+    background-repeat: no-repeat;
+    transition: all 0.33s;
+    &:hover {
+      background-color: #000;
+    }
+    &.selected {
+      background-color: #000;
+    }
+  }
   #banks-saving {
     margin: 21px 0 0 6px;
     font-size: 10px;
@@ -517,7 +531,8 @@ header#pedalboard-actions,
 #bank-library header,
 #cloud-plugins-library header,
 #pedalboards-library header,
-#file-manager-library header {
+#file-manager-library header,
+#tone3000-library header {
   display: block;
   left: 0;
   height: 45px;

html/css/less/tone3000.less

@@ -0,0 +1,77 @@
+#tone3000-library {
+    background: #2c2c2c url(../img/watermark.png) 100% 100% no-repeat;
+    top: 0;
+    bottom: 46px;
+    left: 0;
+    right: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: absolute;
+    z-index: 2;
+}
+/* Nothing to lay out: the catalog, and everything the user does with it, lives in a
+   popup floated over this panel. All this pane holds is the way in. */
+#tone3000-wrapper {
+    position: absolute;
+    top: 45px;
+    bottom: 46px;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #ccc;
+}
+#tone3000-logo {
+    width: 96px;
+    height: 96px;
+}
+#tone3000-wrapper h2 {
+    color: #fff;
+    font-size: 24px;
+    font-weight: normal;
+    text-transform: uppercase;
+    margin: .8em 0 .2em;
+}
+#tone3000-wrapper .tone3000-hint {
+    font-size: 13px;
+    line-height: 1.5;
+    color: #999;
+    max-width: 34em;
+    margin: 0 0 1em;
+}
+#tone3000-wrapper .tone3000-hint b {
+    color: #ccc;
+    font-weight: normal;
+}
+#tone3000-wrapper .tone3000-hint:last-of-type {
+    margin-bottom: 1.5em;
+}
+#tone3000-wrapper .tone3000-autoopen {
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+    margin-top: 1.5em;
+}
+#tone3000-wrapper .tone3000-autoopen input {
+    margin-right: .5em;
+    vertical-align: middle;
+    cursor: pointer;
+}
+#tone3000-wrapper .tone3000-autoopen:hover {
+    color: #ccc;
+}
+#tone3000-browse {
+    background: #883996;
+    border: none;
+    border-radius: 3px;
+    color: #fff;
+    cursor: pointer;
+    font-size: 14px;
+    padding: .7em 1.4em;
+}
+#tone3000-browse:hover {
+    background: #9d47ad;
+}

html/index.html

@@ -66,6 +66,8 @@
     PEDALBOARDS_LABS_URL  = '{{pedalboards_labs_url}}'
     CONTROLCHAIN_URL = '{{controlchain_url}}'
     LV2_PLUGIN_DIR   = '{{lv2_plugin_dir}}'
+    TONE3000_CLIENT_ID = '{{tone3000_client_id}}'
+    TONE3000_API       = '{{tone3000_api}}'
     VERSION          = '{{version}}'
     BIN_COMPAT       = '{{bin_compat}}'
     PLATFORM         = '{{platform}}'
@@ -138,6 +140,8 @@
         bankList: $('#bank-list'),
         fileManagerBox: $('#file-manager-library'),
         fileManagerBoxTrigger: $('#main-menu #mod-file-manager'),
+        tone3000Box: $('#tone3000-library'),
+        tone3000BoxTrigger: $('#main-menu #mod-tone3000'),
         shareButton: $('#pedalboard-info .js-cloud'),
         shareWindow: $('#share-window'),
         presetSaveBox: $('#save-preset'),
@@ -294,6 +298,7 @@
 <script type="text/javascript" src="js/pedalboard.js?v={{version}}"></script>
 <script type="text/javascript" src="js/pedalboards.js?v={{version}}"></script>
 <script type="text/javascript" src="js/file_manager.js?v={{version}}"></script>
+<script type="text/javascript" src="js/tone3000.js?v={{version}}"></script>
 <script type="text/javascript" src="js/banks.js?v={{version}}"></script>
 <script type="text/javascript" src="js/effects.js?v={{version}}"></script>
 <script type="text/javascript" src="js/cloudplugin.js?v={{version}}"></script>
@@ -709,6 +714,7 @@ <h1 class="pull-left">Control Chain Device Update</h1><span class="js-cancel clo
         <div id="mod-bank" class="icon" data-message="Banks"></div>
         <div id="mod-file-manager" class="icon" data-message="File Manager"></div>
         <div id="mod-cloud-plugins" class="icon" data-message="Plugin Store"></div>
+        <div id="mod-tone3000" class="icon" data-message="Tone3000"></div>
         <div id="banks-saving">Auto saving banks...</div>
         <div id="mod-update" class="status icon"></div>
         <div id="mod-status" class="status icon mod-hidden"></div>
@@ -1017,6 +1023,35 @@ <h1 class="bottom top">File Manager</h1>
     </div></div>
     <!-- END FILE MANAGER -->
 
+    <!-- TONE3000 -->
+    <div id="tone3000-library" class="mod-hidden mod-init-hidden"><div class="box">
+        <header>
+            <h1 class="bottom top">Tone3000</h1>
+        </header>
+        <!-- The catalog opens in a real OS window floated over this panel. It cannot be
+             an iframe: TONE3000's sign-in cookie is SameSite=Lax and is dropped in a
+             cross-site frame. So there is nothing to draw here but the way in. -->
+        <div id="tone3000-wrapper">
+            <img id="tone3000-logo" src="img/tone3000-icon.png" alt="Tone3000">
+            <h2>Tone3000</h2>
+            <p class="tone3000-hint">
+                Browse the TONE3000 catalog and download the tones you like. Each tone is
+                saved to its own folder under <b>NAM Models</b>, where you will find it in
+                the File Manager.
+            </p>
+            <p class="tone3000-hint">
+                A tone you just downloaded goes to the top of the model list of every NAM
+                plugin on the board, so you can load it without hunting for it.
+            </p>
+            <button id="tone3000-browse">Open TONE3000</button>
+            <label class="tone3000-autoopen">
+                <input type="checkbox" id="tone3000-autoopen">
+                Open TONE3000 automatically when this tab is selected
+            </label>
+        </div>
+    </div></div>
+    <!-- END TONE3000 -->
+
     <!-- MOD UPDATE/UPGRADE TOOLTIP -->
     <div class="tooltip mod-hidden" style="right:102px;">
         <div class="arrow"></div>

html/js/desktop.js

@@ -37,6 +37,8 @@ function Desktop(elements) {
         pedalboardTrigger: $('<div>'),
         fileManagerBox: $('<div>'),
         fileManagerBoxTrigger: $('<div>'),
+        tone3000Box: $('<div>'),
+        tone3000BoxTrigger: $('<div>'),
         pedalboardBox: $('<div>'),
         pedalboardBoxTrigger: $('<div>'),
         bankBox: $('<div>'),
@@ -770,6 +772,8 @@ function Desktop(elements) {
                                     elements.bankBoxTrigger)
     this.fileManagerBox = self.makeFileManagerBox(elements.fileManagerBox,
                                                   elements.fileManagerBoxTrigger)
+    this.tone3000Box = self.makeTone3000Box(elements.tone3000Box,
+                                            elements.tone3000BoxTrigger)
 
     this.getPluginsData = function (uris, callback) {
         $.ajax({
@@ -1313,6 +1317,7 @@ function Desktop(elements) {
     elements.bankBoxTrigger.statusTooltip()
     elements.cloudPluginBoxTrigger.statusTooltip()
     elements.fileManagerBoxTrigger.statusTooltip()
+    elements.tone3000BoxTrigger.statusTooltip()
 
     this.upgradeWindow = elements.upgradeWindow.upgradeWindow({
         icon: elements.upgradeIcon,
@@ -1810,6 +1815,14 @@ Desktop.prototype.makeFileManagerBox = function (el, trigger) {
     })
 }
 
+Desktop.prototype.makeTone3000Box = function (el, trigger) {
+    var self = this
+    el.tone3000Box({
+        trigger: trigger,
+        windowManager: this.windowManager,
+    })
+}
+
 Desktop.prototype.reset = function (callback, skipConfirmDialog) {
     if (this.pedalboardModified && !skipConfirmDialog && !confirm("There are unsaved modifications that will be lost. Are you sure?")) {
         return