zwippie · virtuaCode · Jan 2, 2021
diff --git a/images/model-d/model-d-front.png b/images/model-d/model-d-front.png
diff --git a/images/model-d/model-d-knob-large.png b/images/model-d/model-d-knob-large.png
diff --git a/images/model-d/model-d-knob-medium.png b/images/model-d/model-d-knob-medium.png
diff --git a/images/model-d/model-d-knob-small.png b/images/model-d/model-d-knob-small.png
diff --git a/images/model-d/model-d-switch-black-down.png b/images/model-d/model-d-switch-black-down.png
diff --git a/images/model-d/model-d-switch-black-right.png b/images/model-d/model-d-switch-black-right.png
diff --git a/images/model-d/model-d-switch-black-up.png b/images/model-d/model-d-switch-black-up.png
diff --git a/images/model-d/model-d-switch-black.png b/images/model-d/model-d-switch-black.png
diff --git a/images/model-d/model-d-switch-blue-down.png b/images/model-d/model-d-switch-blue-down.png
diff --git a/images/model-d/model-d-switch-blue-right.png b/images/model-d/model-d-switch-blue-right.png
diff --git a/images/model-d/model-d-switch-blue-up.png b/images/model-d/model-d-switch-blue-up.png
diff --git a/images/model-d/model-d-switch-blue.png b/images/model-d/model-d-switch-blue.png
diff --git a/images/model-d/model-d-switch-red-down.png b/images/model-d/model-d-switch-red-down.png
diff --git a/images/model-d/model-d-switch-red-right.png b/images/model-d/model-d-switch-red-right.png
diff --git a/images/model-d/model-d-switch-red-up.png b/images/model-d/model-d-switch-red-up.png
diff --git a/images/model-d/model-d-switch-red.png b/images/model-d/model-d-switch-red.png
diff --git a/images/model-d/model-d-switch-white-right.png b/images/model-d/model-d-switch-white-right.png
diff --git a/images/model-d/model-d-switch-white.png b/images/model-d/model-d-switch-white.png
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@ <h1>Erica Pico System III</h1>
       <form accept-charset="UTF-8" action="/patches" enctype="multipart/form-data" method="post">
       <input id="patch_data" name="patch[data]" type="hidden" value="{}">
         <section class="row row-front-panel">
-          <canvas id="front-panel" data-device="erica-pico-iii" width="1650" height="580"></canvas>
+          <canvas id="front-panel" data-device="behringer-model-d" width="2000" height="714"></canvas>
         </section>
 
         <p>

diff --git a/js/behringer-crave.js b/js/behringer-crave.js
@@ -85,8 +85,8 @@ const TOGGLES = [
 const TOGGLE_TYPES = {
   twoway: {values: ["left", "right"]}
 }
-const TOGGLE_WIDTH = 43
-const TOGGLE_HEIGHT = 41
+const TOGGLE_WIDTH = 30
+const TOGGLE_HEIGHT = 30
 
 export class BehringerCrave extends FrontPanel {
   constructor() {

diff --git a/js/behringer-model-d.js b/js/behringer-model-d.js
@@ -1,121 +1,121 @@
 import { FrontPanel } from "./front-panel"
 
-const CANVAS_WIDTH = 1585;
-const CANVAS_HEIGHT = 584;
+const CANVAS_WIDTH = 1500;
+const CANVAS_HEIGHT = 536;
 const CABLE_WIDTH = 6;
 const CELL_RADIUS = 12;
 const CONNECTORS = [
-  {idx: 0, col: 0, row: 0, x: 406, y: 66, name: "MOD SOURCE", input: true},
-  {idx: 1, col: 1, row: 0, x: 513, y: 66, name: "OSC 1V/OCT", input: true},
-  {idx: 2, col: 2, row: 0, x: 621, y: 66, name: "LFO CV", input: true},
-  {idx: 3, col: 5, row: 0, x: 909, y: 66, name: "EXT", input: true},
-  {idx: 4, col: 7, row: 0, x: 1112, y: 66, name: "CUT CV", input: true},
-  {idx: 5, col: 8, row: 0, x: 1170, y: 66, name: "FC GATE", input: true},
-  {idx: 6, col: 10, row: 0, x: 1284, y: 66, name: "LC GATE", input: true},
-  {idx: 7, col: 12, row: 0, x: 1423, y: 66, name: "LOUD CV", input: true},
-  {idx: 8, col: 3, row: 0, x: 713, y: 66, name: "LFO TRIANGULAR", input: false},
-  {idx: 9, col: 4, row: 0, x: 770, y: 66, name: "LFO SQUARE", input: false},
-  {idx: 10, col: 6, row: 0, x: 966, y: 66, name: "MIX", input: false},
-  {idx: 11, col: 9, row: 0, x: 1227, y: 66, name: "FILT CONT", input: false},
-  {idx: 12, col: 11, row: 0, x: 1341, y: 66, name: "LOUD CONT", input: false},
-  {idx: 13, col: 13, row: 0, x: 1510, y: 66, name: "MAIN", input: false},
+  {idx: 0, col: 0, row: 0, x: 386, y: 65, name: "MOD SOURCE", input: true},
+  {idx: 1, col: 1, row: 0, x: 486, y: 65, name: "OSC 1V/OCT", input: true},
+  {idx: 2, col: 2, row: 0, x: 585, y: 65, name: "LFO CV", input: true},
+  {idx: 3, col: 5, row: 0, x: 854, y: 65, name: "EXT", input: true},
+  {idx: 4, col: 7, row: 0, x: 1043, y: 65, name: "CUT CV", input: true},
+  {idx: 5, col: 8, row: 0, x: 1096, y: 65, name: "FC GATE", input: true},
+  {idx: 6, col: 10, row: 0, x: 1204, y: 65, name: "LC GATE", input: true},
+  {idx: 7, col: 12, row: 0, x: 1334, y: 65, name: "LOUD CV", input: true},
+  {idx: 8, col: 3, row: 0, x: 671, y: 65, name: "LFO TRIANGULAR", input: false},
+  {idx: 9, col: 4, row: 0, x: 724, y: 65, name: "LFO SQUARE", input: false},
+  {idx: 10, col: 6, row: 0, x: 907, y: 65, name: "MIX", input: false},
+  {idx: 11, col: 9, row: 0, x: 1150, y: 65, name: "FILT CONT", input: false},
+  {idx: 12, col: 11, row: 0, x: 1257, y: 65, name: "LOUD CONT", input: false},
+  {idx: 13, col: 13, row: 0, x: 1416, y: 65, name: "MAIN", input: false},
 ];
 const KNOBS = [
-  {idx: 0, x: 167, y: 195, type: "large", name: "TUNE"},
-  {idx: 1, x: 99, y: 301, type: "small", name: "GLIDE"},
-  {idx: 2, x: 234, y: 301, type: "small", name: "MOD MIX"},
-  {idx: 3, x: 98, y: 468, type: "small", name: "MOD DEPTH"},
-  {idx: 4, x: 234, y: 468, type: "small", name: "LFO RATE"},
+  {idx: 0, x: 162, y: 190, type: "large", name: "TUNE"},
+  {idx: 1, x: 100, y: 285, type: "small", name: "GLIDE"},
+  {idx: 2, x: 225, y: 285, type: "small", name: "MOD MIX"},
+  {idx: 3, x: 100, y: 443, type: "small", name: "MOD DEPTH"},
+  {idx: 4, x: 225, y: 443, type: "small", name: "LFO RATE"},
 
-  {idx: 5, x: 405, y: 166, type: "medium", name: "OSC1 RANGE"},
-  {idx: 6, x: 403, y: 299, type: "medium", name: "OSC2 RANGE"},
-  {idx: 7, x: 405, y: 432, type: "medium", name: "OSC3 RANGE"},
+  {idx: 5, x: 386, y: 162, type: "medium", name: "OSC1 RANGE"},
+  {idx: 6, x: 386, y: 285, type: "medium", name: "OSC2 RANGE"},
+  {idx: 7, x: 386, y: 408, type: "medium", name: "OSC3 RANGE"},
 
-  {idx: 8, x: 514, y: 299, type: "large", name: "OSC2 FREQ"},
-  {idx: 9, x: 514, y: 432, type: "large", name: "OSC3 FREQ"},
+  {idx: 8, x: 485, y: 285, type: "large", name: "OSC2 FREQ"},
+  {idx: 9, x: 485, y: 408, type: "large", name: "OSC3 FREQ"},
 
-  {idx: 10, x: 622, y: 166, type: "medium", name: "OSC1 WAVEFORM"},
-  {idx: 11, x: 622, y: 299, type: "medium", name: "OSC2 WAVEFORM"},
-  {idx: 12, x: 622, y: 432, type: "medium", name: "OSC3 WAVEFORM"},
+  {idx: 10, x: 585, y: 162, type: "medium", name: "OSC1 WAVEFORM"},
+  {idx: 11, x: 585, y: 285, type: "medium", name: "OSC2 WAVEFORM"},
+  {idx: 12, x: 585, y: 408, type: "medium", name: "OSC3 WAVEFORM"},
 
-  {idx: 13, x: 732, y: 166, type: "small", name: "OSC1 VOLUME"},
-  {idx: 14, x: 732, y: 299, type: "small", name: "OSC2 VOLUME"},
-  {idx: 15, x: 732, y: 432, type: "small", name: "OSC3 VOLUME"},
+  {idx: 13, x: 686.5, y: 162, type: "small", name: "OSC1 VOLUME"},
+  {idx: 14, x: 686.5, y: 285, type: "small", name: "OSC2 VOLUME"},
+  {idx: 15, x: 686.5, y: 408, type: "small", name: "OSC3 VOLUME"},
 
-  {idx: 16, x: 907, y: 233, type: "small", name: "EXT IN VOLUME"},
-  {idx: 17, x: 907, y: 366, type: "small", name: "NOISE VOLUME"},
+  {idx: 16, x: 850, y: 224, type: "small", name: "EXT IN VOLUME"},
+  {idx: 17, x: 850, y: 346, type: "small", name: "NOISE VOLUME"},
 
-  {idx: 18, x: 1130, y: 167, type: "small", name: "CUTOFF FREQUENCY"},
-  {idx: 19, x: 1130, y: 299, type: "small", name: "FILTER ATTACK"},
-  {idx: 20, x: 1130, y: 431, type: "small", name: "LC ATTACK"},
+  {idx: 18, x: 1058.5, y: 162, type: "small", name: "CUTOFF FREQUENCY"},
+  {idx: 19, x: 1058.5, y: 285, type: "small", name: "FILTER ATTACK"},
+  {idx: 20, x: 1058.5, y: 408, type: "small", name: "LC ATTACK"},
 
-  {idx: 21, x: 1228, y: 167, type: "small", name: "FILTER EMPHASIS"},
-  {idx: 22, x: 1229, y: 299, type: "small", name: "FILTER DECAY"},
-  {idx: 23, x: 1229, y: 431, type: "small", name: "LOUDNESS DECAY"},
+  {idx: 21, x: 1150.5, y: 162, type: "small", name: "FILTER EMPHASIS"},
+  {idx: 22, x: 1150.5, y: 285, type: "small", name: "FILTER DECAY"},
+  {idx: 23, x: 1150.5, y: 408, type: "small", name: "LOUDNESS DECAY"},
 
-  {idx: 24, x: 1326, y: 167, type: "small", name: "AMOUNT OF COUNTOUR"},
-  {idx: 25, x: 1327, y: 299, type: "small", name: "FILTER SUSTAIN"},
-  {idx: 26, x: 1327, y: 431, type: "small", name: "LC SUSTAIN"},
+  {idx: 24, x: 1242.5, y: 162, type: "small", name: "AMOUNT OF COUNTOUR"},
+  {idx: 25, x: 1242.5, y: 285, type: "small", name: "FILTER SUSTAIN"},
+  {idx: 26, x: 1242.5, y: 408, type: "small", name: "LC SUSTAIN"},
 
-  {idx: 27, x: 1425, y: 167, type: "small", name: "VOLUME"},
-  {idx: 28, x: 1425, y: 430, type: "small", name: "VOLUME (HEADPHONE)"},
+  {idx: 27, x: 1334, y: 162, type: "small", name: "VOLUME"},
+  {idx: 28, x: 1334, y: 408, type: "small", name: "VOLUME (HEADPHONE)"},
 ]
 const KNOB_TYPES = {
-  large: {radius: 55, limit: 304},
-  medium: {radius: 45, limit: 160},
+  large: {radius: 55, limit: 300},
+  medium: {radius: 45, limit: 150},
   small: {radius: 30, limit: 300},
 }
 const TOGGLES = [
-  {idx: 0, x: 61, y: 356, type: "black", name: "OSC3/FILTER EG"},
-  {idx: 1, x: 195, y: 356, type: "black", name: "MOD SOURCE"},
-  {idx: 2, x: 147, y: 435, type: "black_rot", name: "WAVE SHAPE"},
+  {idx: 0, x: 69, y: 336, type: "black", name: "OSC3/FILTER EG"},
+  {idx: 1, x: 194, y: 336, type: "black", name: "MOD SOURCE"},
+  {idx: 2, x: 146, y: 411, type: "black_rot", name: "WAVE SHAPE"},
 
-  {idx: 3, x: 267, y: 183, type: "blue", name: "OSCILLATOR MODULATION"},
-  {idx: 4, x: 311, y: 398, type: "blue_rot", name: "NOISE (MOD SRC)/ LFO"},
+  {idx: 3, x: 258, y: 175, type: "blue", name: "OSCILLATOR MODULATION"},
+  {idx: 4, x: 298, y: 377, type: "blue_rot", name: "NOISE (MOD SRC)/ LFO"},
 
-  {idx: 5, x: 783, y: 150, type: "red", name: "OSC1 ON/OFF"},
-  {idx: 6, x: 783, y: 215, type: "red", name: "OSC2 ON/OFF"},
-  {idx: 7, x: 783, y: 280, type: "red", name: "OSC3 ON/OFF"},
-  {idx: 8, x: 783, y: 347, type: "red", name: "NOISE ON/OFF"},
-  {idx: 9, x: 783, y: 413, type: "red", name: "EXT IN ON/OFF"},
+  {idx: 5, x: 737, y: 145, type: "red", name: "OSC1 ON/OFF"},
+  {idx: 6, x: 737, y: 206, type: "red", name: "OSC2 ON/OFF"},
+  {idx: 7, x: 737, y: 268, type: "red", name: "OSC3 ON/OFF"},
+  {idx: 8, x: 737, y: 329, type: "red", name: "NOISE ON/OFF"},
+  {idx: 9, x: 737, y: 390, type: "red", name: "EXT IN ON/OFF"},
 
-  {idx: 10, x: 954, y: 332, type: "red_rot", name: "WHITE/PINK"},
+  {idx: 10, x: 895, y: 315, type: "red_rot", name: "WHITE/PINK"},
 
-  {idx: 11, x: 1005, y: 85, type: "blue", name: "FILTER MODE"},
-  {idx: 12, x: 1005, y: 150, type: "blue", name: "FILTER MODULATION"},
-  {idx: 13, x: 1005, y: 215, type: "blue", name: "KEYBOARD CONTROL 1"},
-  {idx: 14, x: 1005, y: 282, type: "blue", name: "KEYBOARD CONTROL 2"},
-  {idx: 15, x: 1005, y: 347, type: "white", name: "FILTER DECAY"},
-  {idx: 16, x: 1005, y: 413, type: "white", name: "LOUDNESS DECAY"},
+  {idx: 11, x: 944, y: 84, type: "blue", name: "FILTER MODE"},
+  {idx: 12, x: 944, y: 146, type: "blue", name: "FILTER MODULATION"},
+  {idx: 13, x: 944, y: 208, type: "blue", name: "KEYBOARD CONTROL 1"},
+  {idx: 14, x: 944, y: 269, type: "blue", name: "KEYBOARD CONTROL 2"},
+  {idx: 15, x: 944, y: 329, type: "white", name: "FILTER DECAY"},
+  {idx: 16, x: 944, y: 390, type: "white", name: "LOUDNESS DECAY"},
 
-  {idx: 17, x: 1387, y: 281, type: "red", name: "A-440"},
-  {idx: 18, x: 1476, y: 149, type: "red", name: "ON"},
+  {idx: 17, x: 1303, y: 268, type: "red", name: "A-440"},
+  {idx: 18, x: 1385, y: 145, type: "red", name: "ON"},
 
 ]
 const TOGGLE_TYPES = {
   white: {values: ["white_left", "white_right"]},
   red: {values: ["red_left", "red_right"]},
   blue: {values: ["blue_left", "blue_right"]},
-  black: {values: ["black_left", "black_right"], width: 65, height: 35},
-  red_rot: {values: ["red_up", "red_down"]},
-  blue_rot: {values: ["blue_up", "blue_down"]},
-  black_rot: {values: ["black_up", "black_down"]}
+  black: {values: ["black_left", "black_right"]},
+  red_rot: {values: ["red_up", "red_down"], width: 34, height: 62},
+  blue_rot: {values: ["blue_up", "blue_down"], width: 34, height: 62},
+  black_rot: {values: ["black_up", "black_down"],width: 34, height: 62}
 }
 // Dimensions are way off because some of these switches are rotated
 // and the hitdetection is wrongly based an a circle instead of square.
-const TOGGLE_WIDTH = 40
-const TOGGLE_HEIGHT = 40
+const TOGGLE_WIDTH = 62
+const TOGGLE_HEIGHT = 34
 
 const initialKnobValues = function() {
   let knobValues = Array(29).fill(150)
   // These range and waveform knobs are actually limited to certain values. Ignore that now...
-  knobValues[5] = 160
-  knobValues[6] = 160
-  knobValues[7] = 160
+  knobValues[5] = 150
+  knobValues[6] = 150
+  knobValues[7] = 150
 
-  knobValues[10] = 160
-  knobValues[11] = 160
-  knobValues[12] = 160
+  knobValues[10] = 150
+  knobValues[11] = 150
+  knobValues[12] = 150
 
   return knobValues
 }

diff --git a/js/erica-pico-iii.js b/js/erica-pico-iii.js
@@ -112,8 +112,8 @@ const TOGGLE_TYPES = {
   vertthree: {values: ["up", "center", "down"]}
 }
 
-const TOGGLE_WIDTH = 25
-const TOGGLE_HEIGHT = 25
+const TOGGLE_WIDTH = 44
+const TOGGLE_HEIGHT = 38
 
 const initialKnobValues = function() {
   let knobValues = Array(31).fill(140)

diff --git a/js/front-panel.js b/js/front-panel.js
@@ -320,7 +320,7 @@ class FrontPanel {
 
       this.buttons.forEach(button => {
         const circle = {x: button.x + this.buttonOptions.width / 2, y: button.y + this.buttonOptions.height / 2}
-        if (this.isIntersect(pos, circle, this.buttonOptions.width)) {
+        if (this.isIntersect(pos, circle, Math.max(this.buttonOptions.width, this.buttonOptions.height) / 2)) {
           // Call handler in subclass
           this.onButtonClick(button)
           this.updatePatchCableOutput()
@@ -329,8 +329,15 @@ class FrontPanel {
       })
 
       this.toggles.forEach(toggle => {
-        const circle = {x: toggle.x + this.toggleOptions.width / 2, y: toggle.y + this.toggleOptions.height / 2}
-        if (this.isIntersect(pos, circle, this.toggleOptions.width)) {
+        let {width, height} = this.toggleOptions.types[toggle.type]
+
+        if (width === undefined || height === undefined) {
+          width = this.toggleOptions.width
+          height = this.toggleOptions.height
+        }
+
+        const circle = {x: toggle.x + width / 2, y: toggle.y + height / 2}
+        if (this.isIntersect(pos, circle, Math.max(width, height) / 2)) {
           this.onToggleClick(toggle)
           this.updatePatchCableOutput()
           this.requestRedraw()

diff --git a/js/make-noise-0-coast.js b/js/make-noise-0-coast.js
@@ -71,8 +71,8 @@ const TOGGLES = [
 const TOGGLE_TYPES = {
   twoway: {values: ["off", "on"]}
 }
-const TOGGLE_WIDTH = 20
-const TOGGLE_HEIGHT = 20
+const TOGGLE_WIDTH = 27
+const TOGGLE_HEIGHT = 27
 
 const initialKnobValues = function() {
   let knobValues = Array(18).fill(0)