From 69f0dcc227b5c980382ad25d67216c69ff3e9b5c Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Sun, 26 Jun 2022 19:21:16 +0200 Subject: [PATCH] preview --- .../Bastl_Kastle_v1.5/patches/For_Pongi.yml | 66 ++++++++ .../Bastl_Kastle_v1.5/patches/uzumaki.yml | 58 +++++++ .../model.yml | 6 +- .../panel.svg | 0 .../Test_Panel/patches/A_test_patch.yml | 69 +++++++++ static/css/patches.css | 144 ++++++++---------- static/js/panel.js | 2 + templates/patches.html | 5 +- templates/workbook.html | 120 +++++++++------ workbook.py | 7 +- 10 files changed, 344 insertions(+), 133 deletions(-) create mode 100644 instruments/Bastl_Kastle_v1.5/patches/For_Pongi.yml create mode 100644 instruments/Bastl_Kastle_v1.5/patches/uzumaki.yml rename instruments/{Sample_Demo_Dinner => Test_Panel}/model.yml (69%) rename instruments/{Sample_Demo_Dinner => Test_Panel}/panel.svg (100%) create mode 100644 instruments/Test_Panel/patches/A_test_patch.yml diff --git a/instruments/Bastl_Kastle_v1.5/patches/For_Pongi.yml b/instruments/Bastl_Kastle_v1.5/patches/For_Pongi.yml new file mode 100644 index 0000000..854bfbd --- /dev/null +++ b/instruments/Bastl_Kastle_v1.5/patches/For_Pongi.yml @@ -0,0 +1,66 @@ +cables: '' +date: '2022-06-26' +description: "\U0001F3B5" +lfo_rate: '100' +name: For Pongi +osc_pitch: '0' +osc_timbre: '25' +pitch_mod: '50' +rate_mod: '20' +slug: For_Pongi +timbre_mod: '50' +waveshape: '74' diff --git a/instruments/Bastl_Kastle_v1.5/patches/uzumaki.yml b/instruments/Bastl_Kastle_v1.5/patches/uzumaki.yml new file mode 100644 index 0000000..bcf4439 --- /dev/null +++ b/instruments/Bastl_Kastle_v1.5/patches/uzumaki.yml @@ -0,0 +1,58 @@ +cables: '' +date: '2022-06-26' +description: Eheheh +lfo_rate: '50' +name: '@@ uzumaki' +osc_pitch: '50' +osc_timbre: '50' +pitch_mod: '100' +rate_mod: '50' +slug: uzumaki +timbre_mod: '50' +waveshape: '50' diff --git a/instruments/Sample_Demo_Dinner/model.yml b/instruments/Test_Panel/model.yml similarity index 69% rename from instruments/Sample_Demo_Dinner/model.yml rename to instruments/Test_Panel/model.yml index 2c3a96d..dfa4b28 100644 --- a/instruments/Sample_Demo_Dinner/model.yml +++ b/instruments/Test_Panel/model.yml @@ -1,6 +1,6 @@ -name: Sample Demo Dinner -slug: Sample_Demo_Dinner -description: A test panel just for fun +name: Test Panel +slug: Test_Panel +description: it's another test params: - soup - goat_cheese diff --git a/instruments/Sample_Demo_Dinner/panel.svg b/instruments/Test_Panel/panel.svg similarity index 100% rename from instruments/Sample_Demo_Dinner/panel.svg rename to instruments/Test_Panel/panel.svg diff --git a/instruments/Test_Panel/patches/A_test_patch.yml b/instruments/Test_Panel/patches/A_test_patch.yml new file mode 100644 index 0000000..73e058b --- /dev/null +++ b/instruments/Test_Panel/patches/A_test_patch.yml @@ -0,0 +1,69 @@ +cables: '' +date: '2022-06-26' +description: just for fun +goat_cheese: '50' +kikkerverten: '50' +kip: '50' +leek: '50' +lemon: '50' +linzen: '50' +name: A test patch +pasta: '50' +pizza: '50' +rice_rolls: '50' +salt: '50' +shot_rate: '50' +slug: A_test_patch +soup: '50' +stuffed_peppers: '50' +tequila: '50' +thai_curry: '50' diff --git a/static/css/patches.css b/static/css/patches.css index e70fb7d..a4de5ca 100644 --- a/static/css/patches.css +++ b/static/css/patches.css @@ -1,123 +1,113 @@ * { - box-sizing: border-box; + box-sizing: border-box; } -html, body { - font-family: sans-serif; - +html, +body { + font-family: sans-serif; } - a { - color: currentColor; - text-decoration: none; + color: currentColor; + text-decoration: none; } - - - - - main { - padding: 0 8px; + padding: 0 8px; } - .list { - padding: 0; - display: grid; + padding: 0; + display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 16px; + gap: 16px; } .card { - /* transform: skew(14deg); */ - aspect-ratio: 1; - border: 1px solid currentColor; - padding: 32px; - font-stretch: 50%; - - - - display: flex; - justify-content: center; - align-items: center; - position: relative; - + /* transform: skew(14deg); */ + aspect-ratio: 1; + border: 1px solid currentColor; + padding: 32px; + font-stretch: 50%; + display: flex; + justify-content: center; + align-items: center; + position: relative; - font-size: 32px; - text-align: center; + font-size: 32px; + text-align: center; } .card:hover { - background-color: grey; + background-color: grey; } - .card > * { - /* transform: skew(-28deg); */ + /* transform: skew(-28deg); */ } .card svg { - width: 32px; - height: 32px; + width: 32px; + height: 32px; +} + +.card .instrument svg { + padding: 32px; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } .card img { - width: 100%; - height: 100%; - object-fit: contain; + width: 100%; + height: 100%; + object-fit: contain; } .card .overlay { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - vertical-align: middle; - display: flex; - justify-content: center; - align-items: center; - background-color: grey; - opacity: 0; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + vertical-align: middle; + display: flex; + justify-content: center; + align-items: center; + background-color: grey; + opacity: 0; } .card .overlay:hover { - opacity: 1; + opacity: 1; } .card .title { - font-weight: normal; + font-weight: normal; } +@media (max-width: 767px) { + header { + display: block; + font-size: 28px; + } + header .title { + display: inline; + font-size: 28px; + } -@media (max-width: 767px){ + .search { + margin-top: 16px; + display: block; + } - - -header { - display: block; - font-size: 28px; + .search input { + font-size: 28px; + } } - -header .title { - display: inline; - font-size: 28px; -} - - .search { - margin-top: 16px; - display: block; - } - - .search input { - font-size: 28px; - } -} - diff --git a/static/js/panel.js b/static/js/panel.js index 766a299..01b0332 100644 --- a/static/js/panel.js +++ b/static/js/panel.js @@ -135,6 +135,7 @@ class Panel { } createParams() { + // this.svg.querySelector("#params").style.visibility = "hidden"; this.params = this.svg.querySelectorAll("#params [fill='#FF0000']"); this.model.params = []; @@ -178,6 +179,7 @@ class Panel { } createSockets() { + // this.svg.querySelector("#sockets").style.visibility = "hidden"; this.sockets = this.svg.querySelectorAll("#sockets [fill='#00FF00']"); this.model.sockets = []; for (const socket of this.sockets) { diff --git a/templates/patches.html b/templates/patches.html index ddbc2f4..9e307fe 100644 --- a/templates/patches.html +++ b/templates/patches.html @@ -74,10 +74,7 @@ {% for patch in patches %}
  • - Patch 1 +
    {{panel|safe}}{{patch['cables'] |safe}}

    {{patch['name']}}

    diff --git a/templates/workbook.html b/templates/workbook.html index 20d157c..beaaadf 100644 --- a/templates/workbook.html +++ b/templates/workbook.html @@ -1,53 +1,79 @@ - - - Workbook + + + Workbook - - + + + + +
    + Home + / +

    Workbook

    +
    + + + + + +
    +
    - - +
    + +
    + diff --git a/workbook.py b/workbook.py index 033c2fa..7fa760e 100644 --- a/workbook.py +++ b/workbook.py @@ -48,15 +48,18 @@ def workbook(): @app.route("/workbook/") def patches(instrument): - patches = [] + with open(f'instruments/{instrument}/panel.svg') as f: + panel = f.read() + + patches = [] for filename in os.listdir(f'instruments/{instrument}/patches'): with open(f'instruments/{instrument}/patches/{filename}') as f: patch = yaml.load(f, Loader=SafeLoader) patches.append(patch) - return render_template('patches.html', instrument=instrument, patches=patches) + return render_template('patches.html', instrument=instrument, patches=patches, panel=panel) @app.route("/workbook/add", methods=['GET', 'POST'])