Merge branch 'release/v2.2.0'

# Conflicts:
#	README.md

README.md

@@ -2,12 +2,17 @@
 
 An application to create musical rhythms in MIDI.
 
+Try the app online: [www.hisschemoller.com/mpg](https://www.hisschemoller.com/mpg)<br />
+Desktop installers: [github.com/hisschemoller/music-pattern-generator/releases](https://github.com/hisschemoller/music-pattern-generator/releases)
+
 ## Overview
 
 Music Pattern Generator is an app to create musical rhythms. It sends MIDI data, so it won’t make any sounds by itself. For that you need to connect it to MIDI soft- or hardware that can handle MIDI data to produce sound.
 
 ![App window](assets/img/mpg-2_1-animation.gif 'App window')
 
+Watch a [Music Pattern Generator 2.1 overview video on YouTube](https://youtu.be/Pz5x5eEtuTM).
+
 ## Processors
 
 Music Pattern Generator has a modular setup. Modules are called processors and are connected to form a network. Processors can produce MIDI notes, transform incoming data or send notes to MIDI output ports.
@@ -151,9 +156,37 @@ To remove an assignment click the delete (x) button at the right of the assignme
 
 To actually use the remote control, exit MIDI Learn mode by clicking the 'MIDI Learn' button again. Now the assigned controller will control the processor setting. You'll see and the processor graphic and editor setting follow the incoming MIDI data.
 
+## Snapshots
+
+![Snapshots](assets/img/snapshots.gif 'Snapshots')
+
+Snapshots store and recall the settings of all processors in one go. Handy for immediate changes to many parameters at the same time. 16 snapshots can be stored. The feature was added in version 2.2.
+
+Open the Snapshots panel with the camera button in the Control Bar. The image above shows snapshot #2 assigned and #3 assigned and active. Click a snapshot to activate it. All processor settings will be set to their stored value.
+
+### Editing Snapshots
+
+![Snapshots Edit Mode](assets/img/snapshots-edit.gif 'Snapshots Edit Mode')
+
+Click the 'Edit Snapshots' button to enter Edit Mode. Each snapshot slot will show a '+' button. Click a '+' button to store all current processor settings in that snapshot slot, or to overwrite previously stored settings.
+
+### Snapshots remote MIDI control
+
+![Snapshots Assignments Mode](assets/img/snapshots-assignments.gif 'Snapshots Assignments Mode')
+
+Snapshot slots can be assigned to MIDI controllers. Just like processor settings can. Snapshots may then be activated by remote MIDI control.
+
+1. Open the Assignments panel by clicking the 'MIDI connector' button in the Control Bar. The Assignments panel appears below the Snapshots and the snapshot slots show a dashed border to indicate they're now assignable.
+2. Click a slot to arm it for being assigned. The slot shows a darker background. See slot #2 in the image above. 
+3. Play a note or turn a knob on an attached MIDI controller. The armed slot will now be assigned to the received MIDI note or continuous controller. It shows a solid border to indicate it has been assigned. And the snapshot appears in the Assignments panel. See image below.
+
+![Snapshots Assigned](assets/img/snapshots-assigned.gif 'Snapshots Assigned')
+
+For general information about MIDI controller setup or making and removing assignments, please see the chapter 'MIDI Remote Control' above.
+
 ## The Control Bar
 
-![The Control Bar](assets/img/controlbar.jpg 'The Control Bar')
+![The Control Bar](assets/img/controlbar.gif 'The Control Bar')
 
 The controls, from left to right
 
@@ -167,6 +200,7 @@ The tempo number input, to set the tempo in Beats Per Minute (BPM)
 - Library
 - Preferences
 - Assignments
+- Snapshots
 - Connections
 - Settings Editor
 - About

assets/linux/control

@@ -1,5 +1,5 @@
 Package: music-pattern-generator
-Version: 2.1
+Version: 2.2
 Architecture: all
 Maintainer: Wouter Hisschemöller <[email protected]>
-Description: A music program to generate MIDI rhythms patterns.
+Description: A music program to generate MIDI rhythm patterns.

assets/linux/music-pattern-generator.desktop

@@ -25,4 +25,4 @@ Encoding=UTF-8
 Terminal=false
 
 # A comment which can/will be used as a tooltip
-Comment=A music program to generate MIDI rhythms patterns.
+Comment=A music program to generate MIDI rhythm patterns.

assets/windows/inno_setup_script_mpg_2_1.iss

@@ -3,7 +3,7 @@
 
 #define MyAppName "Music Pattern Generator"
 #define MyAppVersion "2.1"
-#define MyAppPublisher "Wouter Hisschemöller"
+#define MyAppPublisher "Wouter Hisschemöller"
 #define MyAppURL "https://www.hisschemoller.com/"
 #define MyAppExeName "mpg_2_1.exe"
 
@@ -45,4 +45,3 @@ Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks:
 
 [Run]
 Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent
-

assets/windows/inno_setup_script_mpg_2_2.iss

@@ -0,0 +1,47 @@
+; Script generated by the Inno Setup Script Wizard.
+; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!
+
+#define MyAppName "Music Pattern Generator"
+#define MyAppVersion "2.2"
+#define MyAppPublisher "Wouter Hisschemöller"
+#define MyAppURL "https://www.hisschemoller.com/"
+#define MyAppExeName "mpg_2_2.exe"
+
+[Setup]
+; NOTE: The value of AppId uniquely identifies this application.
+; Do not use the same AppId value in installers for other applications.
+; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
+AppId={{718598CA-086C-4A28-94B6-90CBCDDE771E}
+AppName={#MyAppName}
+AppVersion={#MyAppVersion}
+;AppVerName={#MyAppName} {#MyAppVersion}
+AppPublisher={#MyAppPublisher}
+AppPublisherURL={#MyAppURL}
+AppSupportURL={#MyAppURL}
+AppUpdatesURL={#MyAppURL}
+DefaultDirName={pf}\{#MyAppName}
+DisableProgramGroupPage=yes
+LicenseFile=C:\Projects\music-pattern-generator\LICENCE
+OutputDir=C:\Projects\music-pattern-generator app 2.2
+OutputBaseFilename=mpg_2_2_installer
+SetupIconFile=C:\Projects\music-pattern-generator\assets\windows\music-pattern-generator.ico
+Compression=lzma
+SolidCompression=yes
+
+[Languages]
+Name: "english"; MessagesFile: "compiler:Default.isl"
+
+[Tasks]
+Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked
+
+[Files]
+Source: "C:\Projects\music-pattern-generator app 2.2\nwjs-v0.50.1-win-x64\mpg_2_2.exe"; DestDir: "{app}"; Flags: ignoreversion
+Source: "C:\Projects\music-pattern-generator app 2.2\nwjs-v0.50.1-win-x64\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
+; NOTE: Don't use "Flags: ignoreversion" on any shared system files
+
+[Icons]
+Name: "{commonprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
+Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
+
+[Run]
+Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

docs/build-and.package.md

@@ -1,5 +1,18 @@
 # Build and package
 
+## Create an updated version
+
+* Update version number in:
+  * package.json
+  * assets/linux/control
+* Windows
+  * Copy and adjust the Inno Setup script.
+    * assets/windows/inno_setup_script_mpg_2_1.iss
+  * Inno Setup
+    * In 'Welcome' panel select 'Open an existing script file'.
+    * Select 'More files...' to browse to the new script file.
+    * Click the Compile button or select menu Build > Compile.
+
 ## Run locally in browser
 
 A script in package.json starts Node.js and runs a simple Express app to serve the app in the browser on http://localhost:3008
@@ -36,7 +49,6 @@ NW can be installed as a development dependency. A script in package.json can ru
 3. Put `app.nw` inside the downloaded Mac release, in `nwjs.app/Contents/Resources/`. (right click on `nwjs.app` and choose 'Show Package Contents' to open it)
 4. To add the app icons, copy `/assets/icons/mac/icons.icns` and paste it into `nwjs.app/Contents/Resources/` as well. Rename the file to `app.icns` so it will replace the existing default icons.
 5. Also overwrite `nwjs.app/Contents/Resources/documents.icns` with the `icons.icns` file.
-6. https://stackoverflow.com/questions/49143875/how-to-rename-an-nwjs-app
 
 The file `nwjs.app` is now an executable that runs the app. Copy and rename it to `MusicPatternGenerator.app`. Doubleclick the app to run it.
 

docs/version-history.md

@@ -1,5 +1,13 @@
 # Version history
 
+### 2.2
+
+- Snapshots.
+- Euclid FX bypass parameter.
+- Euclidean processor's Channel, Pitch and Velocity parameters can be remote controlled by MIDI.
+- MIDI Note events can be used for remote control (besides MIDI CCs).
+- Bug fix: Creating infinite loops is not possible anymore.
+
 ### 2.1
 
 - Graphics rendered with WebGL using the three.js library.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "music-pattern-generator",
-    "version": "2.1",
+    "version": "2.2.0",
     "description": "MIDI rhythm and music pattern generator",
     "keywords": [
         "MIDI",
@@ -24,6 +24,6 @@
     "dependencies": {},
     "devDependencies": {
         "express": "^4.17.1",
-        "nw": "0.42.5-sdk"
+        "nw": "0.50.1-sdk"
     }
 }

server.js

@@ -10,4 +10,4 @@ app.use(express.static(rootDir));
 // Listen for HTTP requests on port 3007
 app.listen(port, () => {
   console.log('listening on %d', port);
-});
+});

src/css/remote.css

@@ -25,7 +25,7 @@
 }
 .remote__group-header-control {
     text-align: right;
-    width: 50px;
+    width: 80px;
 }
 .remote__group-header-delete {
     width: 40px;
@@ -47,7 +47,7 @@
 }
 .remote__item-control {
     text-align: right;
-    width: 50px;
+    width: 80px;
 }
 .remote__item-delete {
     height: var(--input-height);

src/css/snapshots.css

@@ -0,0 +1,135 @@
+/************************
+ * snapshots
+ ************************/
+
+ .snapshots {
+  background-color: var(--panel-bg-color);
+  position: relative;
+  width: 340px;
+}
+.snapshots .panel__viewport {
+  background-color: var(--panel-bg-color);
+}
+.snapshots__list {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  list-style: none;
+}
+.snapshots__list.edit-mode .snapshots__item-load {
+  flex-basis: 50%;
+}
+.snapshots__list.edit-mode .snapshots__item-store {
+  display: block;
+}
+.snapshots__item {
+  cursor: pointer;
+  flex-basis: 25%;
+  position: relative;
+}
+.snapshots__item.is-set.is-selected .snapshots__item-load {
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 10px,
+    var(--panel-bg-color) 10px,
+    var(--panel-bg-color) 20px
+  ),
+  linear-gradient(
+    to bottom,
+    var(--btn-color),
+    var(--btn-color)
+  );
+}
+.snapshots__item-load {
+  padding: 20px 10px;
+  text-align: center;
+}
+.snapshots__item-load:hover{
+  background-color: var(--btn-active-bg-color);
+}
+.snapshots__item-store {
+  display: none;
+  position: absolute;
+  right: 11px;
+  text-align: center;
+  top: 19px;
+}
+.snapshots__item-store .snapshots__item-label {
+  background-color: var(--btn-color);
+  color: var(--input-bg-color);
+  padding: 0 5px 2px;
+}
+.snapshots__item-store:hover .snapshots__item-label {
+  background-color: var(--btn-active-color);
+}
+.snapshots__item.is-set .snapshots__item-load {
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 10px,
+    var(--panel-bg-color) 10px,
+    var(--panel-bg-color) 20px
+  ),
+  linear-gradient(
+    to bottom,
+    var(--snapshot-strike),
+    var(--snapshot-strike)
+  );
+}.snapshots__item.is-set .snapshots__item-load:hover {
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 10px,
+    var(--panel-bg-color) 10px,
+    var(--panel-bg-color) 20px
+  ),
+  linear-gradient(
+    to bottom,
+    var(--btn-color),
+    var(--btn-color)
+  );
+}
+.snapshots__item-label {
+  font-size: 1 rem;
+}
+.snapshots__edit {}
+.snapshots__edit-check {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+.snapshots__edit-label {
+  cursor: pointer;
+  display: block;
+  padding: 10px;
+  text-align: center;
+}
+.snapshots__edit-label:hover {
+  background-color: var(--btn-active-bg-color);
+  color: var(--btn-hover-color);
+}
+.snapshots__edit-check:checked + .snapshots__edit-label {
+  color: var(--btn-active-color);
+}
+.snapshots__edit-check:checked + .snapshots__edit-label:hover {
+}
+.snapshots__learnmode {
+    border: 3px dashed var(--assign-border-color);
+    bottom: 0;
+    display: none;
+    left: 0;
+    margin: 1px;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.snapshots__learnmode.show {
+  display: block;
+}
+.snapshots__learnmode[data-selected='true'] {
+    background-color: var(--assign-bg-color);
+}
+.snapshots__learnmode[data-assigned='true'] {
+    border-color: var(--assign-border-assigned-color);
+    border-style: solid;
+}