shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #125 from rerdavies/Dark-Mode

Browse Source 
Dark mode, TooB Neural Amp Modeler
This commit is contained in:
Robin Davies
2023-07-03 08:34:20 -04:00
committed by GitHub
parent 7826e5963d 73fea660e8
commit 53b74d4754
129 changed files with 4250 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/cmake.yml
+1
View File
@@ -22,6 +22,7 @@ jobs:
- name: Install dependencies
run: |
npm view npm get version of @babel/plugin-proposal-private-property-in-object version command
sudo apt-get update
sudo apt install gcc-10 g++-10
sudo apt-get install liblilv-dev libboost-dev libjack-jackd2-dev libnl-3-dev libnl-genl-3-dev libsystemd-dev catch
CMakeLists.txt
+2 -2
View File
@@ -1,10 +1,10 @@
cmake_minimum_required(VERSION 3.16.0)
project(pipedal
VERSION 1.1.27
VERSION 1.1.28
DESCRIPTION "PiPedal Guitar Effect Pedal For Raspberry Pi"
HOMEPAGE_URL "https://rerdavies.github.io/pipedal"
)
set (DISPLAY_VERSION "v1.1.27")
set (DISPLAY_VERSION "v1.1.28")
set (CMAKE_INSTALL_PREFIX "/usr/")
README.md
+2 -2
View File
@@ -1,12 +1,12 @@
<img src='docs/GithubBanner.png' width="100%" /><br/>
Download: <a href='https://rerdavies.github.io/pipedal/download.html'>v1.1.27</a>
Download: <a href='https://rerdavies.github.io/pipedal/download.html'>v1.1.28</a>
Website: [https://rerdavies.github.io/pipedal](https://rerdavies.github.io/pipedal).
> NEW version 1.1.27 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.
> NEW version 1.1.28 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.
Use your Raspberry Pi as a guitar effects pedal. Configure and control PiPedal with your phone or tablet.
PiPedal running on a Raspberry Pi 4 provides stable super-low-latency audio via external USB audio devices, or internal Raspberry Pi audio hats.
debian/control
Vendored
+1 -1
View File
@@ -9,6 +9,6 @@ Package: pipedal
Pre-Depends: hostapd;authbind;dnsmasq
Priority: optional
Section: sound
Version: 1.1.27
Version: 1.1.28
Installed-Size: 15147
docs/Installing.md
+2 -2
View File
@@ -13,14 +13,14 @@ page_icon: img/Install4.jpg
Download the most recent Debian (.deb) package for your platform:
- [Ubuntu/Raspberry Pi OS (64-bit) v1.1.27](https://github.com/rerdavies/pipedal/releases/download/v1.1.27/pipedal_1.1.27_arm64.deb)
- [Ubuntu/Raspberry Pi OS (64-bit) v1.1.28](https://github.com/rerdavies/pipedal/releases/download/v1.1.28/pipedal_1.1.28_arm64.deb)
Install the package by running
```
sudo apt update
cd ~/Downloads
sudo apt-get install ./pipedal_1.1.27_arm64.deb
sudo apt-get install ./pipedal_1.1.28_arm64.deb
```
On Raspberry Pi OS, if you have a graphical desktop installed, you can also install the package by double-clicking on the downloaded package in the File Manager.
docs/ReleaseNotes.md
+13
View File
@@ -1,5 +1,18 @@
# Release Notes
## PiPedal 1.1.28
New in this release.
- TooB Neural Amp Modeler - an LV2 port of Steven Atkinson's astounding Neural Amp Modeler. Donwload model files from [ToneHunt.org](https://tonehunt.org). CPU is very high -- it runs on a Raspberry Pi 4 with just enough CPU left over for a couple of extra effects; but the results are worth it. TooB ML provides Neural Net modelled guitar amps with more modest CPU use (but considerably less flexibility).
- Dark mode. Go to the settings dialog to turn on Dark Mode.
Bug fixes:
- Plugin information is updated in the web app after reconnecting, in order to pick up new plugins that may have been detected while the web server was being restarted.
## PiPedal 1.1.27
- Add missing lv2-dev dependency.
docs/download.md
+2 -2
View File
@@ -4,14 +4,14 @@
Download the most recent Debian (.deb) package for your platform:
- [Ubuntu or Raspberry Pi OS (64-bit)](https://github.com/rerdavies/pipedal/releases/download/v1.1.27/pipedal_1.1.27_arm64.deb) v1.1.27
- [Ubuntu or Raspberry Pi OS (64-bit)](https://github.com/rerdavies/pipedal/releases/download/v1.1.28/pipedal_1.1.28_arm64.deb) v1.1.28
Install the package by running
```
sudo apt update
cd ~/Downloads
sudo apt-get install ./pipedal_1.1.27_arm64.deb
sudo apt-get install ./pipedal_1.1.28_arm64.deb
```
Follow the instructions in [_Configuring PiPedal After Installation_](https://rerdavies.github.io/pipedal/Configuring.html) to complete the installation.
docs/index.md
+2 -2
View File
@@ -1,13 +1,13 @@
<img src="GithubBanner.png" width="100%"/>
<a href="Installing.html"><i>v1.1.27</i></a>
<a href="Installing.html"><i>v1.1.28</i></a>
&nbsp;
To download PiPedal, click [here](download.md).
> NEW version 1.1.27 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.
> NEW version 1.1.28 release. See the [release notes](https://rerdavies.github.io/pipedal/ReleaseNotes) for details.
Use your Raspberry Pi as a guitar effects pedal. Configure and control PiPedal with your phone or tablet.
lv2/aarch64/ToobAmp.lv2/CabSim.ttl
+1 -1
View File
@@ -53,7 +53,7 @@
rdfs:comment "TooB amplifier cabinet simulator." ;
mod:brand "TooB";
mod:label "Cab Simulator";
mod:label "TooB CabSim";
lv2:requiredFeature urid:map ;
lv2:optionalFeature lv2:hardRTCapable;
patch:readable
lv2/aarch64/ToobAmp.lv2/ConvolutionReverb.ttl
+1 -1
View File
@@ -152,7 +152,7 @@ Source: https://www.openair.hosted.york.ac.uk/?page_id=483
""" ;
mod:brand "TooB";
mod:label "Convolution Reverb";
mod:label "TooB CReverb";
lv2:requiredFeature urid:map;
lv2:optionalFeature state::freePath, state:makePath, state:mapPath, work:schedule ;
lv2:extensionData state:interface;
lv2/aarch64/ToobAmp.lv2/ConvolutionReverbStereo.ttl
+1 -1
View File
@@ -152,7 +152,7 @@ Source: https://www.openair.hosted.york.ac.uk/?page_id=483
""" ;
mod:brand "TooB";
mod:label "Convolution Reverb (Stereo)";
mod:label "TooB CReverb Stereo";
lv2:requiredFeature urid:map;
lv2:optionalFeature state::freePath, state:makePath, state:mapPath, work:schedule ;
lv2:extensionData state:interface;
lv2/aarch64/ToobAmp.lv2/InputStage.ttl
+1 -1
View File
@@ -62,7 +62,7 @@ inputStage:filterGroup
lv2:microVersion 16 ;
mod:brand "TooB";
mod:label "Input Stage";
mod:label "TooB Input";
lv2:requiredFeature urid:map ;
lv2:optionalFeature lv2:hardRTCapable;
lv2/aarch64/ToobAmp.lv2/ToobAmp.so.0
+1 -1
View File
@@ -1 +1 @@
ToobAmp.so.1.0.16
ToobAmp.so.1.0.17
lv2/aarch64/ToobAmp.lv2/ToobAmp.so.1.0.16
BIN
View File
Binary file not shown.
lv2/aarch64/ToobAmp.lv2/ToobAmp.so.1.0.17
BIN
View File
Binary file not shown.
lv2/aarch64/ToobAmp.lv2/ToobChorus.ttl
+1 -1
View File
@@ -46,7 +46,7 @@ Emulation of a Boss CE-2 Chorus.
""" ;
mod:brand "TooB";
mod:label "CE-2 Chorus";
mod:label "TooB CE-2";
lv2:optionalFeature lv2:hardRTCapable;
lv2:port
lv2/aarch64/ToobAmp.lv2/ToobDelay.ttl
+1 -1
View File
@@ -46,7 +46,7 @@ A straighforward no-frills digital delay.
""" ;
mod:brand "TooB";
mod:label "Delay";
mod:label "TooB Delay";
lv2:optionalFeature lv2:hardRTCapable;
lv2:port
lv2/aarch64/ToobAmp.lv2/ToobFlanger.ttl
+1 -1
View File
@@ -49,7 +49,7 @@ Emulation of a Boss BF-2 Flanger*.
""" ;
mod:brand "TooB";
mod:label "BF-2 Flanger";
mod:label "TooB BF-2";
lv2:optionalFeature lv2:hardRTCapable;
lv2:port
lv2/aarch64/ToobAmp.lv2/ToobFlangerStereo.ttl
+1 -1
View File
@@ -52,7 +52,7 @@ should use the monophonic version of this effect.
""" ;
mod:brand "TooB";
mod:label "BF-2 Stereo Flanger";
mod:label "TooB BF-2 Stereo";
lv2:optionalFeature lv2:hardRTCapable;
lv2:port
lv2/aarch64/ToobAmp.lv2/ToobFreeverb.ttl
+1 -1
View File
@@ -48,7 +48,7 @@ The core implementation is taken from the The Synthesis Toolkit in C++ (STK), ht
""" ;
mod:brand "TooB";
mod:label "Freeverb";
mod:label "TooB Freeverb";
lv2:optionalFeature lv2:hardRTCapable;
lv2:port
lv2/aarch64/ToobAmp.lv2/ToobML.ttl
+2 -2
View File
@@ -40,7 +40,7 @@ toobml:filterGroup
<http://two-play.com/plugins/toob-ml>
a lv2:Plugin ,
lv2:SimulatorPlugin ;
lv2:AmplifierPlugin ;
doap:name "TooB ML Amplifier" ,
"TooB ML Amplifier"@en-gb-gb
;
@@ -63,7 +63,7 @@ and uses model files from from the GuitarML Neural Pi project (https://github.co
""" ;
mod:brand "TooB";
mod:label "ML Amplifier";
mod:label "TooB ML";
lv2:requiredFeature urid:map, work:schedule ;
lv2:optionalFeature lv2:hardRTCapable;
lv2:extensionData state:interface, work:interface;
lv2/aarch64/ToobAmp.lv2/ToobNeuralAmpModeler.ttl
+310
View File
@@ -0,0 +1,310 @@
@prefix doap: <http://usefulinc.com/ns/doap#> .
@prefix lv2: <http://lv2plug.in/ns/lv2core#> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix units: <http://lv2plug.in/ns/extensions/units#> .
@prefix urid: <http://lv2plug.in/ns/ext/urid#> .
@prefix atom: <http://lv2plug.in/ns/ext/atom#> .
@prefix midi: <http://lv2plug.in/ns/ext/midi#> .
@prefix epp: <http://lv2plug.in/ns/ext/port-props#> .
@prefix uiext: <http://lv2plug.in/ns/extensions/ui#> .
@prefix idpy: <http://harrisonconsoles.com/lv2/inlinedisplay#> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix mod: <http://moddevices.com/ns/mod#> .
@prefix param: <http://lv2plug.in/ns/ext/parameters#> .
@prefix work: <http://lv2plug.in/ns/ext/worker#> .
@prefix pg: <http://lv2plug.in/ns/ext/port-groups#> .
@prefix pipedal_ui: <http://github.com/rerdavies/pipedal/ui#> .
@prefix ui: <http://lv2plug.in/ns/extensions/ui#> .
@prefix atom: <http://lv2plug.in/ns/ext/atom#> .
@prefix patch: <http://lv2plug.in/ns/ext/patch#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix state: <http://lv2plug.in/ns/ext/state#> .
@prefix urid: <http://lv2plug.in/ns/ext/urid#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix toobNam: <http://two-play.com/plugins/toob-nam#> .
<http://two-play.com/rerdavies#me>
a foaf:Person ;
foaf:name "Robin Davies" ;
foaf:mbox <mailto:rerdavies@gmail.com> ;
foaf:homepage <https://github.com/sponsors/rerdavies> .
toobNam:modelFile
a lv2:Parameter;
rdfs:label "Model";
rdfs:range atom:Path.
toobNam:eqGroup
a param:ControlGroup ,
pg:InputGroup ;
lv2:name "Tone" ;
lv2:symbol "eqGroup" .
<http://two-play.com/plugins/toob-nam>
a lv2:Plugin ,
lv2:AmplifierPlugin ;
doap:name "TooB Neural Amp Modeler" ,
"TooB Neural Amp Modeler"@en-gb-gb
;
doap:license <https://two-play.com/TooB/licenses/isc> ;
doap:maintainer <http://two-play.com/rerdavies#me> ;
lv2:minorVersion 0 ;
lv2:microVersion 16 ;
rdfs:comment """
A port of Steven Atkinson's Neural Amp Modeler to LV2.
TooB Neural Amp Modeler uses uplodable .nam model files. Download .nam files from http://tonehunt.org, and then upload them to TooB Neural Amp Modeler.
https://tonehunt.org provides a huge selection of downloadable amp model files.
TooB Neural Amp Modeler supports a much wider range of amp models than ToobML, but usually uses much more CPU.
You will need at least a Pi 4 to use Toob Neural Amp Modeler. If you are having trouble with CPU usage, tonehunt.org
does contain some smaller amp models. Search for the "feather" tag to find models that use less CPU.
If you are interested in building your own amp models, please visit https://www.neuralampmodeler.com/
TooB Neural Amp Modeler uses code from the NeuralAmp Modeler Core project. The TooB Team wishes to express gratitude to Steven Atkinson for
making this extraordinary technology available as open-source code.
Code from the the NeuralAmpModelerCore project (https://github.com/sdatkinson/NeuralAmpModelerCore) is provided under the following license.
MIT License
Copyright (c) 2023 Steven Atkinson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
""" ;
mod:brand "TooB";
mod:label "TooB NAM";
lv2:optionalFeature lv2:hardRTCapable;
patch:readable
toobNam:modelFile;
patch:writable
toobNam:modelFile;
lv2:extensionData state:interface,
work:interface;
lv2:port
[
a lv2:InputPort ,
lv2:ControlPort ;
lv2:index 0;
lv2:symbol "inputGain" ;
lv2:name "Input Gain";
lv2:default 0.0 ;
lv2:minimum -20.0;
lv2:maximum 20.0;
units:unit units:db;
rdfs:comment "Input gain";
],
[
a lv2:InputPort ,
lv2:ControlPort ;
lv2:index 1;
lv2:symbol "outputGain" ;
lv2:name "Output Gain";
lv2:default 0.0 ;
lv2:minimum -40.0;
lv2:maximum 40.0;
units:unit units:db;
rdfs:comment "Output gain";
],
[
a lv2:InputPort ,
lv2:ControlPort ;
lv2:index 2;
lv2:symbol "gate" ;
lv2:name "Noise Gate";
lv2:default -80.0 ;
lv2:minimum -100.0;
lv2:maximum 0.0;
rdfs:comment "Noise gate threshold. Set to minimum to disable.";
units:unit units:db;
lv2:scalePoint [
rdfs:label "Off" ;
rdf:value -100.0
];
],
[
a lv2:OutputPort ,
lv2:ControlPort ;
lv2:index 3;
lv2:symbol "gateOut" ;
lv2:name "\u00A0";
lv2:default 0.0;
lv2:minimum 0.0;
lv2:maximum 1.0;
rdfs:comment "Gate Status";
lv2:portProperty lv2:toggled;
],
[
a lv2:InputPort ,
lv2:ControlPort ;
lv2:index 4;
lv2:symbol "bass" ;
lv2:name "Bass";
lv2:default 5.0;
lv2:minimum 0.0;
lv2:maximum 10.0;
rdfs:comment "Bass";
pg:group toobNam:eqGroup ;
],
[
a lv2:InputPort ,
lv2:ControlPort ;
lv2:index 5;
lv2:symbol "mid" ;
lv2:name "Mid";
lv2:default 5.0;
lv2:minimum 0.0;
lv2:maximum 10.0;
rdfs:comment "Mid";
pg:group toobNam:eqGroup ;
],
[
a lv2:InputPort ,
lv2:ControlPort ;
lv2:index 6;
lv2:symbol "treble" ;
lv2:name "Treble";
lv2:default 5.0;
lv2:minimum 0.0;
lv2:maximum 10.0;
rdfs:comment "Bass";
pg:group toobNam:eqGroup ;
],
[
a lv2:InputPort ,
lv2:ControlPort ;
lv2:index 7 ;
lv2:symbol "toneStack" ;
lv2:name "Type";
lv2:default 0.0 ;
lv2:minimum 2.0 ;
lv2:maximum 3.0;
lv2:portProperty lv2:enumeration ;
lv2:scalePoint [
rdfs:label "Bassman" ;
rdf:value 0.0
] , [
rdfs:label "JCM8000" ;
rdf:value 1.0
], [
rdfs:label "Baxandall" ;
rdf:value 2.0
],[
rdfs:label "Bypass" ;
rdf:value 3.0
];
pg:group toobNam:eqGroup ;
],
[
a lv2:AudioPort ,
lv2:InputPort ;
lv2:index 8 ;
lv2:symbol "in" ;
lv2:name "In"
],
[
a lv2:AudioPort ,
lv2:OutputPort ;
lv2:index 9 ;
lv2:symbol "out" ;
lv2:name "Out"
],
[
a atom:AtomPort ,
lv2:InputPort;
atom:bufferType atom:Sequence ;
atom:supports patch:Message;
lv2:designation lv2:control ;
atom:supports patch:Message ;
lv2:index 10 ;
lv2:symbol "control" ;
lv2:name "Control" ;
rdfs:comment "Control" ;
] , [
a atom:AtomPort ,
lv2:OutputPort ;
atom:bufferType atom:Sequence ;
atom:supports patch:Message;
lv2:designation lv2:control ;
lv2:index 11;
lv2:symbol "notify" ;
lv2:name "Notify" ;
rdfs:comment "Notification" ;
]
.
<http://two-play.com/plugins/toob-nam> pipedal_ui:ui toobNam:ui .
toobNam:ui
a pipedal_ui:ui ;
pipedal_ui:fileProperties
[
a pipedal_ui:fileProperty;
rdfs:label "Model (*.nam)" ;
pipedal_ui:directory "NeuralAmpModels";
lv2:index 8 ;
pipedal_ui:patchProperty toobNam:modelFile ;
pipedal_ui:fileTypes
[
a pipedal_ui:fileType;
rdfs:label ".nam file";
pipedal_ui:fileExtension ".nam";
pipedal_ui:mimeType "application/octet-stream";
];
];
pipedal_ui:frequencyPlot
[
pipedal_ui:patchProperty toobNam:FrequencyResponse;
lv2:index 7 ;
pg:group toobNam:eqGroup ;
pipedal_ui:width: 60;
]
.
lv2/aarch64/ToobAmp.lv2/manifest.ttl
+4
View File
@@ -12,6 +12,10 @@
lv2:binary <ToobAmp.so> ;
rdfs:seeAlso <ConvolutionReverb.ttl> .
<http://two-play.com/plugins/toob-nam> a lv2:Plugin ;
lv2:binary <ToobAmp.so> ;
rdfs:seeAlso <ToobNeuralAmpModeler.ttl> .
<http://two-play.com/plugins/toob-convolution-reverb-stereo> a lv2:Plugin ;
lv2:binary <ToobAmp.so> ;
rdfs:seeAlso <ConvolutionReverbStereo.ttl> .
react/CMakeLists.txt
+53 -16
View File
@@ -21,6 +21,7 @@ add_custom_command(
WORKING_DIRECTORY ${PROJECT_SOURCE_DIR}/react
DEPENDS
src/SelectThemeDialog.tsx
src/OkCancelDialog.tsx
src/PluginControl.tsx
src/reportWebVitals.ts
@@ -122,19 +123,20 @@ add_custom_command(
src/PluginIcon.tsx
src/UploadFileDialog.tsx
public/
public/css
public/css/roboto.css
public/logo192x.png
public/robots.txt
public/img
public/img/ic_drawer_2.png
public/img/fx_constant.svg
public/img/ic_presets_white.svg
public/img/cx_mono.svg
public/img/cx_stereo.svg
public/img/fx_distortion.svg
public/img/Pi-Logo-3.png
public/img/fx_oscillator.svg
public/img/settings_black_24dp.svg
src/svg/ic_save_bank_as.svg
src/svg/ic_edit_banks.svg
src/svg/ic_settings.svg
public/img/fx_filter.svg
public/img/delete_outline_black_24dp.svg
public/img/fx_function.svg
@@ -142,19 +144,16 @@ add_custom_command(
public/img/old_delete_outline_black_24dp.svg
public/img/ic_bank.svg
public/img/fx_compressor.svg
public/img/file_download_black_24dp.svg
public/img/fx_filter_hp.svg
public/img/fx_plugin.svg
public/img/fx_error.svg
public/img/fx_gate.svg
public/img/cc-by.png
public/img/ic_midi.svg
public/img/ic_pluginpreset.svg
public/img/fx_split_a.svg
public/img/fx_utility.svg
src/svg/ic_help_outline.svg
public/img/ic_navigate_before.svg
public/img/ic_drawer_2.svg
public/img/ic_pluginpreset2.svg
public/img/fx_parametric_eq.svg
public/img/fx_terminal.svg
public/img/ic_presets.svg
@@ -163,29 +162,25 @@ add_custom_command(
public/img/fx_analyzer.svg
public/img/fx_delay.svg
public/img/fx_spectral.svg
public/img/edit_banks.svg
public/img/fx_chorus.svg
public/img/fx_simulator.svg
public/img/drive_file_rename_outline_black_24dp.svg
public/img/fx_mixer.svg
public/img/fx_eq.svg
public/img/fx_modulator.svg
public/img/file_upload_black_24dp.svg
public/img/fx_pitch.svg
public/img/ic_navigate_next.svg
public/img/fx_phaser.svg
public/img/ic_drawer.svg
public/img/fx_amplifier.svg
public/img/save_bank_as.svg
public/img/fx_lr.svg
public/img/fx_instrument.svg
public/img/Pi-Logo-3.svg
public/img/fx_reverb.svg
public/img/fx_limiter.svg
public/img/VST_Logo_Steinberg.png
public/img/fx_empty.svg
public/img/fx_dial.svg
public/img/ic_logo.svg
public/img/help_outline_black_24dp.svg
public/img/fx_flanger2.svg
public/img/old_delete_outline_white_24dp.svg
public/img/fx_split_b.svg
@@ -195,7 +190,6 @@ add_custom_command(
public/img/vst.png
public/sample_lv2_plugins.json
public/serve.json
public/fonts
public/fonts/Roboto-LightItalic.woff2
public/fonts/Roboto-Light.woff2
public/fonts/Roboto-BlackItalic.woff2
@@ -215,12 +209,55 @@ add_custom_command(
public/logo512.png
public/index.html
public/manifest.json
public/var
public/var/config.json
public/var/current_pedalboard.json
public/var/uiplugins.json
public/var/plugin_classes.json
src/svg/fx_constant.svg
src/svg/fx_distortion.svg
src/svg/fx_oscillator.svg
src/svg/fx_filter.svg
src/svg/fx_function.svg
src/svg/fx_generator.svg
src/svg/fx_compressor.svg
src/svg/file_download_black_24dp.svg
src/svg/fx_filter_hp.svg
src/svg/fx_plugin.svg
src/svg/fx_error.svg
src/svg/fx_gate.svg
src/svg/ic_midi.svg
src/svg/ic_pluginpreset.svg
src/svg/fx_split_a.svg
src/svg/fx_utility.svg
src/svg/ic_pluginpreset2.svg
src/svg/fx_parametric_eq.svg
src/svg/fx_terminal.svg
src/svg/ic_presets.svg
src/svg/fx_flanger.svg
src/svg/fx_analyzer.svg
src/svg/fx_delay.svg
src/svg/fx_spectral.svg
src/svg/fx_chorus.svg
src/svg/fx_simulator.svg
src/svg/fx_mixer.svg
src/svg/fx_eq.svg
src/svg/fx_modulator.svg
src/svg/file_upload_black_24dp.svg
src/svg/fx_pitch.svg
src/svg/fx_phaser.svg
src/svg/fx_amplifier.svg
src/svg/fx_lr.svg
src/svg/fx_instrument.svg
src/svg/fx_reverb.svg
src/svg/fx_limiter.svg
src/svg/fx_empty.svg
src/svg/fx_dial.svg
src/svg/fx_flanger2.svg
src/svg/fx_split_b.svg
src/svg/fx_spatial.svg
src/svg/fx_converter.svg
src/svg/old_delete_outline_24dp.svg
)
add_custom_target (
react/package.json
+5 -2
View File
@@ -18,11 +18,14 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-remark": "^2.1.0",
"react-scripts": "5.0.0",
"react-scripts": "^5.0.1",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"typescript": "^4.3.4",
"web-vitals": "^1.1.2"
"web-vitals": "^1.1.2",
"@babel/plugin-proposal-private-property-in-object": "^7.2.11"
},
"scripts": {
"start": "react-scripts start",
react/public/img/Pi-Logo-3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

react/public/img/Pi-Logo-3.svg
+1227
View File
File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

react/public/img/drive_file_rename_outline_black_24dp.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15,16 11,20 21,20 21,16"/><path d="M12.06,7.19L3,16.25V20h3.75l9.06-9.06L12.06,7.19z M5.92,18H5v-0.92l7.06-7.06l0.92,0.92L5.92,18z"/><path d="M18.71,8.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C16.17,4.09,15.92,4,15.66,4c-0.25,0-0.51,0.1-0.7,0.29l-1.83,1.83 l3.75,3.75L18.71,8.04z"/></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 503 B

react/public/img/edit_banks_white.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#FFFFFF">
<rect x="6" y="9" width="2" height="2"/>
<rect x="6" y="13" width="2" height="2"/>
<rect x="6" y="17" width="2" height="2"/>
<rect x="10" y="17" width="3" height="2"/>
<g>
<g>
<path d="M17.059,5.19l-7.061,7.06V16h3.75l7.061-7.061L17.059,5.19z M12.918,14h-0.92v-0.92l5.061-5.061l0.92,0.92L12.918,14z"/>
<path d="M23.708,6.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34c-0.2-0.2-0.45-0.29-0.71-0.29c-0.25,0-0.51,0.1-0.7,0.29l-1.83,1.83
l3.75,3.75L23.708,6.04z"/>
</g>
</g>
<path d="M15,16.641V21H4v-9V7h5h1h3.672l1.904-1.904C15.393,5.04,15.202,5,15,5h-4H8H4C2.9,5,2.01,5.9,2.01,7l-0.003,3.993L2,11v10
c0,1.1,0.891,2,1.99,2H4h11h0.01c1.1,0,1.99-0.9,1.99-2v-6.359L15,16.641z"/>
<polygon points="11.672,9 10,9 10,10.672 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

react/public/img/fx_flanger.svg
+110 -68
View File
@@ -1,72 +1,114 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<circle display="none" cx="24" cy="23.999" r="23"/>
<path d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path fill="#FFFFFF" d="M87.423,64.516L87.423,64.516l-0.002-0.001c-0.002-0.001-0.004-0.001-0.006-0.002
c-2.628-0.964-4.021-5.2-5.782-10.562c-0.004-0.012-0.007-0.022-0.011-0.033c-0.804-2.443-2.107-6.399-2.971-7.479
c-0.864,0.451-2.172,3.476-2.972,5.327l0,0c-0.002,0.004-0.004,0.009-0.006,0.014c-1.759,4.075-3.148,7.297-5.775,6.354
c-0.004-0.001-0.009-0.003-0.013-0.004c-0.006-0.003-0.009-0.004-0.013-0.005c-2.621-0.968-4.011-5.178-5.761-10.51
c-0.006-0.017-0.011-0.031-0.017-0.048l-0.009-0.028c-0.8-2.429-2.105-6.399-2.97-7.479c-0.864,0.451-2.17,3.472-2.97,5.318
l-1.414-1.016l0.05,0.036l-0.021-0.015l1.37,1.028c-1.756,4.063-3.144,7.274-5.762,6.344c-0.006-0.003-0.013-0.003-0.02-0.007
c-0.007-0.001-0.013-0.005-0.02-0.008c-2.616-0.974-4.007-5.188-5.76-10.521c-0.004-0.012-0.008-0.023-0.012-0.035
c-0.801-2.438-2.11-6.422-2.978-7.508c-0.864,0.453-2.173,3.473-2.974,5.321l0,0c-0.002,0.006-0.004,0.011-0.007,0.017
c-1.758,4.071-3.147,7.291-5.769,6.357c-0.006-0.002-0.014-0.002-0.02-0.007c-0.008-0.001-0.014-0.005-0.02-0.007
c-2.613-0.973-4-5.181-5.752-10.506c-0.006-0.016-0.011-0.032-0.017-0.049L29.024,34.8c-0.801-2.437-2.11-6.421-2.978-7.503
c-0.867,0.451-2.176,3.484-2.977,5.34c-0.004,0.009-0.008,0.018-0.012,0.027c-1.759,4.063-3.15,7.271-5.773,6.323
c-0.002-0.001-0.005-0.004-0.006-0.002c-0.004-0.004-0.004-0.002-0.006-0.003c-2.625-0.962-4.016-5.193-5.778-10.548
c-0.004-0.012-0.008-0.023-0.011-0.035c-0.802-2.44-2.105-6.406-2.971-7.487c-0.866,0.453-2.177,3.482-2.979,5.337l-1.405-1.034
l0.166,0.123l-0.147-0.109l1.378,1.042c-1.757,4.062-3.146,7.272-5.764,6.337c-0.006-0.002-0.011-0.003-0.017-0.006
c-0.005,0-0.01-0.004-0.017-0.006C-2.89,31.625-4.28,27.4-6.039,22.057c-0.29-0.882,0.101-1.611,0.876-1.619
c0.774-0.01,1.637,0.691,1.927,1.572l0.006,0.02c0.8,2.432,2.109,6.406,2.974,7.49c0.864-0.453,2.171-3.474,2.97-5.322l1.412,1.018
L4.108,25.2l0.002,0.001l-1.386-1.024c1.762-4.073,3.153-7.292,5.776-6.353c0.004,0.003,0.008,0.006,0.013,0.006
c0.003,0.002,0.009,0.003,0.013,0.004c2.625,0.971,4.016,5.203,5.775,10.561c0.004,0.011,0.007,0.021,0.011,0.033
c0.802,2.436,2.106,6.396,2.968,7.476c0.865-0.452,2.175-3.479,2.976-5.33h0c0.001-0.002,0.002-0.006,0.003-0.008
c1.759-4.076,3.149-7.297,5.775-6.355c0.004,0.001,0.007,0.002,0.013,0.005c0.003-0.001,0.009,0.003,0.013,0.005
c2.615,0.966,4.006,5.175,5.76,10.508c0.006,0.017,0.011,0.032,0.017,0.048l0.009,0.027c0.799,2.43,2.104,6.399,2.969,7.481
c0.867-0.452,2.177-3.485,2.978-5.34v-0.001l1.405,1.037l-1.405-1.037c0.003-0.006,0.006-0.012,0.008-0.018l0,0
c1.761-4.065,3.152-7.277,5.773-6.333c0.002,0.001,0.005,0.001,0.01,0.003l0.001,0.001c0.003,0.001,0.006,0.002,0.008,0.003
c2.621,0.964,4.012,5.183,5.768,10.524c0.004,0.012,0.008,0.022,0.012,0.034l0.001,0.003c0.802,2.439,2.111,6.425,2.979,7.506
c0.865-0.452,2.172-3.476,2.972-5.327l1.411,1.023l-0.071-0.052l0.043,0.03l-1.367-1.035c1.756-4.059,3.144-7.267,5.76-6.336
c0.006,0.003,0.014,0.004,0.02,0.008c0.008,0.001,0.014,0.005,0.02,0.007c2.613,0.973,4,5.179,5.753,10.505
c0.006,0.017,0.012,0.033,0.017,0.05c0.801,2.438,2.109,6.425,2.979,7.509c0.869-0.452,2.178-3.484,2.979-5.341
c0.002-0.004,0.004-0.009,0.006-0.015l0,0c1.76-4.07,3.149-7.287,5.776-6.338c0.002,0.001,0.004,0.002,0.006,0.002l0.001,0.001
h0.001c0.002,0.001,0.004,0.002,0.006,0.003c2.625,0.962,4.02,5.199,5.784,10.562c0.004,0.013,0.008,0.023,0.011,0.035
c0.803,2.442,2.104,6.395,2.968,7.475c0.868-0.453,2.178-3.484,2.979-5.339c0.29-0.672,1.154-0.75,1.93-0.179
c0.776,0.572,1.171,1.579,0.881,2.25c-1.762,4.079-3.154,7.302-5.782,6.353C87.427,64.517,87.425,64.516,87.423,64.516z
M21.665,31.6l1.405,1.037L21.665,31.6z M72.863,49.708l1.405,1.036L72.863,49.708z"/>
<path fill="#FFFFFF" d="M89.423,50.243L89.423,50.243l-0.002-0.001c-0.002,0-0.004-0.001-0.006-0.002
c-2.628-0.963-4.021-5.199-5.782-10.562c-0.004-0.011-0.007-0.022-0.011-0.034c-0.804-2.441-2.107-6.398-2.971-7.477
c-0.864,0.45-2.172,3.476-2.972,5.326l0,0c-0.002,0.004-0.004,0.01-0.006,0.014c-1.759,4.076-3.148,7.298-5.775,6.355
c-0.004-0.002-0.009-0.004-0.013-0.005c-0.006-0.002-0.009-0.003-0.013-0.005c-2.621-0.968-4.011-5.178-5.761-10.51
c-0.006-0.016-0.011-0.031-0.017-0.047l-0.009-0.028c-0.8-2.429-2.105-6.399-2.97-7.48c-0.864,0.452-2.17,3.472-2.97,5.319
l-1.414-1.017l0.05,0.036l-0.021-0.014l1.37,1.027c-1.756,4.063-3.144,7.275-5.762,6.344c-0.006-0.002-0.014-0.005-0.02-0.007
c-0.008-0.003-0.013-0.005-0.02-0.007c-2.616-0.975-4.007-5.188-5.76-10.522c-0.004-0.011-0.008-0.022-0.012-0.034
c-0.801-2.438-2.11-6.423-2.978-7.508c-0.864,0.453-2.173,3.473-2.974,5.32l0,0c-0.002,0.006-0.004,0.012-0.007,0.018
c-1.758,4.071-3.147,7.29-5.769,6.357c-0.006-0.002-0.014-0.005-0.02-0.007c-0.008-0.003-0.014-0.005-0.02-0.008
c-2.613-0.972-4-5.18-5.752-10.505c-0.006-0.017-0.011-0.033-0.017-0.049l-0.002-0.005c-0.801-2.438-2.11-6.42-2.977-7.504
c-0.868,0.452-2.177,3.485-2.978,5.341c-0.004,0.008-0.008,0.018-0.012,0.026c-1.759,4.064-3.15,7.271-5.773,6.323
c-0.002,0-0.003-0.003-0.006-0.002c-0.002-0.002-0.004-0.001-0.006-0.002c-2.625-0.962-4.016-5.193-5.778-10.548
c-0.004-0.013-0.008-0.024-0.011-0.036c-0.802-2.44-2.105-6.406-2.971-7.487c-0.866,0.453-2.177,3.483-2.979,5.338l-1.405-1.034
l0.166,0.122l-0.147-0.108l1.378,1.041c-1.757,4.063-3.146,7.272-5.764,6.338c-0.006-0.003-0.01-0.003-0.017-0.007
c-0.004,0.001-0.011-0.004-0.017-0.006C-0.89,17.353-2.28,13.129-4.039,7.784c-0.29-0.882,0.101-1.612,0.876-1.619
c0.776-0.009,1.637,0.691,1.927,1.573l0.006,0.018c0.8,2.433,2.109,6.408,2.974,7.491c0.864-0.453,2.171-3.474,2.97-5.322
l1.412,1.019l-0.02-0.015L6.11,10.93L4.724,9.904C6.485,5.831,7.877,2.612,10.5,3.553c0.004,0.002,0.008,0.002,0.013,0.005
c0.003-0.001,0.009,0.003,0.013,0.005c2.625,0.97,4.016,5.203,5.775,10.56c0.004,0.011,0.007,0.022,0.011,0.033
c0.802,2.437,2.106,6.396,2.968,7.477c0.865-0.453,2.175-3.479,2.976-5.331l0,0.001c0.001-0.003,0.002-0.006,0.003-0.009
c1.759-4.076,3.148-7.297,5.775-6.355c0.004,0.002,0.007,0.002,0.013,0.005c0.004,0.001,0.009,0.003,0.013,0.005
c2.615,0.966,4.006,5.176,5.76,10.509c0.006,0.017,0.011,0.032,0.017,0.048l0.009,0.026c0.799,2.43,2.104,6.4,2.969,7.481
c0.867-0.453,2.177-3.484,2.978-5.34c0,0,0,0,0-0.001l1.405,1.037l-1.405-1.037c0.003-0.006,0.006-0.012,0.008-0.018l0,0
c1.761-4.065,3.152-7.276,5.773-6.333c0.002,0.001,0.005,0.002,0.01,0.004h0.001c0.003,0.001,0.006,0.002,0.008,0.003
c2.621,0.964,4.012,5.183,5.768,10.524c0.004,0.012,0.008,0.023,0.012,0.035l0.001,0.003c0.802,2.438,2.111,6.424,2.979,7.505
c0.865-0.451,2.172-3.476,2.972-5.326l1.411,1.023l-0.071-0.053l0.043,0.031l-1.367-1.036c1.756-4.059,3.144-7.267,5.76-6.335
c0.006,0.002,0.014,0.005,0.02,0.007c0.008,0.003,0.014,0.005,0.02,0.007c2.613,0.973,4,5.18,5.753,10.506
c0.006,0.017,0.012,0.033,0.017,0.05c0.801,2.438,2.109,6.425,2.979,7.508c0.869-0.452,2.178-3.484,2.979-5.34
c0.002-0.005,0.004-0.01,0.006-0.015l0,0c1.76-4.071,3.149-7.287,5.776-6.338c0.002,0,0.004,0.001,0.006,0.002h0.001l0.001,0.001
c0.002,0,0.004,0.001,0.006,0.002c2.625,0.962,4.02,5.199,5.784,10.562c0.004,0.013,0.008,0.024,0.011,0.035
c0.803,2.441,2.104,6.395,2.968,7.476c0.868-0.454,2.178-3.485,2.979-5.34c0.29-0.673,1.156-0.749,1.93-0.179
c0.776,0.572,1.171,1.58,0.881,2.25c-1.762,4.08-3.154,7.303-5.782,6.353C89.427,50.244,89.425,50.244,89.423,50.243z
M23.665,17.328l1.405,1.037L23.665,17.328z M74.863,35.436l1.405,1.037L74.863,35.436z"/>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<g id="Layer_2">
<g>
<path d="M8.5,17.824c0.004,0.003,0.008,0.006,0.013,0.006c0.003,0.002,0.009,0.003,0.013,0.004
c2.625,0.971,4.016,5.203,5.775,10.561c0.004,0.012,0.007,0.021,0.011,0.033c0.802,2.437,2.106,6.396,2.968,7.477
c0.865-0.452,2.175-3.479,2.976-5.33c0.001-0.002,0.002-0.006,0.003-0.008c1.759-4.076,3.149-7.297,5.775-6.355
c0.004,0.001,0.007,0.002,0.013,0.005c0.003-0.001,0.01,0.003,0.014,0.005c2.614,0.966,4.006,5.175,5.76,10.507
c0.006,0.018,0.011,0.032,0.017,0.049l0.009,0.027c0.799,2.43,2.104,6.398,2.969,7.48c0.867-0.452,2.178-3.485,2.979-5.34v-0.002
c0.003-0.006,0.006-0.012,0.008-0.018c1.762-4.064,3.152-7.277,5.773-6.333c0.002,0.001,0.005,0.001,0.01,0.003l0.001,0.002
c0.003,0,0.006,0.002,0.008,0.002c1.409,0.519,2.461,1.983,3.407,4.051V22.409c-0.506-1.334-1.013-2.493-1.422-3.005
c-0.864,0.453-2.174,3.473-2.975,5.321c-0.002,0.006-0.004,0.012-0.006,0.018c-1.759,4.07-3.147,7.29-5.77,6.357
c-0.006-0.002-0.014-0.006-0.02-0.008c-0.009-0.003-0.015-0.005-0.021-0.008c-2.613-0.973-4-5.18-5.752-10.505
c-0.007-0.017-0.011-0.033-0.017-0.049l-0.002-0.005c-0.802-2.438-2.11-6.42-2.978-7.504c-0.868,0.452-2.177,3.485-2.978,5.341
c-0.004,0.008-0.008,0.018-0.013,0.026c-1.759,4.064-3.15,7.271-5.773,6.323c-0.002,0-0.003-0.003-0.006-0.002
c-0.002-0.002-0.004-0.001-0.006-0.002c-2.625-0.962-4.016-5.193-5.778-10.548c-0.004-0.013-0.008-0.024-0.011-0.036
c-0.802-2.44-2.105-6.406-2.971-7.487c-0.866,0.453-2.177,3.483-2.979,5.338l-1.314-0.967L6.14,10.954l1.378,1.041
c-1.757,4.063-3.146,7.272-5.764,6.338c-0.006-0.003-0.01-0.003-0.017-0.007c-0.004,0.001-0.011-0.004-0.017-0.006
C1.468,18.227,1.23,18.094,1,17.942v9.917c0.619-1.13,1.251-2.591,1.714-3.66l1.412,1.018L4.108,25.2l0.002,0.001l-1.386-1.024
C4.486,20.104,5.877,16.885,8.5,17.824z"/>
<path d="M1.744,15.247c0.864-0.453,2.171-3.474,2.97-5.322l1.412,1.019l-0.02-0.015L6.11,10.93L4.724,9.904
C6.485,5.831,7.877,2.612,10.5,3.553c0.004,0.002,0.008,0.002,0.013,0.005c0.003-0.001,0.009,0.003,0.013,0.005
c2.625,0.97,4.016,5.203,5.775,10.56c0.004,0.011,0.007,0.022,0.011,0.033c0.802,2.437,2.106,6.396,2.968,7.477
c0.865-0.453,2.175-3.479,2.976-5.331v0.001c0.001-0.003,0.002-0.006,0.003-0.009c1.759-4.076,3.148-7.297,5.775-6.355
c0.004,0.002,0.007,0.002,0.013,0.005c0.004,0.001,0.01,0.003,0.014,0.005c2.614,0.966,4.006,5.176,5.76,10.509
c0.006,0.017,0.011,0.032,0.017,0.048l0.009,0.026c0.799,2.43,2.104,6.399,2.969,7.481c0.867-0.453,2.178-3.484,2.979-5.341
c0,0,0,0,0-0.001c0.003-0.006,0.006-0.012,0.008-0.018c1.762-4.065,3.152-7.276,5.773-6.333c0.002,0.001,0.005,0.002,0.01,0.004
h0.001c0.003,0.001,0.006,0.002,0.008,0.003c0.513,0.188,0.977,0.505,1.407,0.926V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7
v6.901C1.267,14.491,1.521,14.967,1.744,15.247z"/>
<polygon points="4.157,25.236 4.175,25.25 4.188,25.26 4.147,25.229 "/>
<path d="M46.568,41.219c-0.004-0.012-0.008-0.023-0.012-0.035c-0.802-2.438-2.111-6.422-2.979-7.508
c-0.864,0.453-2.174,3.473-2.975,5.321c-0.002,0.006-0.004,0.011-0.006,0.017c-1.759,4.071-3.147,7.291-5.77,6.357
c-0.006-0.002-0.014-0.002-0.02-0.007c-0.009-0.001-0.015-0.005-0.021-0.007c-2.613-0.974-4-5.182-5.752-10.506
c-0.007-0.017-0.011-0.033-0.017-0.05l0.004-0.002c-0.801-2.437-2.109-6.421-2.978-7.503c-0.866,0.451-2.176,3.484-2.977,5.34
c-0.004,0.01-0.008,0.019-0.012,0.027c-1.759,4.063-3.15,7.271-5.773,6.322c-0.002,0-0.005-0.004-0.006-0.002
c-0.004-0.004-0.004-0.002-0.006-0.002c-2.625-0.963-4.016-5.193-5.778-10.549c-0.004-0.012-0.008-0.022-0.011-0.035
c-0.802-2.439-2.105-6.405-2.971-7.486c-0.866,0.453-2.177,3.482-2.979,5.337L4.188,25.26L4.18,25.254l1.345,1.018
C4.068,29.64,2.861,32.414,1,32.732V41c0,3.313,2.687,6,6,6h34c2.91,0,5.336-2.075,5.883-4.825
C46.779,41.86,46.675,41.542,46.568,41.219z"/>
</g>
</g>
<g id="Layer_1" style="display:none;">
<circle cx="24" cy="23.999" r="23"/>
<path style="display:inline;" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6
V41z"/>
<path style="display:inline;fill:#FFFFFF;" d="M87.423,64.516L87.423,64.516h-0.002c-0.002-0.002-0.004-0.002-0.006-0.002
c-2.628-0.965-4.021-5.201-5.782-10.563c-0.004-0.012-0.007-0.021-0.011-0.033c-0.804-2.443-2.106-6.398-2.972-7.479
c-0.863,0.451-2.172,3.476-2.971,5.326l0,0c-0.003,0.004-0.005,0.01-0.007,0.015c-1.759,4.075-3.147,7.297-5.774,6.354
c-0.004-0.001-0.01-0.003-0.014-0.004c-0.006-0.003-0.009-0.004-0.013-0.005c-2.621-0.968-4.011-5.178-5.761-10.51
c-0.006-0.018-0.012-0.031-0.018-0.049l-0.009-0.027c-0.8-2.43-2.104-6.398-2.97-7.479c-0.864,0.45-2.17,3.472-2.971,5.317
l-1.414-1.017l0.051,0.037l-0.021-0.016l1.37,1.028c-1.756,4.063-3.144,7.274-5.762,6.344c-0.007-0.003-0.013-0.003-0.021-0.007
c-0.007-0.001-0.013-0.005-0.02-0.008c-2.616-0.975-4.008-5.188-5.76-10.521c-0.004-0.012-0.008-0.023-0.012-0.035
c-0.802-2.438-2.111-6.422-2.979-7.508c-0.864,0.453-2.174,3.473-2.975,5.321l0,0c-0.002,0.006-0.004,0.011-0.006,0.017
c-1.759,4.071-3.147,7.291-5.77,6.357c-0.006-0.002-0.014-0.002-0.02-0.007c-0.009-0.001-0.015-0.005-0.021-0.007
c-2.613-0.974-4-5.182-5.752-10.506c-0.007-0.017-0.011-0.033-0.017-0.05l0.004-0.002c-0.801-2.437-2.109-6.421-2.978-7.503
c-0.866,0.451-2.176,3.484-2.977,5.34c-0.004,0.01-0.008,0.019-0.012,0.027c-1.759,4.063-3.15,7.271-5.773,6.322
c-0.002,0-0.005-0.004-0.006-0.002c-0.004-0.004-0.004-0.002-0.006-0.002c-2.625-0.963-4.016-5.193-5.778-10.549
c-0.004-0.012-0.008-0.022-0.011-0.035c-0.802-2.439-2.105-6.405-2.971-7.486c-0.866,0.453-2.177,3.482-2.979,5.337l-1.405-1.034
l0.166,0.123l-0.147-0.109l1.378,1.043c-1.757,4.062-3.146,7.271-5.764,6.336c-0.006-0.002-0.011-0.002-0.017-0.006
c-0.005,0-0.01-0.004-0.017-0.006C-2.89,31.625-4.28,27.4-6.039,22.057c-0.29-0.882,0.101-1.611,0.876-1.619
c0.774-0.01,1.637,0.691,1.927,1.572l0.006,0.021c0.8,2.432,2.109,6.405,2.974,7.489c0.864-0.453,2.171-3.474,2.97-5.321
l1.412,1.018L4.108,25.2l0.002,0.001l-1.386-1.024c1.762-4.073,3.153-7.292,5.776-6.353c0.004,0.003,0.008,0.006,0.013,0.006
c0.003,0.002,0.009,0.003,0.013,0.004c2.625,0.971,4.016,5.203,5.775,10.561c0.004,0.012,0.007,0.021,0.011,0.033
c0.802,2.437,2.106,6.396,2.968,7.477c0.865-0.452,2.175-3.479,2.976-5.33l0,0c0.001-0.002,0.002-0.006,0.003-0.008
c1.759-4.076,3.149-7.297,5.775-6.355c0.004,0.001,0.007,0.002,0.013,0.005c0.003-0.001,0.01,0.003,0.014,0.005
c2.614,0.966,4.006,5.175,5.76,10.507c0.006,0.018,0.011,0.032,0.017,0.049l0.009,0.027c0.799,2.43,2.104,6.398,2.969,7.48
c0.867-0.452,2.178-3.485,2.979-5.34v-0.002l1.405,1.037l-1.405-1.037c0.003-0.006,0.006-0.012,0.008-0.018l0,0
c1.762-4.064,3.152-7.277,5.773-6.333c0.002,0.001,0.005,0.001,0.01,0.003l0.001,0.002c0.003,0,0.006,0.002,0.008,0.002
c2.621,0.965,4.013,5.184,5.769,10.524c0.004,0.012,0.008,0.022,0.012,0.034l0.001,0.003c0.802,2.438,2.11,6.425,2.979,7.506
c0.864-0.452,2.172-3.476,2.972-5.327l1.411,1.023l-0.071-0.053l0.043,0.03l-1.367-1.034c1.757-4.06,3.144-7.268,5.761-6.337
c0.006,0.003,0.014,0.005,0.02,0.009c0.008,0,0.014,0.004,0.02,0.006c2.613,0.974,4,5.18,5.754,10.506
c0.006,0.017,0.012,0.033,0.017,0.05c0.801,2.438,2.108,6.425,2.979,7.509c0.868-0.451,2.178-3.484,2.979-5.341
c0.002-0.004,0.004-0.009,0.006-0.015l0,0c1.76-4.07,3.148-7.287,5.775-6.338c0.002,0,0.004,0.002,0.007,0.002h0.001h0.001
c0.002,0.002,0.004,0.002,0.006,0.004c2.625,0.962,4.021,5.199,5.784,10.562c0.004,0.013,0.008,0.022,0.011,0.035
c0.804,2.442,2.104,6.396,2.968,7.476c0.868-0.453,2.178-3.484,2.979-5.34c0.29-0.672,1.153-0.75,1.93-0.179
s1.171,1.579,0.881,2.25c-1.762,4.079-3.153,7.302-5.782,6.353C87.427,64.518,87.425,64.516,87.423,64.516z M21.665,31.6
l1.405,1.037L21.665,31.6z M72.863,49.708l1.404,1.036L72.863,49.708z"/>
<path style="display:inline;fill:#FFFFFF;" d="M89.423,50.243L89.423,50.243l-0.002-0.001c-0.002,0-0.004-0.001-0.006-0.002
c-2.628-0.963-4.021-5.199-5.782-10.563c-0.004-0.011-0.007-0.021-0.011-0.033c-0.804-2.441-2.106-6.398-2.972-7.478
c-0.863,0.45-2.172,3.476-2.971,5.326l0,0c-0.003,0.004-0.005,0.01-0.007,0.014c-1.759,4.076-3.147,7.298-5.774,6.354
c-0.004-0.002-0.01-0.004-0.014-0.004c-0.006-0.002-0.009-0.004-0.013-0.006c-2.621-0.968-4.011-5.178-5.761-10.51
c-0.006-0.016-0.012-0.031-0.018-0.047l-0.009-0.027c-0.8-2.43-2.104-6.399-2.97-7.48c-0.864,0.452-2.17,3.472-2.971,5.318
l-1.414-1.017l0.051,0.036l-0.021-0.014l1.37,1.027c-1.756,4.063-3.144,7.274-5.762,6.344c-0.007-0.002-0.015-0.006-0.021-0.008
c-0.008-0.002-0.013-0.005-0.02-0.007c-2.616-0.975-4.008-5.188-5.76-10.522c-0.004-0.01-0.008-0.021-0.012-0.033
c-0.802-2.438-2.111-6.423-2.979-7.508c-0.864,0.453-2.174,3.473-2.975,5.321l0,0c-0.002,0.006-0.004,0.012-0.006,0.018
c-1.759,4.07-3.147,7.29-5.77,6.357c-0.006-0.002-0.014-0.006-0.02-0.008c-0.009-0.003-0.015-0.005-0.021-0.008
c-2.613-0.973-4-5.18-5.752-10.505c-0.007-0.017-0.011-0.033-0.017-0.049l-0.002-0.005c-0.802-2.438-2.11-6.42-2.978-7.504
c-0.868,0.452-2.177,3.485-2.978,5.341c-0.004,0.008-0.008,0.018-0.013,0.026c-1.759,4.064-3.15,7.271-5.773,6.323
c-0.002,0-0.003-0.003-0.006-0.002c-0.002-0.002-0.004-0.001-0.006-0.002c-2.625-0.962-4.016-5.193-5.778-10.548
c-0.004-0.013-0.008-0.024-0.011-0.036c-0.802-2.44-2.105-6.406-2.971-7.487c-0.866,0.453-2.177,3.483-2.979,5.338L6.121,10.94
l0.166,0.122L6.14,10.954l1.378,1.041c-1.757,4.063-3.146,7.272-5.764,6.338c-0.006-0.003-0.01-0.003-0.017-0.007
c-0.004,0.001-0.011-0.004-0.017-0.006c-2.61-0.967-4-5.191-5.759-10.536c-0.29-0.882,0.101-1.612,0.876-1.619
c0.776-0.009,1.637,0.691,1.927,1.573l0.006,0.018c0.8,2.433,2.109,6.408,2.974,7.491c0.864-0.453,2.171-3.474,2.97-5.322
l1.412,1.019l-0.02-0.015L6.11,10.93L4.724,9.904C6.485,5.831,7.877,2.612,10.5,3.553c0.004,0.002,0.008,0.002,0.013,0.005
c0.003-0.001,0.009,0.003,0.013,0.005c2.625,0.97,4.016,5.203,5.775,10.56c0.004,0.011,0.007,0.022,0.011,0.033
c0.802,2.437,2.106,6.396,2.968,7.477c0.865-0.453,2.175-3.479,2.976-5.331v0.001c0.001-0.003,0.002-0.006,0.003-0.009
c1.759-4.076,3.148-7.297,5.775-6.355c0.004,0.002,0.007,0.002,0.013,0.005c0.004,0.001,0.01,0.003,0.014,0.005
c2.614,0.966,4.006,5.176,5.76,10.509c0.006,0.017,0.011,0.032,0.017,0.048l0.009,0.026c0.799,2.43,2.104,6.399,2.969,7.481
c0.867-0.453,2.178-3.484,2.979-5.341c0,0,0,0,0-0.001l1.405,1.037l-1.405-1.037c0.003-0.006,0.006-0.012,0.008-0.018l0,0
c1.762-4.065,3.152-7.276,5.773-6.333c0.002,0.001,0.005,0.002,0.01,0.004h0.001c0.003,0.001,0.006,0.002,0.008,0.003
c2.621,0.964,4.013,5.183,5.769,10.523c0.004,0.013,0.008,0.023,0.012,0.035l0.001,0.004c0.802,2.438,2.11,6.424,2.979,7.504
c0.864-0.451,2.172-3.476,2.972-5.326l1.411,1.023l-0.071-0.053l0.043,0.031l-1.367-1.036c1.757-4.06,3.144-7.267,5.761-6.335
c0.006,0.002,0.014,0.005,0.02,0.007c0.008,0.003,0.014,0.005,0.02,0.007c2.613,0.973,4,5.18,5.754,10.506
c0.006,0.018,0.012,0.033,0.017,0.051c0.801,2.438,2.108,6.424,2.979,7.508c0.868-0.452,2.178-3.484,2.979-5.34
c0.002-0.006,0.004-0.011,0.006-0.016l0,0c1.76-4.07,3.148-7.287,5.775-6.338c0.002,0,0.004,0.001,0.007,0.002h0.001l0.001,0.001
c0.002,0,0.004,0.001,0.006,0.002c2.625,0.962,4.021,5.199,5.784,10.562c0.004,0.014,0.008,0.024,0.011,0.035
c0.804,2.441,2.104,6.396,2.968,7.477c0.868-0.454,2.178-3.485,2.979-5.34c0.29-0.674,1.155-0.749,1.93-0.18
c0.776,0.572,1.171,1.58,0.881,2.25c-1.762,4.08-3.153,7.303-5.782,6.354C89.427,50.244,89.425,50.244,89.423,50.243z
M23.665,17.328l1.405,1.037L23.665,17.328z M74.863,35.436l1.404,1.037L74.863,35.436z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 12 KiB

react/public/img/ic_presets_white.svg
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#FFFFFF">
<path d="M20.953,7.993L20.949,4c0-1.1-0.891-2-1.99-2h-4h-3h-3c-1.1,0-1.99,0.9-1.99,2h1.99h4h1h5h0.006v16h0.004
c1.1,0,1.99-0.9,1.99-2V8L20.953,7.993z"/>
<path d="M17.993,10.993L17.99,7c0-1.1-0.891-2-1.99-2h-4H9H6C4.9,5,4.01,5.9,4.01,7l-0.003,3.993L4,11v10c0,1.1,0.891,2,1.99,2H6h10
h0.01c1.1,0,1.99-0.9,1.99-2V11L17.993,10.993z M16,12v9H6v-9V7h4h1h5V12z"/>
<rect x="8" y="9" width="6" height="2"/>
<circle cx="11" cy="15.859" r="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 934 B

react/public/img/settings_white_24dp.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

react/public/index.html
+40 -19
View File
@@ -1,26 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="PiPedal Guitar Pedals"
/>
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="PiPedal Guitar Pedals" />
<!--
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-->
<link rel="stylesheet" href="/css/roboto.css" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<link rel="stylesheet" href="/css/roboto.css" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@@ -29,9 +27,32 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>PiPedal</title>
<title>PiPedal</title>
<style>
BODY {
background: #D0D0D0;
}
</style>
<style id="bgStyle">
BODY {
background: #333;
}
</style>
<script>
const darkMode = localStorage.getItem("darkMode"); if (darkMode) { }
if (darkMode)
{
let bgStyle = document.getElementById("bgStyle");
if (bgStyle)
{
// disable the style block.
bgStyle.setAttribute('media',"max-width: 1px");
}
}
</script>
</head>
<body style="background: #D0D0D0">
<body >
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
@@ -45,4 +66,4 @@
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</html>
react/src/App.tsx
+43 -8
View File
@@ -21,6 +21,19 @@ import React from 'react';
import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles';
import AppThemed from "./AppThemed";
import isDarkMode from './DarkMode';
declare module '@mui/material/styles' {
interface Theme {
mainBackground: React.CSSProperties['color'];
toolbarColor: React.CSSProperties['color'];
}
interface ThemeOptions {
mainBackground?: React.CSSProperties['color'];
toolbarColor?: React.CSSProperties['color'];
}
}
@@ -33,16 +46,38 @@ declare module '@mui/styles/defaultTheme' {
const theme = createTheme({
palette: {
primary: {
main: "#6750A4" // #5B5690 #60529A #5C5694
const theme = createTheme(
isDarkMode() ?
{
palette: {
mode: 'dark',
primary: {
main: '#A770E4'// #6750A4" // #5B5690 #60529A #5C5694
},
secondary: {
main: "#FF6060"
},
},
secondary: {
main: "#FF6060"
}
mainBackground: "#222",
toolbarColor: '#FFFFFF'
}
});
:
{
palette: {
primary: {
main: "#6750A4" // #5B5690 #60529A #5C5694
},
secondary: {
main: "#FF6060"
}
},
mainBackground: "#FFFFFF",
toolbarColor: '#FFFFFF'
}
);
react/src/AppThemed.css
+1
View File
@@ -15,3 +15,4 @@
div {
min-width: 0;
}
react/src/AppThemed.tsx
+58 -27
View File
@@ -60,10 +60,33 @@ import { BankIndex, BankIndexEntry } from './Banks';
import RenameDialog from './RenameDialog';
import JackStatusView from './JackStatusView';
import { Theme } from '@mui/material/styles';
import isDarkMode from './DarkMode';
import {ReactComponent as RenameOutlineIcon} from './svg/drive_file_rename_outline_black_24dp.svg';
import {ReactComponent as SaveBankAsIcon} from './svg/ic_save_bank_as.svg';
import {ReactComponent as EditBanksIcon} from './svg/ic_edit_banks.svg';
import {ReactComponent as SettingsIcon} from './svg/ic_settings.svg';
import {ReactComponent as HelpOutlineIcon} from './svg/ic_help_outline.svg';
const appStyles = (theme: Theme) => createStyles({
"&": { // :root
colorScheme: (isDarkMode()? "dark": "light")
},
menuListItem: {
color: "#FE8!important" as any, //theme.palette.text.primary,
fill: "#FE8!important" as any, //theme.palette.text.primary,
},
menuIcon: {
fill: (theme.palette.text.primary + "!important") as any, //theme.palette.text.primary,
opacity: 0.6
},
toolBar: {
color: "white"
},
listSubheader: {
backgroundImage: "linear-gradient(255,255,255,0.15),rgba(255,255,255,0.15)"
},
loadingContent: {
display: "block",
position: "absolute",
@@ -72,7 +95,7 @@ const appStyles = (theme: Theme) => createStyles({
top: "0px",
width: "100%",
height: "100%",
background: "#DDD",
background: isDarkMode() ? "#222": "#DDD",
opacity: "0.95",
justifyContent: "center",
textAlign: "center",
@@ -91,13 +114,13 @@ const appStyles = (theme: Theme) => createStyles({
top: "0px",
width: "100%",
height: "100%",
color: "#444",
color: isDarkMode() ? "#CCC": "#444",
zIndex: 2000
},
errorContentMask: {
position: "absolute", left: 0, top: 0,
width: "100%", height: "100%",
background: "#BBB",
background: isDarkMode()? "#121212": "#BBB",
opacity: 0.95,
zIndex: 1999
},
@@ -131,7 +154,7 @@ const appStyles = (theme: Theme) => createStyles({
},
errorMessage: {
color: '#000',
color: theme.palette.text.secondary,
textAlign: "left",
zIndex: 2010
@@ -140,7 +163,7 @@ const appStyles = (theme: Theme) => createStyles({
position: "relative",
top: "20%",
width: "240px",
color: "#888",
color: isDarkMode() ? theme.palette.text.secondary : "#888",
marginLeft: "auto",
marginRight: "auto",
// border: "3px solid #888",
@@ -167,7 +190,7 @@ const appStyles = (theme: Theme) => createStyles({
toolBarSpacer:
{
position: "relative", flex: "0 0 auto"
position: "relative", flex: "0 0 auto",
},
@@ -190,7 +213,7 @@ const appStyles = (theme: Theme) => createStyles({
},
heroContent: {
backgroundColor: "#FFFFFF",
backgroundColor: theme.mainBackground,
position: "relative",
height: "100%",
width: "100%"
@@ -198,7 +221,6 @@ const appStyles = (theme: Theme) => createStyles({
drawerItem: {
width: 350,
background: "#FF8080"
},
drawerItemFullWidth: {
width: 'auto',
@@ -490,7 +512,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
private unmountListener(e: Event) {
e.preventDefault();
if (this.model_.state.get() === State.Ready && !this.model_.isAndroidHosted()) {
if ((!this.model_.reloadRequested) && this.model_.state.get() === State.Ready && !this.model_.isAndroidHosted()) {
(e as any).returnValue = "Are you sure you want to leave this page?";
return "Are you sure you want to leave this page?";
}
@@ -643,6 +665,7 @@ render() {
return (
<div style={{
colorScheme: isDarkMode() ? "dark": "light", // affects scrollbar color
minHeight: 345, minWidth: 390,
position: "absolute", width: "100%", height: "100%", background: "#F88", userSelect: "none",
display: "flex", flexDirection: "column", flexWrap: "nowrap",
@@ -657,14 +680,15 @@ render() {
<CssBaseline />
{(!this.state.tinyToolBar) ?
(
<AppBar position="absolute" style={{ background: "white" }}>
<Toolbar variant="dense" >
<AppBar position="absolute" >
<Toolbar variant="dense" className={classes.toolBar} >
<IconButton
edge="start"
aria-label="menu"
color="inherit"
onClick={() => { this.showDrawer() }}
size="large">
<MenuButton />
<MenuButton style={{opacity: 0.75}} />
</IconButton>
<div style={{ flex: "0 1 400px", minWidth: 100 }}>
<PresetSelector />
@@ -674,11 +698,12 @@ render() {
<IconButton
aria-label="menu"
onClick={() => { this.toggleFullScreen(); }}
color="inherit"
size="large">
{this.state.isFullScreen ? (
<FullscreenExitIcon />
<FullscreenExitIcon style={{opacity: 0.75}} />
) : (
<FullscreenIcon />
<FullscreenIcon style={{opacity: 0.75}} />
)}
@@ -692,6 +717,7 @@ render() {
style={{ position: "absolute", left: 12, top: 8, zIndex: 2 }}
aria-label="menu"
onClick={() => { this.showDrawer() }}
color="inherit"
size="large">
<MenuButton />
</IconButton>
@@ -699,6 +725,7 @@ render() {
<IconButton
style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }}
aria-label="menu"
color="inherit"
onClick={() => { this.toggleFullScreen(); }}
size="large">
{this.state.isFullScreen ? (
@@ -714,9 +741,10 @@ render() {
)}
<TemporaryDrawer position='left' title="PiPedal"
is_open={this.state.isDrawerOpen} onClose={() => { this.hideDrawer(); }} >
<List subheader={
<ListSubheader component="div" id="nested-list-subheader">Banks</ListSubheader>
}>
<ListSubheader className="listSubheader" component="div" id="xnested-list-subheader" style={{background: "rgba(12,12,12,0.0)"}}>
<Typography variant="caption" style={{position: "relative", top: 15}}>Banks</Typography></ListSubheader>
<List >
{
shortBankList.map((bank) => {
return (
@@ -746,18 +774,20 @@ render() {
<Divider />
<List>
<ListItem button key='RenameBank' onClick={() => { this.handleDrawerRenameBank() }}>
<ListItemIcon><img src="img/drive_file_rename_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} /></ListItemIcon>
<ListItemIcon >
<RenameOutlineIcon color='inherit' className={classes.menuIcon} />
</ListItemIcon>
<ListItemText primary='Rename Bank' />
</ListItem>
<ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
<ListItemIcon>
<img src="img/save_bank_as.svg" alt="" style={{ opacity: 0.6 }} />
<SaveBankAsIcon color="inherit" className={classes.menuIcon}/>
</ListItemIcon>
<ListItemText primary='Save As New Bank' />
</ListItem>
<ListItem button key='CreateBank' onClick={() => { this.handleDrawerManageBanks(); }}>
<ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}>
<ListItemIcon>
<img src="img/edit_banks.svg" alt="" style={{ opacity: 0.6 }} />
<EditBanksIcon color="inherit" className={classes.menuIcon}/>
</ListItemIcon>
<ListItemText primary='Manage Banks...' />
</ListItem>
@@ -766,19 +796,19 @@ render() {
<List>
<ListItem button key='Settings' onClick={() => { this.handleDrawerSettingsClick() }}>
<ListItemIcon>
<img src="img/settings_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
<SettingsIcon color="inherit" className={classes.menuIcon}/>
</ListItemIcon>
<ListItemText primary='Settings' />
</ListItem>
<ListItem button key='About' onClick={() => { this.handleDrawerAboutClick() }}>
<ListItemIcon>
<img src="img/help_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
<HelpOutlineIcon color="inherit" className={classes.menuIcon}/>
</ListItemIcon>
<ListItemText primary='About' />
</ListItem>
<ListItem button key='Donations' onClick={() => { this.handleDrawerDonationClick() }}>
<ListItemIcon>
<VolunteerActivismIcon />
<ListItemIcon >
<VolunteerActivismIcon className={classes.menuIcon} color="inherit" />
</ListItemIcon>
<ListItemText primary='Donations' />
</ListItem>
@@ -786,7 +816,8 @@ render() {
</TemporaryDrawer>
{!this.state.tinyToolBar && (
<Toolbar className={classes.toolBarSpacer} variant="dense" />
<Toolbar className={classes.toolBarSpacer} variant="dense"
/>
)}
<main className={classes.mainFrame} >
<div className={classes.mainSizingPosition}>
@@ -807,7 +838,7 @@ render() {
<RenameDialog
open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
defaultName={this.model_.banks.get().getSelectedEntryName()}
acceptActionName={"Rename"}
acceptActionName={this.state.renameBankDialogOpen ? "Rename": "Save as"}
onClose={() => {
this.setState({
renameBankDialogOpen: false,
react/src/BankDialog.tsx
+10 -2
View File
@@ -46,6 +46,8 @@ import MenuItem from '@mui/material/MenuItem';
import DialogEx from './DialogEx';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg';
import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg';
interface BankDialogProps extends WithStyles<typeof styles> {
show: boolean;
@@ -70,6 +72,10 @@ interface BankDialogState {
const styles = (theme: Theme) => createStyles({
listIcon: {
width: 24, height: 24,
opacity: 0.6, fill: theme.palette.text.primary
},
dialogAppBar: {
position: 'relative',
top: 0, left: 0
@@ -476,7 +482,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
>
<MenuItem onClick={() => { this.handleDownloadBank(); }} >
<ListItemIcon>
<img src="img/file_download_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
<DownloadIcon className="listIcon"
/>
</ListItemIcon>
<ListItemText>
Download bank
@@ -488,7 +495,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
<ListItemIcon>
<img src="img/file_upload_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
<UploadIcon className="listIcon"
/>
</ListItemIcon>
<ListItemText>
Upload bank
react/src/DarkMode.tsx
+28
View File
@@ -0,0 +1,28 @@
// Copyright (c) 2022 Robin Davies
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
export default function isDarkMode(): boolean {
let value = localStorage.getItem("darkMode");
return value === "true";
}
export function setDarkMode(value: boolean): void {
localStorage.setItem("darkMode",value? "true": "false");
}
react/src/DraggableGrid.tsx
+2 -1
View File
@@ -21,6 +21,7 @@ import { Theme } from '@mui/material/styles';
import createStyles from '@mui/styles/createStyles';
import { Property } from "csstype";
import { nullCast} from './Utility'
import isDarkMode from './DarkMode';
const SELECT_SCALE = 1.0;
@@ -714,7 +715,7 @@ const DraggableGrid =
this.savedIndex = gridElement.style.zIndex;
gridElement.style.zIndex = "3";
this.savedBackground = gridElement.style.background;
gridElement.style.background = "#EEE";
gridElement.style.background = isDarkMode()? "333": "#EEE";
gridElement.style.opacity = "0.8";
}
}
react/src/FilePropertyControl.tsx
+5 -2
View File
@@ -33,6 +33,7 @@ import { PiPedalModel, PiPedalModelFactory, ListenHandle} from './PiPedalModel';
import ButtonBase from '@mui/material/ButtonBase'
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import {PedalboardItem} from './Pedalboard';
import isDarkMode from './DarkMode';
export const StandardItemSize = { width: 80, height: 140 }
@@ -204,14 +205,16 @@ const FilePropertyControl =
<div style={{ flex: "0 0 auto", width: "100%" }}>
<ButtonBase style={{ width: "100%", borderRadius: "4px 4px 0px 0px", overflow: "hidden", marginTop: 8 }} onClick={() => { this.onFileClick() }} >
<div style={{ width: "100%", background: "rgba(0,0,0,0.07)", borderRadius: "4px 4px 0px 0px" }}>
<div style={{ width: "100%", background:
isDarkMode()? "rgba(255,255,255,0.03)": "rgba(0,0,0,0.07)",
borderRadius: "4px 4px 0px 0px" }}>
<div style={{ display: "flex", alignItems: "center", flexFlow: "row nowrap" }}>
<Typography noWrap={true} style={{ flex: "1 1 100%", textAlign: "start", verticalAlign: "center", paddingTop: 4, paddingBottom: 4, paddingLeft: 4 }}
variant='caption'
>{value}</Typography>
<MoreHorizIcon style={{ flex: "0 0 auto", width: "16px", height: "16px", verticalAlign: "center", opacity: 0.5, marginRight: 4 }} />
</div>
<div style={{ height: "1px", width: "100%", background: "black" }}>&nbsp;</div>
<div style={{ height: "1px", width: "100%", background: this.props.theme.palette.text.secondary }}>&nbsp;</div>
</div>
</ButtonBase>
</div>
react/src/GxTunerControl.tsx
+9 -4
View File
@@ -24,6 +24,7 @@ import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { MonitorPortHandle, PiPedalModel, State, PiPedalModelFactory } from "./PiPedalModel";
import SvgPathBuilder from './SvgPathBuilder'
import isDarkMode from './DarkMode';
//const char* model[] = {"12-TET","19-TET","24-TET", "31-TET", "53-TET"};
// set_adjustment(ui->widget[2]->adj,440.0, 440.0, 427.0, 453.0, 0.1, CL_CONTINUOS);
@@ -386,15 +387,19 @@ const GxTunerControl =
}
render() {
let textColor = isDarkMode() ? "#999": "#444";
return (<div ref={this.refRoot} style={{width: DIAL_WIDTH, height: DIAL_HEIGHT, fontSize: "2em", fontWeight: 700, position: "relative",
boxShadow: "1px 5px 6px #888 inset",
boxShadow: isDarkMode() ?
"5px 5px 6px rgba(0,0,0,0.8) inset":
"1px 5px 6px #888 inset",
background: isDarkMode()? "rgba(255,255,255,0.07)" : "",
fontFamily: "arial,roboto,helvetica,sans"}}>
<div style={{position: "absolute", left: 0, bottom: 5, width: "50%",textAlign: "right"}}>
<span style={{ marginRight: 20, color: "#444", textAlign: "right" }}>{this.state.pitchInfo.name}</span>
<span style={{ marginRight: 20, color: textColor, textAlign: "right" }}>{this.state.pitchInfo.name}</span>
</div>
<div style={{position: "absolute", right: 0, bottom: 5, width: "50%",textAlign: "left"}}>
<span style={{ marginLeft: 20, color: "#444", textAlign: "left" }}>{this.state.pitchInfo.fractionText}</span>
<span style={{ marginLeft: 20, color: textColor, textAlign: "left" }}>{this.state.pitchInfo.fractionText}</span>
</div>
{ this.renderDial(this.state.pitchInfo) }
react/src/JackHostStatus.tsx
+10 -9
View File
@@ -19,10 +19,11 @@
import React from 'react';
import Typography from '@mui/material/Typography';
import isDarkMode from './DarkMode';
const RED_COLOR = "#C00";
const GREEN_COLOR = "#666";
const RED_COLOR = isDarkMode()? "#F88":"#C00";
const GREEN_COLOR = isDarkMode()? "rgba(255,255,255,0.7)": "#666";
@@ -85,13 +86,13 @@ export default class JackHostStatus {
static getCpuInfo(label: string, status?: JackHostStatus): React.ReactNode {
if (!status) {
return (<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption" color="inherit">{label}</Typography>
<Typography variant="caption">&nbsp;</Typography>
</div>);
}
return (<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption" color="textSecondary">
<Typography variant="caption" color="inherit">{label}</Typography>
<Typography variant="caption" color="inherit">
{
(status.cpuFreqMax === status.cpuFreqMin)?
(
@@ -110,14 +111,14 @@ export default class JackHostStatus {
static getDisplayView(label: string, status?: JackHostStatus): React.ReactNode {
if (!status) {
return (<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption" color="inherit">{label}</Typography>
<Typography variant="caption">&nbsp;</Typography>
</div>);
}
if (status.restarting) {
return (
<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption" color="inherit">{label}</Typography>
<span style={{ color: RED_COLOR }}>
<Typography variant="caption" color="inherit">Restarting&nbsp;&nbsp;</Typography>
</span>
@@ -135,7 +136,7 @@ export default class JackHostStatus {
} else if (!status.active) {
return (
<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption" color="inherit">{label}</Typography>
<span style={{ color: RED_COLOR }}>
<Typography variant="caption" color="inherit">{status.errorMessage === "" ? "Stopped" : status.errorMessage}&nbsp;&nbsp;</Typography>
@@ -154,7 +155,7 @@ export default class JackHostStatus {
let underrunError = status.msSinceLastUnderrun < 15 * 1000;
return (
<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption" color="inherit">{label}</Typography>
<span style={{ color: underrunError ? RED_COLOR : GREEN_COLOR }}>
<Typography variant="caption" color="inherit">
XRuns:&nbsp;{status.underruns + ""}&nbsp;&nbsp;
react/src/LoadPluginDialog.tsx
+2 -2
View File
@@ -86,7 +86,7 @@ const pluginGridStyles = (theme: Theme) => createStyles({
justifyContent: "space-between",
paddingLeft: "24px",
paddingRight: "48px",
background: theme.palette.background.paper,
},
paper: {
position: "relative",
@@ -602,7 +602,7 @@ export const LoadPluginDialog =
<SelectHoverBackground selected={value.uri === this.state.selected_uri} showHover={true} />
<div className={classes.content}>
<div className={classes.iconBorder} >
<PluginIcon pluginType={value.plugin_type} pluginUri={value.uri} size={24} />
<PluginIcon pluginType={value.plugin_type} size={24} opacity={0.6} />
</div>
<div className={classes.content2}>
<div className={classes.label} style={{ display: "flex", flexFlow: "row nowrap", alignItems: "center" }} >
react/src/Lv2Plugin.tsx
+78 -3
View File
@@ -204,6 +204,42 @@ export class UiPropertyNotification {
plugin: string = "";
protocol: string = "";
};
export class UiFrequencyPlot {
deserialize(input: any): UiFrequencyPlot
{
this.patchProperty = input.patchProperty;
this.index = input.index;
this.portGroup = input.portGroup;
this.xLeft = input.xLeft;
this.xRight = input.xRight;
this.xLog = input.xLog;
this.yTop = input.yTop;
this.yBottom = input.yBottom;
this.width = input.width;
return this;
}
static deserialize_array(input: any): UiFrequencyPlot[]
{
let result: UiFrequencyPlot[] = [];
for (let i = 0; i < input.length; ++i)
{
result[i] = new UiFrequencyPlot().deserialize(input[i]);
}
return result;
}
patchProperty: string = "";
index: number = -1;
portGroup: string = "";
xLeft: number = -1;
xRight: number = -1;
xLog: boolean = true;
yTop: number = -1;
yBottom: number = -1;
width: number = -1;
};
export class UiFileProperty {
deserialize(input: any): UiFileProperty
@@ -253,6 +289,10 @@ export class UiFileProperty {
{
return true;
}
if (fileType.fileExtension === "*" || fileType.fileExtension === "")
{
return true;
}
}
return false;
}
@@ -270,6 +310,8 @@ export class Lv2Plugin implements Deserializable<Lv2Plugin> {
{
this.uri = input.uri;
this.name = input.name;
this.brand = input.name? input.name: "";
this.label = input.label? input.label: this.name;
this.plugin_class = input.plugin_class;
this.supported_features = input.supported_features;
this.required_features = input.required_features;
@@ -285,6 +327,13 @@ export class Lv2Plugin implements Deserializable<Lv2Plugin> {
} else {
this.fileProperties = [];
}
if (input.frequencyPlots)
{
this.frequencyPlots = UiFrequencyPlot.deserialize_array(input.frequencyPlots)
} else {
this.frequencyPlots = [];
}
if (input.uiPortNotifications)
{
this.uiPortNotifications = UiPropertyNotification.deserialize_array(input.uiPortNotifications);
@@ -297,6 +346,8 @@ export class Lv2Plugin implements Deserializable<Lv2Plugin> {
uri: string = "";
name: string = "";
brand: string = "";
label: string = "";
plugin_class: string = "";
supported_features: string[] = Lv2Plugin.EmptyFeatures;
required_features: string[] = Lv2Plugin.EmptyFeatures;
@@ -306,7 +357,8 @@ export class Lv2Plugin implements Deserializable<Lv2Plugin> {
comment: string = "";
ports: Port[] = Port.EmptyPorts;
port_groups: PortGroup[] = [];
fileProperties: UiFileProperty[] = [];
fileProperties: UiFileProperty[] = [];
frequencyPlots: UiFrequencyPlot[] = [];
uiPortNotifications: UiPropertyNotification[] = [];
}
@@ -375,7 +427,19 @@ export enum PluginType {
WaveshaperPlugin = "WaveshaperPlugin",
// psuedo plugin type for the Amps node of the filter dialog.
PiPedalAmpsNode = "PiPedalAmpsNode"
PiPedalAmpsNode = "PiPedalAmpsNode",
// pseudo plugin types for splitter.
SplitA = "SplitA",
SplitB = "SplitB", //"img/fx_split_b.svg";
SplitMix = "SplitMix", //SplitMix; //"img/fx_dial.svg";
SplitLR = "SplitLR", //"img/fx_dial.svg";
// psuedo plugin type for misc icons.
ErrorPlugin = "ErrorPlugin",
Terminal = "Terminal", //"img/fx_terminal.svg";
}
@@ -656,6 +720,8 @@ export class UiPlugin implements Deserializable<UiPlugin> {
{
this.uri = input.uri;
this.name = input.name;
this.brand = input.brand ? input.brand: "";
this.label = input.label? input.label: this.name;
this.plugin_type = input.plugin_type as PluginType;
this.plugin_display_type = input.plugin_display_type;
this.author_name = input.author_name;
@@ -673,6 +739,12 @@ export class UiPlugin implements Deserializable<UiPlugin> {
} else {
this.fileProperties = [];
}
if (input.frequencyPlots)
{
this.frequencyPlots = UiFrequencyPlot.deserialize_array(input.frequencyPlots)
} else {
this.frequencyPlots = [];
}
this.is_vst3 = input.is_vst3;
return this;
@@ -726,6 +798,8 @@ export class UiPlugin implements Deserializable<UiPlugin> {
uri: string = "";
name: string = "";
brand: string = "";
label: string = "";
plugin_type: PluginType = PluginType.InvalidPlugin;
plugin_display_type: string = "";
author_name: string = "";
@@ -737,7 +811,8 @@ export class UiPlugin implements Deserializable<UiPlugin> {
description: string = "";
controls: UiControl[] = [];
port_groups: PortGroup[] = [];
fileProperties: UiFileProperty[] = [];
fileProperties: UiFileProperty[] = [];
frequencyPlots: UiFrequencyPlot[] = [];
is_vst3 : boolean = false;
}
react/src/MainPage.tsx
+8 -5
View File
@@ -45,7 +45,9 @@ import PluginInfoDialog from './PluginInfoDialog';
import { GetControlView } from './ControlViewFactory';
import MidiBindingsDialog from './MidiBindingsDialog';
import PluginPresetSelector from './PluginPresetSelector';
import {ReactComponent as OldDeleteIcon} from "./svg/old_delete_outline_24dp.svg";
import {ReactComponent as MidiIcon} from "./svg/ic_midi.svg";
import isDarkMode from './DarkMode';
const SPLIT_CONTROLBAR_THRESHHOLD = 650;
@@ -461,7 +463,7 @@ export const MainPage =
</div>
<div style={{ flex: "0 0 auto", display: (canInsert || canAppend) ? "block" : "none", paddingRight: 8 }}>
<IconButton onClick={(e) => { this.onAddClick(e) }} size="large">
<AddIcon />
<AddIcon style={{height: 24, width: 24,fill: this.props.theme.palette.text.primary, opacity: 0.6}} />
</IconButton>
<Menu
id="add-menu"
@@ -482,7 +484,7 @@ export const MainPage =
<IconButton
onClick={() => { this.onDeletePedal(pedalboardItem?.instanceId ?? -1) }}
size="large">
<img src="/img/old_delete_outline_black_24dp.svg" alt="Delete" style={{ width: 24, height: 24, opacity: 0.6 }} />
<OldDeleteIcon style={{height: 24, width: 24,fill: this.props.theme.palette.text.primary, opacity: 0.6}} />
</IconButton>
</div>
<div style={{ flex: "0 0 auto" }}>
@@ -493,7 +495,8 @@ export const MainPage =
onClick={this.onLoadClick}
disabled={this.state.selectedPedal === -1 || (!canLoad) || (this.getSelectedPedalboardItem()?.isSplit() ?? true)}
startIcon={<InputIcon />}
style={{ textTransform: "none" }}
style={{ textTransform: "none",
background: (isDarkMode() ? "#6750A4": undefined) }}
>
Load
</Button>
@@ -502,7 +505,7 @@ export const MainPage =
<IconButton
onClick={(e) => { this.handleMidiConfiguration(instanceId); }}
size="large">
<img src="img/ic_midi.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="Midi configuration" />
<MidiIcon style={{height: 24, width: 24,fill: this.props.theme.palette.text.primary, opacity: 0.6}} />
</IconButton>
</div>
react/src/PedalboardView.tsx
+27 -24
View File
@@ -26,13 +26,15 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { PluginType } from './Lv2Plugin';
import ButtonBase from '@mui/material/ButtonBase';
import Typography from '@mui/material/Typography';
import { SelectIcon } from './PluginIcon';
import PluginIcon, {SelectIconUri} from './PluginIcon';
import { SelectHoverBackground } from './SelectHoverBackground';
import SvgPathBuilder from './SvgPathBuilder';
import Draggable from './Draggable'
import Rect from './Rect';
import {PiPedalStateError} from './PiPedalError';
import Utility from './Utility'
import Utility from './Utility';
import isDarkMode from './DarkMode';
import {
Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
} from './Pedalboard';
@@ -44,8 +46,9 @@ const END_CONTROL = Pedalboard.END_CONTROL;
const START_PEDALBOARD_ITEM_URI = Pedalboard.START_PEDALBOARD_ITEM_URI;
const END_PEDALBOARD_ITEM_URI = Pedalboard.END_PEDALBOARD_ITEM_URI;
const ENABLED_CONNECTOR_COLOR = "#666";
const DISABLED_CONNECTOR_COLOR = "#CCC";
const ENABLED_CONNECTOR_COLOR = isDarkMode() ? "#CCC": "#666";
const DISABLED_CONNECTOR_COLOR = isDarkMode() ? "#666": "#CCC";
const CELL_WIDTH: number = 96;
@@ -129,14 +132,14 @@ const pedalboardStyles = (theme: Theme) => createStyles({
alignItems: "center",
justifyContent: "center",
background: theme.palette.background.paper,
background: theme.palette.background.default,
marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2,
marginRight: (CELL_WIDTH - FRAME_SIZE) / 2,
marginTop: (CELL_HEIGHT - FRAME_SIZE) / 2,
marginBottom: (CELL_HEIGHT - FRAME_SIZE) / 2,
width: FRAME_SIZE,
height: FRAME_SIZE,
border: "1pt #666 solid",
border: isDarkMode()? "1pt #AAA solid": "1pt #666 solid",
borderRadius: 6
},
borderlessIconFrame: {
@@ -237,6 +240,7 @@ class PedalLayout {
static Start(): PedalLayout {
let t: PedalLayout = new PedalLayout();
t.uri = START_PEDALBOARD_ITEM_URI;
t.pluginType = PluginType.Terminal;
t.iconUrl = TERMINAL_ICON_URL;
t.numberOfInputs = 0;
t.numberOfOutputs = 2;
@@ -244,7 +248,7 @@ class PedalLayout {
}
static End(): PedalLayout {
let t: PedalLayout = new PedalLayout();
t.pluginType = PluginType.UtilityPlugin;
t.pluginType = PluginType.Terminal;
t.uri = END_PEDALBOARD_ITEM_URI;
t.iconUrl = TERMINAL_ICON_URL;
t.numberOfInputs = 2;
@@ -272,7 +276,7 @@ class PedalLayout {
} else if (pedalItem.isEmpty()) {
this.pluginType = PluginType.UtilityPlugin;
this.pluginType = PluginType.None;
this.iconUrl = EMPTY_ICON_URL;
this.numberOfInputs = 2;
this.numberOfOutputs = 2;
@@ -293,13 +297,13 @@ class PedalLayout {
let uiPlugin = model.getUiPlugin(pedalItem.uri);
if (uiPlugin != null) {
this.pluginType = uiPlugin.plugin_type;
this.iconUrl = SelectIcon(uiPlugin.plugin_type,uiPlugin.uri);
this.name = uiPlugin.name;
this.iconUrl = SelectIconUri(uiPlugin.plugin_type);
this.name = uiPlugin.label;
this.numberOfInputs = Math.max(uiPlugin.audio_inputs,2);
this.numberOfOutputs = Math.max(uiPlugin.audio_outputs,2);
} else {
// default to empty plugin.
this.pluginType = PluginType.UtilityPlugin;
this.pluginType = PluginType.ErrorPlugin;
this.name = pedalItem.pluginName??"#error";
this.iconUrl = ERROR_ICON_URL;
this.numberOfInputs = 2;
@@ -525,22 +529,22 @@ const PedalboardView =
}
}
getSplitterIcon(layoutItem: PedalLayout) {
getSplitterIcon(layoutItem: PedalLayout): PluginType {
if (layoutItem.pedalItem === undefined) {
throw new Error("Invalid splitter");
}
let split = layoutItem.pedalItem as PedalboardSplitItem;
if (split.getSplitType() === SplitType.Ab) {
if (split.isASelected()) {
return "img/fx_split_a.svg";
return PluginType.SplitA;
} else {
return "img/fx_split_b.svg";
return PluginType.SplitB;
}
} else if (split.getSplitType() === SplitType.Mix) {
return "img/fx_dial.svg";
return PluginType.SplitMix; //"img/fx_dial.svg";
} else {
return "img/fx_lr.svg";
return PluginType.SplitLR; //"img/fx_lr.svg";
}
}
@@ -675,7 +679,7 @@ const PedalboardView =
event.preventDefault();
event.stopPropagation();
if (!Utility.isTouchDevice()) {
if (!Utility.needsZoomedControls()) {
if (this.props.onDoubleClick && instanceId) {
this.props.onDoubleClick(instanceId);
}
@@ -903,7 +907,7 @@ const PedalboardView =
throw new PiPedalStateError("scroll container not found.");
}
pedalButton(instanceId: number, iconUrl: string, draggable: boolean, enabled: boolean,hasBorder: boolean = true): ReactNode {
pedalButton(instanceId: number, iconType: PluginType, draggable: boolean, enabled: boolean,hasBorder: boolean = true): ReactNode {
let classes = this.props.classes;
return (
<div className={hasBorder? classes.iconFrame : classes.borderlessIconFrame} onContextMenu={(e) => { e.preventDefault(); }}>
@@ -917,8 +921,7 @@ const PedalboardView =
<Draggable draggable={draggable} getScrollContainer={() => this.getScrollContainer()}
onDragEnd={(x, y) => { this.onDragEnd(instanceId, x, y) }}
>
<img src={iconUrl} className={classes.pedalIcon} alt="Pedal" draggable={false}
style={{opacity: enabled? 0.99: 0.6}} />
<PluginIcon pluginType={iconType} size={24} opacity={enabled? 0.99:0.6} />
</Draggable>
</SelectHoverBackground>
</ButtonBase>
@@ -982,7 +985,7 @@ const PedalboardView =
result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
<div className={classes.splitStart} >
{this.pedalButton(START_CONTROL, item.iconUrl, false,true,false)}
{this.pedalButton(START_CONTROL, item.pluginType,false,true,false)}
</div>
</div>);
break;
@@ -990,7 +993,7 @@ const PedalboardView =
result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
<div className={classes.splitStart} >
{this.pedalButton(END_CONTROL, item.iconUrl, false,true,false)}
{this.pedalButton(END_CONTROL, item.pluginType, false,true,false)}
</div>
</div>);
break;
@@ -1011,11 +1014,11 @@ const PedalboardView =
}}>
<Typography variant="caption" display="block" noWrap={true}
style={{ width: CELL_WIDTH - 4, textAlign: "center", flex: "0 1 auto" }}
>{item.pedalItem?.pluginName}</Typography>
>{item.name}</Typography>
</div>
)
result.push(<div key={this.renderKey++} className={classes.pedalItem} style={{ left: item.bounds.x, top: item.bounds.y }} >
{this.pedalButton(item.pedalItem?.instanceId ?? -1, item.iconUrl, !item.isEmpty(), item.pedalItem?.isEnabled ?? false)}
{this.pedalButton(item.pedalItem?.instanceId ?? -1, item.pluginType, !item.isEmpty(), item.pedalItem?.isEnabled ?? false)}
</div>);
react/src/PiPedalModel.tsx
+38 -3
View File
@@ -38,7 +38,12 @@ import GovernorSettings from './GovernorSettings';
import WifiChannel from './WifiChannel';
import AlsaDeviceInfo from './AlsaDeviceInfo';
import { AndroidHostInterface, FakeAndroidHost } from './AndroidHost';
import isDarkMode, {setDarkMode} from './DarkMode';
export enum ColorTheme {
Light,
Dark
};
export enum State {
Loading,
@@ -470,8 +475,11 @@ export class PiPedalModel //implements PiPedalModel
let value = body as number;
this._setInputVolume(value,false);
} else if (message === "onLv2StateChanged") {
let instanceId = body as number;
this.onLv2StateChanged(instanceId);
let instanceId = body.instanceId as number;
let state = body.state as [boolean,any];
this.onLv2StateChanged(instanceId,state);
} else if (message === "onVst3ControlChanged") {
let controlChangedBody = body as Vst3ControlChangedBody;
this._setVst3PedalboardControlValue(
@@ -665,6 +673,10 @@ export class PiPedalModel //implements PiPedalModel
this.getWebSocket().request<number>("hello")
.then(clientId => {
this.clientId = clientId;
return this.getWebSocket().request<any>("plugins");
})
.then(data => {
this.ui_plugins.set(UiPlugin.deserialize_array(data));
return this.getWebSocket().request<Pedalboard>("currentPedalboard");
})
.then(data => {
@@ -1116,7 +1128,9 @@ export class PiPedalModel //implements PiPedalModel
}
}
private onLv2StateChanged(instanceId: number): void {
private onLv2StateChanged(instanceId: number, state: [boolean,any]): void {
let item = this.pedalboard.get().getItem(instanceId);
item.lv2State = state;
for (let item of this.stateChangedListeners) {
if (item.instanceId === instanceId) {
item.onStateChanged(instanceId);
@@ -2531,6 +2545,27 @@ export class PiPedalModel //implements PiPedalModel
return nullCast(this.webSocket).request<number>("newPreset");
}
getTheme(): ColorTheme {
return isDarkMode() ? ColorTheme.Dark: ColorTheme.Light;
}
setTheme(value: ColorTheme) {
if (this.getTheme() !== value)
{
setDarkMode(value === ColorTheme.Dark);
this.reloadPage();
}
}
reloadRequested: boolean = false;
reloadPage() {
this.reloadRequested = true;
// eslint-disable-next-line no-restricted-globals
location.reload();
}
};
let instance: PiPedalModel | undefined = undefined;
react/src/PluginControl.tsx
+24 -24
View File
@@ -1,4 +1,4 @@
// Copyright (c) 2022 Robin Davies
// Copyright (c) 2022 Robin Davies
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
@@ -30,7 +30,7 @@ import Switch from '@mui/material/Switch';
import Utility, {nullCast} from './Utility';
import MenuItem from '@mui/material/MenuItem';
import {PiPedalModel,PiPedalModelFactory} from './PiPedalModel';
import {ReactComponent as DialIcon} from './svg/fx_dial.svg';
const MIN_ANGLE = -135;
const MAX_ANGLE = 135;
@@ -72,8 +72,8 @@ const styles = (theme: Theme) => createStyles({
right: 0,
bottom: 4,
textAlign: "center",
background: "white",
color: "#666",
background: theme.mainBackground,
color: theme.palette.text.secondary,
// zIndex: -1,
}
});
@@ -98,7 +98,7 @@ const PluginControl =
{
frameRef: React.RefObject<HTMLDivElement>;
imgRef: React.RefObject<HTMLImageElement>;
imgRef: React.RefObject<SVGSVGElement>;
inputRef: React.RefObject<HTMLInputElement>;
selectRef: React.RefObject<HTMLSelectElement>;
@@ -137,7 +137,7 @@ const PluginControl =
this.onInputKeyPress = this.onInputKeyPress.bind(this);
}
isTouchDevice(): boolean {
return Utility.isTouchDevice();
return Utility.needsZoomedControls();
}
showZoomedControl()
@@ -243,7 +243,7 @@ const PluginControl =
e.preventDefault();
}
isValidPointer(e: PointerEvent<HTMLImageElement>): boolean {
isValidPointer(e: PointerEvent<SVGSVGElement>): boolean {
if (e.pointerType === "mouse") {
return e.button === 0;
} else if (e.pointerType === "pen") {
@@ -257,9 +257,9 @@ const PluginControl =
touchDown: boolean = false;
touchIdentifier: number = -1;
onTouchStart(e: TouchEvent<HTMLImageElement>) {
onTouchStart(e: TouchEvent<SVGSVGElement>) {
}
onTouchMove(e: TouchEvent<HTMLImageElement>) {
onTouchMove(e: TouchEvent<SVGSVGElement>) {
// e.preventDefault();
e.stopPropagation(); // cancels scroll!!!
@@ -282,7 +282,7 @@ const PluginControl =
pointerId: number = 0;
pointerType: string = "";
isCapturedPointer(e: PointerEvent<HTMLImageElement>): boolean {
isCapturedPointer(e: PointerEvent<SVGSVGElement>): boolean {
return this.mouseDown
&& e.pointerId === this.pointerId
&& e.pointerType === this.pointerType;
@@ -294,9 +294,9 @@ const PluginControl =
dRange: number = 0;
pointersDown: number = 0;
captureElement?: HTMLElement = undefined;
captureElement?: SVGSVGElement = undefined;
onPointerDown(e: PointerEvent<HTMLImageElement>): void {
onPointerDown(e: PointerEvent<SVGSVGElement>): void {
if (!this.mouseDown && this.isValidPointer(e)) {
e.preventDefault();
e.stopPropagation();
@@ -351,7 +351,7 @@ const PluginControl =
}
onPointerLostCapture(e: PointerEvent<HTMLImageElement>) {
onPointerLostCapture(e: PointerEvent<SVGSVGElement>) {
if (this.isCapturedPointer(e)) {
--this.pointersDown;
@@ -361,7 +361,7 @@ const PluginControl =
}
updateRange(e: PointerEvent<HTMLImageElement>): number {
updateRange(e: PointerEvent<SVGSVGElement>): number {
let ultraHigh = false;
let high = false;
@@ -396,7 +396,7 @@ const PluginControl =
this.lastX = e.clientX;
return this.dRange;
}
onPointerUp(e: PointerEvent<HTMLImageElement>) {
onPointerUp(e: PointerEvent<SVGSVGElement>) {
if (this.isCapturedPointer(e)) {
--this.pointersDown;
@@ -414,7 +414,7 @@ const PluginControl =
}
}
releaseCapture(e: PointerEvent<HTMLImageElement>)
releaseCapture(e: PointerEvent<SVGSVGElement>)
{
let img = this.imgRef.current;
@@ -437,7 +437,7 @@ const PluginControl =
}
onPointerMove(e: PointerEvent<HTMLImageElement>): void {
onPointerMove(e: PointerEvent<SVGSVGElement>): void {
if (this.isCapturedPointer(e)) {
e.preventDefault();
let dRange = this.updateRange(e)
@@ -547,7 +547,7 @@ const PluginControl =
);
} else {
return (
<Select variant="standard"
<Select variant="standard"
ref={this.selectRef}
value={control.clampSelectValue(value)}
onChange={this.onSelectChanged}
@@ -556,7 +556,7 @@ const PluginControl =
id: 'id' + control.symbol,
style: { fontSize: FONT_SIZE }
}}
style={{ marginLeft: 4, marginRight: 4, width: 140 }}
style={{ marginLeft: 4, marginRight: 4, width: 140,fontSize: 14 }}
>
{control.scale_points.map((scale_point: ScalePoint) => (
<MenuItem key={scale_point.value} value={scale_point.value}>{scale_point.label}</MenuItem>
@@ -651,6 +651,7 @@ const PluginControl =
return (<div>#Error</div>);
}
let dialColor = this.props.theme.palette.text.primary;
let control: UiControl = t;
this.uiControl = control;
let value = this.props.value;
@@ -684,13 +685,12 @@ const PluginControl =
this.makeSelect(control, value)
) : (
<div style={{ flex: "0 1 auto" }}>
<img ref={this.imgRef} src="img/fx_dial.svg"
style={{ overscrollBehavior: "none", touchAction: "none",
<DialIcon ref={this.imgRef}
style={{ overscrollBehavior: "none", touchAction: "none", fill: dialColor,
width: 36, height: 36, opacity: DEFAULT_OPACITY, transform: this.getRotationTransform() }}
draggable="true"
onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}
onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} onPointerMoveCapture={this.onPointerMove} onDrag={this.onDrag}
alt={control.name}
/>
</div>
)
@@ -736,7 +736,7 @@ const PluginControl =
);
}
/*
isSamePointer(PointerEvent<HTMLImageElement> e): boolean
isSamePointer(PointerEvent<SVGSVGElement> e): boolean
{
return e.pointerId === this.pointerId
&& e.pointerType === this.pointerType;
react/src/PluginControlView.tsx
+57 -5
View File
@@ -23,7 +23,7 @@ import { WithStyles } from '@mui/styles';
import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { UiPlugin, UiControl, UiFileProperty, ScalePoint } from './Lv2Plugin';
import { UiPlugin, UiControl, UiFileProperty,UiFrequencyPlot, ScalePoint } from './Lv2Plugin';
import {
Pedalboard, PedalboardItem, ControlValue
} from './Pedalboard';
@@ -39,6 +39,7 @@ import FilePropertyDialog from './FilePropertyDialog';
import JsonAtom from './JsonAtom';
import PluginOutputControl from './PluginOutputControl';
import Units from './Units';
import ToobFrequencyResponseView from './ToobFrequencyResponseView';
export const StandardItemSize = { width: 80, height: 110 };
@@ -78,6 +79,7 @@ let endPluginInfo: UiPlugin =
makeIoPluginInfo("Output", Pedalboard.END_PEDALBOARD_ITEM_URI);
const styles = (theme: Theme) => createStyles({
frame: {
display: "block",
@@ -96,7 +98,7 @@ const styles = (theme: Theme) => createStyles({
paddingRight: 4,
paddingBottom: 24,
left: 0,
background: "white",
background: theme.mainBackground,
zIndex: 3
},
@@ -106,7 +108,7 @@ const styles = (theme: Theme) => createStyles({
marginRight: 22,
paddingLeft: 4,
paddingBottom: 24,
background: "white",
background: theme.mainBackground,
zIndex: 3
},
@@ -116,7 +118,7 @@ const styles = (theme: Theme) => createStyles({
paddingRight: 22,
paddingLeft: 12,
paddingBottom: 24,
background: "white",
background: theme.mainBackground,
zIndex: 3
},
@@ -188,7 +190,7 @@ const styles = (theme: Theme) => createStyles({
portGroupTitle: {
position: "absolute",
top: -15,
background: "white",
background: theme.mainBackground,
textOverflow: "ellipsis",
minWidth: 0,
marginLeft: 20,
@@ -334,6 +336,14 @@ const PluginControlView =
/>
));
}
makeFrequencyPlotUI(frequencyPlot: UiFrequencyPlot): ReactNode {
return ((
<ToobFrequencyResponseView instanceId={this.props.instanceId}
propertyName={frequencyPlot.patchProperty}
width={frequencyPlot.width}
/>
));
}
makeStandardControl(uiControl: UiControl, controlValues: ControlValue[]): ReactNode {
let symbol = uiControl.symbol;
if (!uiControl.is_input) {
@@ -444,6 +454,48 @@ const PluginControlView =
);
}
}
for (let i = 0; i < plugin.frequencyPlots.length; ++i) {
let frequencyPlot = plugin.frequencyPlots[i];
let frequencyPlotUi = this.makeFrequencyPlotUI(frequencyPlot);
if (frequencyPlot.portGroup !== "" && plugin.getPortGroupByUri(frequencyPlot.portGroup)) {
let portGroup = nullCast(plugin.getPortGroupByUri(frequencyPlot.portGroup));
let controlGroup = portGroupMap[portGroup.symbol];
if (controlGroup) {
let insertPosition = controlGroup.indexes.length;
if (frequencyPlot.index !== -1) {
for (let i = 0; i < controlGroup.controls.length; ++i) {
if (controlGroup.indexes[i] >= frequencyPlot.index) {
insertPosition = i;
break;
}
}
}
let index = frequencyPlot.index !== -1 ? frequencyPlot.index : 100;
controlGroup.controls.splice(insertPosition, 0, frequencyPlotUi);
controlGroup.indexes.splice(insertPosition, 0, index);
} else {
let index = frequencyPlot.index !== -1 ? frequencyPlot.index : 100;
let controlGroup = new ControlGroup(
portGroup.name,
[index],
[frequencyPlotUi]);
result.push(
controlGroup
);
portGroupMap[portGroup.symbol] = controlGroup;
}
} else if (frequencyPlot.index !== -1) {
result.splice(frequencyPlot.index, 0, frequencyPlotUi);
} else {
result.push(
frequencyPlotUi
);
}
}
return result;
}
react/src/PluginIcon.tsx
+141 -6
View File
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
// Copyright (c) 2022 Robin Davies
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
@@ -25,21 +26,149 @@ import { PiPedalModelFactory } from "./PiPedalModel";
import { PluginType } from './Lv2Plugin';
import { ReactComponent as FxSimulatorIcon } from './svg/fx_simulator.svg';
import { ReactComponent as FxPhaserIcon } from './svg/fx_phaser.svg';
import { ReactComponent as FxFilterIcon } from './svg/fx_filter.svg';
import { ReactComponent as FxDelayIcon } from './svg/fx_delay.svg';
import { ReactComponent as FxAmplifierIcon } from './svg/fx_amplifier.svg';
import { ReactComponent as FxChorusIcon } from './svg/fx_chorus.svg';
import { ReactComponent as FxModulatorIcon } from './svg/fx_modulator.svg';
import { ReactComponent as FxReverbIcon } from './svg/fx_reverb.svg';
import { ReactComponent as FxDistortionIcon } from './svg/fx_distortion.svg';
import { ReactComponent as FxFlangerIcon } from './svg/fx_flanger.svg';
import { ReactComponent as FxFilterHpIcon } from './svg/fx_filter_hp.svg';
import { ReactComponent as FxParametricEqIcon } from './svg/fx_parametric_eq.svg';
import { ReactComponent as FxEqIcon } from './svg/fx_eq.svg';
import { ReactComponent as FxUtilityIcon } from './svg/fx_utility.svg';
import { ReactComponent as FxCompressorIcon } from './svg/fx_compressor.svg';
import { ReactComponent as FxLimiterIcon } from './svg/fx_limiter.svg';
import { ReactComponent as FxConstantIcon } from './svg/fx_constant.svg';
import { ReactComponent as FxFunctionIcon } from './svg/fx_function.svg';
import { ReactComponent as FxGateIcon } from './svg/fx_gate.svg';
import { ReactComponent as FxConverterIcon } from './svg/fx_converter.svg';
import { ReactComponent as FxGeneratorIcon } from './svg/fx_generator.svg';
import { ReactComponent as FxOscillatorIcon } from './svg/fx_oscillator.svg';
import { ReactComponent as FxInstrumentIcon } from './svg/fx_instrument.svg';
import { ReactComponent as FxMixerIcon } from './svg/fx_mixer.svg';
import { ReactComponent as FxPitchIcon } from './svg/fx_pitch.svg';
import { ReactComponent as FxSpatialIcon } from './svg/fx_spatial.svg';
import { ReactComponent as FxSpectralIcon } from './svg/fx_spectral.svg';
import { ReactComponent as FxAnalyzerIcon } from './svg/fx_analyzer.svg';
import { ReactComponent as FxPluginIcon } from './svg/fx_plugin.svg';
import { ReactComponent as SplitAIcon } from './svg/fx_split_a.svg';
import { ReactComponent as SplitBIcon } from './svg/fx_split_b.svg';
import { ReactComponent as SplitMixIcon } from './svg/fx_dial.svg';
import { ReactComponent as SplitLrIcon } from './svg/fx_lr.svg';
import { ReactComponent as FxEmptyIcon } from './svg/fx_empty.svg';
import { ReactComponent as FxTerminalIcon } from './svg/fx_terminal.svg';
const styles = (theme: Theme) =>
createStyles({
icon: {
width: "24px",
height: "24px",
margin: "0px",
opacity: "0.6"
opacity: "0.6",
color: theme.palette.text.primary,
fill: theme.palette.text.primary
},
});
export interface PluginIconProps extends WithStyles<typeof styles> {
size?: number;
opacity?: number;
offsetY?: number;
pluginType: PluginType;
pluginUri: string;
}
export function SelectSvgIcon(plugin_type: PluginType, className: string, size: number = 24, opacity: number = 1.0) {
let myStyle = { width: size, height: size, opacity: opacity };
switch (plugin_type) {
case PluginType.PhaserPlugin:
return <FxPhaserIcon className={className} style={myStyle} />;
case PluginType.FilterPlugin:
return <FxFilterIcon className={className} style={myStyle} />;
case PluginType.DelayPlugin:
return <FxDelayIcon className={className} style={myStyle} />;
case PluginType.SimulatorPlugin:
return <FxSimulatorIcon className={className} style={myStyle} />;
case PluginType.AmplifierPlugin:
return <FxAmplifierIcon className={className} style={myStyle} />;
case PluginType.ChorusPlugin:
return <FxChorusIcon className={className} style={myStyle} />;
case PluginType.ModulatorPlugin:
case PluginType.CombPlugin:
return <FxModulatorIcon className={className} style={myStyle} />;
case PluginType.ReverbPlugin:
return <FxReverbIcon className={className} style={myStyle} />;
case PluginType.DistortionPlugin:
return <FxDistortionIcon className={className} style={myStyle} />;
case PluginType.FlangerPlugin:
return <FxFlangerIcon className={className} style={myStyle} />;
case PluginType.LowpassPlugin:
return <FxFilterIcon className={className} style={myStyle} />;
case PluginType.HighpassPlugin:
return <FxFilterHpIcon className={className} style={myStyle} />;
case PluginType.ParaEQPlugin:
return <FxParametricEqIcon className={className} style={myStyle} />;
case PluginType.MultiEQPlugin:
case PluginType.EQPlugin:
return <FxEqIcon className={className} style={myStyle} />;
case PluginType.UtilityPlugin:
return <FxUtilityIcon className={className} style={myStyle} />;
case PluginType.CompressorPlugin:
case PluginType.DynamicsPlugin:
case PluginType.ExpanderPlugin:
return <FxCompressorIcon className={className} style={myStyle} />;
case PluginType.LimiterPlugin:
return <FxLimiterIcon className={className} style={myStyle} />;
case PluginType.ConstantPlugin:
return <FxConstantIcon className={className} style={myStyle} />;
case PluginType.FunctionPlugin:
case PluginType.WaveshaperPlugin:
return <FxFunctionIcon className={className} style={myStyle} />;
case PluginType.GatePlugin:
return <FxGateIcon className={className} style={myStyle} />;
case PluginType.ConverterPlugin:
return <FxConverterIcon className={className} style={myStyle} />;
case PluginType.GeneratorPlugin:
return <FxGeneratorIcon className={className} style={myStyle} />;
case PluginType.OscillatorPlugin:
return <FxOscillatorIcon className={className} style={myStyle} />;
case PluginType.InstrumentPlugin:
return <FxInstrumentIcon className={className} style={myStyle} />;
case PluginType.MixerPlugin:
return <FxMixerIcon className={className} style={myStyle} />;
case PluginType.PitchPlugin:
return <FxPitchIcon className={className} style={myStyle} />;
case PluginType.SpatialPlugin:
return <FxSpatialIcon className={className} style={myStyle} />;
case PluginType.SpectralPlugin:
return <FxSpectralIcon className={className} style={myStyle} />;
case PluginType.AnalyserPlugin:
return <FxAnalyzerIcon className={className} style={myStyle} />;
case PluginType.SplitA:
return <SplitAIcon className={className} style={myStyle} />;
case PluginType.SplitB:
return <SplitBIcon className={className} style={myStyle} />;
case PluginType.SplitMix:
return <SplitMixIcon className={className} style={myStyle} />;
case PluginType.SplitLR:
return <SplitLrIcon className={className} style={myStyle} />;
case PluginType.None:
return <FxEmptyIcon className={className} style={myStyle} />;
case PluginType.Terminal:
return <FxTerminalIcon className={className} style={myStyle} />;
default:
case PluginType.Plugin:
return <FxPluginIcon className={className} style={myStyle} />;
}
}
export function SelectBaseIcon(plugin_type: PluginType): string {
switch (plugin_type) {
@@ -66,7 +195,7 @@ export function SelectBaseIcon(plugin_type: PluginType): string {
return "fx_flanger.svg";
case PluginType.LowpassPlugin:
return "fx_filter.svg";
case PluginType.HighpassPlugin:
case PluginType.HighpassPlugin:
return "fx_filter_hp.svg";
case PluginType.ParaEQPlugin:
return "fx_parametric_eq.svg";
@@ -141,20 +270,26 @@ function hashString(str: string): number {
return hash;
}
export function SelectIcon(plugin_type: PluginType, itemUri: string) {
export function SelectIconUri(plugin_type: PluginType) {
let icon = SelectBaseIcon(plugin_type);
return PiPedalModelFactory.getInstance().svgImgUrl(icon);
}
const PluginIcon = withStyles(styles)((props: PluginIconProps) => {
const { classes, pluginUri, pluginType } = props;
const { classes, pluginType, opacity } = props;
let size: number = 24;
if (props.size) size = props.size;
let topVal: number = (props.offsetY ?? 0);
let svgIcon = SelectSvgIcon(pluginType, classes.icon, size, opacity);
if (svgIcon) {
return svgIcon;
}
// colored icons that don't have dark/light variants.
return (
<img src={SelectIcon(pluginType, pluginUri)} className={classes.icon} style={{ width: size, height: size, color: "#F88", position: "relative", top: topVal }} alt={pluginType as string}
<img src={SelectIconUri(pluginType)} className={classes.icon} style={{ width: size, height: size, position: "relative", top: topVal, opacity: " " }} alt=''
/>);
// let maskText = "url(" + SelectIcon(pluginType, pluginUri) + ") no-repeat center";
react/src/PluginInfoDialog.tsx
+6 -2
View File
@@ -54,6 +54,10 @@ const styles = (theme: Theme) =>
top: theme.spacing(1),
color: theme.palette.grey[500],
},
icon: {
fill: theme.palette.text.primary,
opacity: 0.6
}
});
};
export interface PluginInfoDialogTitleProps extends WithStyles<typeof styles> {
@@ -228,14 +232,14 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
style={{ display: (props.plugin_uri !== "") ? "inline-flex" : "none" }}
onClick={handleClickOpen}
size="large">
<InfoOutlinedIcon />
<InfoOutlinedIcon className={classes.icon} color='inherit' />
</IconButton>
{open && (
<Dialog onClose={handleClose} open={open} fullWidth >
<MuiDialogTitle >
<div style={{ display: "flex", flexDirection: "row", alignItems: "start", flexWrap: "nowrap" }}>
<div style={{ flex: "0 0 auto", marginRight: 16 }}>
<PluginIcon pluginType={plugin.plugin_type} pluginUri={plugin.uri} offsetY={3} />
<PluginIcon pluginType={plugin.plugin_type} offsetY={3} />
</div>
<div style={{ flex: "1 1 auto" }}>
<Typography variant="h6">{plugin.name}</Typography>
react/src/PluginOutputControl.tsx
+41
View File
@@ -25,6 +25,7 @@ import withStyles from '@mui/styles/withStyles';
import { UiControl } from './Lv2Plugin';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle,State } from './PiPedalModel';
import isDarkMode from './DarkMode';
@@ -77,11 +78,13 @@ const PluginOutputControl =
private model: PiPedalModel;
private vuRef: React.RefObject<HTMLDivElement>;
private lampRef: React.RefObject<HTMLDivElement>;
constructor(props: PluginOutputControlProps) {
super(props);
this.vuRef = React.createRef<HTMLDivElement>();
this.lampRef = React.createRef<HTMLDivElement>();
this.state = {
hasValue: false,
value: 0
@@ -130,6 +133,12 @@ const PluginOutputControl =
private animationHandle: number | undefined = undefined;
private updateValue(value: number) {
if (this.lampRef.current)
{
let control = this.props.uiControl;
let range = (value-control.min_value)/(control.max_value-control.min_value);
this.lampRef.current.style.opacity = range +"";
}
if (this.vuRef.current) {
let control = this.props.uiControl;
let range = (value-control.min_value)/(control.max_value-control.min_value);
@@ -241,6 +250,38 @@ const PluginOutputControl =
</div >
);
} else if (control.toggled_property && control.scale_points.length === 0) {
item_width = undefined;
let attachedLamp = control.name === "" || control.name === "\u00A0" ;
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width,
marginTop: 8, marginBottom: 8, marginRight: 8,marginLeft: (attachedLamp? 0: 8), height: 98
}}>
{/* TITLE SECTION */}
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8, marginLeft: 0, marginRight: 0 }}>
<Typography variant="caption" display="block" style={{
width: "100%",
textAlign: "center"
}}> {control.name === "" ? "\u00A0": control.name}</Typography>
</div>
{/* CONTROL SECTION */}
<div style={{ flex: "1 1 auto", display: "flex", justifyContent: "left", alignItems: "start", flexFlow: "row nowrap" }}>
<div style={{ width: 12, height: 12, background: isDarkMode()? "#111" : "#444", borderRadius: 5, position: "relative" }}>
<div ref={this.lampRef} style={{ width: 8, height: 8,
background: (isDarkMode()? "radial-gradient(circle at center, #F00 0, #F00 20%, #333 100%)"
: "radial-gradient(circle at center, #F44 0, #F44 40%, #644 100%)"),
opacity: 0, borderRadius: 3,margin: 2,position: "absolute" }} />
</div>
</div>
{/* LABEL/EDIT SECTION*, strictly a placeholder for visual alignment purposes.*/}
<div style={{ flex: "0 0 auto", position: "relative", width: 30, height: 27 }}>
&nbsp;
</div>
</div >
);
} else {
return (
<div style={{ display: "flex", flexDirection: "column", width: item_width, margin: 8, height: 98 }}>
react/src/PluginPresetSelector.tsx
+12 -2
View File
@@ -33,6 +33,8 @@ import {PluginUiPresets} from './PluginPreset';
import Divider from "@mui/material/Divider";
import {ReactComponent as PluginPresetsIcon} from "./svg/ic_pluginpreset.svg";
import {ReactComponent as PluginPresetIcon} from "./svg/ic_pluginpreset2.svg";
interface PluginPresetSelectorProps extends WithStyles<typeof styles> {
pluginUri?: string;
@@ -60,6 +62,12 @@ interface PluginPresetSelectorState {
const styles = (theme: Theme) => createStyles({
itemIcon: {
width: 24, height: 24, marginRight: "4px", opacity: 0.6
},
pluginIcon: {
width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary
},
pluginMenuIcon: {
width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary,marginRight: 4
}
});
@@ -285,7 +293,7 @@ const PluginPresetSelector =
return (
<div >
<IconButton onClick={(e)=> this.handlePresetMenuClick(e)} size="large">
<img src="img/ic_pluginpreset.svg" style={{ width: 24, height: 24,opacity: 0.6 }} alt="Plugin Presets" />
<PluginPresetsIcon className={classes.pluginIcon}/>
</IconButton>
<Menu
id="edit-plugin-presets-menu"
@@ -310,7 +318,9 @@ const PluginPresetSelector =
this.state.presets.presets.map((preset) => {
return (<MenuItem key={preset.instanceId}
onClick={(e) => this.handleLoadPluginPreset(preset.instanceId)}
><img src="img/ic_pluginpreset2.svg" className={classes.itemIcon} alt="" />
>
<PluginPresetIcon className={classes.pluginMenuIcon}/>
{preset.label}</MenuItem>);
})
}
react/src/PluginPresetsDialog.tsx
+16 -5
View File
@@ -45,6 +45,10 @@ import RenameDialog from './RenameDialog';
import Slide, {SlideProps} from '@mui/material/Slide';
import { createStyles, Theme } from '@mui/material/styles';
import { WithStyles, withStyles} from '@mui/styles';
import {ReactComponent as PluginPresetIcon} from "./svg/ic_pluginpreset2.svg";
import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg';
import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg';
@@ -74,10 +78,16 @@ interface PluginPresetsDialogState {
const styles = (theme: Theme) => createStyles({
listIcon: {
width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary
},
dialogAppBar: {
position: 'relative',
top: 0, left: 0
},
itemBackground: {
background: theme.palette.background.paper
},
dialogActionBar: {
position: 'relative',
top: 0, left: 0,
@@ -104,7 +114,8 @@ const styles = (theme: Theme) => createStyles({
},
itemIcon: {
width: 24, height: 24, margin: 12, opacity: 0.6
width: 24, height: 24, margin: 12, opacity: 0.6,
fill: theme.palette.text.primary
},
itemLabel: {
flex: "1 1 1px",
@@ -249,7 +260,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
let classes = this.props.classes;
let selectedItem = this.state.selectedItem;
return (
<div key={presetEntry.instanceId} style={{ background: "white" }} >
<div key={presetEntry.instanceId} className="backgroundItem" >
<ButtonBase style={{ width: "100%", height: 48 }}
onClick={() => this.handleItemClick(presetEntry.instanceId)}
@@ -257,7 +268,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
<SelectHoverBackground selected={presetEntry.instanceId === selectedItem} showHover={true} />
<div className={classes.itemFrame}>
<div className={classes.iconFrame}>
<img src="img/ic_pluginpreset2.svg" className={classes.itemIcon} alt="" />
<PluginPresetIcon className={classes.itemIcon} />
</div>
<div className={classes.itemLabel}>
<Typography noWrap>
@@ -424,7 +435,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
disabled={this.props.presets.presets.length === 0}
>
<ListItemIcon>
<img src="img/file_download_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
<DownloadIcon className={classes.listIcon} />
</ListItemIcon>
<ListItemText>
Download presets
@@ -433,7 +444,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
</MenuItem>
<MenuItem onClick={() => { this.handleUploadPresets() }}>
<ListItemIcon>
<img src="img/file_upload_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
<UploadIcon className={classes.listIcon} />
</ListItemIcon>
<ListItemText>
Upload presets
react/src/PresetDialog.tsx
+15 -5
View File
@@ -18,6 +18,7 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { SyntheticEvent,Component } from 'react';
import isDarkMode from './DarkMode';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel';
@@ -44,7 +45,8 @@ import RenameDialog from './RenameDialog';
import Slide, {SlideProps} from '@mui/material/Slide';
import { createStyles, Theme } from '@mui/material/styles';
import { WithStyles, withStyles} from '@mui/styles';
import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg';
import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg';
interface PresetDialogProps extends WithStyles<typeof styles> {
@@ -71,6 +73,9 @@ interface PresetDialogState {
const styles = (theme: Theme) => createStyles({
listIcon: {
width: 24, height: 24, opacity: 0.6, fill: theme.palette.text.primary
},
dialogAppBar: {
position: 'relative',
top: 0, left: 0
@@ -84,6 +89,9 @@ const styles = (theme: Theme) => createStyles({
marginLeft: theme.spacing(2),
flex: 1,
},
itemBackground: {
background: theme.palette.background.paper
},
itemFrame: {
display: "flex",
flexDirection: "row",
@@ -241,7 +249,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
let classes = this.props.classes;
let selectedItem = this.isEditMode() ? this.state.selectedItem : this.state.presets.selectedInstanceId;
return (
<div key={presetEntry.instanceId} style={{ background: "white" }} >
<div key={presetEntry.instanceId} className="itemBackground">
<ButtonBase style={{ width: "100%", height: 48 }}
onClick={() => this.handleItemClick(presetEntry.instanceId)}
@@ -249,7 +257,9 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
<SelectHoverBackground selected={presetEntry.instanceId === selectedItem} showHover={true} />
<div className={classes.itemFrame}>
<div className={classes.iconFrame}>
<img src="img/ic_presets.svg" className={classes.itemIcon} alt="" />
<img
src={isDarkMode()? "img/ic_presets_white.svg": "img/ic_presets.svg"}
className={classes.itemIcon} alt="" />
</div>
<div className={classes.itemLabel}>
<Typography>
@@ -402,7 +412,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
>
<MenuItem onClick={() => { this.handleDownloadPreset(); }} >
<ListItemIcon>
<img src="img/file_download_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
<DownloadIcon className={classes.listIcon} />
</ListItemIcon>
<ListItemText>
Download preset
@@ -411,7 +421,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
</MenuItem>
<MenuItem onClick={() => { this.handleUploadPreset() }}>
<ListItemIcon>
<img src="img/file_upload_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
<UploadIcon className={classes.listIcon} />
</ListItemIcon>
<ListItemText>
Upload preset
react/src/PresetSelector.tsx
+35 -55
View File
@@ -19,11 +19,8 @@
import { SyntheticEvent, Component } from 'react';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel';
import SaveIconOutline from '@mui/icons-material/Save';
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ButtonBase from "@mui/material/ButtonBase";
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
@@ -37,6 +34,7 @@ import Divider from '@mui/material/Divider';
import RenameDialog from './RenameDialog'
import Select from '@mui/material/Select';
import UploadPresetDialog from './UploadPresetDialog';
import isDarkMode from './DarkMode';
interface PresetSelectorProps extends WithStyles<typeof styles> {
@@ -60,7 +58,7 @@ interface PresetSelectorState {
}
const selectColor = "black";
const selectColor = isDarkMode()? "#888": "#FFFFFF";
const styles = (theme: Theme) => createStyles({
select: { // fu fu fu.Overrides for white selector on dark background.
@@ -303,66 +301,48 @@ const PresetSelector =
}}>
<div style={{ flex: "0 0 auto" }}>
<IconButton
style={{ flex: "0 0 auto", opacity: this.state.presets.presetChanged ? 1.0 : 0.0 }}
style={{ flex: "0 0 auto", opacity: this.state.presets.presetChanged ? 1.0 : 0.0, color: "#FFFFFF" }}
onClick={(e) => { this.handleSave(); }}
size="large">
<SaveIconOutline style={{ opacity: 0.75 }} />
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" />
</IconButton>
</div>
<div style={{ flex: "1 1 auto", minWidth: 60, maxWidth: 300, position: "relative", paddingRight: 12 }} >
{true ? (
<Select variant="standard"
className={classes.select}
style={{ width: "100%", position: "relative", top: 0 }} disabled={!this.state.enabled}
onChange={(e, extra) => this.handleChange(e, extra)}
onClose={(e) => this.handleSelectClose(e)}
displayEmpty
value={presets.selectedInstanceId === 0? '' : presets.selectedInstanceId}
inputProps={{
classes: { icon: classes.icon },
'aria-label': "Select preset"
}
}
>
{
presets.presets.map((preset) => {
return (
<MenuItem key={preset.instanceId} value={preset.instanceId} >
{(presets.presetChanged && preset.instanceId === presets.selectedInstanceId)
? (preset.name + "*")
: (preset.name)
}
</MenuItem>
);
})
}
</Select>
) : (
<ButtonBase style={{ width: "100%", textAlign: "left", borderBottom: "1px white solid", position: "relative", top: 2 }} disabled={!this.state.enabled}
onClick={(e) => { this.showPresetDialog(true); }}
>
<div style={{ width: "100%", textAlign: "left", display: "flex", flexWrap: "nowrap", flexDirection: "row", overflow: "hidden" }}>
<div style={{ flex: "0 1 auto", paddingLeft: 8, overflow: "hidden" }}>
<Typography noWrap >
{this.state.presets.getSelectedText()}
</Typography>
</div>
<div style={{ flex: "1 1 1px" }} />
<div style={{ flex: "0 0 auto" }}>
<ArrowDropDownIcon style={{ opacity: 0.75 }} />
</div>
</div>
</ButtonBase>
)}
<Select variant="standard"
className={classes.select}
style={{ width: "100%", position: "relative", top: 0, color: "#FFFFFF" }} disabled={!this.state.enabled}
onChange={(e, extra) => this.handleChange(e, extra)}
onClose={(e) => this.handleSelectClose(e)}
displayEmpty
value={presets.selectedInstanceId === 0? '' : presets.selectedInstanceId}
inputProps={{
classes: { icon: classes.icon },
'aria-label': "Select preset"
}
}
>
{
presets.presets.map((preset) => {
return (
<MenuItem key={preset.instanceId} value={preset.instanceId} >
{(presets.presetChanged && preset.instanceId === presets.selectedInstanceId)
? (preset.name + "*")
: (preset.name)
}
</MenuItem>
);
})
}
</Select>
</div>
<div style={{ flex: "0 0 auto" }}>
<div style={{ flex: "0 0 auto"}}>
<IconButton
style={{ flex: "0 0 auto" }}
style={{ flex: "0 0 auto", color: "#FFFFFF" }}
onClick={(e) => this.handlePresetMenuClick(e)}
size="large">
<MoreVertIcon style={{ opacity: 0.75 }} />
size="large"
>
<MoreVertIcon style={{ opacity: 0.75 }} color="inherit" />
</IconButton>
<Menu
id="edit-presets-menu"
react/src/SelectHoverBackground.tsx
+4 -4
View File
@@ -36,15 +36,15 @@ const styles = ({ palette }: Theme) => createStyles({
position: "absolute",
width: "100%",
height: "100%",
background: "#000000",
opacity: 0.1
background: palette.action.hover,
//opacity: palette.action.hoverOpacity
},
selected: {
position: "absolute",
width: "100%",
height: "100%",
background: palette.action.active,
opacity: 0.3
background: palette.action.selected,
//opacity: palette.action.selectedOpacity
}
});
react/src/SelectThemeDialog.tsx
+85
View File
@@ -0,0 +1,85 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
// Copyright (c) 2023 Robin Davies
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import { useState } from 'react';
import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Dialog from '@mui/material/Dialog';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import {ColorTheme} from './PiPedalModel';
export interface SelectThemesDialogProps {
open: boolean;
defaultTheme: ColorTheme;
onClose: () => void;
onOk: (value: ColorTheme) => void;
}
function SelectThemesDialog(props: SelectThemesDialogProps) {
//const classes = useStyles();
const { onClose, defaultTheme, open,onOk } = props;
const [ selectedTheme, setSelectedTheme ] = useState(defaultTheme);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
let value = ((event.target as HTMLInputElement).value) === '0' ? ColorTheme.Light: ColorTheme.Dark;
setSelectedTheme(value);
};
const handleClose = (): void => {
onClose();
};
const handleOk = (): void => {
onOk(selectedTheme)
};
return (
<Dialog onClose={handleClose} open={open}>
<DialogTitle id="simple-dialog-title">Theme</DialogTitle>
<DialogContent>
<FormControl>
<RadioGroup
defaultValue={defaultTheme}
onChange={handleChange}
>
<FormControlLabel value={ColorTheme.Light} control={<Radio size='small' />} label="Light" />
<FormControlLabel value={ColorTheme.Dark} control={<Radio size='small' />} label="Dark" />
</RadioGroup>
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleOk} color="secondary" >
OK
</Button>
</DialogActions>
</Dialog>
);
}
export default SelectThemesDialog;
react/src/SettingsDialog.tsx
+75 -29
View File
@@ -23,7 +23,7 @@ import OkCancelDialog from './OkCancelDialog';
import ListSelectDialog from './ListSelectDialog';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
import { PiPedalModel, PiPedalModelFactory, State, ColorTheme } from './PiPedalModel';
import ButtonBase from "@mui/material/ButtonBase";
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
@@ -45,6 +45,7 @@ import DialogEx from './DialogEx'
import GovernorSettings from './GovernorSettings';
import { AlsaMidiDeviceInfo } from './AlsaMidiDeviceInfo';
import SystemMidiBindingsDialog from './SystemMidiBindingsDialog';
import SelectThemeDialog from './SelectThemeDialog';
import Slide, { SlideProps } from '@mui/material/Slide';
import { createStyles, Theme } from '@mui/material/styles';
@@ -79,6 +80,7 @@ interface SettingsDialogState {
showInputSelectDialog: boolean;
showOutputSelectDialog: boolean;
showMidiSelectDialog: boolean;
showThemeSelectDialog: boolean;
showJackServerSettingsDialog: boolean;
shuttingDown: boolean;
restarting: boolean;
@@ -98,6 +100,11 @@ const styles = (theme: Theme) => createStyles({
marginLeft: theme.spacing(2),
flex: 1,
},
cpuStatusColor: {
color: theme.palette.text.secondary,
opacity: 0.7
},
sectionHead: {
marginLeft: 24,
marginRight: 24,
@@ -179,6 +186,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
showInputSelectDialog: false,
showOutputSelectDialog: false,
showMidiSelectDialog: false,
showThemeSelectDialog: false,
showJackServerSettingsDialog: false,
shuttingDown: false,
restarting: false,
@@ -379,6 +387,11 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
showMidiSelectDialog: true
})
}
handleThemeSelection() {
this.setState({
showThemeSelectDialog: true
});
}
handleMidiMessageSettings() {
this.setState({
showSystemMidiBindingsDialog: true
@@ -548,36 +561,36 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
}}
>
<div >
{this.props.onboarding &&
(
<div>
<Typography display="block" variant="body1" color="textSecondary" style={{paddingLeft: 24,paddingBottom: 8 }}>
Select and configure an audio device. You may optionally configure MIDI inputs, and set up a Wi-Fi Direct Hotspot now as well.
</Typography>
<Typography display="block" variant="body1" color="textSecondary" style={{paddingLeft: 24,paddingBottom: 8 }}>
Access and modify these settings later by selecting the <i>Settings</i> menu item on the main menu.
</Typography>
<Divider />
</div>
)}
{this.props.onboarding &&
(
<div>
<Typography display="block" variant="body1" color="textSecondary" style={{ paddingLeft: 24, paddingBottom: 8 }}>
Select and configure an audio device. You may optionally configure MIDI inputs, and set up a Wi-Fi Direct Hotspot now as well.
</Typography>
<Typography display="block" variant="body1" color="textSecondary" style={{ paddingLeft: 24, paddingBottom: 8 }}>
Access and modify these settings later by selecting the <i>Settings</i> menu item on the main menu.
</Typography>
<Divider />
</div>
)}
<div>
<Typography className={classes.sectionHead} display="block" variant="caption" color="secondary">
STATUS
STATUS
</Typography>
{(!isConfigValid) ?
(
<div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
<div className={classes.cpuStatusColor} style={{ paddingLeft: 48, position: "relative", top: -12 }}>
<Typography display="block" variant="caption" color="textSecondary">Status: <span style={{ color: "#F00" }}>Not configured.</span></Typography>
{(!this.props.onboarding) && (
<Typography display="block" variant="caption" color="textSecondary">Governor: </Typography>
<Typography display="block" variant="caption" color="inherit">Governor: </Typography>
)}
</div>
) :
(
<div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
<div className={classes.cpuStatusColor} style={{ paddingLeft: 48, position: "relative", top: -12 }}>
{JackHostStatus.getDisplayView("", this.state.jackStatus)}
{ (!this.props.onboarding) && JackHostStatus.getCpuInfo("Governor:\u00A0", this.state.jackStatus)}
{(!this.props.onboarding) && JackHostStatus.getCpuInfo("Governor:\u00A0", this.state.jackStatus)}
</div>
)
}
@@ -652,7 +665,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI Bindings</Typography>
</div>
</ButtonBase>
@@ -708,7 +721,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
</div>
</ButtonBase>
</div>
{ (!this.props.onboarding) ? (
{(!this.props.onboarding) ? (
<div >
<Divider />
<Typography className={classes.sectionHead} display="block" variant="caption" color="secondary">SYSTEM</Typography>
@@ -730,7 +743,23 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<ButtonBase
className={classes.setting}
onClick={() => { this.setState({ showStatusMonitorDialog: true }); }} >
onClick={() => { this.handleThemeSelection(); }} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Color Theme</Typography>
<Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>
{ this.model.getTheme() === ColorTheme.Dark ? "Dark" :"Light"}
</Typography>
</div>
</ButtonBase>
<ButtonBase
className={classes.setting}
onClick={() => {
this.model.setShowStatusMonitor(!this.state.showStatusMonitor)
}} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<div style={{
@@ -741,6 +770,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Show status monitor on main screen.</Typography>
</div>
<div style={{ flex: "0 0 auto" }}>
<Switch
checked={this.state.showStatusMonitor}
@@ -782,16 +812,18 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
</div >
</ButtonBase>
</div>
): (
) : (
<div>
<Divider/>
<div style={{display: "grid", placeContent: "end", maxWidth: 550, marginLeft: 16,marginRight: 16,
marginTop: 16,marginBottom: 16}}>
<Button variant="outlined" onClick={()=> {this.onOnboardingContinue()}} disabled={this.state.continueDisabled} style={{width: 120}}>Continue</Button>
<Divider />
<div style={{
display: "grid", placeContent: "end", maxWidth: 550, marginLeft: 16, marginRight: 16,
marginTop: 16, marginBottom: 16
}}>
<Button variant="outlined" onClick={() => { this.onOnboardingContinue() }} disabled={this.state.continueDisabled} style={{ width: 120 }}>Continue</Button>
</div>
</div>
)
}
}
@@ -844,6 +876,20 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
)
}
{
(this.state.showThemeSelectDialog) &&
(
<SelectThemeDialog open={this.state.showThemeSelectDialog}
onClose={()=> { this.setState({showThemeSelectDialog: false});} }
onOk={(selectedTheme: ColorTheme) => {
this.model.setTheme(selectedTheme);
this.setState({showThemeSelectDialog: false});
}}
defaultTheme={this.model.getTheme()}
/>
)
}
<WifiConfigDialog wifiConfigSettings={this.state.wifiConfigSettings} open={this.state.showWifiConfigDialog}
onClose={() => this.setState({ showWifiConfigDialog: false })}
onOk={(wifiConfigSettings) => this.handleApplyWifiConfig(wifiConfigSettings)}
@@ -864,8 +910,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
/>
<SystemMidiBindingsDialog
open={this.state.showSystemMidiBindingsDialog}
onClose={()=> { this.setState({showSystemMidiBindingsDialog: false});}}
/>
onClose={() => { this.setState({ showSystemMidiBindingsDialog: false }); }}
/>
</DialogEx >
);
react/src/SplitControlView.tsx
+3 -3
View File
@@ -52,7 +52,7 @@ const styles = (theme: Theme) => createStyles({
paddingLeft: 12,
paddingRight: 12,
left: 0,
background: "white",
background: theme.mainBackground,
zIndex: 3
},
@@ -61,7 +61,7 @@ const styles = (theme: Theme) => createStyles({
right: 0,
marginRight: 22,
paddingLeft: 12,
background: "white",
background: theme.mainBackground,
zIndex: 3
},
@@ -70,7 +70,7 @@ const styles = (theme: Theme) => createStyles({
right: 0,
paddingRight: 22,
paddingLeft: 12,
background: "white",
background: theme.mainBackground,
zIndex: 3
},
react/src/TemporaryDrawer.tsx
+7 -7
View File
@@ -22,11 +22,11 @@ import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/Toolbar';
import Drawer from '@mui/material/Drawer';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { Theme } from '@mui/material/styles';
import isDarkMode from './DarkMode';
const drawerStyles = (theme: Theme) => {
@@ -40,7 +40,7 @@ const drawerStyles = (theme: Theme) => {
drawer_header: {
color: theme.palette.primary.main,
background: 'white',
background: (isDarkMode()? theme.palette.background.default: 'white'),
}
})};
@@ -98,13 +98,13 @@ export const TemporaryDrawer = withStyles(drawerStyles)(
onClick={() => { this.fireClose(); }}
onKeyDown={() => { this.fireClose(); }}
>
<Toolbar className={classes.drawer_header}
style={{backgroundImage: 'url("img/ic_drawer_2.png")', border: "red solid", borderWidth: "0px 0px 3px 0px" }}
>
<IconButton style={{ marginLeft: -24 }} >
<div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "flex-start", alignItems: "center", width: "100%"}}>
<IconButton style={{ flex: "0 0 auto" }} >
<ArrowBackIcon style={{ fill: '#666' }} />
</IconButton>
</Toolbar>
<img src="img/Pi-Logo-3.png" alt="" style={{height: 36}} />
</div>
{this.props.children}
</div>
</Drawer>
react/src/ToobFrequencyResponseView.tsx
+58 -15
View File
@@ -25,11 +25,11 @@ import createStyles from '@mui/styles/createStyles';
import withStyles from '@mui/styles/withStyles';
import { PiPedalModelFactory, PiPedalModel, State } from "./PiPedalModel";
import { StandardItemSize } from './PluginControlView';
import Utility from './Utility';
import SvgPathBuilder from './SvgPathBuilder';
const StandardItemSize = { width: 80, height: 110 };
const FREQUENCY_RESPONSE_VECTOR_URI = "http://two-play.com/plugins/toob#frequencyResponseVector";
@@ -47,13 +47,15 @@ const styles = (theme: Theme) => createStyles({
interface ToobFrequencyResponseProps extends WithStyles<typeof styles> {
instanceId: number;
maxDb?: number;
minDb?: number;
minFrequency?: number;
maxFrequency?: number;
propertyName?: string;
width?: number;
}
interface ToobFrequencyResponseState {
minDb: number;
maxDb: number;
minF: number;
maxF: number;
path: string;
}
@@ -70,7 +72,11 @@ const ToobFrequencyResponseView =
super(props);
this.model = PiPedalModelFactory.getInstance();
this.state = {
path: ""
path: "",
minDb: -30,
maxDb: 5,
minF: 30,
maxF: 20000
};
this.pathRef = React.createRef();
@@ -146,24 +152,61 @@ const ToobFrequencyResponseView =
onFrequencyResponseUpdated(data: number[]) {
if (!this.mounted) return;
let pathBuilder = new SvgPathBuilder();
let minF = data[0];
let maxF = data[1];
let dbMin = data[2];
let dbMax = data[3];
let logMin = Math.log(minF);
let logMax = Math.log(maxF);
let toX_ = (frequency: number): number => {
var logV = Math.log(frequency);
return (this.xMax - this.xMin) * (logV - logMin) / (logMax - logMin) + this.xMin;
};
let toY_ = (value: number): number => {
var db;
if (value < this.MIN_DB_AF) {
db = -192.0;
} else {
db = 20 * Math.log10(value);
}
var y = (db - dbMin) / (dbMax - dbMin) * (this.yMax - this.yMin) + this.yMin;
return y;
};
if (data.length > 2) {
pathBuilder.moveTo(this.toX(data[0]), this.toY(data[1]))
for (let i = 2; i < data.length; i += 2) {
pathBuilder.lineTo(this.toX(data[i]), this.toY(data[i + 1]));
pathBuilder.moveTo(toX_(data[4]), toY_(data[5]))
for (let i = 6; i < data.length; i += 2) {
pathBuilder.lineTo(toX_(data[i]), toY_(data[i + 1]));
}
}
this.currentPath = pathBuilder.toString();
this.setState({ path: this.currentPath });
this.setState({
minF: data[0],
maxF: data[1],
maxDb: data[2],
minDb: data[3],
path: this.currentPath
});
}
private getPropertyUri()
{
return this.props.propertyName? this.props.propertyName: FREQUENCY_RESPONSE_VECTOR_URI;
}
updateAllWaveShapes() {
if (this.requestOutstanding) { // throttling.
this.requestDeferred = true;
return;
}
this.requestOutstanding = true;
this.model.getPatchProperty<any>(this.props.instanceId, FREQUENCY_RESPONSE_VECTOR_URI)
this.model.getPatchProperty<any>(this.props.instanceId, this.getPropertyUri())
.then((json) => {
if (json && json.otype_ === "Vector" && json.vtype_ === "Float") {
this.onFrequencyResponseUpdated(json.value as number[]);
@@ -237,11 +280,11 @@ const ToobFrequencyResponseView =
render() {
// deliberately reversed to flip up and down.
this.dbMax = this.props.minDb ?? this.dbMinDefault;
this.dbMin = this.props.maxDb ?? this.dbMaxDefault;
this.dbMax = this.state.minDb;
this.dbMin = this.state.maxDb;
this.fMin = this.props.minFrequency ?? 30;
this.fMax = this.props.maxFrequency ?? 20000;
this.fMin = this.state.minF;
this.fMax = this.state.maxF;
this.logMin = Math.log(this.fMin);
this.logMax = Math.log(this.fMax);
react/src/ToobMLView.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ const ToobMLView =
{
let group = controls[4] as ControlGroup;
group.controls.splice(0,0,
( <ToobFrequencyResponseView instanceId={this.props.instanceId} minDb={-20} maxDb={20} />)
( <ToobFrequencyResponseView instanceId={this.props.instanceId} />)
);
let gainControl: React.ReactElement = controls[2] as React.ReactElement;
react/src/ToobToneStackView.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ const ToobToneStackView =
{
controls.splice(0,0,
( <ToobFrequencyResponseView instanceId={this.props.instanceId}
minDb={-20} maxDb={20} />)
/>)
);
} else {
controls.splice(0,0,
react/src/UploadFileDialog.tsx
+1 -1
View File
@@ -206,7 +206,7 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
upload.abortController = new AbortController();
if (!this.wantsFile(this.uploadList[i].file))
{
throw new Error("Invalid file type.");
throw new Error("Invalid file extension.");
}
let filename = await this.model.uploadFile(this.props.uploadPage, this.uploadList[i].file, "application/octet-stream", upload.abortController);
this.props.onUploaded(filename);
react/src/Utility.tsx
+2 -2
View File
@@ -41,11 +41,11 @@ const Utility = class {
static isLandscape(): boolean {
return window.innerWidth > window.innerHeight;
}
static isTouchDevice(): boolean {
static needsZoomedControls(): boolean {
if (!this.isLandscape()) return false;
if (window.innerHeight > 500) return false;
if (window.innerHeight > 300) return true;
return (('ontouchstart' in window) &&
((navigator.maxTouchPoints??0) > 0) );
}
react/src/ZoomedDial.tsx
+24 -18
View File
@@ -22,6 +22,7 @@ import { WithStyles } from '@mui/styles';
import withStyles from '@mui/styles/withStyles';
import createStyles from '@mui/styles/createStyles';
import { PiPedalModel, PiPedalModelFactory, ZoomedControlInfo } from './PiPedalModel';
import {ReactComponent as DialIcon} from './svg/fx_dial.svg';
const SELECTED_OPACITY = 0.8;
const DEFAULT_OPACITY = 0.6;
@@ -34,6 +35,12 @@ const DEAD_ZONE_SIZE = 5;
const styles = (theme: Theme) => createStyles({
dialIcon: {
overscrollBehavior: "none", touchAction: "none",
fill: theme.palette.text.primary,
opacity: DEFAULT_OPACITY,
}
});
@@ -56,7 +63,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
class extends React.Component<ZoomedDialProps, ZoomedDialState> {
model: PiPedalModel = PiPedalModelFactory.getInstance();
imgRef: React.RefObject<HTMLImageElement> = React.createRef();
imgRef: React.RefObject<SVGSVGElement> = React.createRef();
constructor(props: ZoomedDialProps) {
super(props);
@@ -75,7 +82,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
}
onPointerUp(e: PointerEvent<HTMLImageElement>) {
onPointerUp(e: PointerEvent<SVGSVGElement>) {
if (this.isCapturedPointer(e)) {
--this.pointersDown;
@@ -94,7 +101,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
}
releaseCapture(e: PointerEvent<HTMLImageElement>)
releaseCapture(e: PointerEvent<SVGSVGElement>)
{
let img = this.imgRef.current;
@@ -118,7 +125,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
}
onPointerLostCapture(e: PointerEvent<HTMLImageElement>) {
onPointerLostCapture(e: PointerEvent<SVGSVGElement>) {
if (this.isCapturedPointer(e)) {
--this.pointersDown;
@@ -128,10 +135,10 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
}
onTouchStart(e: TouchEvent<HTMLImageElement>) {
onTouchStart(e: TouchEvent<SVGSVGElement>) {
//must be defined to get onTouchMove
}
onTouchMove(e: TouchEvent<HTMLImageElement>) {
onTouchMove(e: TouchEvent<SVGSVGElement>) {
// e.preventDefault();
e.stopPropagation(); // cancels scroll!!!
@@ -150,7 +157,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
currentAngle: number = 0;
lastPointerAngle: number = 0;
isValidPointer(e: PointerEvent<HTMLImageElement>): boolean {
isValidPointer(e: PointerEvent<SVGSVGElement>): boolean {
if (e.pointerType === "mouse") {
return e.button === 0;
} else if (e.pointerType === "pen") {
@@ -202,7 +209,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
return 0;
}
pointerToAngle(e: PointerEvent<HTMLImageElement>): number {
pointerToAngle(e: PointerEvent<SVGSVGElement>): number {
if (this.imgRef.current) {
let img = this.imgRef.current;
@@ -220,10 +227,10 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
}
return NaN;
}
captureElement?: HTMLElement;
captureElement?: SVGSVGElement;
pointersDown: number = 0;
onPointerDown(e: PointerEvent<HTMLImageElement>): void {
onPointerDown(e: PointerEvent<SVGSVGElement>): void {
if (!this.mouseDown && this.isValidPointer(e)) {
e.preventDefault();
e.stopPropagation();
@@ -262,7 +269,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
}
}
isCapturedPointer(e: PointerEvent<HTMLImageElement>): boolean {
isCapturedPointer(e: PointerEvent<SVGSVGElement>): boolean {
return this.mouseDown
&& e.pointerId === this.pointerId
&& e.pointerType === this.pointerType;
@@ -271,7 +278,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
onPointerMove(e: PointerEvent<HTMLImageElement>): void {
onPointerMove(e: PointerEvent<SVGSVGElement>): void {
if (this.isCapturedPointer(e)) {
e.preventDefault();
this.updateAngle(e)
@@ -286,7 +293,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
}
updateAngle(e: PointerEvent<HTMLImageElement>): void {
updateAngle(e: PointerEvent<SVGSVGElement>): void {
let angle: number = this.pointerToAngle(e);
if (!isNaN(angle)) {
if (!isNaN(this.lastPointerAngle)) {
@@ -352,14 +359,13 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
render() {
let classes = this.props.classes;
return (
<img ref={this.imgRef} src="img/fx_dial.svg" alt=""
<DialIcon ref={this.imgRef} className={classes.dialIcon}
style={{
overscrollBehavior: "none", touchAction: "none",
width: this.props.size, height: this.props.size, opacity: DEFAULT_OPACITY,
transform: this.getDefaultRotationTransform()
transform: this.getDefaultRotationTransform(),
width: this.props.size, height: this.props.size,
}}
draggable="true"
onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}
onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp}
onPointerMoveCapture={this.onPointerMove} onDrag={this.onDrag}
react/src/ZoomedUiControl.tsx
+3 -3
View File
@@ -215,8 +215,8 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })(
onClose={() => { this.props.onDialogClose() }}
onAbort={() => { this.props.onDialogClose() }}
>
<div style={{
width: 380, height: 300, background: "FFFF",
<div style={{
width: 380, height: 300,
display: "flex", flexFlow: "row", alignItems: "center", alignContent: " center", justifyContent: "center"
}}>
<IconButton sx={{ height: "100%", width: 48, borderRadius: "0% 50% 50% 0%" }} onClick={
@@ -227,7 +227,7 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })(
<NavigateBeforeIcon />
</IconButton>
<div style={{
width: 200, flexGrow: 1, height: 300, background: "#FFF",
width: 200, flexGrow: 1, height: 300,
display: "flex", flexFlow: "column", alignItems: "center", alignContent: "center", justifyContent: "center"
}}
react/src/svg/drive_file_rename_outline_black_24dp.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px">
<g>
<g>
<polygon points="15,16 11,20 21,20 21,16"/>
<path d="M12.06,7.19L3,16.25V20h3.75l9.06-9.06L12.06,7.19z M5.92,18H5v-0.92l7.06-7.06l0.92,0.92L5.92,18z"/>
<path d="M18.71,8.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C16.17,4.09,15.92,4,15.66,4c-0.25,0-0.51,0.1-0.7,0.29l-1.83,1.83 l3.75,3.75L18.71,8.04z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

react/public/img/file_download_black_24dp.svg → react/src/svg/file_download_black_24dp.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 333 B

After

Width:  |  Height:  |  Size: 333 B

react/public/img/file_upload_black_24dp.svg → react/src/svg/file_upload_black_24dp.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 327 B

After

Width:  |  Height:  |  Size: 327 B

react/src/svg/fx_amplifier.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1">
<g>
<path d="M47,13V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v6H47z M24.186,4.766c1.524,0,2.761,1.236,2.761,2.76
c0,1.525-1.236,2.761-2.761,2.761s-2.761-1.236-2.761-2.761C21.425,6.002,22.661,4.766,24.186,4.766z M16.497,4.766
c1.525,0,2.761,1.236,2.761,2.76c0,1.525-1.236,2.761-2.761,2.761c-1.524,0-2.76-1.236-2.76-2.761
C13.736,6.002,14.972,4.766,16.497,4.766z M8.808,4.766c1.525,0,2.761,1.236,2.761,2.76c0,1.525-1.236,2.761-2.761,2.761
c-1.524,0-2.76-1.236-2.76-2.761C6.047,6.002,7.283,4.766,8.808,4.766z"/>
<path d="M1,16v25c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6V16H1z M24.394,43.261c-6.613,0-11.975-5.361-11.975-11.975
s5.361-11.975,11.975-11.975s11.975,5.361,11.975,11.975S31.007,43.261,24.394,43.261z"/>
</g>
<circle cx="24.394" cy="31.286" r="3.993"/>
</g>
<g id="Combined">
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/fx_analyzer.svg
+16
View File
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="23.5" y1="10" x2="23.5" y2="22"/>
<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="43" y1="13.546" x2="19.938" y2="53.489"/>
<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="5" y1="13.545" x2="11.904" y2="25.504"/>
</g>
<g id="Combined">
<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h13.798l20.037-34.704l4.33,2.5L26.571,47H41c3.313,0,6-2.687,6-6V7
C47,3.687,44.313,1,41,1z M9.739,26.754L2.835,14.795l4.33-2.5l6.904,11.958L9.739,26.754z M26,22h-5V10h5V22z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

react/src/svg/fx_chorus.svg
+72
View File
@@ -0,0 +1,72 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<circle cx="24" cy="23.999" r="23"/>
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path id="full_sin_1_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-6.638,31.942
M-6.64,31.94c1.398,3.74,2.795,7.481,4.388,7.481 M2.129,31.94c-1.397,3.739-2.793,7.481-4.386,7.481 M2.128,31.94
c1.397-3.74,2.795-7.481,4.387-7.481 M10.896,31.941C9.5,28.2,8.104,24.459,6.511,24.459 M10.896,31.942
c1.398,3.741,2.795,7.481,4.385,7.481 M19.665,31.942c-1.398,3.741-2.795,7.481-4.387,7.481 M19.665,31.943
c1.396-3.741,2.792-7.481,4.385-7.481 M28.432,31.943c-1.397-3.741-2.794-7.481-4.386-7.481 M28.432,31.941
c1.397,3.74,2.792,7.481,4.386,7.481 M37.197,31.941c-1.396,3.74-2.792,7.481-4.386,7.481 M37.197,31.941
c1.399-3.74,2.796-7.48,4.387-7.48 M45.966,31.942c-1.396-3.741-2.794-7.481-4.385-7.481 M45.966,31.941
c1.396,3.74,2.793,7.481,4.389,7.481 M54.733,31.941c-1.396,3.74-2.791,7.481-4.385,7.481 M54.733,31.942
c1.398-3.741,2.793-7.481,4.387-7.481 M63.501,31.942c-1.398-3.741-2.793-7.481-4.387-7.481 M63.501,31.94
c1.395,3.74,2.793,7.481,4.387,7.481 M72.269,31.94c-1.395,3.739-2.793,7.481-4.385,7.481 M72.269,31.94
c1.396-3.74,2.791-7.481,4.385-7.481 M81.038,31.941c-1.398-3.741-2.797-7.482-4.387-7.482 M81.038,31.942
c1.396,3.741,2.795,7.481,4.385,7.481 M89.806,31.942c-1.396,3.741-2.795,7.481-4.385,7.481 M89.806,31.943"/>
<path id="full_sin_2_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-4.638,16.942
M-4.64,16.94c1.398,3.74,2.795,7.481,4.388,7.481 M4.129,16.94c-1.397,3.739-2.793,7.481-4.386,7.481 M4.128,16.94
c1.397-3.74,2.795-7.481,4.387-7.481 M12.896,16.941C11.5,13.2,10.104,9.459,8.511,9.459 M12.896,16.942
c1.398,3.741,2.795,7.481,4.385,7.481 M21.665,16.942c-1.398,3.741-2.795,7.481-4.387,7.481 M21.665,16.943
c1.396-3.741,2.792-7.481,4.385-7.481 M30.432,16.943c-1.397-3.741-2.794-7.481-4.386-7.481 M30.432,16.941
c1.397,3.74,2.792,7.481,4.386,7.481 M39.197,16.941c-1.396,3.74-2.792,7.481-4.386,7.481 M39.197,16.941
c1.399-3.74,2.796-7.48,4.387-7.48 M47.966,16.942c-1.396-3.741-2.794-7.481-4.385-7.481 M47.966,16.941
c1.396,3.74,2.793,7.481,4.389,7.481 M56.733,16.941c-1.396,3.74-2.791,7.481-4.385,7.481 M56.733,16.942
c1.398-3.741,2.793-7.481,4.387-7.481 M65.501,16.942c-1.398-3.741-2.793-7.481-4.387-7.481 M65.501,16.94
c1.395,3.74,2.793,7.481,4.387,7.481 M74.269,16.94c-1.395,3.739-2.793,7.481-4.385,7.481 M74.269,16.94
c1.396-3.74,2.791-7.481,4.385-7.481 M83.038,16.941c-1.398-3.741-2.797-7.482-4.387-7.482 M83.038,16.942
c1.396,3.741,2.795,7.481,4.385,7.481 M91.806,16.942c-1.396,3.741-2.795,7.481-4.385,7.481 M91.806,16.943"/>
</g>
<g id="Composed">
<g>
<polygon points="2.15,32 2.148,31.998 2.147,32 "/>
<path d="M35.904,31.415C37.664,26.709,38.952,23,41.573,23c0.002,0,0.005,0,0.01,0h0.001c0.003,0,0.006,0,0.008,0
c2.533,0,3.745,3.462,5.408,7.938V18.679c-0.141-0.374-0.283-0.753-0.428-1.141c-0.004-0.01-0.008-0.056-0.012-0.066
c-0.801-2.146-2.11-5.649-2.978-6.419c-0.864,0.768-2.173,4.273-2.974,6.413c-0.002,0.006-0.004,0.032-0.007,0.039
C38.845,22.216,37.455,26,34.834,26c-0.006,0-0.014,0-0.02,0c-0.008,0-0.014,0-0.02,0c-2.613,0-4-3.763-5.752-8.451
c-0.006-0.014-0.011-0.067-0.017-0.081l-0.002-0.004c-0.801-2.146-2.11-5.652-2.977-6.42c-0.868,0.768-2.177,4.277-2.978,6.424
c-0.004,0.01-0.008,0.021-0.012,0.031c-1.759,4.705-3.15,8.418-5.773,8.425c-0.002,0-0.003-0.002-0.006,0
c-0.002-0.002-0.004,0-0.006,0c-2.625-0.007-4.016-3.73-5.778-8.444c-0.004-0.011-0.008-0.021-0.011-0.032
c-0.802-2.148-2.105-5.639-2.971-6.406c-0.866,0.769-2.177,4.277-2.979,6.423l-1.405-0.52l0.166,0.067l-0.147-0.045l1.378,0.559
c-1.458,3.9-2.664,7.153-4.526,8.152v5.03c1.636-4.362,3.016-7.735,5.5-7.749c0.004,0,0.008,0.002,0.013,0
c0.003,0.001,0.009,0,0.013,0c2.625,0.014,4.016,3.742,5.775,8.458c0.004,0.01,0.007,0.02,0.011,0.029
c0.802,2.145,1.978,5.631,2.84,6.396C16.017,37.076,17,33.576,18,31.434v0.005c0-0.003,0.13,0.003,0.132-0.001
C19.891,26.723,21.409,23,24.035,23c0.004,0,0.007,0,0.013,0c0.002,0,0.009-0.019,0.013-0.019
c2.615,0.014,4.005,3.699,5.759,8.393c0.006,0.014,0.011,0.029,0.017,0.043l0.009,0.023c0.799,2.139,2.209,5.636,3.072,6.403
C33.785,37.074,35,33.568,36,31.422v0.004C36,31.419,35.902,31.422,35.904,31.415z"/>
<polygon points="2.11,32 2.108,31.999 2.108,32 "/>
<path d="M44.572,32.497c-0.004-0.01-0.008-0.02-0.012-0.03c-0.801-2.146-2.11-5.654-2.978-6.424
c-0.864,0.768-2.173,4.264-2.974,6.403c-0.002,0.007-0.004,0.013-0.007,0.02c-1.758,4.711-3.147,8.436-5.769,8.457
c-0.006,0-0.014,0.002-0.02,0c-0.008,0.002-0.014,0.001-0.02,0.001c-2.613-0.021-4-3.959-5.752-8.646
C27.037,32.264,27.032,32,27.026,32h-0.002c-0.801-2-2.111-5.413-2.977-6.181c-0.867,0.768-2.176,4.403-2.977,6.55
c-0.004,0.01-0.008,0.099-0.012,0.109C19.3,37.183,17.908,41,15.286,41c-0.002,0-0.005,0-0.006,0
c-0.004,0-0.004-0.037-0.006-0.037c-2.625-0.007-4.016-3.769-5.778-8.482c-0.004-0.01-0.008-0.02-0.011-0.03
c-0.802-2.148-2.105-5.636-2.971-6.402c-0.866,0.769-2.177,4.282-2.979,6.429l-1.228-0.445l1.219,0.495
C2.658,34.848,1.88,36.94,1,38.466V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-2.769
C46.159,36.735,45.406,34.731,44.572,32.497z"/>
<path d="M2.716,16.453l0.011,0.004C4.487,11.748,5.879,8,8.5,8c0.004,0,0.008,0,0.013,0c0.003,0,0.009-0.02,0.013-0.02
c2.625,0.014,4.016,3.721,5.775,8.438c0.004,0.01,0.007,0.02,0.011,0.03c0.802,2.145,1.978,5.631,2.84,6.397
C18.017,22.077,19,18.577,20,16.433v0.005c0-0.004,0.13,0.003,0.132,0C21.891,11.722,23.409,8,26.035,8c0.004,0,0.007,0,0.013,0
c0.004,0,0.009,0,0.013,0c2.615,0,4.019,3.699,5.772,8.393c0.006,0.014,0.024,0.009,0.03,0.023l0.034,0.023
c0.799,2.139,2.157,5.634,3.021,6.401C35.785,22.072,37,18.563,38,16.417c0,0,0-0.001,0-0.001c0-0.007-0.098,0.006-0.096-0.001
C39.664,11.709,40.952,8,43.573,8c0.002,0,0.005,0,0.01,0h0.001c0.003,0,0.006,0,0.008,0c1.464,0,2.485,1.156,3.408,2.995V7
c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v13.737C1.619,19.383,2.252,17.693,2.716,16.453z"/>
<polygon points="1,31.557 1,31.558 1.046,31.575 "/>
<polygon points="4.11,17 4.108,17 4.108,17 "/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

react/src/svg/fx_compressor.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<polyline id="Limiter_Path" fill="none" stroke="#FFFFFF" stroke-width="5" points="5.5,53.25 24,12.5 65.5,12.5 "/>
<path id="Compressor_Path" display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M8.5,53.25
c0,0,15.445-34.126,16.146-35.565c1.929-3.964,2.947-5.192,8.477-5.186c1.39,0.001,35.378,0,35.378,0"/>
</g>
<g id="Composed">
<g>
<path d="M8.585,47c4.368-9.646,13.269-29.291,13.813-30.409C24.576,12.113,26.345,10,33.088,10c0.013,0,0.024,0,0.037,0
C33.703,10,39.93,10,47,10V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6H8.585z"/>
<path d="M33.119,15c-0.021,0-0.043,0-0.063,0c-4.323,0-4.574,0.515-6.162,3.779C26.449,19.691,19.506,35.006,14.074,47H41
c3.313,0,6-2.688,6-6V15C39.928,15,33.698,15,33.119,15z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

react/src/svg/fx_constant.svg
+28
View File
@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<text transform="matrix(1 0 0 1 9.8389 32.5723)" fill="#FFFFFF" font-family="'PalatinoLinotype-BoldItalic'" font-size="34">fx</text>
<text id="k" transform="matrix(1 0 0 1 14.5454 35.5723)" display="inline" fill="#FFFFFF" font-family="'PalatinoLinotype-BoldItalic'" font-size="34">k</text>
</g>
<g id="Composed">
<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M26.805,26.91
c0.648,1.788,1.178,3.092,1.586,3.91c0.41,0.819,0.711,1.303,0.904,1.453c0.195,0.148,0.375,0.224,0.541,0.224
c0.42,0,1.211-0.398,2.373-1.195l0.184,0.017l0.365,0.647l-0.051,0.232c-0.441,0.276-0.885,0.57-1.328,0.88
c-2.113,1.472-3.529,2.208-4.25,2.208c-0.199,0-0.381-0.044-0.547-0.133s-0.369-0.302-0.607-0.64
c-0.236-0.337-0.492-0.852-0.763-1.543c-0.271-0.692-0.681-1.777-1.229-3.254c-0.548-1.479-0.911-2.493-1.087-3.047
c-0.62,0.643-1.054,1.148-1.303,1.52s-0.429,0.708-0.54,1.012c-0.111,0.305-0.26,0.922-0.448,1.852
c-0.188,0.93-0.315,1.613-0.382,2.051c-0.066,0.437-0.1,0.882-0.1,1.336c-1.118,0.056-2.374,0.276-3.769,0.664l-0.282-0.415
c0.93-3.243,1.887-7.509,2.872-12.8c0.985-5.29,1.478-8.19,1.478-8.699c0-0.266-0.075-0.465-0.224-0.598s-0.379-0.208-0.689-0.224
c-0.31-0.017-0.896-0.03-1.76-0.042L17.6,12.177l0.116-0.714l0.149-0.149c2.413-0.299,4.665-0.819,6.757-1.561l0.414,0.365
c-0.553,2.214-1.776,7.836-3.668,16.867c0.044-0.044,0.47-0.559,1.278-1.544c1.04-1.272,1.961-2.341,2.764-3.204
c0.802-0.863,1.612-1.607,2.433-2.233c0.818-0.625,1.537-1.054,2.158-1.287c0.619-0.232,1.268-0.349,1.941-0.349
c0.299,0,0.604,0.033,0.914,0.1l0.066,0.199c-0.332,1.118-0.537,1.959-0.615,2.523l-0.182,0.133
c-0.654-0.21-1.156-0.315-1.512-0.315c-0.719,0-1.521,0.21-2.406,0.631c-0.887,0.421-1.738,1.107-2.557,2.059
C25.773,24.053,26.158,25.123,26.805,26.91z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

react/src/svg/fx_converter.svg
+19
View File
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="-11" y1="18.5" x2="28" y2="18.5"/>
<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="-18" y1="29.5" x2="28" y2="29.5"/>
<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" points="19.25,9.504 33.746,24 19.25,38.496 "/>
</g>
<g id="Combined">
<g>
<polygon points="30.211,24 27.211,21 1,21 1,27 27.211,27 "/>
<path d="M41,1H7C3.687,1,1,3.687,1,7v9h21.21l-4.728-4.728l3.535-3.535L37.281,24L21.018,40.264l-3.535-3.535L22.211,32H1v9
c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6V7C47,3.687,44.313,1,41,1z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/fx_delay.svg
+22
View File
@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="-47,33.5 9,33.5
11.353,22.952 15.154,40.249 19.336,33.5 83,33.5 "/>
<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="-27,20.5 29,20.5
31.354,9.952 35.154,27.249 39.336,20.5 103,20.5 "/>
</g>
<g id="Combined">
<g>
<polygon points="31.343,16.89 30.202,22 12.68,22 15.826,36.317 18.501,32 47,32 47,22 40.171,22 34.482,31.182 "/>
<path d="M10.698,19l0.666-2.986L12.02,19h15.778l3.566-15.986l4.462,20.303L38.501,19H47V7c0-3.313-2.687-6-6-6H7
C3.687,1,1,3.687,1,7v12H10.698z"/>
<path d="M20.171,35l-5.688,9.181l-3.14-14.29L10.202,35H1v6c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-6H20.171z"/>
<polygon points="7.798,32 10.028,22 1,22 1,32 "/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

react/src/svg/fx_dial.svg
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1">
<path d="M31.5,2.262v8.767C35.976,13.628,39,18.462,39,24c0,8.271-6.729,15-15,15c-8.271,0-15-6.729-15-15
c0-5.538,3.024-10.372,7.5-12.971V2.262C7.49,5.38,1,13.943,1,24c0,12.682,10.318,23,23,23c12.683,0,23-10.318,23-23
C47,13.943,40.51,5.379,31.5,2.262z"/>
<path d="M20,25.5h8V1.354C26.7,1.126,25.365,1,24,1s-2.7,0.126-4,0.354V25.5z"/>
</g>
<g id="Composed">
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 857 B

react/src/svg/fx_distortion.svg
+42
View File
@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Original" display="none">
<circle display="inline" cx="24" cy="23.999" r="23"/>
<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" d="M-29.056,27.166 M-15.749,27.162
c-0.524,2.555-1.05,5.108-1.578,7.51l-10.135,0.07c-0.534-2.42-1.064-4.999-1.594-7.58 M-2.44,27.164
c-1.035-5.03-2.067-10.06-3.134-13.896l-7.039-0.01c-1.068,3.837-2.102,8.872-3.136,13.904 M-2.44,27.162 M-2.44,27.166
M10.868,27.162c-0.524,2.555-1.05,5.108-1.579,7.51l-10.134,0.07c-0.534-2.42-1.063-4.999-1.595-7.58 M24.176,27.164
c-1.034-5.031-2.066-10.06-3.133-13.896l-7.04-0.01c-1.067,3.837-2.101,8.872-3.136,13.904 M24.176,27.162 M24.176,27.166
M37.483,27.162c-0.525,2.555-1.052,5.11-1.58,7.51l-10.132,0.07c-0.536-2.418-1.065-4.999-1.596-7.58 M50.791,27.164
c-1.035-5.031-2.065-10.06-3.134-13.896l-7.04-0.01c-1.065,3.837-2.099,8.872-3.134,13.904 M50.791,27.162 M50.791,27.166
M64.102,27.162c-0.524,2.555-1.052,5.11-1.581,7.51l-10.133,0.07c-0.536-2.418-1.064-4.999-1.597-7.58 M77.408,27.164
c-1.037-5.031-2.066-10.06-3.137-13.896l-7.037-0.01c-1.063,3.837-2.1,8.872-3.133,13.904 M77.408,27.162 M77.408,27.166
M90.714,27.162c-0.523,2.555-1.048,5.108-1.575,7.51l-10.137,0.07c-0.534-2.42-1.063-4.999-1.594-7.58 M104.024,27.164
c-1.037-5.031-2.066-10.06-3.136-13.896l-7.039-0.01c-1.069,3.837-2.1,8.872-3.136,13.904 M104.024,27.162 M104.024,27.166
M117.33,27.162c-0.521,2.555-1.048,5.108-1.574,7.51l-10.137,0.07c-0.536-2.42-1.063-4.999-1.595-7.58 M130.641,27.164
c-1.037-5.031-2.065-10.06-3.137-13.896l-7.037-0.01c-1.067,3.837-2.1,8.872-3.137,13.904 M130.641,27.162 M130.641,27.166
M143.947,27.162c-0.524,2.555-1.052,5.112-1.58,7.51l-10.133,0.07c-0.534-2.416-1.065-4.999-1.594-7.58 M157.253,27.164
c-1.032-5.031-2.063-10.06-3.132-13.896l-7.037-0.01c-1.071,3.837-2.101,8.872-3.137,13.904 M157.253,27.162 M157.253,27.166
M170.563,27.162c-0.519,2.555-1.052,5.112-1.578,7.51l-10.133,0.07c-0.535-2.416-1.067-4.999-1.599-7.58 M183.869,27.164
c-1.033-5.031-2.062-10.06-3.133-13.896l-7.037-0.01c-1.066,3.837-2.1,8.872-3.137,13.904 M183.869,27.162"/>
</g>
<g id="Combined">
<g>
<path d="M7.674,32.683c0.413-1.925,0.824-3.923,1.234-5.922c0-0.003,0.001-0.005,0.001-0.008l0.02-0.094
c1.017-4.945,2.069-10.059,3.147-13.937l0.408-1.467l10.079,0.015l0.406,1.462c1.079,3.879,2.13,8.994,3.146,13.94
c0.003,0.012,0.005,0.022,0.007,0.034c0.004,0.018,0.008,0.035,0.012,0.053l0.038,0.183c0.401,1.956,0.803,3.909,1.207,5.789
l7.147-0.049C34.939,30.759,35,28.759,36,26.759c0-0.002,0-0.004,0-0.006l-0.212-0.12c1.015-4.936,1.946-10.039,3.021-13.91
l0.349-1.467l4.022,0.006C39.058,5.077,32.006,1,24.015,1C11.312,1,1.007,11.296,1.007,23.999c0,3.087,0.609,6.029,1.711,8.719
L7.674,32.683z"/>
<path d="M42.153,15.261c-0.907,3.534-1.809,7.919-2.685,12.178l-0.026,0.127c-0.001,0.002-0.001,0.005-0.002,0.007
c-0.526,2.562-1.054,5.124-1.584,7.529l-0.343,1.56l-13.345,0.092l-0.35-1.578c-0.525-2.37-1.045-4.896-1.564-7.427l-0.029-0.143
c-0.003-0.013-0.006-0.025-0.008-0.039l-0.018-0.088c-0.878-4.271-1.782-8.669-2.692-12.212l-3.967-0.005
c-0.91,3.541-1.814,7.936-2.692,12.204l-0.021,0.101c0,0.002-0.001,0.004-0.001,0.006c-0.525,2.563-1.053,5.123-1.583,7.53
l-0.343,1.56l-6.071,0.042C8.947,42.908,15.994,47,24,47c12.703,0,23-10.297,23-23.001c0-3.093-0.614-6.041-1.722-8.734
L42.153,15.261z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

react/src/svg/fx_empty.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 477 B

react/src/svg/fx_eq.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M-5,12.5c0,0,11.333,0.167,21,0
c6.754-0.116,11.413,19.888,18.167,20c10,0.167,24.833,0,24.833,0"/>
</g>
<g id="Combined">
<g>
<path d="M15.957,10c4.848-0.12,8.015,5.42,11.34,11.248c1.981,3.473,4.976,8.72,6.912,8.752c3.898,0.066,8.564,0.08,12.791,0.072
V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v3.057C5.137,10.082,10.806,10.089,15.957,10z"/>
<path d="M45.021,35.073c-3.692,0-7.569-0.018-10.896-0.073c-4.784-0.08-7.887-5.518-11.171-11.273
C20.97,20.249,17.975,15,16.061,15c-0.006,0-0.012,0-0.018,0C10.861,15,5.165,15,1,15.001V41c0,3.313,2.687,6,6,6h34
c3.313,0,6-2.687,6-6v-5.929C46.349,35.072,45.689,35.073,45.021,35.073z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/fx_error.svg
+11
View File
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="x">
</g>
<path fill="#800000" d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z
M39.436,34.23l-5.205,5.205L24,29.205l-10.23,10.23L8.564,34.23L18.795,24L8.564,13.769l5.205-5.204L24,18.795l10.23-10.23
l5.205,5.204L29.205,24L39.436,34.23z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 784 B

react/src/svg/fx_filter.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M-7,20.5c0,0,6.632,0,14.601,0
c7.815,0,10.993-10.467,13.093-10.467c3.335,0,5.959,26.467,36.474,26.467c10.001,0,24.833,0,24.833,0"/>
</g>
<g id="Combined">
<g>
<path d="M7.601,18c3.835,0,6.455-3.792,8.367-6.561c1.507-2.182,2.698-3.906,4.726-3.906c2.401,0,3.453,2.191,5.047,5.507
c2.885,6.005,7.812,16.245,21.26,19.743V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v11H7.601z"/>
<path d="M21.233,15.206c-0.235-0.49-0.494-1.028-0.74-1.518c-0.143,0.204-0.283,0.407-0.412,0.593
C17.829,17.542,14.059,23,7.601,23H1v18c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-3.056
C30.383,34.247,24.371,21.74,21.233,15.206z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/fx_filter_hp.svg
Executable
+19
View File
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1_1_" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M-7,20.5c0,0,6.632,0,14.601,0
c7.815,0,10.993-10.467,13.093-10.467c3.335,0,5.958,26.467,36.474,26.467c10.001,0,24.833,0,24.833,0"/>
</g>
<g id="Combined">
<g>
<path d="M47.001,18V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v25.783c13.448-3.498,18.375-13.738,21.26-19.743
c1.594-3.316,2.646-5.507,5.047-5.507c2.028,0,3.219,1.724,4.727,3.906C33.945,14.208,36.564,18,40.4,18H47.001z"/>
<path d="M1.001,37.943V41c0,3.313,2.688,6,6,6h34c3.313,0,6-2.688,6-6V23H40.4c-6.459,0-10.229-5.458-12.48-8.719
c-0.129-0.187-0.27-0.389-0.412-0.593c-0.246,0.49-0.505,1.028-0.74,1.518C23.63,21.74,17.618,34.247,1.001,37.943z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/fx_flanger.svg
+45
View File
@@ -0,0 +1,45 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<g id="Layer_2">
<g>
<path d="M8.5,17.824c0.004,0.003,0.008,0.006,0.013,0.006c0.003,0.002,0.009,0.003,0.013,0.004
c2.625,0.971,4.016,5.203,5.775,10.561c0.004,0.012,0.007,0.021,0.011,0.033c0.802,2.437,2.106,6.396,2.968,7.477
c0.865-0.452,2.175-3.479,2.976-5.33c0.001-0.002,0.002-0.006,0.003-0.008c1.759-4.076,3.149-7.297,5.775-6.355
c0.004,0.001,0.007,0.002,0.013,0.005c0.003-0.001,0.01,0.003,0.014,0.005c2.614,0.966,4.006,5.175,5.76,10.507
c0.006,0.018,0.011,0.032,0.017,0.049l0.009,0.027c0.799,2.43,2.104,6.398,2.969,7.48c0.867-0.452,2.178-3.485,2.979-5.34v-0.002
c0.003-0.006,0.006-0.012,0.008-0.018c1.762-4.064,3.152-7.277,5.773-6.333c0.002,0.001,0.005,0.001,0.01,0.003l0.001,0.002
c0.003,0,0.006,0.002,0.008,0.002c1.409,0.519,2.461,1.983,3.407,4.051V22.409c-0.506-1.334-1.013-2.493-1.422-3.005
c-0.864,0.453-2.174,3.473-2.975,5.321c-0.002,0.006-0.004,0.012-0.006,0.018c-1.759,4.07-3.147,7.29-5.77,6.357
c-0.006-0.002-0.014-0.006-0.02-0.008c-0.009-0.003-0.015-0.005-0.021-0.008c-2.613-0.973-4-5.18-5.752-10.505
c-0.007-0.017-0.011-0.033-0.017-0.049l-0.002-0.005c-0.802-2.438-2.11-6.42-2.978-7.504c-0.868,0.452-2.177,3.485-2.978,5.341
c-0.004,0.008-0.008,0.018-0.013,0.026c-1.759,4.064-3.15,7.271-5.773,6.323c-0.002,0-0.003-0.003-0.006-0.002
c-0.002-0.002-0.004-0.001-0.006-0.002c-2.625-0.962-4.016-5.193-5.778-10.548c-0.004-0.013-0.008-0.024-0.011-0.036
c-0.802-2.44-2.105-6.406-2.971-7.487c-0.866,0.453-2.177,3.483-2.979,5.338l-1.314-0.967L6.14,10.954l1.378,1.041
c-1.757,4.063-3.146,7.272-5.764,6.338c-0.006-0.003-0.01-0.003-0.017-0.007c-0.004,0.001-0.011-0.004-0.017-0.006
C1.468,18.227,1.23,18.094,1,17.942v9.917c0.619-1.13,1.251-2.591,1.714-3.66l1.412,1.018L4.108,25.2l0.002,0.001l-1.386-1.024
C4.486,20.104,5.877,16.885,8.5,17.824z"/>
<path d="M1.744,15.247c0.864-0.453,2.171-3.474,2.97-5.322l1.412,1.019l-0.02-0.015L6.11,10.93L4.724,9.904
C6.485,5.831,7.877,2.612,10.5,3.553c0.004,0.002,0.008,0.002,0.013,0.005c0.003-0.001,0.009,0.003,0.013,0.005
c2.625,0.97,4.016,5.203,5.775,10.56c0.004,0.011,0.007,0.022,0.011,0.033c0.802,2.437,2.106,6.396,2.968,7.477
c0.865-0.453,2.175-3.479,2.976-5.331v0.001c0.001-0.003,0.002-0.006,0.003-0.009c1.759-4.076,3.148-7.297,5.775-6.355
c0.004,0.002,0.007,0.002,0.013,0.005c0.004,0.001,0.01,0.003,0.014,0.005c2.614,0.966,4.006,5.176,5.76,10.509
c0.006,0.017,0.011,0.032,0.017,0.048l0.009,0.026c0.799,2.43,2.104,6.399,2.969,7.481c0.867-0.453,2.178-3.484,2.979-5.341
c0,0,0,0,0-0.001c0.003-0.006,0.006-0.012,0.008-0.018c1.762-4.065,3.152-7.276,5.773-6.333c0.002,0.001,0.005,0.002,0.01,0.004
h0.001c0.003,0.001,0.006,0.002,0.008,0.003c0.513,0.188,0.977,0.505,1.407,0.926V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7
v6.901C1.267,14.491,1.521,14.967,1.744,15.247z"/>
<polygon points="4.157,25.236 4.175,25.25 4.188,25.26 4.147,25.229 "/>
<path d="M46.568,41.219c-0.004-0.012-0.008-0.023-0.012-0.035c-0.802-2.438-2.111-6.422-2.979-7.508
c-0.864,0.453-2.174,3.473-2.975,5.321c-0.002,0.006-0.004,0.011-0.006,0.017c-1.759,4.071-3.147,7.291-5.77,6.357
c-0.006-0.002-0.014-0.002-0.02-0.007c-0.009-0.001-0.015-0.005-0.021-0.007c-2.613-0.974-4-5.182-5.752-10.506
c-0.007-0.017-0.011-0.033-0.017-0.05l0.004-0.002c-0.801-2.437-2.109-6.421-2.978-7.503c-0.866,0.451-2.176,3.484-2.977,5.34
c-0.004,0.01-0.008,0.019-0.012,0.027c-1.759,4.063-3.15,7.271-5.773,6.322c-0.002,0-0.005-0.004-0.006-0.002
c-0.004-0.004-0.004-0.002-0.006-0.002c-2.625-0.963-4.016-5.193-5.778-10.549c-0.004-0.012-0.008-0.022-0.011-0.035
c-0.802-2.439-2.105-6.405-2.971-7.486c-0.866,0.453-2.177,3.482-2.979,5.337L4.188,25.26L4.18,25.254l1.345,1.018
C4.068,29.64,2.861,32.414,1,32.732V41c0,3.313,2.687,6,6,6h34c2.91,0,5.336-2.075,5.883-4.825
C46.779,41.86,46.675,41.542,46.568,41.219z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

react/src/svg/fx_flanger2.svg
+194
View File
@@ -0,0 +1,194 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Original" display="none">
<circle display="inline" cx="24" cy="23.999" r="23"/>
<path display="inline" fill="#FFFFFF" d="M70.464,39.718c-0.002,0-0.002,0-0.004,0c-0.006-0.002-0.012-0.003-0.017-0.003
c-2.013-0.42-2.751-3.039-4.492-10.979c-0.002-0.009-0.004-0.016-0.005-0.024c-0.614-2.793-1.485-6.752-2.235-8.506
c-0.751,1.455-1.621,5.067-2.233,7.609l-1.143-0.348l-1.131-0.396c1.745-7.239,2.48-9.554,4.498-9.159c0.002,0,0.006,0,0.008,0.001
h0.001h0.001c0.003,0.001,0.005,0.001,0.008,0.002c2.021,0.411,2.756,3.027,4.503,10.982c0.002,0.006,0.004,0.016,0.005,0.022
c0.614,2.794,1.483,6.755,2.234,8.506c0.75-1.451,1.618-5.06,2.231-7.6c0.001-0.012,0.003-0.021,0.007-0.034
c1.748-7.271,2.485-9.587,4.514-9.182c0.637,0.127,1.153,0.613,1.153,1.088c0,0.376-0.325,0.631-0.776,0.657
c-0.821,0.709-1.898,5.186-2.618,8.18l-1.135-0.372l1.135,0.372c-0.001,0-0.001,0-0.001,0c-0.001,0.007-0.003,0.016-0.005,0.022
h0.002c-1.74,7.228-2.478,9.548-4.487,9.164C70.476,39.722,70.47,39.72,70.464,39.718z M16.458,28.942c-0.001,0-0.002,0-0.004,0
c-0.004-0.002-0.008-0.002-0.012-0.003c-2.013-0.414-2.75-3.023-4.488-10.939c-0.003-0.015-0.008-0.028-0.01-0.043
c-0.613-2.795-1.486-6.772-2.239-8.529c-0.752,1.456-1.625,5.081-2.238,7.628l-2.272-0.743c1.745-7.248,2.481-9.57,4.498-9.178
c0.005,0,0.01,0.003,0.013,0.002c0.001,0.001,0.007,0.001,0.012,0.003c2.015,0.413,2.752,3.022,4.491,10.94
c0.003,0.015,0.007,0.028,0.011,0.043c0.613,2.794,1.485,6.77,2.239,8.528c0.753-1.457,1.625-5.086,2.237-7.636
c0.002-0.005,0.003-0.01,0.004-0.015c1.749-7.259,2.483-9.571,4.51-9.167C23.24,9.841,23.27,9.848,23.3,9.856
c1.955,0.466,2.695,3.113,4.413,10.937c0.002,0.009,0.004,0.016,0.006,0.023c0.613,2.794,1.485,6.77,2.239,8.527
c0.753-1.458,1.626-5.084,2.239-7.634c0-0.001,0-0.001,0-0.002c1.741-7.244,2.479-9.569,4.49-9.185
c0.007,0.001,0.012,0.001,0.02,0.004c0.004-0.002,0.015,0.002,0.021,0.003c2.011,0.42,2.747,3.036,4.488,10.964
c0.001,0.006,0.002,0.011,0.003,0.016c0.613,2.796,1.486,6.771,2.239,8.527c0.753-1.456,1.626-5.083,2.239-7.633
c0.001-0.006,0.003-0.011,0.004-0.016c1.745-7.259,2.482-9.572,4.51-9.167c0.024,0.004,0.048,0.01,0.068,0.015
c1.974,0.455,2.712,3.096,4.439,10.956c0.002,0.011,0.004,0.02,0.005,0.028c0.614,2.794,1.484,6.755,2.235,8.51
c0.752-1.457,1.624-5.081,2.236-7.629l2.272,0.743c-1.742,7.246-2.479,9.567-4.495,9.179c-0.004,0-0.008-0.001-0.014-0.001
c0-0.002-0.01-0.002-0.015-0.004c-2.017-0.416-2.754-3.033-4.496-10.98c-0.002-0.009-0.006-0.019-0.007-0.028
c-0.613-2.789-1.482-6.745-2.232-8.497c-0.753,1.457-1.626,5.085-2.239,7.634c-0.001,0.005-0.003,0.01-0.004,0.016
c-1.742,7.246-2.48,9.563-4.497,9.17c-0.004-0.003-0.006-0.003-0.01-0.003h-0.001l-0.001-0.001c-0.003,0-0.005,0-0.01-0.002
c-2.017-0.411-2.754-3.021-4.497-10.963c0-0.005-0.001-0.01-0.003-0.017l-0.003-0.013c-0.613-2.79-1.485-6.759-2.238-8.515
c-0.752,1.456-1.624,5.082-2.237,7.633c0,0,0,0,0,0.001c-1.744,7.247-2.48,9.571-4.494,9.186c-0.006-0.002-0.007,0.002-0.018-0.004
c-0.006,0.002-0.012-0.003-0.017-0.003c-2.013-0.418-2.751-3.031-4.49-10.955c-0.002-0.008-0.004-0.016-0.006-0.023
c-0.613-2.794-1.485-6.771-2.238-8.526c-0.752,1.455-1.623,5.075-2.236,7.622l0,0c-0.001,0.003-0.003,0.007-0.003,0.01
c-1.744,7.252-2.48,9.576-4.497,9.188C16.467,28.944,16.463,28.944,16.458,28.942z M-37.549,18.168c-0.001,0-0.001,0-0.002-0.001
c-0.003-0.001-0.005-0.001-0.009-0.002c-2.018-0.411-2.754-3.023-4.499-10.97c-0.002-0.008-0.004-0.016-0.005-0.022
c-0.613-2.795-1.484-6.765-2.236-8.519c-0.753,1.456-1.626,5.083-2.24,7.633l-1.136-0.372l1.136,0.372
c-0.002,0.008-0.004,0.017-0.007,0.025h0.001c-1.741,7.233-2.477,9.55-4.49,9.162c-0.005,0-0.008-0.002-0.015-0.003
c-0.004-0.003-0.01-0.002-0.015-0.003c-2.015-0.415-2.752-3.032-4.498-10.981c-0.001-0.009-0.004-0.018-0.005-0.026
c-0.613-2.792-1.482-6.749-2.233-8.499c-0.752,1.456-1.625,5.082-2.238,7.63l0,0c0,0.002-0.001,0.003-0.001,0.004
c-1.744,7.25-2.48,9.574-4.497,9.185c-0.005-0.001-0.007-0.003-0.014-0.003c-0.004-0.003-0.01-0.002-0.015-0.003
c-2.014-0.415-2.752-3.028-4.493-10.963c-0.001-0.005-0.003-0.011-0.004-0.016l-0.001-0.005c-0.613-2.793-1.486-6.768-2.238-8.523
c-0.752,1.457-1.625,5.08-2.237,7.627l-2.273-0.743c1.745-7.249,2.481-9.569,4.498-9.178c0.005,0,0.011,0.001,0.012,0.002
c0.003,0,0.009,0.001,0.014,0.002c2.016,0.414,2.753,3.026,4.495,10.964c0.002,0.006,0.003,0.011,0.004,0.017
c0.613,2.795,1.486,6.77,2.239,8.528c0.752-1.458,1.625-5.086,2.238-7.635c0.001-0.005,0.002-0.009,0.004-0.014
c1.747-7.26,2.482-9.573,4.509-9.168c0.022,0.004,0.044,0.009,0.066,0.014c1.976,0.451,2.715,3.091,4.443,10.964
c0.002,0.01,0.004,0.019,0.006,0.028c0.613,2.793,1.483,6.749,2.233,8.502c0.75-1.454,1.621-5.068,2.233-7.609
c0.002-0.008,0.004-0.017,0.005-0.025c1.745-7.253,2.483-9.576,4.5-9.185c0.004,0.001,0.008,0.002,0.013,0.002
c0,0,0.008,0.002,0.013,0.002c2.017,0.415,2.754,3.031,4.498,10.981c0.002,0.008,0.003,0.015,0.005,0.023
c0.613,2.792,1.483,6.753,2.234,8.507c0.753-1.456,1.626-5.085,2.239-7.635c0.001-0.005,0.003-0.01,0.004-0.015
c1.746-7.259,2.483-9.572,4.51-9.167c0.031,0.006,0.062,0.014,0.092,0.021c1.955,0.468,2.695,3.115,4.412,10.938
c0.002,0.008,0.003,0.015,0.005,0.023c0.613,2.794,1.486,6.77,2.239,8.527c0.751-1.452,1.621-5.062,2.233-7.61
c0.002-0.009,0.003-0.017,0.005-0.025c1.746-7.253,2.482-9.575,4.499-9.185c0.004,0,0.007,0,0.013,0.002
c-0.002,0,0.007,0.002,0.012,0.003c2.016,0.414,2.752,3.027,4.497,10.97c0.002,0.006,0.004,0.015,0.005,0.021
c0.613,2.794,1.484,6.762,2.236,8.517c0.754-1.456,1.626-5.084,2.24-7.634c0.001-0.005,0.001-0.01,0.003-0.015
c1.747-7.259,2.483-9.572,4.509-9.168C-3.773,4.45-3.751,4.455-3.729,4.46c1.976,0.45,2.714,3.09,4.442,10.963
c0.001,0.002,0.001,0.003,0.001,0.003c0.613,2.796,1.485,6.771,2.239,8.528c0.752-1.454,1.625-5.079,2.238-7.628l2.272,0.743
c-1.746,7.252-2.482,9.572-4.5,9.179c-0.003-0.001-0.006-0.001-0.01-0.001c-0.002-0.002-0.006-0.002-0.009-0.004
c-2.02-0.41-2.757-3.024-4.501-10.974c0-0.002,0-0.004-0.001-0.005l0-0.005c-0.614-2.793-1.486-6.766-2.239-8.523
c-0.753,1.457-1.625,5.085-2.239,7.635c-0.001,0.006-0.002,0.01-0.004,0.015c-1.74,7.236-2.477,9.557-4.491,9.17
c-0.006,0-0.012,0.002-0.017-0.003c-0.011,0.001-0.012-0.002-0.017-0.003c-2.015-0.417-2.751-3.037-4.495-10.979
c-0.002-0.008-0.003-0.015-0.005-0.022c-0.613-2.79-1.483-6.753-2.234-8.506c-0.75,1.452-1.62,5.061-2.232,7.609
c-0.002,0.009-0.004,0.017-0.006,0.025c-1.745,7.25-2.482,9.574-4.498,9.185c-0.004,0-0.008-0.003-0.014-0.002
c-0.004-0.003-0.01-0.003-0.015-0.003c-2.015-0.416-2.751-3.027-4.492-10.956c-0.002-0.007-0.003-0.016-0.006-0.022
c-0.613-2.795-1.485-6.771-2.238-8.528c-0.752,1.457-1.625,5.084-2.239,7.635c-0.001,0.005-0.003,0.009-0.003,0.014
c-1.743,7.245-2.479,9.564-4.499,9.17C-37.543,18.168-37.547,18.168-37.549,18.168z M-62.314,2.853l1.137,0.372L-62.314,2.853z
M-78.053,10.083c-0.001,0-0.001,0-0.001,0c-0.001-0.001-0.009-0.001-0.013-0.002c-2.017-0.414-2.753-3.028-4.497-10.973
c-0.001-0.005-0.002-0.01-0.004-0.016c-0.613-2.793-1.485-6.763-2.237-8.517c-0.753,1.457-1.625,5.084-2.238,7.634
c-0.107,0.446-0.698,0.642-1.331,0.437c-0.628-0.206-1.049-0.733-0.942-1.179c1.749-7.271,2.484-9.587,4.513-9.183
c0.031,0.006,0.061,0.013,0.091,0.02c1.957,0.468,2.696,3.118,4.418,10.958c0.001,0.005,0.002,0.01,0.003,0.016
c0.613,2.792,1.484,6.76,2.236,8.515c0.752-1.456,1.625-5.081,2.238-7.63l2.272,0.743c-1.744,7.251-2.481,9.572-4.498,9.181
C-78.046,10.085-78.049,10.084-78.053,10.083z"/>
<path display="inline" fill="#FFFFFF" d="M144.627,63.129c-0.002,0-0.002,0-0.004,0c-0.006-0.002-0.012-0.004-0.017-0.004
c-2.012-0.419-2.747-3.033-4.487-10.955c-0.002-0.009-0.003-0.016-0.006-0.023c0-0.002,0-0.003,0-0.003
c-0.613-2.795-1.486-6.77-2.239-8.527c-0.749,1.449-1.618,5.052-2.228,7.583h-0.004c-0.001,0.017-0.005,0.032-0.009,0.049
c-1.744,7.258-2.48,9.58-4.501,9.186c-0.003-0.001-0.005-0.001-0.009-0.001h-0.001l-0.001-0.003c-0.002,0-0.005,0-0.007-0.001
c-2.019-0.41-2.757-3.024-4.504-10.978c-0.003-0.017-0.007-0.033-0.009-0.05c-0.613-2.791-1.481-6.73-2.229-8.478
c-0.753,1.456-1.626,5.085-2.241,7.633c-0.001,0.006-0.002,0.011-0.004,0.014c-1.739,7.246-2.478,9.565-4.496,9.171
c-0.002-0.001-0.006-0.001-0.009-0.001l-0.001-0.002h-0.002c-0.002,0-0.005,0-0.008-0.002c-2.016-0.411-2.754-3.021-4.499-10.964
c-0.001-0.004-0.002-0.01-0.003-0.016l-0.005-0.025c-0.613-2.787-1.483-6.75-2.234-8.504c-0.754,1.457-1.626,5.085-2.24,7.636
c0,0.001,0,0.003-0.001,0.003c-1.742,7.241-2.479,9.564-4.489,9.183c-0.008-0.002-0.012-0.002-0.02-0.003
c-0.005,0-0.013-0.004-0.019-0.006c-2.014-0.419-2.752-3.033-4.488-10.954c-0.001-0.007-0.004-0.016-0.005-0.022
c-0.614-2.795-1.486-6.77-2.24-8.527c-0.752,1.458-1.625,5.086-2.24,7.634c-0.001,0.005-0.002,0.01-0.003,0.015
c-1.74,7.247-2.479,9.563-4.497,9.17c-0.003,0-0.006-0.001-0.009-0.001H90.62h-0.001c-0.002,0-0.005-0.003-0.009-0.003
c-2.019-0.41-2.755-3.028-4.502-10.981c-0.002-0.009-0.003-0.015-0.006-0.023c-0.613-2.793-1.484-6.755-2.235-8.507
c-0.751,1.452-1.622,5.067-2.232,7.61l-0.001-0.002c-0.002,0.008-0.004,0.017-0.006,0.025c-1.744,7.258-2.479,9.58-4.5,9.186
c-0.003-0.001-0.006-0.001-0.01-0.001l0,0l-0.001-0.003c-0.002,0-0.007,0-0.008-0.001c-2.021-0.411-2.759-3.021-4.497-10.951
c-0.003-0.009-0.006-0.02-0.007-0.026L72.6,38.649c-0.611-2.786-1.482-6.748-2.233-8.502c-0.75,1.454-1.62,5.069-2.232,7.61
l-1.143-0.35l0.039,0.013l-0.021-0.005l1.113,0.389c-1.739,7.226-2.476,9.545-4.487,9.163c-0.006-0.002-0.014-0.003-0.019-0.005
c-0.007,0-0.013-0.002-0.02-0.004c-2.014-0.419-2.749-3.036-4.488-10.963c-0.001-0.003-0.002-0.009-0.002-0.016
c-0.616-2.795-1.488-6.77-2.241-8.528c-0.752,1.457-1.625,5.081-2.239,7.632c0,0,0,0.002-0.001,0.002
c-1.74,7.246-2.477,9.571-4.493,9.188c-0.006-0.001-0.013-0.003-0.019-0.006c-0.007,0-0.012-0.002-0.019-0.003
c-2.011-0.42-2.747-3.031-4.486-10.951v-0.002c-0.002-0.008-0.004-0.018-0.006-0.023c-0.613-2.795-1.486-6.771-2.239-8.528
c-0.753,1.457-1.626,5.085-2.239,7.635c-0.001,0.005-0.002,0.011-0.003,0.015c-1.745,7.246-2.481,9.563-4.5,9.17
c-0.002-0.002-0.006-0.002-0.007-0.002h-0.001l-0.002-0.001c-0.003,0-0.006,0-0.008,0c-2.019-0.413-2.754-3.025-4.5-10.972
c-0.002-0.007-0.003-0.017-0.005-0.024c-0.612-2.793-1.484-6.762-2.236-8.518c-0.753,1.457-1.627,5.084-2.239,7.635l-1.136-0.372
l1.136,0.372c-0.002,0.008-0.005,0.017-0.008,0.025h0.002c-1.741,7.232-2.478,9.549-4.491,9.16c-0.004,0-0.01-0.003-0.015-0.001
c-0.006-0.006-0.009-0.004-0.014-0.004c-2.016-0.415-2.752-3.034-4.499-10.981c-0.001-0.009-0.002-0.017-0.004-0.026
c-0.613-2.793-1.483-6.749-2.233-8.499c-0.753,1.455-1.625,5.082-2.238,7.63l0,0c-0.001,0.001-0.001,0.003-0.001,0.005
c-1.745,7.25-2.481,9.573-4.497,9.185c-0.004-0.001-0.01,0-0.015-0.003c-0.006,0-0.01-0.003-0.015-0.003
c-2.014-0.415-2.751-3.029-4.493-10.964C5.102,25.216,5.1,25.21,5.099,25.205l-0.001-0.006c-0.613-2.793-1.485-6.768-2.238-8.523
c-0.753,1.456-1.624,5.081-2.237,7.629l-2.273-0.744c1.745-7.248,2.48-9.568,4.497-9.177c0.005,0,0.014,0.003,0.013,0.002
c0.005,0.001,0.008,0.002,0.013,0.002c2.016,0.413,2.752,3.026,4.496,10.965c0.001,0.006,0.002,0.011,0.004,0.015
c0.613,2.795,1.485,6.773,2.238,8.529c0.753-1.457,1.625-5.085,2.239-7.635c0.001-0.004,0.003-0.009,0.003-0.013
c1.748-7.261,2.484-9.574,4.509-9.169c0.023,0.004,0.045,0.009,0.067,0.014c1.977,0.451,2.715,3.09,4.443,10.965
c0.003,0.011,0.004,0.019,0.005,0.029c0.613,2.793,1.484,6.748,2.234,8.499c0.751-1.453,1.621-5.067,2.234-7.607
c0.001-0.009,0.003-0.017,0.004-0.025c1.746-7.254,2.483-9.575,4.5-9.185c0.005,0.002,0.007,0,0.013,0.002
c-0.001-0.002,0.009,0.003,0.013,0.003c2.018,0.414,2.754,3.03,4.499,10.982c0.002,0.007,0.003,0.014,0.004,0.021
c0.613,2.79,1.484,6.754,2.235,8.507c0.751-1.455,1.623-5.078,2.236-7.625h0.001c0-0.003,0.001-0.005,0.002-0.009
c1.749-7.271,2.484-9.587,4.513-9.183c0.032,0.007,0.063,0.013,0.093,0.021c1.955,0.468,2.694,3.114,4.411,10.938
c0.002,0.008,0.004,0.016,0.005,0.021l0.008,0.027c0.61,2.785,1.48,6.748,2.231,8.501c0.755-1.455,1.626-5.082,2.239-7.632
c0,0,0.001-0.001,0.001-0.003c1.747-7.257,2.482-9.578,4.501-9.185c0.004,0.002,0.006,0.002,0.01,0.002l0.001,0.001h0.001
c0.004,0.001,0.006,0.001,0.009,0.002c2.018,0.411,2.754,3.023,4.498,10.966c0.001,0.007,0.004,0.011,0.005,0.016
c0.613,2.794,1.484,6.771,2.238,8.528c0.751-1.454,1.621-5.068,2.233-7.611l1.142,0.347l-0.036-0.011l0.018,0.007l-1.111-0.389
c1.746-7.253,2.481-9.565,4.508-9.159c0.023,0.003,0.047,0.008,0.069,0.015c1.97,0.452,2.709,3.09,4.432,10.937
c0.004,0.011,0.007,0.02,0.008,0.028c0.613,2.797,1.484,6.773,2.239,8.53c0.753-1.456,1.626-5.087,2.238-7.637
c0.002-0.009,0.003-0.017,0.006-0.023l0,0c1.743-7.24,2.479-9.555,4.498-9.161c0.002,0.002,0.005,0.002,0.007,0.002h0.001h0.003
c0.002,0.001,0.004,0.001,0.008,0.003c2.019,0.411,2.755,3.026,4.502,10.98c0.003,0.009,0.004,0.017,0.005,0.023
c0.614,2.795,1.484,6.755,2.235,8.507c0.753-1.454,1.625-5.085,2.237-7.634c0.002-0.006,0.004-0.01,0.005-0.015
c1.746-7.26,2.484-9.571,4.51-9.167c0.03,0.005,0.061,0.013,0.09,0.02c1.955,0.467,2.696,3.112,4.415,10.938
c0.003,0.009,0.005,0.018,0.006,0.023c0.612,2.796,1.483,6.769,2.238,8.528c0.752-1.458,1.625-5.083,2.238-7.629
c0-0.002,0-0.004,0.002-0.005c1.74-7.246,2.477-9.571,4.491-9.188c0.007,0.003,0.012,0.001,0.02,0.005
c0.006,0,0.013,0.002,0.019,0.003c2.012,0.419,2.747,3.033,4.487,10.954c0.001,0.003,0.001,0.005,0.002,0.008
c0.001,0.006,0.002,0.012,0.003,0.017c0.615,2.795,1.486,6.771,2.24,8.528c0.753-1.457,1.625-5.085,2.238-7.634
c0.001-0.004,0.002-0.009,0.004-0.014c1.747-7.26,2.483-9.572,4.51-9.168c0.023,0.004,0.047,0.01,0.07,0.015
c1.973,0.454,2.712,3.097,4.44,10.968c0.003,0.018,0.007,0.033,0.009,0.047c0.613,2.792,1.481,6.73,2.229,8.479
c0.753-1.458,1.625-5.085,2.239-7.636l0,0l1.135,0.372l-1.135-0.372c0.003-0.016,0.007-0.033,0.014-0.049h-0.004
c1.744-7.219,2.478-9.528,4.492-9.136c0.002,0.002,0.007,0.002,0.009,0.002h0.001l0.001,0.002c0.003,0,0.006,0,0.009,0.002
c2.019,0.41,2.754,3.026,4.502,10.979c0.002,0.009,0.003,0.017,0.006,0.025c0,0.002,0,0.002,0,0.002
c0.612,2.785,1.482,6.748,2.233,8.504c0.751-1.455,1.621-5.07,2.233-7.612l0,0c0.002-0.006,0.004-0.014,0.007-0.022
c1.744-7.271,2.481-9.588,4.513-9.182c0.638,0.126,1.152,0.613,1.152,1.087c0,0.376-0.324,0.631-0.775,0.657
c-0.823,0.709-1.899,5.188-2.618,8.181c-0.001,0.007-0.005,0.016-0.006,0.022h0.001c-1.741,7.228-2.478,9.548-4.487,9.164
C144.639,63.13,144.633,63.13,144.627,63.129z M39.988,32.022l1.136,0.372L39.988,32.022z M11.849,26.263l1.137,0.371
L11.849,26.263z M-3.89,33.494c0,0-0.001-0.002-0.001-0.002c0.001,0.002-0.008-0.002-0.013-0.002
c-2.017-0.414-2.753-3.027-4.498-10.973c-0.001-0.006-0.001-0.011-0.003-0.017c-0.613-2.792-1.485-6.762-2.237-8.517
c-0.753,1.457-1.625,5.085-2.239,7.634c-0.107,0.447-0.7,0.645-1.331,0.437c-0.627-0.205-1.048-0.731-0.942-1.178
c1.749-7.271,2.485-9.589,4.514-9.184c0.031,0.007,0.061,0.014,0.091,0.021c1.957,0.467,2.697,3.118,4.418,10.958
c0.001,0.006,0.002,0.011,0.004,0.016c0.613,2.792,1.484,6.76,2.236,8.515c0.752-1.456,1.624-5.081,2.237-7.63l2.273,0.743
c-1.745,7.251-2.48,9.571-4.498,9.181C-3.882,33.494-3.885,33.494-3.89,33.494z"/>
</g>
<g id="Combined">
<g>
<path d="M38.945,23.334c-0.613-2.79-1.485-6.759-2.238-8.515c-0.752,1.456-1.624,5.082-2.237,7.633c0,0,0,0,0,0.001
c-0.391,1.622-0.729,2.984-1.044,4.138c0.288,1.193,0.598,2.567,0.948,4.166c0.002,0.007,0.003,0.014,0.004,0.021
c0.613,2.79,1.484,6.754,2.235,8.507c0.751-1.455,1.623-5.078,2.236-7.625h0.001c0-0.003,0.001-0.005,0.002-0.009
c0.39-1.622,0.729-2.984,1.043-4.138c-0.287-1.189-0.595-2.558-0.944-4.15c0-0.005-0.001-0.01-0.003-0.017L38.945,23.334z"/>
<path d="M5.092,16.735c0.033-0.136,0.067-0.279,0.099-0.409l2.272,0.743c-0.389,1.617-0.727,2.977-1.042,4.128
c0.288,1.19,0.596,2.561,0.946,4.155c0.001,0.006,0.002,0.011,0.004,0.015c0.613,2.795,1.485,6.773,2.238,8.529
c0.753-1.457,1.625-5.085,2.239-7.635c0.001-0.004,0.003-0.009,0.003-0.013c0.389-1.615,0.726-2.973,1.04-4.124
c-0.285-1.183-0.592-2.544-0.939-4.125c-0.003-0.015-0.008-0.028-0.01-0.043c-0.613-2.795-1.486-6.772-2.239-8.529
c-0.752,1.456-1.625,5.081-2.238,7.628l-2.272-0.743c1.745-7.248,2.481-9.57,4.498-9.178c0.005,0,0.01,0.003,0.013,0.002
c0.001,0.001,0.007,0.001,0.012,0.003c2.015,0.413,2.752,3.022,4.491,10.94c0.003,0.015,0.007,0.028,0.011,0.043
c0.012,0.053,0.025,0.113,0.037,0.167c0.584-1.045,1.223-1.387,2.107-1.21c0.023,0.004,0.045,0.009,0.067,0.014
c0.913,0.208,1.562,0.894,2.166,2.337c0.033-0.137,0.068-0.282,0.1-0.414c0.002-0.005,0.003-0.01,0.004-0.015
c1.749-7.259,2.483-9.571,4.51-9.167c0.031,0.006,0.06,0.013,0.09,0.021c1.955,0.466,2.694,3.113,4.412,10.937
c0.002,0.009,0.003,0.016,0.005,0.023c0.012,0.053,0.022,0.113,0.034,0.168c0.581-1.04,1.21-1.385,2.087-1.215
c0.005,0.002-0.005,0,0.001,0.002c-0.001-0.002-0.016,0.003-0.012,0.003c0.941,0.193,1.555,0.878,2.172,2.353
C32.031,21.989,32,21.843,32,21.71c0-0.001,0-0.001,0-0.002c2-7.244,2.577-9.569,4.589-9.185c0.007,0.001,0.11,0.001,0.118,0.004
c0.004-0.002,0.015,0.002,0.021,0.003c2.011,0.42,2.747,3.036,4.488,10.964c0.001,0.006,0.002,0.011,0.003,0.016
c0.012,0.054,0.025,0.115,0.037,0.17c0.585-1.045,1.224-1.387,2.108-1.211c0.032,0.007,0.063,0.013,0.093,0.021
c0.899,0.215,1.541,0.901,2.14,2.331c0.033-0.138,0.068-0.284,0.101-0.417c0.001-0.006,0.003-0.011,0.004-0.016
c0.377-1.566,0.705-2.889,1.011-4.018C44.973,9.393,35.469,1,24,1C14.707,1,6.707,6.514,3.079,14.446
C3.911,14.694,4.523,15.375,5.092,16.735z"/>
<path d="M42.244,27.984c0.402,1.631,0.824,3.142,1.215,4.053c0.359-0.695,0.746-1.892,1.119-3.224
c-0.402-1.632-0.824-3.143-1.215-4.054C43.004,25.456,42.617,26.652,42.244,27.984z"/>
<path d="M28.742,25.288c0.402,1.632,0.824,3.144,1.216,4.056c0.359-0.696,0.747-1.893,1.12-3.226
c-0.402-1.632-0.825-3.144-1.216-4.056C29.503,22.759,29.115,23.956,28.742,25.288z"/>
<path d="M4.074,20.726c-0.402-1.63-0.824-3.139-1.214-4.05c-0.36,0.697-0.748,1.896-1.121,3.23
c0.401,1.629,0.823,3.137,1.214,4.048C3.313,23.258,3.7,22.06,4.074,20.726z"/>
<path d="M23.207,12.127c-0.752,1.455-1.623,5.075-2.236,7.622c-0.001,0.003-0.003,0.007-0.003,0.01
c-0.39,1.622-0.728,2.984-1.043,4.138c0.288,1.192,0.597,2.564,0.947,4.162c0.003,0.011,0.004,0.019,0.005,0.029
c0.613,2.793,1.484,6.748,2.234,8.499c0.751-1.453,1.621-5.067,2.234-7.607c0.001-0.009,0.003-0.017,0.004-0.025
c0.391-1.622,0.729-2.984,1.044-4.137c-0.286-1.187-0.594-2.552-0.942-4.14c-0.002-0.008-0.004-0.016-0.006-0.023
C24.832,17.859,23.96,13.883,23.207,12.127z"/>
<path d="M43.47,34.332c-0.004-0.003-0.006-0.002-0.01-0.002l-0.001,0.001h-0.001c-0.003,0-0.005,0.004-0.01,0.002
c-0.943-0.192-1.605-0.869-2.223-2.344c-0.034,0.139-0.069,0.298-0.102,0.432c-0.001,0.005-0.002,0.037-0.003,0.041
c-1.745,7.246-2.289,9.616-4.307,9.223C36.813,41.683,37,41.789,37,41.789V42h-0.389c-0.003,0-0.006,0-0.008,0
c-2.019-1-2.754-3.236-4.5-11.183c-0.002-0.007-0.003-0.228-0.005-0.235c-0.011-0.05-0.023-0.104-0.034-0.154
c-0.58,1.036-1.214,1.388-2.089,1.22c-0.006-0.002-0.007,0.011-0.018,0.005c-0.006,0.002-0.012,0.014-0.017,0.014
c-0.94-0.195-1.602-0.845-2.218-2.316c-0.033,0.139-0.068,0.354-0.101,0.486C27.621,29.844,27.618,30,27.615,30h0.002
c-1.741,7-2.478,9.41-4.491,9.021c-0.004,0-0.01-0.141-0.015-0.139c-0.006-0.006-0.009-0.003-0.014-0.003
c-2.016-0.415-2.752-3.032-4.499-10.979c-0.001-0.009-0.002-0.014-0.004-0.023c-0.01-0.045-0.021-0.087-0.031-0.132
c-0.581,1.039-1.215,1.399-2.092,1.229C16.467,28.973,16.463,29,16.458,29c-0.001,0-0.002,0-0.004,0
c-0.004,0-0.008-0.031-0.012-0.032c-0.941-0.193-1.603-0.906-2.219-2.378c-0.033,0.137-0.067,0.28-0.099,0.411
c-0.001,0.001-0.001,0.002-0.001,0.004c-1.745,7.25-2.481,9.572-4.497,9.184c-0.004-0.001-0.01-0.002-0.015-0.005
c-0.006,0-0.01-0.007-0.015-0.007c-2.014-0.415-2.751-3.037-4.493-10.972C5.102,25.2,5.1,25.179,5.099,25.174l-0.001-0.037
c-0.012-0.053-0.025-0.175-0.037-0.229C4.479,25.95,3.843,26,2.963,26c-0.003,0-0.006,0-0.01,0c-0.002,0-0.02,0.121-0.023,0.119
c-0.783-0.159-1.382-0.58-1.916-1.558C1.314,37.005,11.486,47,24,47c9.046,0,16.868-5.225,20.624-12.818
C44.284,34.374,43.907,34.417,43.47,34.332z"/>
<path d="M15.241,22.597c0.402,1.632,0.825,3.144,1.216,4.056c0.36-0.696,0.747-1.894,1.119-3.227
c-0.402-1.632-0.824-3.143-1.215-4.054C16.001,20.067,15.614,21.264,15.241,22.597z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

react/src/svg/fx_function.svg
+41
View File
@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<text transform="matrix(1 0 0 1 9.8389 32.5723)" display="inline" fill="#FFFFFF" font-family="'PalatinoLinotype-BoldItalic'" font-size="34">fx</text>
</g>
<g id="Composed">
<path d="M41,1H7C3.688,1,1,3.687,1,7v34c0,3.313,2.688,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M18.538,18.776
l-1.295,5.761c-0.531,2.369-1.052,4.46-1.561,6.275c-0.675,2.435-1.336,4.28-1.984,5.537c-0.647,1.256-1.469,2.385-2.465,3.387
c-0.996,1.001-1.893,1.69-2.689,2.066c-0.498,0.232-0.974,0.349-1.428,0.349c-0.398,0-0.819-0.1-1.262-0.299
c0.531-1.372,0.896-2.601,1.096-3.686l0.531-0.1c0.432,1.007,0.985,1.511,1.66,1.511c0.232,0,0.457-0.059,0.672-0.174
c0.216-0.117,0.417-0.308,0.606-0.573c0.188-0.266,0.423-0.946,0.706-2.042s0.623-2.695,1.021-4.798l1.229-6.425l1.295-6.79
c-0.631-0.022-1.135-0.033-1.511-0.033c-0.576,0-1.085,0.011-1.527,0.033l-0.116-0.149l0.116-0.598l0.183-0.183
c0.254-0.088,0.758-0.243,1.511-0.465c0.752-0.221,1.333-0.426,1.743-0.614c0.033-0.077,0.105-0.382,0.216-0.913
c0.188-0.819,0.354-1.408,0.498-1.768c0.144-0.359,0.393-0.755,0.747-1.187c0.354-0.432,1.001-1.046,1.942-1.843
c0.94-0.797,1.812-1.48,2.615-2.05c0.802-0.57,1.405-0.932,1.81-1.087c0.404-0.155,0.849-0.232,1.336-0.232
c0.52,0,1.018,0.094,1.494,0.282c-0.432,1.472-0.747,2.905-0.946,4.3l-0.498,0.116c-0.853-1.306-1.705-1.959-2.557-1.959
c-0.31,0-0.601,0.097-0.872,0.291c-0.271,0.194-0.481,0.454-0.631,0.78c-0.149,0.327-0.363,1.06-0.639,2.2
c-0.277,1.14-0.509,2.252-0.697,3.337h0.382c0.221,0,0.838-0.027,1.851-0.083c1.013-0.055,1.674-0.116,1.984-0.183l0.166,0.266
c-0.232,0.631-0.393,1.157-0.481,1.577l-0.183,0.166c-0.388-0.022-1.151-0.033-2.291-0.033
C19.396,18.743,18.804,18.754,18.538,18.776z M37.364,20.403l-0.714,0.133l-0.315-0.946c-0.232-0.11-0.448-0.166-0.647-0.166
c-0.598,0-1.195,0.269-1.793,0.805c-0.598,0.537-1.483,1.658-2.656,3.362c0.343,2.258,0.642,3.833,0.896,4.724
s0.515,1.475,0.78,1.751s0.537,0.415,0.813,0.415c0.498,0,1.345-0.515,2.54-1.544l0.199,0.017l0.382,0.614l-0.033,0.199
c-1.937,1.693-3.201,2.703-3.794,3.03c-0.592,0.326-1.109,0.489-1.552,0.489c-0.509,0-0.969-0.199-1.378-0.598
s-0.705-0.94-0.889-1.627c-0.182-0.687-0.423-2.003-0.722-3.951c-1.295,1.882-2.216,3.157-2.765,3.827
c-0.547,0.669-0.995,1.164-1.344,1.485c-0.349,0.321-0.687,0.545-1.013,0.673c-0.327,0.127-0.667,0.19-1.021,0.19
c-0.222,0-0.396-0.02-0.523-0.058c-0.127-0.039-0.435-0.169-0.921-0.391c0.177-0.487,0.321-1.106,0.432-1.859
c0.11-0.753,0.166-1.192,0.166-1.32c0-0.127-0.006-0.251-0.017-0.373l0.83-0.083l0.199,1.063c0.332,0.133,0.625,0.199,0.88,0.199
c0.387,0,0.808-0.142,1.262-0.423c0.454-0.283,1.096-0.966,1.926-2.051c0.83-1.084,1.367-1.82,1.61-2.208
c-0.343-2.059-0.606-3.505-0.788-4.341c-0.184-0.835-0.449-1.383-0.797-1.644c-0.35-0.26-0.689-0.39-1.021-0.39
c-0.421,0-0.853,0.144-1.295,0.432c-0.443,0.288-0.775,0.637-0.996,1.046l-0.199,0.066l-0.548-0.315l-0.033-0.183
c1.106-1.749,1.749-2.883,1.926-3.403c0.886-0.454,1.721-0.681,2.507-0.681c1.052,0,1.849,0.285,2.391,0.855
c0.542,0.57,0.907,1.201,1.096,1.893c0.188,0.692,0.371,1.729,0.548,3.113c1.594-2.335,2.676-3.791,3.245-4.366
c0.57-0.575,1.077-0.963,1.52-1.162s0.863-0.299,1.262-0.299c0.321,0,0.703,0.089,1.146,0.266
C37.757,17.609,37.497,18.854,37.364,20.403z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

react/src/svg/fx_gate.svg
+16
View File
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" points="-22,12.5 24.5,12.5 24.5,32.5 62,32.5 "/>
</g>
<g id="Combined">
<g>
<path d="M27,10v20h20V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v3H27z"/>
<path d="M22,35V15H1v26c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-6H22z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 954 B

react/src/svg/fx_generator.svg
+41
View File
@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1_1_" display="none">
<circle display="inline" cx="24" cy="23.999" r="23"/>
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path id="full_sin_2_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-4.64,16.94
c1.398,3.74,2.795,7.481,4.388,7.481 M4.129,16.94c-1.397,3.739-2.793,7.481-4.386,7.481 M4.128,16.94
c1.397-3.74,2.795-7.481,4.387-7.481 M12.896,16.941C11.5,13.2,10.104,9.459,8.511,9.459 M12.896,16.942
c1.398,3.741,2.795,7.481,4.385,7.481 M21.665,16.942c-1.398,3.741-2.795,7.481-4.387,7.481 M21.665,16.943
c1.396-3.741,2.792-7.481,4.385-7.481 M30.432,16.943c-1.396-3.741-2.793-7.481-4.386-7.481 M30.432,16.941
c1.397,3.74,2.793,7.481,4.387,7.481 M39.197,16.941c-1.396,3.74-2.793,7.481-4.387,7.481 M39.197,16.941
c1.398-3.74,2.796-7.48,4.387-7.48 M47.966,16.942c-1.396-3.741-2.794-7.481-4.385-7.481 M47.966,16.941
c1.396,3.74,2.793,7.481,4.39,7.481 M56.732,16.941c-1.396,3.74-2.791,7.481-4.385,7.481 M56.732,16.942
c1.398-3.741,2.793-7.481,4.388-7.481 M65.501,16.942c-1.397-3.741-2.793-7.481-4.388-7.481 M65.501,16.94
c1.396,3.74,2.793,7.481,4.388,7.481 M74.27,16.94c-1.396,3.739-2.793,7.481-4.386,7.481 M74.27,16.94
c1.396-3.74,2.791-7.481,4.385-7.481 M83.038,16.941c-1.397-3.741-2.797-7.482-4.388-7.482 M83.038,16.942
c1.396,3.741,2.795,7.481,4.385,7.481 M91.807,16.942c-1.396,3.741-2.795,7.481-4.386,7.481"/>
</g>
<g>
<path d="M2.705,16.465c0.006-0.017,0.012-0.033,0.018-0.05c1.761-4.714,3.153-8.439,5.775-8.456c0.006,0,0.01,0.001,0.015,0
c0.003,0.001,0.01,0,0.015,0c2.623,0.017,4.014,3.742,5.773,8.456c0.004,0.01,0.007,0.02,0.011,0.03
c0.803,2.147,2.106,5.629,2.969,6.396c0.866-0.769,2.177-4.275,2.979-6.421h0c0,0,0-0.001,0-0.001
c1.76-4.716,3.15-8.442,5.775-8.457c0.004,0,0.007,0,0.013,0c0.004,0,0.009,0,0.013,0c2.616,0.014,4.007,3.717,5.76,8.412
c0.006,0.014,0.011,0.028,0.017,0.042l0.006,0.015c0.8,2.141,2.106,5.639,2.972,6.408c0.867-0.77,2.176-4.276,2.978-6.421
c0.001-0.003,0.002-0.007,0.003-0.01c1.763-4.712,3.155-8.436,5.778-8.446c0.002,0,0.005,0,0.01,0h0.001c0.003,0,0.006,0,0.008,0
c1.41,0.005,2.463,1.087,3.408,2.811V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v13.725C1.614,19.38,2.242,17.704,2.705,16.465z"
/>
<path d="M46.572,17.496c-0.004-0.01-0.008-0.02-0.012-0.03c-0.801-2.146-2.109-5.654-2.978-6.423
c-0.866,0.768-2.176,4.271-2.978,6.415c-0.001,0.003-0.002,0.006-0.004,0.009c-1.757,4.706-3.146,8.427-5.761,8.455
c-0.009,0-0.018,0.002-0.026,0c-0.01,0.001-0.018,0-0.026,0c-2.607-0.028-3.995-3.728-5.745-8.411
c-0.006-0.014-0.011-0.029-0.017-0.043c-0.802-2.146-2.111-5.656-2.979-6.424c-0.867,0.768-2.176,4.277-2.978,6.424
c-0.004,0.01-0.008,0.021-0.012,0.031c-1.757,4.701-3.148,8.412-5.767,8.425c-0.004,0-0.006-0.001-0.012,0
c-0.006-0.001-0.009,0-0.012,0c-2.622-0.013-4.014-3.738-5.775-8.453c-0.004-0.01-0.008-0.021-0.011-0.031
c-0.802-2.149-2.104-5.633-2.968-6.398c-0.867,0.768-2.178,4.277-2.98,6.423c0,0,0,0,0,0c-0.002,0.004-0.003,0.009-0.005,0.013
h0.001C4.071,21.382,2.864,24.6,1,25.596V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V18.637
C46.859,18.263,46.717,17.885,46.572,17.496z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

react/src/svg/fx_instrument.svg
+33
View File
@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="x">
</g>
<g id="Layer_1">
<g id="Layer_1_1_" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"
/>
<g display="inline">
<rect x="5" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
<rect x="10.404" y="10.828" fill="#FFFFFF" width="4.674" height="21.398"/>
<rect x="15.81" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
<rect x="21.215" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
<rect x="8.417" y="10.828" width="3.243" height="12.333"/>
<rect x="13.823" y="10.828" width="3.243" height="12.333"/>
<rect x="26.619" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
<rect x="19.227" y="10.828" width="3.244" height="12.333"/>
<rect x="32.023" y="10.828" fill="#FFFFFF" width="4.674" height="21.398"/>
<rect x="30.036" y="10.828" width="3.243" height="12.333"/>
<rect x="37.429" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
<rect x="35.441" y="10.828" width="3.243" height="12.333"/>
</g>
</g>
<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M5,32.227V10.828
h3.417V23.5h1.256v8.727H5z M10.404,32.227V23.5h1.256V10.828h2.163V23.5h1.256v8.727H10.404z M15.81,32.227V23.5h1.256V10.828
h2.162V23.5h1.255v8.727H15.81z M25.888,32.227h-4.673V23.5h1.256V10.828h3.417V32.227z M26.619,32.227V10.828h3.417V23.5h1.256
v8.727H26.619z M32.023,32.227V23.5h1.256V10.828h2.162V23.5h1.256v8.727H32.023z M42.102,32.227h-4.673V23.5h1.256V10.828h3.417
V32.227z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

react/src/svg/fx_limiter.svg
+15
View File
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1_1_" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" points="5.5,53.25 24,12.5 65.5,12.5 "/>
</g>
<g>
<path d="M22.389,10H47V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v34c0,2.853,1.994,5.236,4.662,5.845L22.389,10z"/>
<path d="M25.61,15L11.083,47H41c3.313,0,6-2.688,6-6V15H25.61z"/>
</g>
<path d="M109,15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 982 B

react/src/svg/fx_lr.svg
+19
View File
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1_1_" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="6" d="M24,9.328c0,4.971-4.029,9-9,9H-0.605
c-4.971,0-9-4.029-9-9V-9.328c0-4.971,4.029-9,9-9H15c4.971,0,9,4.029,9,9V9.328z"/>
<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="6" d="M24,57.328c0,4.971-4.029,9-9,9H-0.605
c-4.971,0-9-4.029-9-9V38.672c0-4.971,4.029-9,9-9H15c4.971,0,9,4.029,9,9V57.328z"/>
</g>
<g>
<path d="M41,1H28v8.328c0,6.617-5.383,12-12,12H1v5.344h15c6.617,0,12,5.383,12,12V47h13c3.313,0,6-2.688,6-6V7
C47,3.687,44.313,1,41,1z"/>
<path d="M16,32.672H1V41c0,3.313,2.687,6,6,6h15v-8.328C22,35.363,19.309,32.672,16,32.672z"/>
<path d="M22,9.328V1H7C3.687,1,1,3.687,1,7v8.328h15C19.309,15.328,22,12.636,22,9.328z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/fx_mixer.svg
+37
View File
@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="x">
</g>
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<g display="inline">
<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" x1="11.5" y1="29" x2="11.5" y2="38.5"/>
<circle fill="#FFFFFF" cx="11.5" cy="13.5" r="2.5"/>
<circle fill="#FFFFFF" cx="11.5" cy="20.5" r="2.5"/>
</g>
<g display="inline">
<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" x1="21.5" y1="29" x2="21.5" y2="38.5"/>
<circle fill="#FFFFFF" cx="21.5" cy="13.5" r="2.5"/>
<circle fill="#FFFFFF" cx="21.5" cy="20.5" r="2.5"/>
</g>
<g display="inline">
<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" x1="31.5" y1="29" x2="31.5" y2="38.5"/>
<circle fill="#FFFFFF" cx="31.5" cy="13.5" r="2.5"/>
<circle fill="#FFFFFF" cx="31.5" cy="20.5" r="2.5"/>
</g>
</g>
<g id="Compound">
<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M14,38.5
c0,1.381-1.119,2.5-2.5,2.5S9,39.881,9,38.5V29c0-1.381,1.119-2.5,2.5-2.5S14,27.619,14,29V38.5z M11.5,23
C10.119,23,9,21.88,9,20.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S12.881,23,11.5,23z M11.5,16C10.119,16,9,14.88,9,13.5
s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S12.881,16,11.5,16z M24,38.5c0,1.381-1.119,2.5-2.5,2.5S19,39.881,19,38.5V29
c0-1.381,1.119-2.5,2.5-2.5S24,27.619,24,29V38.5z M21.5,23c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5
S22.881,23,21.5,23z M21.5,16c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S22.881,16,21.5,16z M34,38.5
c0,1.381-1.119,2.5-2.5,2.5S29,39.881,29,38.5V29c0-1.381,1.119-2.5,2.5-2.5S34,27.619,34,29V38.5z M31.5,23
c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S32.881,23,31.5,23z M31.5,16c-1.381,0-2.5-1.12-2.5-2.5
s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S32.881,16,31.5,16z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

react/src/svg/fx_modulator.svg
+75
View File
@@ -0,0 +1,75 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<circle cx="24" cy="23.999" r="23"/>
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path id="full_sin_1_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-12.638,28.917
M-12.64,28.914c1.498,5.253,2.994,10.507,4.7,10.507 M-3.248,28.914c-1.497,5.251-2.992,10.507-4.698,10.507 M-3.249,28.914
c1.497-5.253,2.994-10.507,4.699-10.507 M6.143,28.915c-1.495-5.254-2.991-10.508-4.697-10.508 M6.143,28.917
c1.498,5.254,2.994,10.507,4.696,10.507 M15.536,28.917c-1.498,5.254-2.994,10.507-4.699,10.507 M15.536,28.918
c1.495-5.254,2.99-10.507,4.697-10.507 M24.926,28.918c-1.497-5.254-2.993-10.507-4.698-10.507 M24.926,28.915
c1.496,5.253,2.99,10.508,4.697,10.508 M34.314,28.915c-1.495,5.253-2.99,10.508-4.697,10.508 M34.314,28.915
c1.499-5.252,2.994-10.505,4.698-10.505 M43.706,28.917c-1.495-5.254-2.992-10.507-4.696-10.507 M43.706,28.915
c1.496,5.253,2.992,10.508,4.701,10.508 M53.098,28.915c-1.496,5.253-2.99,10.508-4.697,10.508 M53.098,28.917
c1.498-5.254,2.991-10.507,4.698-10.507 M62.488,28.917C60.99,23.663,59.497,18.41,57.79,18.41 M62.488,28.914
c1.494,5.253,2.991,10.507,4.698,10.507 M71.879,28.914c-1.493,5.251-2.991,10.507-4.696,10.507 M71.879,28.914
c1.496-5.253,2.99-10.507,4.697-10.507 M81.272,28.915c-1.498-5.254-2.996-10.508-4.698-10.508 M81.272,28.917
c1.496,5.254,2.993,10.507,4.696,10.507 M90.663,28.917c-1.495,5.254-2.993,10.507-4.696,10.507 M90.663,28.918"/>
<path id="full_sin_2_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-3.998,19.851
M-4,19.848c1.498,5.253,2.994,10.508,4.7,10.508 M5.392,19.848C3.896,25.1,2.4,30.355,0.694,30.355 M5.391,19.848
C6.888,14.595,8.385,9.341,10.09,9.341 M14.782,19.849c-1.495-5.254-2.991-10.508-4.697-10.508 M14.782,19.851
c1.498,5.254,2.994,10.507,4.696,10.507 M24.176,19.851c-1.498,5.254-2.994,10.507-4.699,10.507 M24.176,19.852
c1.494-5.254,2.99-10.507,4.695-10.507 M33.564,19.852c-1.496-5.254-2.992-10.507-4.697-10.507 M33.564,19.849
c1.498,5.252,2.992,10.506,4.699,10.506 M42.953,19.849c-1.494,5.252-2.99,10.506-4.697,10.506 M42.953,19.849
c1.5-5.253,2.996-10.506,4.699-10.506 M52.346,19.851C50.85,14.596,49.354,9.343,47.65,9.343 M52.346,19.849
c1.496,5.252,2.992,10.506,4.701,10.506 M61.736,19.849c-1.494,5.252-2.988,10.506-4.695,10.506 M61.736,19.851
c1.498-5.254,2.992-10.507,4.699-10.507 M71.129,19.851c-1.498-5.254-2.992-10.507-4.699-10.507 M71.129,19.848
c1.492,5.253,2.99,10.508,4.697,10.508 M80.52,19.848c-1.494,5.252-2.992,10.508-4.697,10.508 M80.52,19.848
c1.496-5.253,2.988-10.507,4.695-10.507 M89.912,19.849c-1.498-5.254-2.996-10.508-4.699-10.508 M89.912,19.851
c1.496,5.254,2.994,10.507,4.697,10.507 M99.303,19.851c-1.496,5.254-2.992,10.507-4.695,10.507 M99.303,19.852"/>
</g>
<g id="Composed">
<g>
<path d="M32.137,20.311c-0.006-0.016-0.011-0.032-0.015-0.048c-0.858-3.013-2.245-7.882-3.253-9.208
c-1.01,1.325-2.394,6.195-3.251,9.207c-0.003,0.012-0.006,0.023-0.01,0.035c-0.293,1.029-0.569,1.985-0.835,2.88
c0.492,1.501,1.004,3.257,1.581,5.28c0.005,0.016,0.01,0.031,0.014,0.047l0.007,0.023c0.855,3.005,2.239,7.861,3.245,9.185
c1.008-1.325,2.394-6.191,3.25-9.202l2.239,0.637c-0.006-0.01-0.011-0.021-0.017-0.031l-0.778-0.2l-1.432-0.449
c0.293-1.027,0.569-1.982,0.835-2.877C33.225,24.089,32.714,22.333,32.137,20.311z"/>
<path d="M36.87,25.533c0.485,1.389,0.97,2.558,1.39,3.11c0.64-0.841,1.43-3.104,2.141-5.415c-0.484-1.389-0.969-2.557-1.389-3.108
C38.373,20.96,37.582,23.225,36.87,25.533z"/>
<path d="M1.433,17c0.005,0,0.009,0,0.015,0c0.009,0,0.011,0,0.015,0c1.069,0,1.911,0.599,2.674,1.826
c2.052-7.168,3.316-10.967,5.936-10.984c0.004,0,0.007,0.004,0.015,0.001c0.007,0.003,0.01,0.003,0.015,0.002
c2.702,0.017,3.959,3.999,6.123,11.604c0.003,0.011,0.006,0.033,0.009,0.044c0.109,0.383,0.227,0.818,0.351,1.249
C17.616,18.25,18.683,17,20.213,17c0.006,0,0.011,0,0.017,0c0.007,0,0.012,0,0.017,0c1.069,0,1.911,0.68,2.673,1.909
C24.969,11.737,26.232,8,28.855,8c0.005,0,0.009,0,0.014,0s0.009,0,0.014,0c2.694,0,3.953,3.901,6.11,11.475
c0.005,0.015,0.01-0.042,0.014-0.026l0.012,0.051c0.108,0.381,0.226,0.814,0.35,1.243C36.401,18.247,37.469,17,39.001,17
c0.004,0,0.011,0,0.01,0c0.005,0,0.007,0,0.011,0c1.071,0,1.915,0.675,2.679,1.903c1.88-6.559,3.102-10.227,5.3-10.811V7
c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v10.046C1.142,17.022,1.283,17,1.433,17z"/>
<path d="M44.396,20.26c-0.296,1.041-0.574,2.006-0.842,2.91c0.493,1.504,1.006,3.266,1.584,5.296
c0.004,0.013,0.008,0.025,0.011,0.038l0.002,0.006c0.497,1.747,1.173,4.115,1.85,6.058V12.255
c-0.894,2.018-1.911,5.579-2.595,7.97C44.402,20.236,44.399,20.248,44.396,20.26z"/>
<path d="M1.448,20.117C1.306,20.305,1.155,20.571,1,20.885v7.27c0.576-1.054,1.235-2.969,1.838-4.927
C2.353,21.838,1.868,20.669,1.448,20.117z"/>
<path d="M4.602,19.619c0.003,0.007,0.007,0.014,0.011,0.021l0.778,0.208l-0.015-0.004l0.003,0.001L4.602,19.619z"/>
<path d="M18.089,25.536c0.485,1.391,0.97,2.56,1.389,3.111c0.639-0.84,1.43-3.103,2.142-5.414
c-0.485-1.391-0.971-2.56-1.391-3.112C19.59,20.961,18.8,23.225,18.089,25.536z"/>
<path d="M42.275,29.424c-0.004-0.014-0.009-0.047-0.012-0.061c-0.111-0.392-0.232-0.779-0.359-1.223
C40.876,30.627,39.812,32,38.286,32c-0.009,0-0.019,0-0.026,0c-0.011,0-0.019,0-0.026,0c-1.064,0-1.903-0.722-2.663-1.947
c-2.049,7.167-3.313,10.85-5.93,10.871c-0.007,0-0.013,0.003-0.021,0.001c-0.006,0.002-0.014,0.003-0.021,0.003
c-2.691-0.022-3.947-3.977-6.102-11.543c-0.005-0.016-0.01-0.022-0.014-0.038l-0.002,0.011c-0.111-0.391-0.231-0.776-0.359-1.217
C22.088,30.64,21.02,32,19.484,32c-0.002,0-0.004,0-0.006,0c-0.003,0-0.005,0-0.006,0c-1.073,0-1.917-0.674-2.681-1.905
C14.734,37.272,13.471,41,10.844,41c-0.001,0-0.003,0-0.005,0c-0.001,0-0.001,0-0.002,0c-0.002,0-0.004,0-0.005,0
c-2.703,0-3.96-4-6.128-11.605c-0.004-0.012-0.007-0.046-0.011-0.059c-0.109-0.385-0.228-0.763-0.352-1.195
C3.376,30.472,2.376,31.804,1,31.967V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-0.422
C45.185,39.368,44.025,35.57,42.275,29.424z"/>
<path d="M7.585,28.505c0.003,0.013,0.007,0.025,0.01,0.038c0.858,3.011,2.239,7.85,3.243,9.171
c1.006-1.323,2.392-6.183,3.249-9.188h0c0.001-0.006,0.003-0.012,0.005-0.018c0.296-1.042,0.575-2.009,0.843-2.914
c-0.496-1.511-1.012-3.28-1.593-5.321c-0.003-0.012-0.006-0.023-0.009-0.035c-0.857-3.015-2.239-7.865-3.246-9.187
c-1.008,1.325-2.395,6.19-3.252,9.2l-1.444-0.404l0.053,0.015l-0.041-0.012l1.424,0.431c-0.294,1.032-0.571,1.992-0.837,2.889
C6.487,24.686,7.003,26.459,7.585,28.505z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

react/src/svg/fx_oscillator.svg
+30
View File
@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1_1_" display="none">
<circle cx="24" cy="23.999" r="23"/>
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<path id="full_sin_2_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-4.64,16.94
c1.398,3.74,2.795,7.481,4.388,7.481 M4.129,16.94c-1.397,3.739-2.793,7.481-4.386,7.481 M4.128,16.94
c1.397-3.74,2.795-7.481,4.387-7.481 M12.896,16.941C11.5,13.2,10.104,9.459,8.511,9.459 M12.896,16.942
c1.398,3.741,2.795,7.481,4.385,7.481 M21.665,16.942c-1.398,3.741-2.795,7.481-4.387,7.481 M21.665,16.943
c1.396-3.741,2.792-7.481,4.385-7.481 M30.432,16.943c-1.396-3.741-2.793-7.481-4.386-7.481 M30.432,16.941
c1.397,3.74,2.793,7.481,4.387,7.481 M39.197,16.941c-1.396,3.74-2.793,7.481-4.387,7.481 M39.197,16.941
c1.398-3.74,2.796-7.48,4.387-7.48 M47.966,16.942c-1.396-3.741-2.794-7.481-4.385-7.481 M47.966,16.941
c1.396,3.74,2.793,7.481,4.39,7.481 M56.732,16.941c-1.396,3.74-2.791,7.481-4.385,7.481 M56.732,16.942
c1.398-3.741,2.793-7.481,4.388-7.481 M65.501,16.942c-1.397-3.741-2.793-7.481-4.388-7.481 M65.501,16.94
c1.396,3.74,2.793,7.481,4.388,7.481 M74.27,16.94c-1.396,3.739-2.793,7.481-4.386,7.481 M74.27,16.94
c1.396-3.74,2.791-7.481,4.385-7.481 M83.038,16.941c-1.397-3.741-2.797-7.482-4.388-7.482 M83.038,16.942
c1.396,3.741,2.795,7.481,4.385,7.481 M91.807,16.942c-1.396,3.741-2.795,7.481-4.386,7.481"/>
<polyline id="Saw" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" points="-6.75,27.423
8.747,12.459 8.747,27.402 23.467,12.462 23.467,27.423 38.316,12.459 38.316,27 54.096,12.459 53.385,27.423 69.167,12.459 "/>
</g>
<g>
<path d="M10.247,8.925v14.817l14.72-14.94v14.979l14.85-14.964v14.76L47,16.958V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7
v10.854L10.247,8.925z"/>
<path d="M36.816,30.422V16.1L21.967,31.064V16.122L7.247,31.062V15.993L1,22.024V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6
V21.038L36.816,30.422z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

react/src/svg/fx_parametric_eq.svg
Executable
+15
View File
@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="x">
</g>
<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M19.996,38.5
c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M17.496,28.019
c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S18.877,28.019,17.496,28.019z M29.996,38.5
c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M37.504,31.021
c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S38.885,31.021,37.504,31.021z M40.004,38.5
c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M27.496,23.016
c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S28.877,23.016,27.496,23.016z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

react/src/svg/fx_phaser.svg
+22
View File
@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Combined">
<g>
<path d="M28.602,32.402c1.899-0.775,2.621-2.884,2.882-4.072c0.517-2.352,0.188-5.232-0.903-7.903
c-0.302-0.739-0.646-1.417-1.017-2.049l-5.817,13.155c1.183,0.759,2.367,1.15,3.388,1.15
C27.652,32.684,28.146,32.589,28.602,32.402z"/>
<path d="M20.783,13.264c-1.898,0.775-2.62,2.884-2.881,4.071c-0.517,2.352-0.188,5.232,0.903,7.902
c0.354,0.866,0.763,1.655,1.208,2.373l5.883-13.304c-1.268-0.873-2.551-1.323-3.647-1.323
C21.733,12.983,21.24,13.077,20.783,13.264z"/>
<path d="M35.807,4.261l-3.896,8.812c1.318,1.549,2.452,3.392,3.299,5.464c1.486,3.64,1.898,7.499,1.158,10.867
c-0.803,3.65-2.943,6.431-5.875,7.628c-1.059,0.433-2.188,0.652-3.357,0.652c-1.847,0-3.696-0.549-5.431-1.532l-4.363,9.866
C19.45,46.654,21.684,47,24,47c12.703,0,23-10.297,23-23.001C47,15.613,42.511,8.279,35.807,4.261z"/>
<path d="M17.699,32.847c-1.414-1.601-2.628-3.531-3.522-5.719c-1.486-3.639-1.898-7.498-1.158-10.866
c0.802-3.65,2.942-6.43,5.874-7.627c1.059-0.433,2.189-0.652,3.358-0.652c1.942,0,3.889,0.598,5.701,1.68l3.311-7.486
C28.979,1.417,26.538,1,24,1C11.297,1,1,11.296,1,23.999c0,8.612,4.736,16.114,11.742,20.056L17.699,32.847z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

react/src/svg/fx_pitch.svg
+28
View File
@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="x">
</g>
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<line display="inline" stroke="#FFFFFF" stroke-width="4" x1="-2.085" y1="35.585" x2="51.918" y2="35.585"/>
<g display="inline">
<line x1="-3.085" y1="17.585" x2="50.918" y2="17.585"/>
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="4" x1="-3.085" y1="17.585" x2="-0.585" y2="17.585"/>
<line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-dasharray="5.0003,4.0003" x1="3.415" y1="17.585" x2="46.418" y2="17.585"/>
<line fill="none" stroke="#FFFFFF" stroke-width="4" x1="48.418" y1="17.585" x2="50.918" y2="17.585"/>
</g>
</g>
</g>
<g id="Compound">
<g>
<path d="M47,33.585V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v26.585H47z M39.418,15.585h5v4h-5V15.585z M30.417,15.585h5v4h-5
V15.585z M21.417,15.585h5v4h-5V15.585z M12.416,15.585h5v4h-5V15.585z M3.415,15.585h5v4h-5V15.585z"/>
<path d="M1,37.585V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6v-3.415H1z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

react/src/svg/fx_plugin.svg
+22
View File
@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1" display="none">
<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" x1="1" y1="25" x2="25" y2="25"/>
<circle display="inline" fill="#FFFFFF" cx="24" cy="25" r="4.667"/>
<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="4" x1="34" y1="25" x2="48" y2="25"/>
<path display="inline" fill="#FFFFFF" d="M24,13c-4.43,0-8.297,2.419-10.376,6h5.103c1.41-1.241,3.253-2,5.274-2
c4.411,0,8,3.589,8,8s-3.589,8-8,8c-2.021,0-3.864-0.76-5.274-2h-5.103c2.079,3.581,5.946,6,10.376,6c6.617,0,12-5.383,12-12
C36,18.383,30.617,13,24,13z"/>
</g>
<g id="Combined">
<path d="M35.819,27C34.863,32.666,29.935,37,24,37c-4.43,0-8.298-2.419-10.376-6h5.103c1.41,1.24,3.253,2,5.274,2
c4.411,0,8-3.589,8-8s-3.589-8-8-8c-2.021,0-3.864,0.759-5.274,2h-5.103c2.079-3.581,5.947-6,10.376-6
c5.935,0,10.862,4.334,11.819,10H47V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v16h18.799c0.75-1.572,2.342-2.667,4.201-2.667
c2.577,0,4.667,2.089,4.667,4.667c0,2.577-2.09,4.667-4.667,4.667c-1.858,0-3.45-1.095-4.201-2.667H1v14c0,3.313,2.687,6,6,6h34
c3.313,0,6-2.687,6-6V27H35.819z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

Some files were not shown because too many files have changed in this diff Show More