diff --git a/images/model-d/model-d-front.png b/images/model-d/model-d-front.png index 54f65a7..1fbd368 100755 Binary files a/images/model-d/model-d-front.png and b/images/model-d/model-d-front.png differ diff --git a/images/model-d/model-d-knob-large.png b/images/model-d/model-d-knob-large.png index 616e50e..800aff0 100755 Binary files a/images/model-d/model-d-knob-large.png and b/images/model-d/model-d-knob-large.png differ diff --git a/images/model-d/model-d-knob-medium.png b/images/model-d/model-d-knob-medium.png index ac6c9c5..3926f9e 100755 Binary files a/images/model-d/model-d-knob-medium.png and b/images/model-d/model-d-knob-medium.png differ diff --git a/images/model-d/model-d-knob-small.png b/images/model-d/model-d-knob-small.png index 1379ca9..28d2265 100755 Binary files a/images/model-d/model-d-knob-small.png and b/images/model-d/model-d-knob-small.png differ diff --git a/images/model-d/model-d-switch-black-down.png b/images/model-d/model-d-switch-black-down.png index 7c06daf..d7dbd3a 100755 Binary files a/images/model-d/model-d-switch-black-down.png and b/images/model-d/model-d-switch-black-down.png differ diff --git a/images/model-d/model-d-switch-black-right.png b/images/model-d/model-d-switch-black-right.png index 9ca0ae0..a29e549 100755 Binary files a/images/model-d/model-d-switch-black-right.png and b/images/model-d/model-d-switch-black-right.png differ diff --git a/images/model-d/model-d-switch-black-up.png b/images/model-d/model-d-switch-black-up.png index fa04a20..31de9d2 100755 Binary files a/images/model-d/model-d-switch-black-up.png and b/images/model-d/model-d-switch-black-up.png differ diff --git a/images/model-d/model-d-switch-black.png b/images/model-d/model-d-switch-black.png index cd0547a..a7380ce 100755 Binary files a/images/model-d/model-d-switch-black.png and b/images/model-d/model-d-switch-black.png differ diff --git a/images/model-d/model-d-switch-blue-down.png b/images/model-d/model-d-switch-blue-down.png index 35e286a..48f853a 100755 Binary files a/images/model-d/model-d-switch-blue-down.png and b/images/model-d/model-d-switch-blue-down.png differ diff --git a/images/model-d/model-d-switch-blue-right.png b/images/model-d/model-d-switch-blue-right.png index ca8fe5d..81589a0 100755 Binary files a/images/model-d/model-d-switch-blue-right.png and b/images/model-d/model-d-switch-blue-right.png differ diff --git a/images/model-d/model-d-switch-blue-up.png b/images/model-d/model-d-switch-blue-up.png index 9773e66..179a405 100755 Binary files a/images/model-d/model-d-switch-blue-up.png and b/images/model-d/model-d-switch-blue-up.png differ diff --git a/images/model-d/model-d-switch-blue.png b/images/model-d/model-d-switch-blue.png index da45466..ad036a2 100755 Binary files a/images/model-d/model-d-switch-blue.png and b/images/model-d/model-d-switch-blue.png differ diff --git a/images/model-d/model-d-switch-red-down.png b/images/model-d/model-d-switch-red-down.png index 480ea6e..74202b3 100755 Binary files a/images/model-d/model-d-switch-red-down.png and b/images/model-d/model-d-switch-red-down.png differ diff --git a/images/model-d/model-d-switch-red-right.png b/images/model-d/model-d-switch-red-right.png index 9243703..29bbce0 100755 Binary files a/images/model-d/model-d-switch-red-right.png and b/images/model-d/model-d-switch-red-right.png differ diff --git a/images/model-d/model-d-switch-red-up.png b/images/model-d/model-d-switch-red-up.png index ba260d7..2a724c8 100755 Binary files a/images/model-d/model-d-switch-red-up.png and b/images/model-d/model-d-switch-red-up.png differ diff --git a/images/model-d/model-d-switch-red.png b/images/model-d/model-d-switch-red.png index a57a132..439066f 100755 Binary files a/images/model-d/model-d-switch-red.png and b/images/model-d/model-d-switch-red.png differ diff --git a/images/model-d/model-d-switch-white-right.png b/images/model-d/model-d-switch-white-right.png index d2fdb3c..c84f73d 100755 Binary files a/images/model-d/model-d-switch-white-right.png and b/images/model-d/model-d-switch-white-right.png differ diff --git a/images/model-d/model-d-switch-white.png b/images/model-d/model-d-switch-white.png index 1e40d68..d8c9a18 100755 Binary files a/images/model-d/model-d-switch-white.png and b/images/model-d/model-d-switch-white.png differ diff --git a/index.html b/index.html index a033f8a..d9cec7d 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Erica Pico System III

- +

diff --git a/js/behringer-crave.js b/js/behringer-crave.js index f65d46b..af6963a 100644 --- 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 index 7a7e12f..ba544e4 100644 --- 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 index deb23e4..ad43576 100644 --- 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 index bf36582..e0c56c7 100644 --- 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 index 62d1dfd..64d20a2 100644 --- 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)