drawbar 0.7.1

Your Nord's sounds, in a window: browse, edit and send programs, samples and pianos, in the browser or on the desktop
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>drawbar: edit the sounds on your Nord keyboard</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="An unofficial editor for Nord keyboards. Read, edit and send programs, samples and pianos over USB, in Chrome or Edge or on the desktop."
    />
    <link rel="canonical" href="https://drawbar.app/" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="theme-color" content="#161719" />
    <meta name="color-scheme" content="dark" />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="drawbar" />
    <meta property="og:url" content="https://drawbar.app/" />
    <meta property="og:title" content="drawbar: edit the sounds on your Nord keyboard" />
    <meta
      property="og:description"
      content="An unofficial editor for Nord keyboards. Read, edit and send programs, samples and pianos over USB, in Chrome or Edge or on the desktop."
    />
    <meta property="og:image" content="https://drawbar.app/docs/assets/screenshot.png" />
    <meta property="og:image:width" content="2000" />
    <meta property="og:image:height" content="1331" />
    <meta
      property="og:image:alt"
      content="drawbar with an instrument attached and a piano library open in its editor"
    />
    <meta name="twitter:card" content="summary_large_image" />

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "drawbar",
        "url": "https://drawbar.app/",
        "description": "An unofficial editor for Nord keyboards. Read, edit and send programs, samples and pianos over USB, in Chrome or Edge or on the desktop.",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "Windows, macOS, Linux",
        "browserRequirements": "Requires WebUSB and WebAssembly: Chrome or Edge.",
        "screenshot": "https://drawbar.app/docs/assets/screenshot.png",
        "license": "https://opensource.org/license/bsd-3-clause",
        "isAccessibleForFree": true,
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
        "sameAs": ["https://github.com/jmoo/drawbar"]
      }
    </script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* Matches the app's panel fill, so the page does not flash white while the
           module downloads. */
        background: #161719;
        color: #cfd2d6;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      /* eframe observes the canvas's own content box and sizes its framebuffer to
         match, so the CSS size is what makes the app fill the window. */
      canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
      }

      #status {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translateY(-50%);
        font-size: 0.95rem;
        letter-spacing: 0.02em;
      }

      noscript p {
        padding: 0 16px;
      }

      /* Over the canvas, so the page answers a screen the shell cannot lay out in
         before the module that would answer has loaded. */
      #toosmall {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 1;
        box-sizing: border-box;
        padding: 0 16px;
        background: #161719;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      #toosmall p {
        margin: 0 0 8px;
        max-width: 32rem;
      }

      #toosmall .head {
        font-size: 1.15rem;
        font-weight: 600;
      }

      #toosmall a {
        color: #e05040;
      }

      /* `drawbar::shell::LEAST`, which a test holds these two numbers to. A CSS pixel
         is the point the app lays itself out in. */
      @media (width < 660px), (height < 430px) {
        #toosmall {
          display: flex;
        }
      }
    </style>
  </head>
  <body>
    <canvas id="drawbar"></canvas>
    <div id="status">loading drawbar…</div>
    <noscript>
      <p>drawbar is an unofficial editor for Nord keyboards. It needs JavaScript and WebAssembly to run. Read the <a href="docs/">user guide</a>.</p>
    </noscript>
    <div id="toosmall">
      <p class="head">drawbar needs a larger screen</p>
      <p>It is a desktop application: its panels need more room than a phone or a narrow window has. Open it on a larger screen, or make this window wider.</p>
      <p><a href="docs/">User guide</a></p>
    </div>
    <script type="module">
      import init, { start } from "./pkg/drawbar.js";

      const status = document.getElementById("status");
      try {
        await init();
        await start(document.getElementById("drawbar"));
        status.remove();
      } catch (e) {
        status.textContent = `drawbar failed to start: ${e}`;
        throw e;
      }
    </script>
  </body>
</html>