Merge remote-tracking branch 'upstream/main' into betterfmsynth

index.mjs

@@ -2,6 +2,7 @@
 export * from './packages/core/index.mjs';
 export * from './packages/csound/index.mjs';
 export * from './packages/embed/index.mjs';
+export * from './packages/desktopbridge/index.mjs';
 export * from './packages/midi/index.mjs';
 export * from './packages/mini/index.mjs';
 export * from './packages/osc/index.mjs';

packages/core/controls.mjs

@@ -153,6 +153,9 @@ const generic_params = [
    */
   ['bank'],
 
+  ['analyze'], // analyser node send amount 0 - 1 (used by scope)
+  ['fft'], // fftSize of analyser
+
   /**
    * Amplitude envelope decay time: the time it takes after the attack time to reach the sustain level.
    * Note that the decay is only audible if the sustain value is lower than 1.
@@ -510,6 +513,9 @@ const generic_params = [
    *
    */
   ['lsize'],
+  // label for pianoroll
+  ['activeLabel'],
+  [['label', 'activeLabel']],
   // ['lfo'],
   // ['lfocutoffint'],
   // ['lfodelay'],

packages/core/draw.mjs

@@ -9,25 +9,26 @@ import { Pattern, getTime, State, TimeSpan } from './index.mjs';
 export const getDrawContext = (id = 'test-canvas') => {
   let canvas = document.querySelector('#' + id);
   if (!canvas) {
+    const scale = 2; // 2 = crisp on retina screens
     canvas = document.createElement('canvas');
     canvas.id = id;
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
+    canvas.width = window.innerWidth * scale;
+    canvas.height = window.innerHeight * scale;
     canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
     document.body.prepend(canvas);
     let timeout;
     window.addEventListener('resize', () => {
       timeout && clearTimeout(timeout);
       timeout = setTimeout(() => {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
+        canvas.width = window.innerWidth * scale;
+        canvas.height = window.innerHeight * scale;
       }, 200);
     });
   }
   return canvas.getContext('2d');
 };
 
-Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
+Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) {
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }
@@ -59,7 +60,7 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
 
 export const cleanupDraw = (clearScreen = true) => {
   const ctx = getDrawContext();
-  clearScreen && ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }

packages/core/pianoroll.mjs

@@ -29,138 +29,26 @@ const getValue = (e) => {
   return value;
 };
 
-Pattern.prototype.pianoroll = function ({
-  cycles = 4,
-  playhead = 0.5,
-  overscan = 1,
-  flipTime = 0,
-  flipValues = 0,
-  hideNegative = false,
-  // inactive = '#C9E597',
-  // inactive = '#FFCA28',
-  inactive = '#7491D2',
-  active = '#FFCA28',
-  // background = '#2A3236',
-  background = 'transparent',
-  smear = 0,
-  playheadColor = 'white',
-  minMidi = 10,
-  maxMidi = 90,
-  autorange = 0,
-  timeframe: timeframeProp,
-  fold = 0,
-  vertical = 0,
-  labels = 0,
-} = {}) {
-  const ctx = getDrawContext();
-  const w = ctx.canvas.width;
-  const h = ctx.canvas.height;
+Pattern.prototype.pianoroll = function (options = {}) {
+  let { cycles = 4, playhead = 0.5, overscan = 1, hideNegative = false } = options;
+
   let from = -cycles * playhead;
   let to = cycles * (1 - playhead);
 
-  if (timeframeProp) {
-    console.warn('timeframe is deprecated! use from/to instead');
-    from = 0;
-    to = timeframeProp;
-  }
-  const timeAxis = vertical ? h : w;
-  const valueAxis = vertical ? w : h;
-  let timeRange = vertical ? [timeAxis, 0] : [0, timeAxis]; // pixel range for time
-  const timeExtent = to - from; // number of seconds that fit inside the canvas frame
-  const valueRange = vertical ? [0, valueAxis] : [valueAxis, 0]; // pixel range for values
-  let valueExtent = maxMidi - minMidi + 1; // number of "slots" for values, overwritten if autorange true
-  let barThickness = valueAxis / valueExtent; // pixels per value, overwritten if autorange true
-  let foldValues = [];
-  flipTime && timeRange.reverse();
-  flipValues && valueRange.reverse();
-
   this.draw(
-    (ctx, events, t) => {
-      ctx.fillStyle = background;
-      ctx.globalAlpha = 1; // reset!
-      if (!smear) {
-        ctx.clearRect(0, 0, w, h);
-        ctx.fillRect(0, 0, w, h);
-      }
+    (ctx, haps, t) => {
       const inFrame = (event) =>
         (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.endClipped >= t + from;
-      events.filter(inFrame).forEach((event) => {
-        const isActive = event.whole.begin <= t && event.endClipped > t;
-        ctx.fillStyle = event.context?.color || inactive;
-        ctx.strokeStyle = event.context?.color || active;
-        ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1;
-        const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
-        let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
-        const value = getValue(event);
-        const valuePx = scale(
-          fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent,
-          ...valueRange,
-        );
-        let margin = 0;
-        const offset = scale(t / timeExtent, ...timeRange);
-        let coords;
-        if (vertical) {
-          coords = [
-            valuePx + 1 - (flipValues ? barThickness : 0), // x
-            timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
-            barThickness - 2, // width
-            durationPx - 2, // height
-          ];
-        } else {
-          coords = [
-            timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
-            valuePx + 1 - (flipValues ? 0 : barThickness), // y
-            durationPx - 2, // widith
-            barThickness - 2, // height
-          ];
-        }
-        isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
-        if (labels) {
-          const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
-          ctx.font = `${barThickness * 0.75}px monospace`;
-          ctx.strokeStyle = 'black';
-          ctx.fillStyle = isActive ? 'white' : 'black';
-          ctx.textBaseline = 'top';
-          ctx.fillText(label, ...coords);
-        }
+      pianoroll({
+        ...options,
+        time: t,
+        ctx,
+        haps: haps.filter(inFrame),
       });
-      ctx.globalAlpha = 1; // reset!
-      const playheadPosition = scale(-from / timeExtent, ...timeRange);
-      // draw playhead
-      ctx.strokeStyle = playheadColor;
-      ctx.beginPath();
-      if (vertical) {
-        ctx.moveTo(0, playheadPosition);
-        ctx.lineTo(valueAxis, playheadPosition);
-      } else {
-        ctx.moveTo(playheadPosition, 0);
-        ctx.lineTo(playheadPosition, valueAxis);
-      }
-      ctx.stroke();
     },
     {
       from: from - overscan,
       to: to + overscan,
-      onQuery: (events) => {
-        const { min, max, values } = events.reduce(
-          ({ min, max, values }, e) => {
-            const v = getValue(e);
-            return {
-              min: v < min ? v : min,
-              max: v > max ? v : max,
-              values: values.includes(v) ? values : [...values, v],
-            };
-          },
-          { min: Infinity, max: -Infinity, values: [] },
-        );
-        if (autorange) {
-          minMidi = min;
-          maxMidi = max;
-          valueExtent = maxMidi - minMidi + 1;
-        }
-        foldValues = values.sort((a, b) => String(a).localeCompare(String(b)));
-        barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
-      },
     },
   );
   return this;
@@ -191,6 +79,13 @@ export function pianoroll({
   fold = 0,
   vertical = 0,
   labels = false,
+  fill = 1,
+  fillActive = false,
+  strokeActive = true,
+  stroke,
+  hideInactive = 0,
+  colorizeInactive = 1,
+  fontFamily,
   ctx,
 } = {}) {
   const w = ctx.canvas.width;
@@ -234,58 +129,75 @@ export function pianoroll({
   // foldValues = values.sort((a, b) => a - b);
   foldValues = values.sort((a, b) => String(a).localeCompare(String(b)));
   barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
-
   ctx.fillStyle = background;
   ctx.globalAlpha = 1; // reset!
   if (!smear) {
     ctx.clearRect(0, 0, w, h);
     ctx.fillRect(0, 0, w, h);
   }
-  /*   const inFrame = (event) =>
-    (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= time + to && event.whole.end >= time + from; */
-  haps
-    // .filter(inFrame)
-    .forEach((event) => {
-      const isActive = event.whole.begin <= time && event.endClipped > time;
-      const color = event.value?.color || event.context?.color;
-      ctx.fillStyle = color || inactive;
-      ctx.strokeStyle = color || active;
-      ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1;
-      const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
-      let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
-      const value = getValue(event);
-      const valuePx = scale(
-        fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent,
-        ...valueRange,
-      );
-      let margin = 0;
-      const offset = scale(time / timeExtent, ...timeRange);
-      let coords;
-      if (vertical) {
-        coords = [
-          valuePx + 1 - (flipValues ? barThickness : 0), // x
-          timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
-          barThickness - 2, // width
-          durationPx - 2, // height
-        ];
-      } else {
-        coords = [
-          timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
-          valuePx + 1 - (flipValues ? 0 : barThickness), // y
-          durationPx - 2, // widith
-          barThickness - 2, // height
-        ];
-      }
-      isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
-      if (labels) {
-        const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
-        ctx.font = `${barThickness * 0.75}px monospace`;
-        ctx.strokeStyle = 'black';
-        ctx.fillStyle = isActive ? 'white' : 'black';
-        ctx.textBaseline = 'top';
-        ctx.fillText(label, ...coords);
-      }
-    });
+  haps.forEach((event) => {
+    const isActive = event.whole.begin <= time && event.endClipped > time;
+    let strokeCurrent = stroke ?? (strokeActive && isActive);
+    let fillCurrent = (!isActive && fill) || (isActive && fillActive);
+    if (hideInactive && !isActive) {
+      return;
+    }
+    let color = event.value?.color || event.context?.color;
+    active = color || active;
+    inactive = colorizeInactive ? color || inactive : inactive;
+    color = isActive ? active : inactive;
+    ctx.fillStyle = fillCurrent ? color : 'transparent';
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = event.context.velocity ?? event.value?.gain ?? 1;
+    const timeProgress = (event.whole.begin - (flipTime ? to : from)) / timeExtent;
+    const timePx = scale(timeProgress, ...timeRange);
+    let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
+    const value = getValue(event);
+    const valueProgress = fold
+      ? foldValues.indexOf(value) / foldValues.length
+      : (Number(value) - minMidi) / valueExtent;
+    const valuePx = scale(valueProgress, ...valueRange);
+    let margin = 0;
+    const offset = scale(time / timeExtent, ...timeRange);
+    let coords;
+    if (vertical) {
+      coords = [
+        valuePx + 1 - (flipValues ? barThickness : 0), // x
+        timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
+        barThickness - 2, // width
+        durationPx - 2, // height
+      ];
+    } else {
+      coords = [
+        timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
+        valuePx + 1 - (flipValues ? 0 : barThickness), // y
+        durationPx - 2, // widith
+        barThickness - 2, // height
+      ];
+    }
+    /* const xFactor = Math.sin(performance.now() / 500) + 1;
+      coords[0] *= xFactor; */
+
+    if (strokeCurrent) {
+      ctx.strokeRect(...coords);
+    }
+    if (fillCurrent) {
+      ctx.fillRect(...coords);
+    }
+    //ctx.ellipse(...ellipseFromRect(...coords))
+    if (labels) {
+      const defaultLabel = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : '');
+      const { label: inactiveLabel, activeLabel } = event.value;
+      const customLabel = isActive ? activeLabel || inactiveLabel : inactiveLabel;
+      const label = customLabel ?? defaultLabel;
+      let measure = vertical ? durationPx : barThickness * 0.75;
+      ctx.font = `${measure}px ${fontFamily || 'monospace'}`;
+      // font color
+      ctx.fillStyle = /* isActive &&  */ !fillCurrent ? color : 'black';
+      ctx.textBaseline = 'top';
+      ctx.fillText(label, ...coords);
+    }
+  });
   ctx.globalAlpha = 1; // reset!
   const playheadPosition = scale(-from / timeExtent, ...timeRange);
   // draw playhead
@@ -311,11 +223,15 @@ export function getDrawOptions(drawTime, options = {}) {
 }
 
 Pattern.prototype.punchcard = function (options) {
-  return this.onPaint((ctx, time, haps, drawTime) =>
-    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, options) }),
+  return this.onPaint((ctx, time, haps, drawTime, paintOptions = {}) =>
+    pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { ...paintOptions, ...options }) }),
   );
 };
 
+Pattern.prototype.wordfall = function (options) {
+  return this.punchcard({ vertical: 1, labels: 1, stroke: 0, fillActive: 1, active: 'white', ...options });
+};
+
 /* Pattern.prototype.pianoroll = function (options) {
   return this.onPaint((ctx, time, haps, drawTime) =>
     pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0, ...options }) }),

packages/desktopbridge/README.md

@@ -0,0 +1,3 @@
+# @strudel/desktopbridge
+
+This package contains utilities used to communicate with the Tauri backend

packages/desktopbridge/index.mjs

@@ -0,0 +1,8 @@
+/*
+index.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/desktopbridge/index.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export * from './midibridge.mjs';
+export * from './utils.mjs';

packages/desktopbridge/midibridge.mjs

@@ -0,0 +1,56 @@
+import { Invoke } from './utils.mjs';
+import { Pattern, noteToMidi } from '@strudel.cycles/core';
+
+const ON_MESSAGE = 0x90;
+const OFF_MESSAGE = 0x80;
+
+Pattern.prototype.midi = function (output) {
+  return this.onTrigger((time, hap, currentTime) => {
+    const { note, nrpnn, nrpv, ccn, ccv } = hap.value;
+    const offset = (time - currentTime) * 1000;
+    const velocity = Math.floor((hap.context?.velocity ?? 0.9) * 100); // TODO: refactor velocity
+    const duration = Math.floor(hap.duration.valueOf() * 1000 - 10);
+    const roundedOffset = Math.round(offset);
+    const midichan = (hap.value.midichan ?? 1) - 1;
+    const requestedport = output ?? 'IAC';
+    const messagesfromjs = [];
+    if (note != null) {
+      const midiNumber = typeof note === 'number' ? note : noteToMidi(note);
+      messagesfromjs.push({
+        requestedport,
+        message: [ON_MESSAGE + midichan, midiNumber, velocity],
+        offset: roundedOffset,
+      });
+      messagesfromjs.push({
+        requestedport,
+        message: [OFF_MESSAGE + midichan, midiNumber, velocity],
+        offset: roundedOffset + duration,
+      });
+    }
+    if (ccv && ccn) {
+      if (typeof ccv !== 'number' || ccv < 0 || ccv > 1) {
+        throw new Error('expected ccv to be a number between 0 and 1');
+      }
+      if (!['string', 'number'].includes(typeof ccn)) {
+        throw new Error('expected ccn to be a number or a string');
+      }
+      const scaled = Math.round(ccv * 127);
+      messagesfromjs.push({
+        requestedport,
+        message: [ON_MESSAGE + midichan, ccn, scaled],
+        offset: roundedOffset,
+      });
+      messagesfromjs.push({
+        requestedport,
+        message: [OFF_MESSAGE + midichan, ccn, scaled],
+        offset: roundedOffset + duration,
+      });
+    }
+    // invoke is temporarily blocking, run in an async process
+    if (messagesfromjs.length) {
+      setTimeout(() => {
+        Invoke('sendmidi', { messagesfromjs });
+      });
+    }
+  });
+};

packages/desktopbridge/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@strudel/desktopbridge",
+    "version": "0.1.0",
+    "description": "send midi messages between the JS and Tauri (Rust) sides of the Studel desktop app",
+    "main": "index.mjs",
+    "type": "module",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/tidalcycles/strudel.git"
+    },
+    "keywords": [
+      "tidalcycles",
+      "strudel",
+      "pattern",
+      "livecoding",
+      "algorave"
+    ],
+    "author": "Jade Rowland <jaderowlanddev@gmail.com>",
+    "license": "AGPL-3.0-or-later",
+    "bugs": {
+      "url": "https://github.com/tidalcycles/strudel/issues"
+    },
+    "dependencies": {
+        "@strudel.cycles/core": "workspace:*",
+        "@tauri-apps/api": "^1.4.0"
+      },
+    "homepage": "https://github.com/tidalcycles/strudel#readme"
+  }

packages/desktopbridge/utils.mjs

@@ -0,0 +1,4 @@
+import { invoke } from '@tauri-apps/api/tauri';
+
+export const Invoke = invoke;
+export const isTauri = () => window.__TAURI_IPC__ != null;

packages/midi/midi.mjs

@@ -6,9 +6,8 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import * as _WebMidi from 'webmidi';
 import { Pattern, isPattern, logger } from '@strudel.cycles/core';
-import { getAudioContext } from '@strudel.cycles/webaudio';
 import { noteToMidi } from '@strudel.cycles/core';
-
+import { Note } from 'webmidi';
 // if you use WebMidi from outside of this package, make sure to import that instance:
 export const { WebMidi } = _WebMidi;
 
@@ -16,12 +15,28 @@ function supportsMidi() {
   return typeof navigator.requestMIDIAccess === 'function';
 }
 
-export function enableWebMidi(options = {}) {
-  const { onReady, onConnected, onDisconnected } = options;
+function getMidiDeviceNamesString(outputs) {
+  return outputs.map((o) => `'${o.name}'`).join(' | ');
+}
 
+export function enableWebMidi(options = {}) {
+  const { onReady, onConnected, onDisconnected, onEnabled } = options;
+  if (WebMidi.enabled) {
+    return;
+  }
   if (!supportsMidi()) {
     throw new Error('Your Browser does not support WebMIDI.');
   }
+  WebMidi.addListener('connected', () => {
+    onConnected?.(WebMidi);
+  });
+  WebMidi.addListener('enabled', () => {
+    onEnabled?.(WebMidi);
+  });
+  // Reacting when a device becomes unavailable
+  WebMidi.addListener('disconnected', (e) => {
+    onDisconnected?.(WebMidi, e);
+  });
   return new Promise((resolve, reject) => {
     if (WebMidi.enabled) {
       // if already enabled, just resolve WebMidi
@@ -32,13 +47,6 @@ export function enableWebMidi(options = {}) {
       if (err) {
         reject(err);
       }
-      WebMidi.addListener('connected', (e) => {
-        onConnected?.(WebMidi);
-      });
-      // Reacting when a device becomes unavailable
-      WebMidi.addListener('disconnected', (e) => {
-        onDisconnected?.(WebMidi, e);
-      });
       onReady?.(WebMidi);
       resolve(WebMidi);
     });
@@ -47,8 +55,6 @@ export function enableWebMidi(options = {}) {
 // const outputByName = (name: string) => WebMidi.getOutputByName(name);
 const outputByName = (name) => WebMidi.getOutputByName(name);
 
-let midiReady;
-
 // output?: string | number, outputs: typeof WebMidi.outputs
 function getDevice(output, outputs) {
   if (!outputs.length) {
@@ -60,29 +66,19 @@ function getDevice(output, outputs) {
   if (typeof output === 'string') {
     return outputByName(output);
   }
-  return outputs[0];
+  // attempt to default to first IAC device if none is specified
+  const IACOutput = outputs.find((output) => output.name.includes('IAC'));
+  const device = IACOutput ?? outputs[0];
+  if (!device) {
+    throw new Error(
+      `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${getMidiDeviceNamesString(WebMidi.outputs)}`,
+    );
+  }
+
+  return IACOutput ?? outputs[0];
 }
 
-// Pattern.prototype.midi = function (output: string | number, channel = 1) {
 Pattern.prototype.midi = function (output) {
-  if (!supportsMidi()) {
-    throw new Error(`🎹 WebMidi is not enabled. Supported Browsers: https://caniuse.com/?search=webmidi`);
-  }
-  /* await */ enableWebMidi({
-    onConnected: ({ outputs }) =>
-      logger(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`),
-    onDisconnected: ({ outputs }) =>
-      logger(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`),
-    onReady: ({ outputs }) => {
-      const device = getDevice(output, outputs);
-      const otherOutputs = outputs
-        .filter((o) => o.name !== device.name)
-        .map((o) => `'${o.name}'`)
-        .join(' | ');
-      midiReady = true;
-      logger(`Midi connected! Using "${device.name}". ${otherOutputs ? `Also available: ${otherOutputs}` : ''}`);
-    },
-  });
   if (isPattern(output)) {
     throw new Error(
       `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${
@@ -90,35 +86,43 @@ Pattern.prototype.midi = function (output) {
       }')`,
     );
   }
-  return this.onTrigger((time, hap) => {
-    if (!midiReady) {
+
+  enableWebMidi({
+    onEnabled: ({ outputs }) => {
+      const device = getDevice(output, outputs);
+      const otherOutputs = outputs.filter((o) => o.name !== device.name);
+      logger(
+        `Midi enabled! Using "${device.name}". ${
+          otherOutputs?.length ? `Also available: ${getMidiDeviceNamesString(otherOutputs)}` : ''
+        }`,
+      );
+    },
+    onDisconnected: ({ outputs }) =>
+      logger(`Midi device disconnected! Available: ${getMidiDeviceNamesString(outputs)}`),
+  });
+
+  return this.onTrigger((time, hap, currentTime, cps) => {
+    if (!WebMidi.enabled) {
       return;
     }
     const device = getDevice(output, WebMidi.outputs);
-    if (!device) {
-      throw new Error(
-        `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs
-          .map((o) => `'${o.name}'`)
-          .join(' | ')}`,
-      );
-    }
     hap.ensureObjectValue();
 
-    // calculate time
-    const timingOffset = WebMidi.time - getAudioContext().getOutputTimestamp().contextTime * 1000;
-    time = time * 1000 + timingOffset;
+    const offset = (time - currentTime) * 1000;
+    // passing a string with a +num into the webmidi api adds an offset to the current time https://webmidijs.org/api/classes/Output
+    const timeOffsetString = `+${offset}`;
 
     // destructure value
     const { note, nrpnn, nrpv, ccn, ccv, midichan = 1 } = hap.value;
     const velocity = hap.context?.velocity ?? 0.9; // TODO: refactor velocity
-    const duration = hap.duration.valueOf() * 1000 - 5;
 
+    // note off messages will often a few ms arrive late, try to prevent glitching by subtracting from the duration length
+    const duration = Math.floor(hap.duration.valueOf() * 1000 - 10);
     if (note != null) {
       const midiNumber = typeof note === 'number' ? note : noteToMidi(note);
-      device.playNote(midiNumber, midichan, {
-        time,
-        duration,
-        attack: velocity,
+      const midiNote = new Note(midiNumber, { attack: velocity, duration });
+      device.playNote(midiNote, midichan, {
+        time: timeOffsetString,
       });
     }
     if (ccv && ccn) {
@@ -129,7 +133,7 @@ Pattern.prototype.midi = function (output) {
         throw new Error('expected ccn to be a number or a string');
       }
       const scaled = Math.round(ccv * 127);
-      device.sendControlChange(ccn, scaled, midichan, { time });
+      device.sendControlChange(ccn, scaled, midichan, { time: timeOffsetString });
     }
   });
 };

packages/react/src/hooks/usePatternFrame.mjs

@@ -25,10 +25,10 @@ function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2]
       const haps = pattern.queryArc(Math.max(lastFrame.current, phase - 1 / 10), phase);
       lastFrame.current = phase;
       visibleHaps.current = (visibleHaps.current || [])
-        .filter((h) => h.whole.end >= phase - lookbehind - lookahead) // in frame
+        .filter((h) => h.endClipped >= phase - lookbehind - lookahead) // in frame
         .concat(haps.filter((h) => h.hasOnset()));
       onDraw(pattern, phase - lookahead, visibleHaps.current, drawTime);
-    }, [pattern]),
+    }, [pattern, onDraw]),
   );
   useEffect(() => {
     if (started) {

packages/react/src/hooks/useStrudel.mjs

@@ -18,6 +18,7 @@ function useStrudel({
   canvasId,
   drawContext,
   drawTime = [-2, 2],
+  paintOptions = {},
 }) {
   const id = useMemo(() => s4(), []);
   canvasId = canvasId || `canvas-${id}`;
@@ -85,9 +86,9 @@ function useStrudel({
     (pattern, time, haps, drawTime) => {
       const { onPaint } = pattern.context || {};
       const ctx = typeof drawContext === 'function' ? drawContext(canvasId) : drawContext;
-      onPaint?.(ctx, time, haps, drawTime);
+      onPaint?.(ctx, time, haps, drawTime, paintOptions);
     },
-    [drawContext, canvasId],
+    [drawContext, canvasId, paintOptions],
   );
 
   const drawFirstFrame = useCallback(

packages/react/src/index.js

@@ -8,4 +8,5 @@ export { default as usePostMessage } from './hooks/usePostMessage';
 export { default as useKeydown } from './hooks/useKeydown';
 export { default as useEvent } from './hooks/useEvent';
 export { default as strudelTheme } from './themes/strudel-theme';
+export { default as teletext } from './themes/teletext';
 export { default as cx } from './cx';

packages/react/src/themes/algoboy.js

@@ -12,6 +12,7 @@ export const settings = {
   gutterBackground: 'transparent',
   gutterForeground: '#0f380f',
   light: true,
+  customStyle: '.cm-line { line-height: 1 }',
 };
 export default createTheme({
   theme: 'light',
@@ -35,5 +36,6 @@ export default createTheme({
     { tag: t.propertyName, color: '#0f380f' },
     { tag: t.className, color: '#0f380f' },
     { tag: t.invalid, color: '#0f380f' },
+    { tag: [t.unit, t.punctuation], color: '#0f380f' },
   ],
 });

packages/react/src/themes/blackscreen.js

@@ -33,5 +33,6 @@ export default createTheme({
     { tag: t.propertyName, color: 'white' },
     { tag: t.className, color: 'white' },
     { tag: t.invalid, color: 'white' },
+    { tag: [t.unit, t.punctuation], color: 'white' },
   ],
 });

packages/react/src/themes/bluescreen.js

@@ -36,5 +36,6 @@ export default createTheme({
     { tag: t.propertyName, color: 'white' },
     { tag: t.className, color: 'white' },
     { tag: t.invalid, color: 'white' },
+    { tag: [t.unit, t.punctuation], color: 'white' },
   ],
 });

packages/react/src/themes/strudel-theme.js

@@ -40,5 +40,6 @@ export default createTheme({
 
     { tag: t.className, color: '#decb6b' },
     { tag: t.invalid, color: '#ffffff' },
+    { tag: [t.unit, t.punctuation], color: '#82aaff' },
   ],
 });

packages/react/src/themes/teletext.js

@@ -0,0 +1,50 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+
+let colorA = '#6edee4';
+//let colorB = 'magenta';
+let colorB = 'white';
+let colorC = 'red';
+let colorD = '#f8fc55';
+
+export const settings = {
+  background: '#000000',
+  foreground: colorA, // whats that?
+  caret: colorC,
+  selection: colorD,
+  selectionMatch: colorA,
+  lineHighlight: '#6edee440', // panel bg
+  lineBackground: '#00000040',
+  gutterBackground: 'transparent',
+  gutterForeground: '#8a919966',
+  customStyle: '.cm-line { line-height: 1 }',
+};
+
+let punctuation = colorD;
+let mini = colorB;
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    { tag: t.keyword, color: colorA },
+    { tag: t.operator, color: mini },
+    { tag: t.special(t.variableName), color: colorA },
+    { tag: t.typeName, color: colorA },
+    { tag: t.atom, color: colorA },
+    { tag: t.number, color: mini },
+    { tag: t.definition(t.variableName), color: colorA },
+    { tag: t.string, color: mini },
+    { tag: t.special(t.string), color: mini },
+    { tag: t.comment, color: punctuation },
+    { tag: t.variableName, color: colorA },
+    { tag: t.tagName, color: colorA },
+    { tag: t.bracket, color: punctuation },
+    { tag: t.meta, color: colorA },
+    { tag: t.attributeName, color: colorA },
+    { tag: t.propertyName, color: colorA }, // methods
+    { tag: t.className, color: colorA },
+    { tag: t.invalid, color: colorC },
+    { tag: [t.unit, t.punctuation], color: punctuation },
+  ],
+});

packages/superdough/helpers.mjs

@@ -6,17 +6,6 @@ export function gainNode(value) {
   return node;
 }
 
-export const getOscillator = ({ s, freq, t }) => {
-  // make oscillator
-  const o = getAudioContext().createOscillator();
-  o.type = s || 'triangle';
-  o.frequency.value = Number(freq);
-  o.start(t);
-  //o.stop(t + duration + release);
-  const stop = (time) => o.stop(time);
-  return { node: o, stop };
-};
-
 // alternative to getADSR returning the gain node and a stop handle to trigger the release anytime in the future
 export const getEnvelope = (attack, decay, sustain, release, velocity, begin) => {
   const gainNode = getAudioContext().createGain();

packages/superdough/superdough.mjs

@@ -121,6 +121,36 @@ function getReverb(orbit, duration = 2) {
   return reverbs[orbit];
 }
 
+export let analyser, analyserData /* s = {} */;
+export function getAnalyser(/* orbit,  */ fftSize = 2048) {
+  if (!analyser /*s [orbit] */) {
+    const analyserNode = getAudioContext().createAnalyser();
+    analyserNode.fftSize = fftSize;
+    // getDestination().connect(analyserNode);
+    analyser /* s[orbit] */ = analyserNode;
+    //analyserData = new Uint8Array(analyser.frequencyBinCount);
+    analyserData = new Float32Array(analyser.frequencyBinCount);
+  }
+  if (analyser /* s[orbit] */.fftSize !== fftSize) {
+    analyser /* s[orbit] */.fftSize = fftSize;
+    //analyserData = new Uint8Array(analyser.frequencyBinCount);
+    analyserData = new Float32Array(analyser.frequencyBinCount);
+  }
+  return analyser /* s[orbit] */;
+}
+
+export function getAnalyzerData(type = 'time') {
+  const getter = {
+    time: () => analyser?.getFloatTimeDomainData(analyserData),
+    frequency: () => analyser?.getFloatFrequencyData(analyserData),
+  }[type];
+  if (!getter) {
+    throw new Error(`getAnalyzerData: ${type} not supported. use one of ${Object.keys(getter).join(', ')}`);
+  }
+  getter();
+  return analyserData;
+}
+
 function effectSend(input, effect, wet) {
   const send = gainNode(wet);
   input.connect(send);
@@ -167,6 +197,8 @@ export const superdough = async (value, deadline, hapDuration) => {
     room,
     size = 2,
     velocity = 1,
+    analyze, // analyser wet
+    fft = 8, // fftSize 0 - 10
   } = value;
   gain *= velocity; // legacy fix for velocity
   let toDisconnect = []; // audio nodes that will be disconnected when the source has ended
@@ -241,12 +273,19 @@ export const superdough = async (value, deadline, hapDuration) => {
     reverbSend = effectSend(post, reverbNode, room);
   }
 
+  // analyser
+  let analyserSend;
+  if (analyze) {
+    const analyserNode = getAnalyser(/* orbit,  */ 2 ** (fft + 5));
+    analyserSend = effectSend(post, analyserNode, analyze);
+  }
+
   // connect chain elements together
   chain.slice(1).reduce((last, current) => last.connect(current), chain[0]);
 
   // toDisconnect = all the node that should be disconnected in onended callback
   // this is crucial for performance
-  toDisconnect = chain.concat([delaySend, reverbSend]);
+  toDisconnect = chain.concat([delaySend, reverbSend, analyserSend]);
 };
 
 export const superdoughTrigger = (t, hap, ct, cps) => superdough(hap, t - ct, hap.duration / cps, cps);

packages/superdough/synth.mjs

@@ -43,17 +43,17 @@ export function registerSynthSounds() {
         } = value;
         let { n, note, freq } = value;
         // with synths, n and note are the same thing
-        n = note || n || 36;
-        if (typeof n === 'string') {
-          n = noteToMidi(n); // e.g. c3 => 48
+        note = note || 36;
+        if (typeof note === 'string') {
+          note = noteToMidi(note); // e.g. c3 => 48
         }
         // get frequency
-        if (!freq && typeof n === 'number') {
-          freq = midiToFreq(n); // + 48);
+        if (!freq && typeof note === 'number') {
+          freq = midiToFreq(note); // + 48);
         }
         // maybe pull out the above frequency resolution?? (there is also getFrequency but it has no default)
         // make oscillator
-        const { node: o, stop } = getOscillator({ t, s: wave, freq });
+        const { node: o, stop } = getOscillator({ t, s: wave, freq, partials: n });
 
         // FM + FM envelope
         let stopFm, fmEnvelope;
@@ -106,3 +106,49 @@ export function registerSynthSounds() {
     );
   });
 }
+
+export function waveformN(partials, type) {
+  const real = new Float32Array(partials + 1);
+  const imag = new Float32Array(partials + 1);
+  const ac = getAudioContext();
+  const osc = ac.createOscillator();
+
+  const amplitudes = {
+    sawtooth: (n) => 1 / n,
+    square: (n) => (n % 2 === 0 ? 0 : 1 / n),
+    triangle: (n) => (n % 2 === 0 ? 0 : 1 / (n * n)),
+  };
+
+  if (!amplitudes[type]) {
+    throw new Error(`unknown wave type ${type}`);
+  }
+
+  real[0] = 0; // dc offset
+  imag[0] = 0;
+  let n = 1;
+  while (n <= partials) {
+    real[n] = amplitudes[type](n);
+    imag[n] = 0;
+    n++;
+  }
+
+  const wave = ac.createPeriodicWave(real, imag);
+  osc.setPeriodicWave(wave);
+  return osc;
+}
+
+export function getOscillator({ s, freq, t, partials }) {
+  // make oscillator
+  let o;
+  if (!partials || s === 'sine') {
+    o = getAudioContext().createOscillator();
+    o.type = s || 'triangle';
+  } else {
+    o = waveformN(partials, s);
+  }
+  o.frequency.value = Number(freq);
+  o.start(t);
+  //o.stop(t + duration + release);
+  const stop = (time) => o.stop(time);
+  return { node: o, stop };
+}

packages/webaudio/index.mjs

@@ -5,4 +5,5 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 export * from './webaudio.mjs';
+export * from './scope.mjs';
 export * from 'superdough';

packages/webaudio/scope.mjs

@@ -0,0 +1,88 @@
+import { Pattern, getDrawContext, clamp } from '@strudel.cycles/core';
+import { analyser, getAnalyzerData } from 'superdough';
+
+export function drawTimeScope(
+  analyser,
+  { align = true, color = 'white', thickness = 3, scale = 0.25, pos = 0.75, next = 1, trigger = 0 } = {},
+) {
+  const ctx = getDrawContext();
+  const dataArray = getAnalyzerData('time');
+
+  ctx.lineWidth = thickness;
+  ctx.strokeStyle = color;
+
+  ctx.beginPath();
+  let canvas = ctx.canvas;
+
+  const bufferSize = analyser.frequencyBinCount;
+  let triggerIndex = align
+    ? Array.from(dataArray).findIndex((v, i, arr) => i && arr[i - 1] > -trigger && v <= -trigger)
+    : 0;
+  triggerIndex = Math.max(triggerIndex, 0); // fallback to 0 when no trigger is found
+
+  const sliceWidth = (canvas.width * 1.0) / bufferSize;
+  let x = 0;
+
+  for (let i = triggerIndex; i < bufferSize; i++) {
+    const v = dataArray[i] + 1;
+    const y = (scale * (v - 1) + pos) * canvas.height;
+
+    if (i === 0) {
+      ctx.moveTo(x, y);
+    } else {
+      ctx.lineTo(x, y);
+    }
+    x += sliceWidth;
+  }
+  ctx.stroke();
+}
+
+export function drawFrequencyScope(
+  analyser,
+  { color = 'white', scale = 0.25, pos = 0.75, lean = 0.5, min = -150, max = 0 } = {},
+) {
+  const dataArray = getAnalyzerData('frequency');
+  const ctx = getDrawContext();
+  const canvas = ctx.canvas;
+
+  ctx.fillStyle = color;
+  const bufferSize = analyser.frequencyBinCount;
+  const sliceWidth = (canvas.width * 1.0) / bufferSize;
+
+  let x = 0;
+  for (let i = 0; i < bufferSize; i++) {
+    const normalized = clamp((dataArray[i] - min) / (max - min), 0, 1);
+    const v = normalized * scale;
+    const h = v * canvas.height;
+    const y = (pos - v * lean) * canvas.height;
+
+    ctx.fillRect(x, y, Math.max(sliceWidth, 1), h);
+    x += sliceWidth;
+  }
+}
+
+function clearScreen(smear = 0, smearRGB = `0,0,0`) {
+  const ctx = getDrawContext();
+  if (!smear) {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  } else {
+    ctx.fillStyle = `rgba(${smearRGB},${1 - smear})`;
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  }
+}
+
+Pattern.prototype.fscope = function (config = {}) {
+  return this.analyze(1).draw(() => {
+    clearScreen(config.smear);
+    analyser && drawFrequencyScope(analyser, config);
+  });
+};
+
+Pattern.prototype.tscope = function (config = {}) {
+  return this.analyze(1).draw(() => {
+    clearScreen(config.smear);
+    analyser && drawTimeScope(analyser, config);
+  });
+};
+
+Pattern.prototype.scope = Pattern.prototype.tscope;

pnpm-lock.yaml

@@ -176,6 +176,15 @@ importers:
         specifier: ^4.3.3
         version: 4.3.3(@types/node@18.16.3)
 
+  packages/desktopbridge:
+    dependencies:
+      '@strudel.cycles/core':
+        specifier: workspace:*
+        version: link:../core
+      '@tauri-apps/api':
+        specifier: ^1.4.0
+        version: 1.4.0
+
   packages/embed: {}
 
   packages/midi:
@@ -579,6 +588,9 @@ importers:
       '@strudel.cycles/xen':
         specifier: workspace:*
         version: link:../packages/xen
+      '@strudel/desktopbridge':
+        specifier: workspace:*
+        version: link:../packages/desktopbridge
       '@supabase/supabase-js':
         specifier: ^2.21.0
         version: 2.21.0
@@ -588,6 +600,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.8
         version: 0.5.9(tailwindcss@3.3.2)
+      '@tauri-apps/api':
+        specifier: ^1.4.0
+        version: 1.4.0
       '@types/node':
         specifier: ^18.16.3
         version: 18.16.3
@@ -3944,6 +3959,11 @@ packages:
       tailwindcss: 3.3.2
     dev: false
 
+  /@tauri-apps/api@1.4.0:
+    resolution: {integrity: sha512-Jd6HPoTM1PZSFIzq7FB8VmMu3qSSyo/3lSwLpoapW+lQ41CL5Dow2KryLg+gyazA/58DRWI9vu/XpEeHK4uMdw==}
+    engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
+    dev: false
+
   /@tauri-apps/cli-darwin-arm64@1.4.0:
     resolution: {integrity: sha512-nA/ml0SfUt6/CYLVbHmT500Y+ijqsuv5+s9EBnVXYSLVg9kbPUZJJHluEYK+xKuOj6xzyuT/+rZFMRapmJD3jQ==}
     engines: {node: '>= 10'}
@@ -8025,6 +8045,7 @@ packages:
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
     dependencies:
       safer-buffer: 2.1.2
     dev: true

src-tauri/Cargo.lock

@@ -2,6 +2,15 @@
 # It is not intended for manual editing.
 version = 3
 
+[[package]]
+name = "addr2line"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a30b2e23b9e17a9f90641c7ab1549cd9b44f296d3ccbf309d2863cfe398a0cb"
+dependencies = [
+ "gimli",
+]
+
 [[package]]
 name = "adler"
 version = "1.0.2"
@@ -41,6 +50,28 @@ dependencies = [
  "alloc-no-stdlib",
 ]
 
+[[package]]
+name = "alsa"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2562ad8dcf0f789f65c6fdaad8a8a9708ed6b488e649da28c01656ad66b8b47"
+dependencies = [
+ "alsa-sys",
+ "bitflags",
+ "libc",
+ "nix",
+]
+
+[[package]]
+name = "alsa-sys"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db8fee663d06c4e303404ef5f40488a53e062f89ba8bfed81f42325aafad1527"
+dependencies = [
+ "libc",
+ "pkg-config",
+]
+
 [[package]]
 name = "android-tzdata"
 version = "0.1.1"
@@ -66,10 +97,12 @@ checksum = "9c7d0618f0e0b7e8ff11427422b64564d5fb0be1940354bfe2e0529b18a9d9b8"
 name = "app"
 version = "0.1.0"
 dependencies = [
+ "midir",
  "serde",
  "serde_json",
  "tauri",
  "tauri-build",
+ "tokio",
 ]
 
 [[package]]
@@ -102,6 +135,21 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
 
+[[package]]
+name = "backtrace"
+version = "0.3.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2089b7e3f35b9dd2d0ed921ead4f6d318c27680d4a5bd167b3ee120edb105837"
+dependencies = [
+ "addr2line",
+ "cc",
+ "cfg-if",
+ "libc",
+ "miniz_oxide",
+ "object",
+ "rustc-demangle",
+]
+
 [[package]]
 name = "base64"
 version = "0.13.1"
@@ -378,6 +426,26 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "coremidi"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a7847ca018a67204508b77cb9e6de670125075f7464fff5f673023378fa34f5"
+dependencies = [
+ "core-foundation",
+ "core-foundation-sys",
+ "coremidi-sys",
+]
+
+[[package]]
+name = "coremidi-sys"
+version = "3.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "79a6deed0c97b2d40abbab77e4c97f81d71e162600423382c277dd640019116c"
+dependencies = [
+ "core-foundation-sys",
+]
+
 [[package]]
 name = "cpufeatures"
 version = "0.2.8"
@@ -910,6 +978,12 @@ dependencies = [
  "wasi 0.11.0+wasi-snapshot-preview1",
 ]
 
+[[package]]
+name = "gimli"
+version = "0.28.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6fb8d784f27acf97159b40fc4db5ecd8aa23b9ad5ef69cdd136d3bc80665f0c0"
+
 [[package]]
 name = "gio"
 version = "0.15.12"
@@ -1467,6 +1541,22 @@ dependencies = [
  "autocfg",
 ]
 
+[[package]]
+name = "midir"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a456444d83e7ead06ae6a5c0a215ed70282947ff3897fb45fcb052b757284731"
+dependencies = [
+ "alsa",
+ "bitflags",
+ "coremidi",
+ "js-sys",
+ "libc",
+ "wasm-bindgen",
+ "web-sys",
+ "windows 0.43.0",
+]
+
 [[package]]
 name = "miniz_oxide"
 version = "0.7.1"
@@ -1477,6 +1567,17 @@ dependencies = [
  "simd-adler32",
 ]
 
+[[package]]
+name = "mio"
+version = "0.8.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "927a765cd3fc26206e66b296465fa9d3e5ab003e651c1b3c060e7956d96b19d2"
+dependencies = [
+ "libc",
+ "wasi 0.11.0+wasi-snapshot-preview1",
+ "windows-sys",
+]
+
 [[package]]
 name = "ndk"
 version = "0.6.0"
@@ -1511,6 +1612,17 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e4a24736216ec316047a1fc4252e27dabb04218aa4a3f37c6e7ddbf1f9782b54"
 
+[[package]]
+name = "nix"
+version = "0.24.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa52e972a9a719cecb6864fb88568781eb706bac2cd1d4f04a648542dbf78069"
+dependencies = [
+ "bitflags",
+ "cfg-if",
+ "libc",
+]
+
 [[package]]
 name = "nodrop"
 version = "0.1.14"
@@ -1616,6 +1728,15 @@ dependencies = [
  "objc",
 ]
 
+[[package]]
+name = "object"
+version = "0.32.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77ac5bbd07aea88c60a577a1ce218075ffd59208b2d7ca97adf9bfc5aeb21ebe"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "once_cell"
 version = "1.18.0"
@@ -1782,9 +1903,9 @@ dependencies = [
 
 [[package]]
 name = "pin-project-lite"
-version = "0.2.9"
+version = "0.2.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e0a7ae3ac2f1173085d398531c705756c94a4c56843785df85a60c1a0afac116"
+checksum = "8afb450f006bf6385ca15ef45d71d2288452bc3683ce2e2cacc0d18e4be60b58"
 
 [[package]]
 name = "pin-utils"
@@ -2052,6 +2173,12 @@ version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78"
 
+[[package]]
+name = "rustc-demangle"
+version = "0.1.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d626bb9dae77e28219937af045c257c28bfd3f69333c512553507f5f9798cb76"
+
 [[package]]
 name = "rustc_version"
 version = "0.4.0"
@@ -2274,6 +2401,15 @@ dependencies = [
  "lazy_static",
 ]
 
+[[package]]
+name = "signal-hook-registry"
+version = "1.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d8229b473baa5980ac72ef434c4415e70c4b5e71b423043adb4ba059f89c99a1"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "simd-adler32"
 version = "0.3.5"
@@ -2301,6 +2437,16 @@ version = "1.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a507befe795404456341dfab10cef66ead4c041f62b8b11bbb92bffe5d0953e0"
 
+[[package]]
+name = "socket2"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2538b18701741680e0322a2302176d3253a35388e2e62f172f64f4f16605f877"
+dependencies = [
+ "libc",
+ "windows-sys",
+]
+
 [[package]]
 name = "soup2"
 version = "0.2.1"
@@ -2785,17 +2931,34 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.28.2"
+version = "1.32.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "94d7b1cfd2aa4011f2de74c2c4c63665e27a71006b0a192dcd2710272e73dfa2"
+checksum = "17ed6077ed6cd6c74735e21f37eb16dc3935f96878b1fe961074089cc80893f9"
 dependencies = [
- "autocfg",
+ "backtrace",
  "bytes",
+ "libc",
+ "mio",
  "num_cpus",
+ "parking_lot",
  "pin-project-lite",
+ "signal-hook-registry",
+ "socket2",
+ "tokio-macros",
  "windows-sys",
 ]
 
+[[package]]
+name = "tokio-macros"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "630bdcf245f78637c13ec01ffae6187cca34625e8c63150d424b59e55af2675e"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.18",
+]
+
 [[package]]
 name = "toml"
 version = "0.5.11"
@@ -3090,6 +3253,16 @@ version = "0.2.87"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ca6ad05a4870b2bf5fe995117d3728437bd27d7cd5f06f13c17443ef369775a1"
 
+[[package]]
+name = "web-sys"
+version = "0.3.64"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b85cbef8c220a6abc02aefd892dfc0fc23afb1c6a426316ec33253a3877249b"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "webkit2gtk"
 version = "0.18.2"
@@ -3220,6 +3393,21 @@ dependencies = [
  "windows_x86_64_msvc 0.39.0",
 ]
 
+[[package]]
+name = "windows"
+version = "0.43.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04662ed0e3e5630dfa9b26e4cb823b817f1a9addda855d973a9458c236556244"
+dependencies = [
+ "windows_aarch64_gnullvm 0.42.2",
+ "windows_aarch64_msvc 0.42.2",
+ "windows_i686_gnu 0.42.2",
+ "windows_i686_msvc 0.42.2",
+ "windows_x86_64_gnu 0.42.2",
+ "windows_x86_64_gnullvm 0.42.2",
+ "windows_x86_64_msvc 0.42.2",
+]
+
 [[package]]
 name = "windows"
 version = "0.48.0"
@@ -3270,12 +3458,12 @@ version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7b1eb6f0cd7c80c79759c929114ef071b87354ce476d9d94271031c0497adfd5"
 dependencies = [
- "windows_aarch64_gnullvm",
+ "windows_aarch64_gnullvm 0.48.0",
  "windows_aarch64_msvc 0.48.0",
  "windows_i686_gnu 0.48.0",
  "windows_i686_msvc 0.48.0",
  "windows_x86_64_gnu 0.48.0",
- "windows_x86_64_gnullvm",
+ "windows_x86_64_gnullvm 0.48.0",
  "windows_x86_64_msvc 0.48.0",
 ]
 
@@ -3285,6 +3473,12 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f838de2fe15fe6bac988e74b798f26499a8b21a9d97edec321e79b28d1d7f597"
 
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
+
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.48.0"
@@ -3297,6 +3491,12 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ec7711666096bd4096ffa835238905bb33fb87267910e154b18b44eaabb340f2"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.48.0"
@@ -3309,6 +3509,12 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "763fc57100a5f7042e3057e7e8d9bdd7860d330070251a73d003563a3bb49e1b"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.48.0"
@@ -3321,6 +3527,12 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7bc7cbfe58828921e10a9f446fcaaf649204dcfe6c1ddd712c5eebae6bda1106"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.48.0"
@@ -3333,12 +3545,24 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6868c165637d653ae1e8dc4d82c25d4f97dd6605eaa8d784b5c6e0ab2a252b65"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ca2b8a661f7628cbd23440e50b05d705db3686f894fc9580820623656af974b1"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.48.0"
@@ -3351,6 +3575,12 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5e4d40883ae9cae962787ca76ba76390ffa29214667a111db9e0a1ad8377e809"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.42.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.48.0"

src-tauri/Cargo.toml

@@ -18,6 +18,8 @@ tauri-build = { version = "1.4.0", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "1.4.0", features = ["fs-all"] }
+midir = "0.9.1"
+tokio = { version = "1.29.0", features = ["full"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/src/main.rs

@@ -1,8 +1,23 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+mod midibridge;
+use tokio::sync::mpsc;
+use tokio::sync::Mutex;
+
 fn main() {
-  tauri::Builder::default()
+  let (async_input_transmitter, async_input_receiver) = mpsc::channel(1);
+  let (async_output_transmitter, async_output_receiver) = mpsc::channel(1);
+  tauri::Builder
+    ::default()
+    .manage(midibridge::AsyncInputTransmit {
+      inner: Mutex::new(async_input_transmitter),
+    })
+    .invoke_handler(tauri::generate_handler![midibridge::sendmidi])
+    .setup(|_app| {
+      midibridge::init(async_input_receiver, async_output_receiver, async_output_transmitter);
+      Ok(())
+    })
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }

src-tauri/src/midibridge.rs

@@ -0,0 +1,154 @@
+use std::collections::HashMap;
+use std::sync::Arc;
+use midir::MidiOutput;
+use tokio::sync::mpsc;
+use tokio::sync::Mutex;
+use tokio::time::Instant;
+use serde::Deserialize;
+
+pub struct MidiMessage {
+  pub message: Vec<u8>,
+  pub instant: Instant,
+  pub offset: u64,
+  pub requestedport: String,
+}
+
+pub struct AsyncInputTransmit {
+  pub inner: Mutex<mpsc::Sender<Vec<MidiMessage>>>,
+}
+
+pub fn init(
+  async_input_receiver: mpsc::Receiver<Vec<MidiMessage>>,
+  mut async_output_receiver: mpsc::Receiver<Vec<MidiMessage>>,
+  async_output_transmitter: mpsc::Sender<Vec<MidiMessage>>
+) {
+  tauri::async_runtime::spawn(async move { async_process_model(async_input_receiver, async_output_transmitter).await });
+  let message_queue: Arc<Mutex<Vec<MidiMessage>>> = Arc::new(Mutex::new(Vec::new()));
+
+  /* ...........................................................
+         Listen For incoming messages and add to queue
+  ............................................................*/
+  let message_queue_clone = Arc::clone(&message_queue);
+  tauri::async_runtime::spawn(async move {
+    loop {
+      if let Some(package) = async_output_receiver.recv().await {
+        let mut message_queue = message_queue_clone.lock().await;
+        let messages = package;
+        for message in messages {
+          (*message_queue).push(message);
+        }
+      }
+    }
+  });
+
+  let message_queue_clone = Arc::clone(&message_queue);
+  tauri::async_runtime::spawn(async move {
+    /* ...........................................................
+                        Open Midi Ports
+    ............................................................*/
+    let midiout = MidiOutput::new("strudel").unwrap();
+    let out_ports = midiout.ports();
+    let mut port_names = Vec::new();
+    //TODO: Send these print messages to the UI logger instead of the rust console so the user can see them
+    if out_ports.len() == 0 {
+      println!(" No MIDI devices found. Connect a device or enable IAC Driver.");
+      return;
+    }
+    println!("Found {} midi devices!", out_ports.len());
+
+    // the user could reference any port at anytime during runtime,
+    // so let's go ahead and open them all (same behavior as web app)
+    let mut output_connections = HashMap::new();
+    for i in 0..=out_ports.len().saturating_sub(1) {
+      let midiout = MidiOutput::new("strudel").unwrap();
+      let ports = midiout.ports();
+      let port = ports.get(i).unwrap();
+      let port_name = midiout.port_name(port).unwrap();
+      println!("{}", port_name);
+      let out_con = midiout.connect(port, &port_name).unwrap();
+      port_names.insert(i, port_name.clone());
+      output_connections.insert(port_name, out_con);
+    }
+    /* ...........................................................
+                        Process queued messages 
+    ............................................................*/
+    loop {
+      let mut message_queue = message_queue_clone.lock().await;
+
+      for i in 0..=message_queue.len().saturating_sub(1) {
+        let m = message_queue.get(i);
+        if m.is_none() {
+          continue;
+        }
+        let message = m.unwrap();
+
+        // dont play the message if its offset time has not elapsed
+        if message.instant.elapsed().as_millis() < message.offset.into() {
+          continue;
+        }
+        let mut out_con = output_connections.get_mut(&message.requestedport);
+
+        // WebMidi supports getting a connection by part of its name
+        // ex: 'bus 1' instead of 'IAC Driver bus 1' so let's emulate that behavior
+        if out_con.is_none() {
+          let key = port_names.iter().find(|port_name| {
+            return port_name.contains(&message.requestedport);
+          });
+          if key.is_some() {
+            out_con = output_connections.get_mut(key.unwrap());
+          }
+        }
+
+        if out_con.is_some() {
+          // process the message
+          if let Err(err) = (&mut out_con.unwrap()).send(&message.message) {
+            println!("Midi message send error: {}", err);
+          }
+        } else {
+          println!("failed to find midi device: {}", message.requestedport);
+        }
+
+        // the message has been processed, so remove it from the queue
+        message_queue.remove(i);
+      }
+    }
+  });
+}
+
+pub async fn async_process_model(
+  mut input_reciever: mpsc::Receiver<Vec<MidiMessage>>,
+  output_transmitter: mpsc::Sender<Vec<MidiMessage>>
+) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+  while let Some(input) = input_reciever.recv().await {
+    let output = input;
+    output_transmitter.send(output).await?;
+  }
+  Ok(())
+}
+#[derive(Deserialize)]
+pub struct MessageFromJS {
+  message: Vec<u8>,
+  offset: u64,
+  requestedport: String,
+}
+// Called from JS
+#[tauri::command]
+pub async fn sendmidi(
+  messagesfromjs: Vec<MessageFromJS>,
+  state: tauri::State<'_, AsyncInputTransmit>
+) -> Result<(), String> {
+  let async_proc_input_tx = state.inner.lock().await;
+  let mut messages_to_process: Vec<MidiMessage> = Vec::new();
+
+  for m in messagesfromjs {
+    let message_to_process = MidiMessage {
+      instant: Instant::now(),
+      message: m.message,
+      offset: m.offset,
+      requestedport: m.requestedport,
+    };
+    messages_to_process.push(message_to_process);
+  }
+
+  async_proc_input_tx.send(messages_to_process).await.map_err(|e| e.to_string())
+}

website/package.json

@@ -34,9 +34,11 @@
     "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",
     "@strudel.cycles/xen": "workspace:*",
+    "@strudel/desktopbridge": "workspace:*",
     "@supabase/supabase-js": "^2.21.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
+    "@tauri-apps/api": "^1.4.0",
     "@types/node": "^18.16.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",

website/public/fonts/mode7/credit.txt

@@ -0,0 +1 @@
+This super cool font is by 3d@galax.xyz https://galax.xyz/TELETEXT/

website/public/fonts/teletext/LICENSE.txt

@@ -0,0 +1,121 @@
+Creative Commons Legal Code
+
+CC0 1.0 Universal
+
+    CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
+    LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
+    ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
+    INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
+    REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
+    PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
+    THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
+    HEREUNDER.
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator
+and subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for
+the purpose of contributing to a commons of creative, cultural and
+scientific works ("Commons") that the public can reliably and without fear
+of later claims of infringement build upon, modify, incorporate in other
+works, reuse and redistribute as freely as possible in any form whatsoever
+and for any purposes, including without limitation commercial purposes.
+These owners may contribute to the Commons to promote the ideal of a free
+culture and the further production of creative, cultural and scientific
+works, or to gain reputation or greater distribution for their Work in
+part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any
+expectation of additional consideration or compensation, the person
+associating CC0 with a Work (the "Affirmer"), to the extent that he or she
+is an owner of Copyright and Related Rights in the Work, voluntarily
+elects to apply CC0 to the Work and publicly distribute the Work under its
+terms, with knowledge of his or her Copyright and Related Rights in the
+Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not
+limited to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display,
+     communicate, and translate a Work;
+ ii. moral rights retained by the original author(s) and/or performer(s);
+iii. publicity and privacy rights pertaining to a person's image or
+     likeness depicted in a Work;
+ iv. rights protecting against unfair competition in regards to a Work,
+     subject to the limitations in paragraph 4(a), below;
+  v. rights protecting the extraction, dissemination, use and reuse of data
+     in a Work;
+ vi. database rights (such as those arising under Directive 96/9/EC of the
+     European Parliament and of the Council of 11 March 1996 on the legal
+     protection of databases, and under any national implementation
+     thereof, including any amended or successor version of such
+     directive); and
+vii. other similar, equivalent or corresponding rights throughout the
+     world based on applicable law or treaty, and any national
+     implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention
+of, applicable law, Affirmer hereby overtly, fully, permanently,
+irrevocably and unconditionally waives, abandons, and surrenders all of
+Affirmer's Copyright and Related Rights and associated claims and causes
+of action, whether now known or unknown (including existing as well as
+future claims and causes of action), in the Work (i) in all territories
+worldwide, (ii) for the maximum duration provided by applicable law or
+treaty (including future time extensions), (iii) in any current or future
+medium and for any number of copies, and (iv) for any purpose whatsoever,
+including without limitation commercial, advertising or promotional
+purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
+member of the public at large and to the detriment of Affirmer's heirs and
+successors, fully intending that such Waiver shall not be subject to
+revocation, rescission, cancellation, termination, or any other legal or
+equitable action to disrupt the quiet enjoyment of the Work by the public
+as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason
+be judged legally invalid or ineffective under applicable law, then the
+Waiver shall be preserved to the maximum extent permitted taking into
+account Affirmer's express Statement of Purpose. In addition, to the
+extent the Waiver is so judged Affirmer hereby grants to each affected
+person a royalty-free, non transferable, non sublicensable, non exclusive,
+irrevocable and unconditional license to exercise Affirmer's Copyright and
+Related Rights in the Work (i) in all territories worldwide, (ii) for the
+maximum duration provided by applicable law or treaty (including future
+time extensions), (iii) in any current or future medium and for any number
+of copies, and (iv) for any purpose whatsoever, including without
+limitation commercial, advertising or promotional purposes (the
+"License"). The License shall be deemed effective as of the date CC0 was
+applied by Affirmer to the Work. Should any part of the License for any
+reason be judged legally invalid or ineffective under applicable law, such
+partial invalidity or ineffectiveness shall not invalidate the remainder
+of the License, and in such case Affirmer hereby affirms that he or she
+will not (i) exercise any of his or her remaining Copyright and Related
+Rights in the Work or (ii) assert any associated claims and causes of
+action with respect to the Work, in either case contrary to Affirmer's
+express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+ a. No trademark or patent rights held by Affirmer are waived, abandoned,
+    surrendered, licensed or otherwise affected by this document.
+ b. Affirmer offers the Work as-is and makes no representations or
+    warranties of any kind concerning the Work, express, implied,
+    statutory or otherwise, including without limitation warranties of
+    title, merchantability, fitness for a particular purpose, non
+    infringement, or the absence of latent or other defects, accuracy, or
+    the present or absence of errors, whether or not discoverable, all to
+    the greatest extent permissible under applicable law.
+ c. Affirmer disclaims responsibility for clearing rights of other persons
+    that may apply to the Work or any use thereof, including without
+    limitation any person's Copyright and Related Rights in the Work.
+    Further, Affirmer disclaims responsibility for obtaining any necessary
+    consents, permissions or other rights required for any use of the
+    Work.
+ d. Affirmer understands and acknowledges that Creative Commons is not a
+    party to this document and has no duty or obligation with respect to
+    this CC0 or use of the Work.

website/src/components/HeadCommon.astro

@@ -46,12 +46,14 @@ const base = BASE_URL;
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
 <script>
-  import { settings } from '../repl/themes.mjs';
+  import { settings, injectStyle } from '../repl/themes.mjs';
   import { settingsMap } from '../settings.mjs';
   import { listenKeys } from 'nanostores';
   const themeStyle = document.createElement('style');
   themeStyle.id = 'strudel-theme';
   document.head.append(themeStyle);
+
+  let resetThemeStyle;
   function activateTheme(name) {
     if (!settings[name]) {
       console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
@@ -70,6 +72,11 @@ const base = BASE_URL;
     } else {
       document.documentElement.classList.add('dark');
     }
+    resetThemeStyle?.();
+    resetThemeStyle = undefined;
+    if (themeSettings.customStyle) {
+      resetThemeStyle = injectStyle(themeSettings.customStyle);
+    }
   }
 
   activateTheme(settingsMap.get().theme);

website/src/repl/Footer.jsx

@@ -375,6 +375,8 @@ const fontFamilyOptions = {
   'we-come-in-peace': 'we-come-in-peace',
   FiraCode: 'FiraCode',
   'FiraCode-SemiBold': 'FiraCode SemiBold',
+  teletext: 'teletext',
+  mode7: 'mode7',
 };
 
 function SettingsTab({ scheduler }) {

website/src/repl/Repl.css

@@ -53,3 +53,7 @@
 #code .cm-cursor {
   border-left: 2px solid currentcolor !important;
 }
+
+#code .cm-foldGutter {
+  display: none !important;
+}

website/src/repl/Repl.jsx

@@ -5,15 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
-import {
-  CodeMirror,
-  cx,
-  flash,
-  useHighlighting,
-  useStrudel,
-  useKeydown,
-  updateMiniLocations,
-} from '@strudel.cycles/react';
+import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react';
 import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio';
 import { createClient } from '@supabase/supabase-js';
 import { nanoid } from 'nanoid';
@@ -28,6 +20,8 @@ import { themes } from './themes.mjs';
 import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
+import { code2hash, hash2code } from './helpers.mjs';
+import { isTauri } from '../tauri.mjs';
 
 const { latestCode } = settingsMap.get();
 
@@ -43,7 +37,7 @@ const modules = [
   import('@strudel.cycles/core'),
   import('@strudel.cycles/tonal'),
   import('@strudel.cycles/mini'),
-  import('@strudel.cycles/midi'),
+  isTauri() ? import('@strudel/desktopbridge') : import('@strudel.cycles/midi'),
   import('@strudel.cycles/xen'),
   import('@strudel.cycles/webaudio'),
   import('@strudel.cycles/osc'),
@@ -73,11 +67,11 @@ async function initCode() {
   try {
     const initialUrl = window.location.href;
     const hash = initialUrl.split('?')[1]?.split('#')?.[0];
-    const codeParam = window.location.href.split('#')[1];
+    const codeParam = window.location.href.split('#')[1] || '';
     // looking like https://strudel.tidalcycles.org/?J01s5i1J0200 (fixed hash length)
     if (codeParam) {
       // looking like https://strudel.tidalcycles.org/#ImMzIGUzIg%3D%3D (hash length depends on code length)
-      return atob(decodeURIComponent(codeParam || ''));
+      return hash2code(codeParam);
     } else if (hash) {
       return supabase
         .from('code')
@@ -125,6 +119,8 @@ export function Repl({ embedded = false }) {
     panelPosition,
   } = useSettings();
 
+  const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
+
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
       initialCode: '// LOADING...',
@@ -140,13 +136,15 @@ export function Repl({ embedded = false }) {
         setMiniLocations(meta.miniLocations);
         setPending(false);
         setLatestCode(code);
-        window.location.hash = '#' + encodeURIComponent(btoa(code));
+        window.location.hash = '#' + code2hash(code);
       },
       onEvalError: (err) => {
         setPending(false);
       },
       onToggle: (play) => !play && cleanupDraw(false),
       drawContext,
+      // drawTime: [0, 6],
+      paintOptions,
     });
 
   // init code

website/src/repl/helpers.mjs

@@ -0,0 +1,25 @@
+export function unicodeToBase64(text) {
+  const utf8Bytes = new TextEncoder().encode(text);
+  const base64String = btoa(String.fromCharCode(...utf8Bytes));
+  return base64String;
+}
+
+export function base64ToUnicode(base64String) {
+  const utf8Bytes = new Uint8Array(
+    atob(base64String)
+      .split('')
+      .map((char) => char.charCodeAt(0)),
+  );
+  const decodedText = new TextDecoder().decode(utf8Bytes);
+  return decodedText;
+}
+
+export function code2hash(code) {
+  return encodeURIComponent(unicodeToBase64(code));
+  //return '#' + encodeURIComponent(btoa(code));
+}
+
+export function hash2code(hash) {
+  return base64ToUnicode(decodeURIComponent(hash));
+  //return atob(decodeURIComponent(codeParam || ''));
+}

website/src/repl/themes.mjs

@@ -34,6 +34,7 @@ import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
 import bluescreen, { settings as bluescreenSettings } from '@strudel.cycles/react/src/themes/bluescreen';
 import blackscreen, { settings as blackscreenSettings } from '@strudel.cycles/react/src/themes/blackscreen';
 import whitescreen, { settings as whitescreenSettings } from '@strudel.cycles/react/src/themes/whitescreen';
+import teletext, { settings as teletextSettings } from '@strudel.cycles/react/src/themes/teletext';
 import algoboy, { settings as algoboySettings } from '@strudel.cycles/react/src/themes/algoboy';
 import terminal, { settings as terminalSettings } from '@strudel.cycles/react/src/themes/terminal';
 
@@ -42,6 +43,7 @@ export const themes = {
   bluescreen,
   blackscreen,
   whitescreen,
+  teletext,
   algoboy,
   terminal,
   abcdef,
@@ -95,6 +97,7 @@ export const settings = {
   bluescreen: bluescreenSettings,
   blackscreen: blackscreenSettings,
   whitescreen: whitescreenSettings,
+  teletext: teletextSettings,
   algoboy: algoboySettings,
   terminal: terminalSettings,
   abcdef: {
@@ -469,3 +472,11 @@ function getCircularReplacer() {
 function stringifySafe(json) {
   return JSON.stringify(json, getCircularReplacer());
 }
+
+export function injectStyle(rule) {
+  const newStyle = document.createElement('style');
+  document.head.appendChild(newStyle);
+  const styleSheet = newStyle.sheet;
+  const ruleIndex = styleSheet.insertRule(rule, 0);
+  return () => styleSheet.deleteRule(ruleIndex);
+}

website/src/settings.mjs

@@ -38,13 +38,15 @@ export const setLatestCode = (code) => settingsMap.setKey('latestCode', code);
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);
 
 const patternSetting = (key) =>
-  register(key, (value, pat) => {
-    value = Array.isArray(value) ? value.join(' ') : value;
-    if (value !== settingsMap.get()[key]) {
-      settingsMap.setKey(key, value);
-    }
-    return pat;
-  });
+  register(key, (value, pat) =>
+    pat.onTrigger(() => {
+      value = Array.isArray(value) ? value.join(' ') : value;
+      if (value !== settingsMap.get()[key]) {
+        settingsMap.setKey(key, value);
+      }
+      return pat;
+    }, false),
+  );
 
 export const theme = patternSetting('theme');
 export const fontFamily = patternSetting('fontFamily');

website/src/styles/index.css

@@ -26,6 +26,14 @@
   font-family: 'FiraCode-SemiBold';
   src: url('/fonts/FiraCode/FiraCode-SemiBold.ttf');
 }
+@font-face {
+  font-family: 'teletext';
+  src: url('/fonts/teletext/EuropeanTeletext.ttf');
+}
+@font-face {
+  font-family: 'mode7';
+  src: url('/fonts/mode7/MODE7GX3.TTF');
+}
 
 .prose > h1:not(:first-child) {
   margin-top: 30px;

website/src/tauri.mjs

@@ -0,0 +1,4 @@
+import { invoke } from '@tauri-apps/api/tauri';
+
+export const Invoke = invoke;
+export const isTauri = () => window.__TAURI_IPC__ != null;