commit 945cd695a9382774a170b0166011eb52dfae99fd
parent d20da363635fca80040b3c8f5f38ea412cc2a310
Author: Matt Demanett <matt@demanett.net>
Date: Thu, 6 Aug 2020 05:06:18 -0400
Dark widgets.
Diffstat:
72 files changed, 1935 insertions(+), 292 deletions(-)
diff --git a/res-pp/Pgmr-dark-pp.svg b/res-pp/Pgmr-dark-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="225" height="380" viewBox="0 0 225 380">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="225.0" height="380.0" viewBox="0 0 225.0 380.0">
<style>text {
fill: #333;
font-family: 'Roboto', sans-serif;
@@ -50,6 +50,26 @@ polyline.input-label, polyline.output-label {
path.input-label, path.output-label {
}
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
text {
fill: #ddd;
@@ -93,6 +113,26 @@ text.output-label {
polyline.output-label, path.output-label {
stroke: #ddd;
}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
</style>
diff --git a/res-pp/Pgmr-pp.svg b/res-pp/Pgmr-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="225" height="380" viewBox="0 0 225 380">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="225.0" height="380.0" viewBox="0 0 225.0 380.0">
<style>text {
fill: #333;
font-family: 'Roboto', sans-serif;
@@ -49,6 +49,26 @@ polyline.input-label, polyline.output-label {
}
path.input-label, path.output-label {
}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
</style>
diff --git a/res-pp/button_18px_0-pp.svg b/res-pp/button_18px_0-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 18 18">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.0" height="18.0" version="1.1" viewBox="0 0 18.0 18.0">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888"/>
<circle r="8.4" fill="#333"/>
diff --git a/res-pp/button_18px_1-pp.svg b/res-pp/button_18px_1-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 18 18">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.0" height="18.0" version="1.1" viewBox="0 0 18.0 18.0">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888"/>
<circle r="8.4" fill="#333"/>
diff --git a/res-pp/button_18px_1_green-pp.svg b/res-pp/button_18px_1_green-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 18 18">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.0" height="18.0" version="1.1" viewBox="0 0 18.0 18.0">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888"/>
<circle r="8.4" fill="#333"/>
diff --git a/res-pp/button_18px_1_orange-pp.svg b/res-pp/button_18px_1_orange-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 18 18">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.0" height="18.0" version="1.1" viewBox="0 0 18.0 18.0">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888"/>
<circle r="8.4" fill="#333"/>
diff --git a/res-pp/button_9px_0-pp.svg b/res-pp/button_9px_0-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="9" height="9" viewBox="0 0 9 9">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9.0" height="9.0" version="1.1" viewBox="0 0 9.0 9.0">
<g transform="translate(4.5 4.5)">
<circle r="4.4" fill="#888"/>
<circle r="4.2" fill="#333"/>
diff --git a/res-pp/button_9px_1-pp.svg b/res-pp/button_9px_1-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="9" height="9" viewBox="0 0 9 9">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9.0" height="9.0" version="1.1" viewBox="0 0 9.0 9.0">
<g transform="translate(4.5 4.5)">
<circle r="4.4" fill="#888"/>
<circle r="4.2" fill="#333"/>
diff --git a/res-pp/button_9px_1_green-pp.svg b/res-pp/button_9px_1_green-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="9" height="9" viewBox="0 0 9 9">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9.0" height="9.0" version="1.1" viewBox="0 0 9.0 9.0">
<g transform="translate(4.5 4.5)">
<circle r="4.4" fill="#888"/>
<circle r="4.4" fill="#333"/>
diff --git a/res-pp/knob_16px-dark-pp.svg b/res-pp/knob_16px-dark-pp.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.0" height="16.0" version="1.1" viewBox="0 0 16.0 16.0">
+ <g transform="translate(8 8)">
+ <circle r="7.8" fill="#555"/>
+ <circle r="6" fill="#333"/>
+ <polyline points="0,0 0,-6.5" stroke-width="2" stroke="#fff" stroke-linecap="round"/>
+ </g>
+</svg>
diff --git a/res-pp/knob_16px-pp.svg b/res-pp/knob_16px-pp.svg
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.0" height="16.0" version="1.1" viewBox="0 0 16.0 16.0">
<g transform="translate(8 8)">
<circle r="7.8" fill="#555"/>
<circle r="6" fill="#333"/>
diff --git a/res-pp/knob_19px-dark-pp.svg b/res-pp/knob_19px-dark-pp.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.0" height="19.0" version="1.1" viewBox="0 0 19.0 19.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
+
+text {
+ fill: #ddd;
+}
+
+polyline {
+ stroke: #ddd;
+}
+path {
+ stroke: #ddd;
+}
+
+rect.module-background, .background-fill {
+ fill: #222;
+}
+polyline.module-border-inner {
+ stroke: #191919;
+}
+polyline.module-border-middle {
+ stroke: #111;
+}
+polyline.module-border-outer {
+ stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+ fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #666;
+}
+text.input-label {
+ fill: #333;
+}
+polyline.input-label, path.input-label {
+ stroke: #333;
+}
+text.output-label {
+ fill: #ddd;
+}
+polyline.output-label, path.output-label {
+ stroke: #ddd;
+}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+ <g transform="translate(9.5 9.5)">
+ <circle class="knob-rim" cx="0" cy="0" r="9.3"/>
+ <circle class="knob-center" cx="0" cy="0" r="7.3"/>
+ </g>
+ <circle class="knob-tick" cx="9.5" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="9.5" cy="1.9" r="1.3"/>
+</svg>
diff --git a/res-pp/knob_19px-pp.svg b/res-pp/knob_19px-pp.svg
@@ -1,9 +1,80 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="19" height="19" viewBox="0 0 19 19">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.0" height="19.0" version="1.1" viewBox="0 0 19.0 19.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
<g transform="translate(9.5 9.5)">
- <circle cx="0" cy="0" r="9.3" fill="#333"/>
- <circle cx="0" cy="0" r="7.3" fill="#eee"/>
+ <circle class="knob-rim" cx="0" cy="0" r="9.3"/>
+ <circle class="knob-center" cx="0" cy="0" r="7.3"/>
</g>
- <circle cx="9.5" cy="1.6" r="1.3" fill="#fff"/>
- <circle cx="9.5" cy="1.9" r="1.3" fill="#fff"/>
+ <circle class="knob-tick" cx="9.5" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="9.5" cy="1.9" r="1.3"/>
</svg>
diff --git a/res-pp/knob_26px-dark-pp.svg b/res-pp/knob_26px-dark-pp.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26.0" height="26.0" version="1.1" viewBox="0 0 26.0 26.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
+
+text {
+ fill: #ddd;
+}
+
+polyline {
+ stroke: #ddd;
+}
+path {
+ stroke: #ddd;
+}
+
+rect.module-background, .background-fill {
+ fill: #222;
+}
+polyline.module-border-inner {
+ stroke: #191919;
+}
+polyline.module-border-middle {
+ stroke: #111;
+}
+polyline.module-border-outer {
+ stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+ fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #666;
+}
+text.input-label {
+ fill: #333;
+}
+polyline.input-label, path.input-label {
+ stroke: #333;
+}
+text.output-label {
+ fill: #ddd;
+}
+polyline.output-label, path.output-label {
+ stroke: #ddd;
+}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+ <g transform="translate(13 13)">
+ <circle class="knob-rim" cx="0" cy="0" r="12.8"/>
+ <circle class="knob-center" cx="0" cy="0" r="9.7"/>
+ </g>
+ <circle class="knob-tick" cx="13" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="13" cy="1.9" r="1.3"/>
+</svg>
diff --git a/res-pp/knob_26px-pp.svg b/res-pp/knob_26px-pp.svg
@@ -1,9 +1,80 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="26" height="26" viewBox="0 0 26 26">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26.0" height="26.0" version="1.1" viewBox="0 0 26.0 26.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
<g transform="translate(13 13)">
- <circle cx="0" cy="0" r="12.8" fill="#333"/>
- <circle cx="0" cy="0" r="9.7" fill="#eee"/>
+ <circle class="knob-rim" cx="0" cy="0" r="12.8"/>
+ <circle class="knob-center" cx="0" cy="0" r="9.7"/>
</g>
- <circle cx="13" cy="1.6" r="1.3" fill="#fff"/>
- <circle cx="13" cy="1.9" r="1.3" fill="#fff"/>
+ <circle class="knob-tick" cx="13" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="13" cy="1.9" r="1.3"/>
</svg>
diff --git a/res-pp/knob_29px-dark-pp.svg b/res-pp/knob_29px-dark-pp.svg
@@ -0,0 +1,145 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29.0" height="29.0" version="1.1" viewBox="0 0 29.0 29.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
+
+text {
+ fill: #ddd;
+}
+
+polyline {
+ stroke: #ddd;
+}
+path {
+ stroke: #ddd;
+}
+
+rect.module-background, .background-fill {
+ fill: #222;
+}
+polyline.module-border-inner {
+ stroke: #191919;
+}
+polyline.module-border-middle {
+ stroke: #111;
+}
+polyline.module-border-outer {
+ stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+ fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #666;
+}
+text.input-label {
+ fill: #333;
+}
+polyline.input-label, path.input-label {
+ stroke: #333;
+}
+text.output-label {
+ fill: #ddd;
+}
+polyline.output-label, path.output-label {
+ stroke: #ddd;
+}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+ <g transform="translate(14.5 14.5)">
+ <circle class="knob-rim" cx="0" cy="0" r="14.3"/>
+ <circle class="knob-center" cx="0" cy="0" r="10.9"/>
+ </g>
+ <circle class="knob-tick" cx="14.5" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="14.5" cy="1.9" r="1.3"/>
+ <circle class="knob-tick" cx="14.5" cy="2.2" r="1.3"/>
+</svg>
diff --git a/res-pp/knob_29px-pp.svg b/res-pp/knob_29px-pp.svg
@@ -1,10 +1,81 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="29" height="29" viewBox="0 0 29 29">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29.0" height="29.0" version="1.1" viewBox="0 0 29.0 29.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
<g transform="translate(14.5 14.5)">
- <circle cx="0" cy="0" r="14.3" fill="#333"/>
- <circle cx="0" cy="0" r="10.9" fill="#eee"/>
+ <circle class="knob-rim" cx="0" cy="0" r="14.3"/>
+ <circle class="knob-center" cx="0" cy="0" r="10.9"/>
</g>
- <circle cx="14.5" cy="1.6" r="1.3" fill="#fff"/>
- <circle cx="14.5" cy="1.9" r="1.3" fill="#fff"/>
- <circle cx="14.5" cy="2.2" r="1.3" fill="#fff"/>
+ <circle class="knob-tick" cx="14.5" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="14.5" cy="1.9" r="1.3"/>
+ <circle class="knob-tick" cx="14.5" cy="2.2" r="1.3"/>
</svg>
diff --git a/res-pp/knob_38px-dark-pp.svg b/res-pp/knob_38px-dark-pp.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.0" height="38.0" version="1.1" viewBox="0 0 38.0 38.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
+
+text {
+ fill: #ddd;
+}
+
+polyline {
+ stroke: #ddd;
+}
+path {
+ stroke: #ddd;
+}
+
+rect.module-background, .background-fill {
+ fill: #222;
+}
+polyline.module-border-inner {
+ stroke: #191919;
+}
+polyline.module-border-middle {
+ stroke: #111;
+}
+polyline.module-border-outer {
+ stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+ fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #666;
+}
+text.input-label {
+ fill: #333;
+}
+polyline.input-label, path.input-label {
+ stroke: #333;
+}
+text.output-label {
+ fill: #ddd;
+}
+polyline.output-label, path.output-label {
+ stroke: #ddd;
+}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+ <g transform="translate(19 19)">
+ <circle class="knob-rim" cx="0" cy="0" r="18.7"/>
+ <circle class="knob-center" cx="0" cy="0" r="14"/>
+ </g>
+ <circle class="knob-tick" cx="19" cy="2.7" r="1.8"/>
+</svg>
diff --git a/res-pp/knob_38px-pp.svg b/res-pp/knob_38px-pp.svg
@@ -1,11 +1,79 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="38" height="38" viewBox="0 0 38 38">
-
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.0" height="38.0" version="1.1" viewBox="0 0 38.0 38.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
<g transform="translate(19 19)">
- <circle cx="0" cy="0" r="18.7" fill="#333"/>
+ <circle class="knob-rim" cx="0" cy="0" r="18.7"/>
+ <circle class="knob-center" cx="0" cy="0" r="14"/>
</g>
- <g transform="translate(19 19)">
- <circle cx="0" cy="0" r="14" fill="#eee"/>
- </g>
- <circle cx="19" cy="2.7" r="1.8" fill="#fff"/>
+ <circle class="knob-tick" cx="19" cy="2.7" r="1.8"/>
</svg>
diff --git a/res-pp/knob_45px-dark-pp.svg b/res-pp/knob_45px-dark-pp.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45.0" height="45.0" version="1.1" viewBox="0 0 45.0 45.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
+
+text {
+ fill: #ddd;
+}
+
+polyline {
+ stroke: #ddd;
+}
+path {
+ stroke: #ddd;
+}
+
+rect.module-background, .background-fill {
+ fill: #222;
+}
+polyline.module-border-inner {
+ stroke: #191919;
+}
+polyline.module-border-middle {
+ stroke: #111;
+}
+polyline.module-border-outer {
+ stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+ fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #666;
+}
+text.input-label {
+ fill: #333;
+}
+polyline.input-label, path.input-label {
+ stroke: #333;
+}
+text.output-label {
+ fill: #ddd;
+}
+polyline.output-label, path.output-label {
+ stroke: #ddd;
+}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+ <g transform="translate(22.5 22.5)">
+ <circle class="knob-rim" r="22.2"/>
+ <circle class="knob-center" r="18"/>
+ </g>
+ <polyline class="knob-tick" points="22.5,2 22.5,2.7" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
+</svg>
diff --git a/res-pp/knob_45px-pp.svg b/res-pp/knob_45px-pp.svg
@@ -1,8 +1,79 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="45" height="45" viewBox="0 0 45 45">
-<g transform="translate(22.5 22.5)">
- <circle r="22.2" fill="#333"/>
- <circle r="18" fill="#eee"/>
-</g>
-<polyline points="22.5,2 22.5,2.7" stroke="#fff" stroke-width="3" stroke-linecap="round" fill="none"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45.0" height="45.0" version="1.1" viewBox="0 0 45.0 45.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+ <g transform="translate(22.5 22.5)">
+ <circle class="knob-rim" r="22.2"/>
+ <circle class="knob-center" r="18"/>
+ </g>
+ <polyline class="knob-tick" points="22.5,2 22.5,2.7" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
</svg>
diff --git a/res-pp/knob_68px-dark-pp.svg b/res-pp/knob_68px-dark-pp.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.0" height="68.0" version="1.1" viewBox="0 0 68.0 68.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
+
+text {
+ fill: #ddd;
+}
+
+polyline {
+ stroke: #ddd;
+}
+path {
+ stroke: #ddd;
+}
+
+rect.module-background, .background-fill {
+ fill: #222;
+}
+polyline.module-border-inner {
+ stroke: #191919;
+}
+polyline.module-border-middle {
+ stroke: #111;
+}
+polyline.module-border-outer {
+ stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+ fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #666;
+}
+text.input-label {
+ fill: #333;
+}
+polyline.input-label, path.input-label {
+ stroke: #333;
+}
+text.output-label {
+ fill: #ddd;
+}
+polyline.output-label, path.output-label {
+ stroke: #ddd;
+}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+ <g transform="translate(34 34)">
+ <circle class="knob-rim" r="33.8"/>
+ <circle class="knob-center" r="27"/>
+ </g>
+ <polyline class="knob-tick" points="34,2 34,4.5" stroke-width="3" stroke-linecap="round" fill="none"/>
+</svg>
diff --git a/res-pp/knob_68px-pp.svg b/res-pp/knob_68px-pp.svg
@@ -1,8 +1,79 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="68" height="68" viewBox="0 0 68 68">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.0" height="68.0" version="1.1" viewBox="0 0 68.0 68.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
<g transform="translate(34 34)">
- <circle r="33.8" fill="#333"/>
- <circle r="27" fill="#eee"/>
+ <circle class="knob-rim" r="33.8"/>
+ <circle class="knob-center" r="27"/>
</g>
- <polyline points="34,2 34,4.5" stroke="#fff" stroke-width="3" stroke-linecap="round" fill="none"/>
+ <polyline class="knob-tick" points="34,2 34,4.5" stroke-width="3" stroke-linecap="round" fill="none"/>
</svg>
diff --git a/res-pp/port-dark-pp.svg b/res-pp/port-dark-pp.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.0" height="24.0" version="1.1" viewBox="0 0 24.0 24.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+
+
+text {
+ fill: #ddd;
+}
+
+polyline {
+ stroke: #ddd;
+}
+path {
+ stroke: #ddd;
+}
+
+rect.module-background, .background-fill {
+ fill: #222;
+}
+polyline.module-border-inner {
+ stroke: #191919;
+}
+polyline.module-border-middle {
+ stroke: #111;
+}
+polyline.module-border-outer {
+ stroke: #000;
+}
+
+rect.input-background, rect.input-background-filler {
+ fill: #aaa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #666;
+}
+text.input-label {
+ fill: #333;
+}
+polyline.input-label, path.input-label {
+ stroke: #333;
+}
+text.output-label {
+ fill: #ddd;
+}
+polyline.output-label, path.output-label {
+ stroke: #ddd;
+}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
+
+ <g transform="translate(12 12)">
+ <circle class="port-barrel" r="6" stroke-width="1"/>
+ <circle class="port-rim" r="9" stroke-width="4.5" fill="none"/>
+ <circle r="6" stroke-width=".5" stroke="#777" fill="none"/>
+ <circle r="6.5" stroke-width=".5" stroke="#aaa" fill="none"/>
+ <circle r="11.2" stroke-width=".5" stroke="#bbb" fill="none"/>
+ <circle r="11.7" stroke-width=".5" stroke="#888" fill="none"/>
+ </g>
+</svg>
diff --git a/res-pp/port-pp.svg b/res-pp/port-pp.svg
@@ -1,9 +1,80 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.0" height="24.0" version="1.1" viewBox="0 0 24.0 24.0">
+ <style>text {
+ fill: #333;
+ font-family: 'Roboto', sans-serif;
+ font-weight: bold;
+}
+text.title {
+ font-family: 'Comfortaa', sans-serif;
+ font-weight: normal;
+}
+text.brand {
+ font-family: 'Audiowide', sans-serif;
+ font-weight: bold;
+}
+
+polyline {
+ stroke: #333;
+}
+path {
+ stroke: #333;
+}
+
+rect.module-background, .background-fill {
+ fill: #ddd;
+}
+polyline.module-border-inner {
+ stroke: #e4e4e4;
+}
+polyline.module-border-middle {
+ stroke: #ebebeb;
+}
+polyline.module-border-outer {
+ stroke: #f2f2f2;
+}
+
+g.io-group {
+}
+rect.input-background, rect.input-background-filler {
+ fill: #fafafa;
+}
+rect.output-background, rect.output-background-filler {
+ fill: #bbb;
+}
+text.input-label, text.output-label {
+ /* font-size: 6pt; */
+}
+polyline.input-label, polyline.output-label {
+}
+path.input-label, path.output-label {
+}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
+</style>
+
<g transform="translate(12 12)">
- <circle r="6" stroke-width="1" stroke="#222" fill="#222"/>
- <circle r="9" stroke-width="4.5" stroke="#f0f0f0" fill="none"/>
+ <circle class="port-barrel" r="6" stroke-width="1"/>
+ <circle class="port-rim" r="9" stroke-width="4.5" fill="none"/>
<circle r="6" stroke-width=".5" stroke="#777" fill="none"/>
<circle r="6.5" stroke-width=".5" stroke="#aaa" fill="none"/>
<circle r="11.2" stroke-width=".5" stroke="#bbb" fill="none"/>
diff --git a/res-pp/slider_switch_2_14px_0-pp.svg b/res-pp/slider_switch_2_14px_0-pp.svg
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="14" height="24" viewBox="0 0 14 24">
- <path d=" M 7 0.5 a 6.5 6.5 0 0 1 6.5 6.5 v 10 a 6.5 6.5 0 0 1 -6.5 6.5 a 6.5 6.5 0 0 1 -6.5 -6.5 v -10 a 6.5 6.5 0 0 1 6.5 -6.5 z " stroke-width="1" stroke="#888" fill="#222"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.0" height="24.0" version="1.1" viewBox="0 0 14.0 24.0">
+ <path d=" M 7 0.5 a 6.5 6.5 0 0 1 6.5 6.5 v 10 a 6.5 6.5 0 0 1 -6.5 6.5 a 6.5 6.5 0 0 1 -6.5 -6.5 v -10 a 6.5 6.5 0 0 1 6.5 -6.5 z " stroke-width="1" stroke="#333" fill="#222"/>
<g transform="translate(7 17)">
<circle r="4.5" stroke-width="1" stroke="#777" fill="#ccc"/>
diff --git a/res-pp/slider_switch_2_14px_1-pp.svg b/res-pp/slider_switch_2_14px_1-pp.svg
@@ -1,6 +1,6 @@
<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="14" height="24" viewBox="0 0 14 24">
- <path d=" M 7 0.5 a 6.5 6.5 0 0 1 6.5 6.5 v 10 a 6.5 6.5 0 0 1 -6.5 6.5 a 6.5 6.5 0 0 1 -6.5 -6.5 v -10 a 6.5 6.5 0 0 1 6.5 -6.5 z " stroke-width="1" stroke="#888" fill="#222"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.0" height="24.0" version="1.1" viewBox="0 0 14.0 24.0">
+ <path d=" M 7 0.5 a 6.5 6.5 0 0 1 6.5 6.5 v 10 a 6.5 6.5 0 0 1 -6.5 6.5 a 6.5 6.5 0 0 1 -6.5 -6.5 v -10 a 6.5 6.5 0 0 1 6.5 -6.5 z " stroke-width="1" stroke="#333" fill="#222"/>
<g transform="translate(7 7)">
<circle r="4.5" stroke-width="1" stroke="#777" fill="#ccc"/>
diff --git a/res-src/button_18px_0-src.svg b/res-src/button_18px_0-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="18"
- height="18"
- viewBox="0 0 18 18"
->
+<widget width="18" height="18" noskin="true">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888" />
<circle r="8.4" fill="#333" />
@@ -15,4 +8,4 @@
<circle r="7.2" fill="#bbb" />
<circle r="6.9" fill="#ccc" />
</g>
-</svg>
+</widget>
diff --git a/res-src/button_18px_1-src.svg b/res-src/button_18px_1-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="18"
- height="18"
- viewBox="0 0 18 18"
->
+<widget width="18" height="18" noskin="true">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888" />
<circle r="8.4" fill="#333" />
@@ -15,4 +8,4 @@
<circle r="7.2" fill="#999" />
<circle r="6.9" fill="#aaa" />
</g>
-</svg>
+</widget>
diff --git a/res-src/button_18px_1_green-src.svg b/res-src/button_18px_1_green-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="18"
- height="18"
- viewBox="0 0 18 18"
->
+<widget width="18" height="18" noskin="true">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888" />
<circle r="8.4" fill="#333" />
@@ -25,4 +18,4 @@
<circle r="6.9" fill="#5f5" />
<circle r="6.9" fill="#aaa" fill-opacity="0.5" />
</g>
-</svg>
+</widget>
diff --git a/res-src/button_18px_1_orange-src.svg b/res-src/button_18px_1_orange-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="18"
- height="18"
- viewBox="0 0 18 18"
->
+<widget width="18" height="18" noskin="true">
<g transform="translate(9 9)">
<circle r="8.9" fill="#888" />
<circle r="8.4" fill="#333" />
@@ -25,4 +18,4 @@
<circle r="6.9" fill="#f90" />
<circle r="6.9" fill="#aaa" fill-opacity="0.5" />
</g>
-</svg>
+</widget>
diff --git a/res-src/button_9px_0-src.svg b/res-src/button_9px_0-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="9"
- height="9"
- viewBox="0 0 9 9"
->
+<widget width="9" height="9" noskin="true">
<g transform="translate(4.5 4.5)">
<circle r="4.4" fill="#888" />
<circle r="4.2" fill="#333" />
@@ -15,4 +8,4 @@
<circle r="3.4" fill="#bbb" />
<circle r="3.2" fill="#ccc" />
</g>
-</svg>
+</widget>
diff --git a/res-src/button_9px_1-src.svg b/res-src/button_9px_1-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="9"
- height="9"
- viewBox="0 0 9 9"
->
+<widget width="9" height="9" noskin="true">
<g transform="translate(4.5 4.5)">
<circle r="4.4" fill="#888" />
<circle r="4.2" fill="#333" />
@@ -15,4 +8,4 @@
<circle r="3.4" fill="#999" />
<circle r="3.2" fill="#aaa" />
</g>
-</svg>
+</widget>
diff --git a/res-src/button_9px_1_green-src.svg b/res-src/button_9px_1_green-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="9"
- height="9"
- viewBox="0 0 9 9"
->
+<widget width="9" height="9" noskin="true">
<g transform="translate(4.5 4.5)">
<circle r="4.4" fill="#888" />
<circle r="4.4" fill="#333" />
@@ -25,4 +18,4 @@
<circle r="3.3" fill="#5f5" />
<circle r="3.3" fill="#aaa" fill-opacity="0.5" />
</g>
-</svg>
+</widget>
diff --git a/res-src/knob_16px-src.svg b/res-src/knob_16px-src.svg
@@ -1,14 +1,7 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="16"
- height="16"
- viewBox="0 0 16 16"
->
+<widget width="16" height="16">
<g transform="translate(8 8)">
<circle r="7.8" fill="#555" />
<circle r="6" fill="#333" />
<polyline points="0,0 0,-6.5" stroke-width="2" stroke="#fff" stroke-linecap="round" />
</g>
-</svg>
+</widget>
diff --git a/res-src/knob_19px-src.svg b/res-src/knob_19px-src.svg
@@ -1,15 +1,10 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="19"
- height="19"
- viewBox="0 0 19 19"
->
+<widget width="19" height="19">
+ <style/>
+
<g transform="translate(9.5 9.5)">
- <circle cx="0" cy="0" r="9.3" fill="#333" />
- <circle cx="0" cy="0" r="7.3" fill="#eee" />
+ <circle class="knob-rim" cx="0" cy="0" r="9.3"/>
+ <circle class="knob-center" cx="0" cy="0" r="7.3"/>
</g>
- <circle cx="9.5" cy="1.6" r="1.3" fill="#fff" />
- <circle cx="9.5" cy="1.9" r="1.3" fill="#fff" />
-</svg>
+ <circle class="knob-tick" cx="9.5" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="9.5" cy="1.9" r="1.3"/>
+</widget>
diff --git a/res-src/knob_26px-src.svg b/res-src/knob_26px-src.svg
@@ -1,15 +1,10 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="26"
- height="26"
- viewBox="0 0 26 26"
->
+<widget width="26" height="26">
+ <style/>
+
<g transform="translate(13 13)">
- <circle cx="0" cy="0" r="12.8" fill="#333" />
- <circle cx="0" cy="0" r="9.7" fill="#eee" />
+ <circle class="knob-rim" cx="0" cy="0" r="12.8"/>
+ <circle class="knob-center" cx="0" cy="0" r="9.7"/>
</g>
- <circle cx="13" cy="1.6" r="1.3" fill="#fff" />
- <circle cx="13" cy="1.9" r="1.3" fill="#fff" />
-</svg>
+ <circle class="knob-tick" cx="13" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="13" cy="1.9" r="1.3"/>
+</widget>
diff --git a/res-src/knob_29px-src.svg b/res-src/knob_29px-src.svg
@@ -1,16 +1,11 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="29"
- height="29"
- viewBox="0 0 29 29"
->
+<widget width="29" height="29">
+ <style/>
+
<g transform="translate(14.5 14.5)">
- <circle cx="0" cy="0" r="14.3" fill="#333" />
- <circle cx="0" cy="0" r="10.9" fill="#eee" />
+ <circle class="knob-rim" cx="0" cy="0" r="14.3"/>
+ <circle class="knob-center" cx="0" cy="0" r="10.9"/>
</g>
- <circle cx="14.5" cy="1.6" r="1.3" fill="#fff" />
- <circle cx="14.5" cy="1.9" r="1.3" fill="#fff" />
- <circle cx="14.5" cy="2.2" r="1.3" fill="#fff" />
-</svg>
+ <circle class="knob-tick" cx="14.5" cy="1.6" r="1.3"/>
+ <circle class="knob-tick" cx="14.5" cy="1.9" r="1.3"/>
+ <circle class="knob-tick" cx="14.5" cy="2.2" r="1.3"/>
+</widget>
diff --git a/res-src/knob_38px-src.svg b/res-src/knob_38px-src.svg
@@ -1,20 +1,9 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="38"
- height="38"
- viewBox="0 0 38 38"
->
- <!-- <radialGradient id="inner" cx="0.50" cy="0.50" r="1.0">
- <stop offset="0%" stop-color="#eee"/>
- <stop offset="100%" stop-color="#000"/>
- </radialGradient> -->
+<widget width="38" height="38">
+ <style/>
+
<g transform="translate(19 19)">
- <circle cx="0" cy="0" r="18.7" fill="#333" />
+ <circle class="knob-rim" cx="0" cy="0" r="18.7"/>
+ <circle class="knob-center" cx="0" cy="0" r="14"/>
</g>
- <g transform="translate(19 19)">
- <circle cx="0" cy="0" r="14" fill="#eee" />
- </g>
- <circle cx="19" cy="2.7" r="1.8" fill="#fff" />
-</svg>
+ <circle class="knob-tick" cx="19" cy="2.7" r="1.8"/>
+</widget>
diff --git a/res-src/knob_45px-src.svg b/res-src/knob_45px-src.svg
@@ -1,14 +1,9 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="45"
- height="45"
- viewBox="0 0 45 45"
->
-<g transform="translate(22.5 22.5)">
- <circle r="22.2" fill="#333" />
- <circle r="18" fill="#eee" />
-</g>
-<polyline points="22.5,2 22.5,2.7" stroke="#fff" stroke-width="3" stroke-linecap="round" fill="none" />
-</svg>
+<widget width="45" height="45">
+ <style/>
+
+ <g transform="translate(22.5 22.5)">
+ <circle class="knob-rim" r="22.2"/>
+ <circle class="knob-center" r="18"/>
+ </g>
+ <polyline class="knob-tick" points="22.5,2 22.5,2.7" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
+</widget>
diff --git a/res-src/knob_68px-src.svg b/res-src/knob_68px-src.svg
@@ -1,14 +1,9 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="68"
- height="68"
- viewBox="0 0 68 68"
->
+<widget width="68" height="68">
+ <style/>
+
<g transform="translate(34 34)">
- <circle r="33.8" fill="#333" />
- <circle r="27" fill="#eee" />
+ <circle class="knob-rim" r="33.8"/>
+ <circle class="knob-center" r="27"/>
</g>
- <polyline points="34,2 34,4.5" stroke="#fff" stroke-width="3" stroke-linecap="round" fill="none" />
-</svg>
+ <polyline class="knob-tick" points="34,2 34,4.5" stroke-width="3" stroke-linecap="round" fill="none"/>
+</widget>
diff --git a/res-src/port-src.svg b/res-src/port-src.svg
@@ -1,18 +1,13 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="24"
- height="24"
- viewBox="0 0 24 24"
->
+<widget width="24" height="24">
+ <style/>
+
<!-- <rect width="24" height="24" fill="#0f0" /> -->
<g transform="translate(12 12)">
- <circle r="6" stroke-width="1" stroke="#222" fill="#222" />
- <circle r="9" stroke-width="4.5" stroke="#f0f0f0" fill="none" />
+ <circle class="port-barrel" r="6" stroke-width="1" />
+ <circle class="port-rim" r="9" stroke-width="4.5" fill="none" />
<circle r="6" stroke-width=".5" stroke="#777" fill="none" />
<circle r="6.5" stroke-width=".5" stroke="#aaa" fill="none" />
<circle r="11.2" stroke-width=".5" stroke="#bbb" fill="none" />
<circle r="11.7" stroke-width=".5" stroke="#888" fill="none" />
</g>
-</svg>
+</widget>
diff --git a/res-src/skin-dark.css b/res-src/skin-dark.css
@@ -40,3 +40,23 @@ text.output-label {
polyline.output-label, path.output-label {
stroke: #ddd;
}
+
+circle.port-rim {
+ stroke: #ddd;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #bbb;
+}
+circle.knob-rim {
+ fill: #555;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
diff --git a/res-src/slider_switch_2_14px_0-src.svg b/res-src/slider_switch_2_14px_0-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="14"
- height="24"
- viewBox="0 0 14 24"
->
+<widget width="14" height="24" noskin="true">
<path d="
M 7 0.5
a 6.5 6.5 0 0 1 6.5 6.5
@@ -20,4 +13,4 @@
<g transform="translate(7 17)">
<circle r="4.5" stroke-width="1" stroke="#777" fill="#ccc" />
</g>
-</svg>
+</widget>
diff --git a/res-src/slider_switch_2_14px_1-src.svg b/res-src/slider_switch_2_14px_1-src.svg
@@ -1,11 +1,4 @@
-<svg
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="14"
- height="24"
- viewBox="0 0 14 24"
->
+<widget width="14" height="24" noskin="true">
<path d="
M 7 0.5
a 6.5 6.5 0 0 1 6.5 6.5
@@ -20,4 +13,4 @@
<g transform="translate(7 7)">
<circle r="4.5" stroke-width="1" stroke="#777" fill="#ccc" />
</g>
-</svg>
+</widget>
diff --git a/res-src/styles.css b/res-src/styles.css
@@ -47,3 +47,23 @@ polyline.input-label, polyline.output-label {
}
path.input-label, path.output-label {
}
+
+circle.port-rim {
+ stroke: #f0f0f0;
+}
+circle.port-barrel {
+ stroke: #222;
+ fill: #222;
+}
+circle.knob-center {
+ fill: #eee;
+}
+circle.knob-rim {
+ fill: #333;
+}
+circle.knob-tick {
+ fill: #fff;
+}
+polyline.knob-tick {
+ stroke: #fff;
+}
diff --git a/res/knob_16px-dark.svg b/res/knob_16px-dark.svg
Binary files differ.
diff --git a/res/knob_16px.svg b/res/knob_16px.svg
Binary files differ.
diff --git a/res/knob_19px-dark.svg b/res/knob_19px-dark.svg
Binary files differ.
diff --git a/res/knob_19px.svg b/res/knob_19px.svg
Binary files differ.
diff --git a/res/knob_26px-dark.svg b/res/knob_26px-dark.svg
Binary files differ.
diff --git a/res/knob_26px.svg b/res/knob_26px.svg
Binary files differ.
diff --git a/res/knob_29px-dark.svg b/res/knob_29px-dark.svg
Binary files differ.
diff --git a/res/knob_29px.svg b/res/knob_29px.svg
Binary files differ.
diff --git a/res/knob_38px-dark.svg b/res/knob_38px-dark.svg
Binary files differ.
diff --git a/res/knob_38px.svg b/res/knob_38px.svg
Binary files differ.
diff --git a/res/knob_45px-dark.svg b/res/knob_45px-dark.svg
Binary files differ.
diff --git a/res/knob_45px.svg b/res/knob_45px.svg
Binary files differ.
diff --git a/res/knob_68px-dark.svg b/res/knob_68px-dark.svg
Binary files differ.
diff --git a/res/knob_68px.svg b/res/knob_68px.svg
Binary files differ.
diff --git a/res/port-dark.svg b/res/port-dark.svg
Binary files differ.
diff --git a/res/port.svg b/res/port.svg
Binary files differ.
diff --git a/res/skin_css_values.json b/res/skin_css_values.json
Binary files differ.
diff --git a/scripts/svg_preprocess.rb b/scripts/svg_preprocess.rb
@@ -135,22 +135,20 @@ def widget_from_filename(fn)
File.basename(fn).sub(/^(.*)-src\.svg$/, '\1')
end
-$module_names_loaded = false
-$module_names = []
-def load_module_names(force = false)
+$widget_names_loaded = false
+$widget_names = []
+def load_widget_names(force = false)
if force
- $module_names_loaded = false
- $module_names = []
+ $widget_names_loaded = false
+ $widget_names = []
end
- unless $module_names_loaded
- $module_names_loaded = true
+ unless $widget_names_loaded
+ $widget_names_loaded = true
load_directories()
- $module_names = Dir.glob(File.join($src_dir, '*-src.svg')).map do |fn|
+ $widget_names = Dir.glob(File.join($src_dir, '*-src.svg')).map do |fn|
widget_from_filename(fn)
- end.select do |name| # FIXME: figure out what to do about non-module widget sources.
- name =~ /^[A-Z]/
end.sort
end
end
@@ -186,9 +184,9 @@ def debug()
end
puts
- load_module_names()
+ load_widget_names()
puts "Modules:"
- $module_names.each do |name|
+ $widget_names.each do |name|
puts " - #{name}"
end
puts
@@ -370,25 +368,57 @@ def process(name)
end
doc = read_xml(fn)
- hp = 3
noskin = false
+ globals = {}
root = doc.at_css(':root')
if root.node_name == 'module'
+ hp = 3
if root['hp'] && !root['hp'].to_s.empty?
hp = root['hp'].to_s.to_i
end
+ root.delete('hp')
if root['noskin'] && root['noskin'].to_s == 'true'
noskin = true
end
+ root.delete('noskin')
+ globals['hp'] = hp
+ globals['width'] = hp * 15.0
+ globals['height'] = 380.0
+
root.node_name = 'svg'
root['xmlns'] = 'http://www.w3.org/2000/svg'
root['xmlns:xlink'] = 'http://www.w3.org/1999/xlink'
root['version'] = '1.1'
- root['width'] = (hp * 15).to_s
- root['height'] = '380'
+ root['width'] = globals['width']
+ root['height'] = globals['height']
+ root['viewBox'] = "0 0 #{root['width']} #{root['height']}"
+
+ doc = parse_xml(doc.to_xml)
+ elsif root.node_name == 'widget'
+ if root['noskin'] && root['noskin'].to_s == 'true'
+ noskin = true
+ end
+ root.delete('noskin')
+
+ width = 30.0
+ if root['width'] && !root['width'].to_s.empty?
+ width = root['width'].to_f
+ end
+ height = 30.0
+ if root['height'] && !root['height'].to_s.empty?
+ height = root['height'].to_f
+ end
+ globals['width'] = width
+ globals['height'] = height
+
+ root.node_name = 'svg'
+ root['xmlns'] = 'http://www.w3.org/2000/svg'
+ root['xmlns:xlink'] = 'http://www.w3.org/1999/xlink'
+ root['version'] = '1.1'
+ root['width'] = globals['width']
+ root['height'] = globals['height']
root['viewBox'] = "0 0 #{root['width']} #{root['height']}"
- root.delete('hp')
doc = parse_xml(doc.to_xml)
end
@@ -415,10 +445,6 @@ def process(name)
doc.xpath('//comment()').each(&:remove)
- globals = {}
- globals['hp'] = hp
- globals['width'] = hp * 15.0
- globals['height'] = 380.0
vars = [globals]
process_variables(doc.at_css(':root'), vars)
@@ -440,14 +466,14 @@ end
def reprocess(prefixes)
load_directories()
- load_module_names()
+ load_widget_names()
name_re = if prefixes.empty?
/./
else
/^(#{prefixes.join('|')})/
end
- $module_names.each do |name|
+ $widget_names.each do |name|
if name =~ name_re
process("#{name}-src.svg")
end
@@ -490,7 +516,7 @@ def listen(prefixes)
begin
bn = File.basename(fn)
if bn =~ /-src\.svg$/
- load_module_names(true)
+ load_widget_names(true)
end
if bn =~ name_re
@@ -505,7 +531,7 @@ def listen(prefixes)
begin
bn = File.basename(fn)
if bn =~ /-src\.svg$/
- load_module_names(true)
+ load_widget_names(true)
end
if bn =~ name_re
diff --git a/scripts/svg_styles_to_json.rb b/scripts/svg_styles_to_json.rb
@@ -18,6 +18,21 @@ def colors_for_styles(styles)
out['path-stroke'] = $1
end
+ out['knob-center'] = '#333'
+ if parser.find_by_selector('circle.knob-center').last =~ /fill:\s+(#\w+);/
+ out['knob-center'] = $1
+ end
+
+ out['knob-rim'] = '#eee'
+ if parser.find_by_selector('circle.knob-rim').last =~ /fill:\s+(#\w+);/
+ out['knob-rim'] = $1
+ end
+
+ out['knob-tick'] = '#fff'
+ if parser.find_by_selector('circle.knob-tick').last =~ /fill:\s+(#\w+);/
+ out['knob-tick'] = $1
+ end
+
out
end
@@ -37,6 +52,7 @@ if File.readable?(File.join(rsdir, 'styles.css'))
end
js = JSON.generate(js, indent: ' ', space: ' ', object_nl: "\n")
+# puts js
outfn = File.absolute_path(File.join(File.dirname($0), '..', 'res', 'skin_css_values.json'))
File.write(outfn, js + "\n")
puts "Wrote #{outfn}..."
diff --git a/src/Reftone.cpp b/src/Reftone.cpp
@@ -160,6 +160,8 @@ void ReftoneDisplay::drawBackground(const DrawArgs& args) {
nvgRect(args.vg, 0, 0, _size.x, _size.y);
nvgFillColor(args.vg, nvgRGBA(0x00, 0x00, 0x00, 0xff));
nvgFill(args.vg);
+ nvgStrokeColor(args.vg, nvgRGBA(0x50, 0x50, 0x50, 0xff));
+ nvgStroke(args.vg);
nvgRestore(args.vg);
}
diff --git a/src/Walk2.cpp b/src/Walk2.cpp
@@ -278,7 +278,7 @@ struct Walk2Display : TransparentWidget {
nvgRect(args.vg, 0, 0, _size.x, _size.y);
nvgFillColor(args.vg, nvgRGBA(0x00, 0x00, 0x00, 0xff));
nvgFill(args.vg);
- nvgStrokeColor(args.vg, nvgRGBA(0xc0, 0xc0, 0xc0, 0xff));
+ nvgStrokeColor(args.vg, nvgRGBA(0x50, 0x50, 0x50, 0xff));
nvgStroke(args.vg);
nvgRestore(args.vg);
}
diff --git a/src/analyzer_base.cpp b/src/analyzer_base.cpp
@@ -264,7 +264,7 @@ void AnalyzerDisplay::drawBackground(const DrawArgs& args) {
nvgFillColor(args.vg, nvgRGBA(0x00, 0x00, 0x00, 0xff));
nvgFill(args.vg);
if (_drawInset) {
- nvgStrokeColor(args.vg, nvgRGBA(0xc0, 0xc0, 0xc0, 0xff));
+ nvgStrokeColor(args.vg, nvgRGBA(0x50, 0x50, 0x50, 0xff));
nvgStroke(args.vg);
}
nvgRestore(args.vg);
diff --git a/src/module.cpp b/src/module.cpp
@@ -33,6 +33,9 @@ void BGModule::dataFromJson(json_t* root) {
if (s) {
setSkin(json_string_value(s));
}
+ else {
+ setSkin(_skin);
+ }
}
fromJson(root);
@@ -88,16 +91,52 @@ void BGModule::process(const ProcessArgs& args) {
void BGModule::setSkin(std::string skin) {
if (skin == "default" || Skins::skins().validKey(skin)) {
_skin = skin;
- if (_skinChangeListener) {
- _skinChangeListener->skinChanged();
+ for (auto scl : _skinChangeListeners) {
+ scl->skinChanged(skin);
+ }
+ }
+}
+
+void BGModule::addSkinChangeListener(SkinChangeListener* listener) {
+ _skinChangeListeners.push_back(listener);
+}
+
+
+void BGModuleWidget::addParam(ParamWidget* param) {
+ ModuleWidget::addParam(param);
+ if (module) {
+ auto l = dynamic_cast<SkinChangeListener*>(param);
+ if (l) {
+ auto m = dynamic_cast<BGModule*>(module);
+ assert(m);
+ m->addSkinChangeListener(l);
}
}
}
-void BGModule::setSkinChangeListener(BGModuleWidget* widget) {
- _skinChangeListener = widget;
+void BGModuleWidget::addInput(PortWidget* input) {
+ ModuleWidget::addInput(input);
+ if (module) {
+ auto l = dynamic_cast<SkinChangeListener*>(input);
+ if (l) {
+ auto m = dynamic_cast<BGModule*>(module);
+ assert(m);
+ m->addSkinChangeListener(l);
+ }
+ }
}
+void BGModuleWidget::addOutput(PortWidget* output) {
+ ModuleWidget::addOutput(output);
+ if (module) {
+ auto l = dynamic_cast<SkinChangeListener*>(output);
+ if (l) {
+ auto m = dynamic_cast<BGModule*>(module);
+ assert(m);
+ m->addSkinChangeListener(l);
+ }
+ }
+}
void BGModuleWidget::appendContextMenu(Menu* menu) {
auto m = dynamic_cast<BGModule*>(module);
@@ -119,7 +158,7 @@ void BGModuleWidget::appendContextMenu(Menu* menu) {
contextMenu(menu);
}
-void BGModuleWidget::skinChanged() {
+void BGModuleWidget::skinChanged(const std::string& skin) {
updatePanel();
}
@@ -129,7 +168,7 @@ void BGModuleWidget::setPanel(Vec size, std::string slug) {
if (module) {
auto m = dynamic_cast<BGModule*>(module);
assert(m);
- m->setSkinChangeListener(this);
+ m->addSkinChangeListener(this);
}
updatePanel();
}
@@ -141,13 +180,14 @@ void BGModuleWidget::updatePanel() {
_panel = NULL;
}
- std::string skin = Skins::skins().defaultKey();
+ const Skins& skins = Skins::skins();
+ std::string skin = skins.defaultKey();
if (module) {
auto m = dynamic_cast<BGModule*>(module);
assert(m);
skin = m->_skin;
if (skin == "default") {
- skin = Skins::skins().defaultKey();
+ skin = skins.defaultKey();
}
}
diff --git a/src/module.hpp b/src/module.hpp
@@ -2,12 +2,15 @@
#include "rack.hpp"
#include <string>
+#include <vector>
using namespace rack;
namespace bogaudio {
-struct BGModuleWidget;
+struct SkinChangeListener {
+ virtual void skinChanged(const std::string& skin) = 0;
+};
struct BGModule : Module {
int _modulationSteps = 100;
@@ -19,7 +22,7 @@ struct BGModule : Module {
bool _skinnable = true;
std::string _skin = "default";
- BGModuleWidget* _skinChangeListener = NULL;
+ std::vector<SkinChangeListener*> _skinChangeListeners;
BGModule() {
}
@@ -54,19 +57,22 @@ struct BGModule : Module {
virtual void postProcessAlways(const ProcessArgs& args) {} // modulate() may not have been called.
void setSkin(std::string skin);
- void setSkinChangeListener(BGModuleWidget* widget);
+ void addSkinChangeListener(SkinChangeListener* listener);
};
-struct BGModuleWidget : ModuleWidget {
+struct BGModuleWidget : ModuleWidget, SkinChangeListener {
SvgPanel* _panel = NULL;
Vec _size;
std::string _slug;
void appendContextMenu(Menu* menu) override;
+ void addParam(ParamWidget* param);
+ void addInput(PortWidget* input);
+ void addOutput(PortWidget* output);
virtual void contextMenu(Menu* menu) {}
- void skinChanged();
+ void skinChanged(const std::string& skin) override;
void setPanel(Vec size, const std::string slug);
void updatePanel();
};
diff --git a/src/widgets.cpp b/src/widgets.cpp
@@ -1,10 +1,26 @@
#include "widgets.hpp"
+#include "skins.hpp"
#include "dsp/signal.hpp"
using namespace bogaudio;
using namespace bogaudio::dsp;
+std::string SkinnableWidget::skinSVG(const std::string& base, const std::string& skin) {
+ std::string s = skin;
+ if (s == "default") {
+ s = Skins::skins().defaultKey();
+ }
+ std::string svg = "res/" + base;
+ if (s != "light") {
+ svg += "-";
+ svg += s;
+ }
+ svg += ".svg";
+ return svg;
+}
+
+
Button18::Button18() {
addFrame(APP->window->loadSvg(asset::plugin(pluginInstance, "res/button_18px_0.svg")));
addFrame(APP->window->loadSvg(asset::plugin(pluginInstance, "res/button_18px_1.svg")));
@@ -13,8 +29,9 @@ Button18::Button18() {
}
-BGKnob::BGKnob(const char* svg, int dim) {
- setSvg(APP->window->loadSvg(asset::plugin(pluginInstance, svg)));
+BGKnob::BGKnob(const char* svgBase, int dim) {
+ _svgBase = svgBase;
+ setSvg(APP->window->loadSvg(asset::plugin(pluginInstance, skinSVG(_svgBase.c_str()).c_str())));
box.size = Vec(dim, dim);
shadow->blurRadius = 2.0;
// k->shadow->opacity = 0.15;
@@ -26,34 +43,38 @@ void BGKnob::redraw() {
onChange(c);
}
+void BGKnob::skinChanged(const std::string& skin) {
+ setSvg(APP->window->loadSvg(asset::plugin(pluginInstance, skinSVG(_svgBase.c_str(), skin).c_str())));
+}
+
-Knob16::Knob16() : BGKnob("res/knob_16px.svg", 16) {
+Knob16::Knob16() : BGKnob("knob_16px", 16) {
shadow->box.pos = Vec(0.0, 2.5);
}
-Knob19::Knob19() : BGKnob("res/knob_19px.svg", 19) {
+Knob19::Knob19() : BGKnob("knob_19px", 19) {
shadow->box.pos = Vec(0.0, 2.5);
}
-Knob26::Knob26() : BGKnob("res/knob_26px.svg", 26) {
+Knob26::Knob26() : BGKnob("knob_26px", 26) {
}
-Knob29::Knob29() : BGKnob("res/knob_29px.svg", 29) {
+Knob29::Knob29() : BGKnob("knob_29px", 29) {
}
-Knob38::Knob38() : BGKnob("res/knob_38px.svg", 38) {
+Knob38::Knob38() : BGKnob("knob_38px", 38) {
}
-Knob45::Knob45() : BGKnob("res/knob_45px.svg", 45) {
+Knob45::Knob45() : BGKnob("knob_45px", 45) {
}
-Knob68::Knob68() : BGKnob("res/knob_68px.svg", 68) {
+Knob68::Knob68() : BGKnob("knob_68px", 68) {
shadow->box.pos = Vec(0.0, 4.0);
}
@@ -87,13 +108,13 @@ void IndicatorKnob::IKWidget::draw(const DrawArgs& args) {
float r = c - 0.2f; // FIXME: need to scale everything if there is ever a dim != 19.
nvgBeginPath(args.vg);
nvgCircle(args.vg, c, c, r);
- nvgFillColor(args.vg, nvgRGBA(0x33, 0x33, 0x33, 0xff));
+ nvgFillColor(args.vg, _rim);
nvgFill(args.vg);
r -= 2.0f;
nvgBeginPath(args.vg);
nvgCircle(args.vg, c, c, r);
- nvgFillColor(args.vg, nvgRGBA(0xee, 0xee, 0xee, 0xff));
+ nvgFillColor(args.vg, _center);
nvgFill(args.vg);
if (!_drawColorsCB || _drawColorsCB()) {
nvgBeginPath(args.vg);
@@ -167,6 +188,8 @@ IndicatorKnob::IndicatorKnob(int dim) {
w->box.size = box.size;
w->box.pos = math::Vec(0, 0);
fb->addChild(w);
+
+ skinChanged("default");
}
void IndicatorKnob::onHover(const event::Hover& e) {
@@ -190,14 +213,29 @@ void IndicatorKnob::redraw() {
onChange(c);
}
+void IndicatorKnob::skinChanged(const std::string& skin) {
+ const Skins& skins = Skins::skins();
+ const char* knobRim = skins.skinCssValue(skin, "knob-rim");
+ if (knobRim) {
+ w->_rim = Skins::cssColorToNVGColor(knobRim, w->_rim);
+ }
+ const char* knobCenter = skins.skinCssValue(skin, "knob-center");
+ if (knobCenter) {
+ w->_center = Skins::cssColorToNVGColor(knobCenter, w->_center);
+ }
+}
Port24::Port24() {
- setSvg(APP->window->loadSvg(asset::plugin(pluginInstance, "res/port.svg")));
+ setSvg(APP->window->loadSvg(asset::plugin(pluginInstance, skinSVG("port").c_str())));
box.size = Vec(24, 24);
shadow->blurRadius = 1.0;
shadow->box.pos = Vec(0.0, 1.5);
}
+void Port24::skinChanged(const std::string& skin) {
+ setSvg(APP->window->loadSvg(asset::plugin(pluginInstance, skinSVG("port", skin).c_str())));
+}
+
BlankPort24::BlankPort24() {
setSvg(NULL);
diff --git a/src/widgets.hpp b/src/widgets.hpp
@@ -1,7 +1,9 @@
#pragma once
-#include <functional>
#include "rack.hpp"
+#include "module.hpp"
+#include <functional>
+#include <string>
using namespace rack;
@@ -9,10 +11,18 @@ extern Plugin *pluginInstance;
namespace bogaudio {
-struct BGKnob : RoundKnob {
- BGKnob(const char* svg, int dim);
+struct SkinnableWidget : SkinChangeListener {
+ void skinChanged(const std::string& skin) override {}
+ std::string skinSVG(const std::string& base, const std::string& skin = "default");
+};
+
+struct BGKnob : RoundKnob, SkinnableWidget {
+ std::string _svgBase;
+
+ BGKnob(const char* svgBase, int dim);
void redraw();
+ void skinChanged(const std::string& skin) override;
};
struct Knob16 : BGKnob {
@@ -43,10 +53,12 @@ struct Knob68 : BGKnob {
Knob68();
};
-struct IndicatorKnob : Knob {
+struct IndicatorKnob : Knob, SkinnableWidget {
struct IKWidget : widget::Widget {
float _angle = 0.0f;
NVGcolor _color = nvgRGBA(0x00, 0x00, 0x00, 0x00);
+ NVGcolor _rim = nvgRGBA(0x33, 0x33, 0x33, 0xff);
+ NVGcolor _center = nvgRGBA(0xee, 0xee, 0xee, 0xff);
std::function<bool()> _drawColorsCB;
void setAngle(float a);
@@ -62,17 +74,20 @@ struct IndicatorKnob : Knob {
void onChange(const event::Change& e) override;
inline void setDrawColorsCallback(std::function<bool()> fn) { w->_drawColorsCB = fn; }
void redraw();
+ void skinChanged(const std::string& skin) override;
};
struct IndicatorKnob19 : IndicatorKnob {
IndicatorKnob19() : IndicatorKnob(19) {}
};
-struct Port24 : SvgPort {
+struct Port24 : SvgPort, SkinnableWidget {
Port24();
+
+ void skinChanged(const std::string& skin) override;
};
-struct BlankPort24 : Port24 {
+struct BlankPort24 : SvgPort {
BlankPort24();
};
