Merge pull request #77 from olzzon/develop

Major update of Sisyfos planned as 1.0

README.md

@@ -1,16 +1,29 @@
 # Sisyfos Audio Controller
 
-## Audiomixer control build with the logic from a videomixer.
+## Audiomixer control build for intelligent automation.
 
 You use the fader for the level, and PGM on/off for fade-in/out.
-TAKE crossfades between PGM & PST:
-<img src="Docs/pix/ProducersAudioMixer01.png">
+TAKE NEXT crossfades from NEXT to PGM
 
+It´s fast to see what faders are on-are, and whther they are PGM level or Voice over level
+<img src="Docs/pix/ProducersAudioMixerNext.png">
 
-### Snaps takes preset into PST:
+### Routing of Faders to Channels
+Routing of Faders to multiple channels or a single channel are possible. This way Sisyfos can control some or all channels on a mixer. And a single fader can be used for E.G. a 5.1 (on 6 mono faders)
 
+<img src="Docs/pix/ProducersAudioMixerRouting.png">
 
-<img src="Docs/pix/ProducersAudioMixer02.png">
+### Load/Save Routing
+Routing setups can be stored in STORAGE. So it´s possible to have different Routings dependent of what setup the Audio mixer is using.
+
+<img src="Docs/pix/ProducersAudioMixerStorage.png">
+
+
+
+### When Automation mode is Disabled in settings - snaps takes preset into PST/NEXT:
+
+
+<img src="Docs/pix/ProducersAudioMixerSnaps.png">
 
 
 
@@ -39,6 +52,10 @@ yarn start
   * Todo:
     * Group support
     * Meter calibration
+* SSL System T - Broadcast Mixer
+  * SSL Automation Protocol for System T
+  * Port 10001
+  * Set Protocol Latency to around 100ms
 * Midas Master
   * OSC protocol for Midas M32 and Behringer X32
   * Port 10023
@@ -66,8 +83,16 @@ yarn start
   * Default Port is 8000
   * Controls Fader On/Off with preset level from Sisyfos.
   * Easy implementation of state based lightcontrol from Automation.
+  * the PROTOCOL DELAY setting should be raised to 50ms, as DMXIS is responding a little slowly.
 * midi
   * Generic MIDI - still preminilary
+  * When using MIDI protocols, the PROTOCOL DELAY setting should be rised to at least 50ms
+* Yamaha QL1
+  * MIDI based Protocol
+  * For now only the 24 first channels are supported.
+  * Set label not supported
+  * When using MIDI protocols, the PROTOCOL DELAY setting should be rised to at least 50ms
+
 
 
 ## Automation Support:
@@ -76,10 +101,11 @@ It´s possible to control the Producers-Audio-Mixer from an automationsystem, fo
 ## Set state:
 To set the state send these OSC commands from you Automation to ProducersAudioMixer Port: 5255:
 #### Set channel to PGM (optional: indiviaul fadetime): 
+(the integer defines: 0 - Off, 1 - Pgm On, 2 - Voice Over)
 (if second is missing it will take default fade value)
-/ch/1/mix/pgm - integer: { 0 or 1 } - float { fadetime in ms }
+/ch/1/mix/pgm - integer: { 0, 1 or 2 } - float { fadetime in ms }
 #### Set channel to PST:
-/ch/1/mix/pst - integer: { 0 or 1 }
+/ch/1/mix/pst - integer: { 0, 1 or 2 } (the integer defines: 0 - Off, 1 - Pgm On, 2 - Voice Over)
 #### Set channel faderlevel:
 /ch/1/mix/faderlevel - float {between 0 and 1}
 #### Set channel label:
@@ -90,6 +116,8 @@ To set the state send these OSC commands from you Automation to ProducersAudioMi
 /snap/1
 #### Fade all channels to black (mute)
 /fadetoblack
+#### Clear all pst buttons
+/clearpst
 #### Hide or show channel strips on GUI: 
 /ch/{value1}/visible - integer { 0 or 1 }
 

package.json

@@ -39,48 +39,45 @@
     },
     "dependencies": {
         "@types/hoist-non-react-statics": "^3.3.1",
-        "@types/react-redux": "^7.0.9",
-        "@types/react-select": "^2.0.19",
+        "@types/react-redux": "^7.1.4",
+        "@types/react-select": "^3.0.4",
         "casparcg-connection": "^4.7.0",
         "classnames": "^2.2.6",
         "emberplus": "https://github.com/olzzon/tv-automation-emberplus-connection.git",
-        "osc": "https://github.com/PieceMeta/osc.js/tarball/master",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
-        "react-redux": "^7.0.3",
-        "react-select": "^3.0.3",
-        "redux": "^4.0.1",
-        "tv-automation-server-core-integration": "^1.1.0",
-        "typescript": "^3.5.1",
-        "webmidi": "^2.3.3"
+        "osc": "https://github.com/olzzon/tv2-osc.js-no-serialport.git",
+        "react": "^16.10.1",
+        "react-dom": "^16.10.1",
+        "react-redux": "^7.1.1",
+        "react-select": "^3.0.6",
+        "redux": "^4.0.4",
+        "typescript": "^3.6.3",
+        "webmidi": "^2.5.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.4.5",
-        "@babel/plugin-proposal-class-properties": "^7.4.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+        "@babel/core": "^7.6.2",
+        "@babel/plugin-proposal-class-properties": "^7.5.5",
+        "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
         "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
-        "@babel/preset-env": "^7.4.5",
+        "@babel/preset-env": "^7.6.2",
         "@babel/preset-react": "^7.0.0",
-        "@babel/preset-typescript": "^7.3.3",
-        "@types/react": "^16.8.19",
-        "@types/react-dom": "^16.8.4",
+        "@babel/preset-typescript": "^7.6.0",
         "babel-loader": "^8.0.6",
         "babili-webpack-plugin": "^0.1.2",
-        "css-loader": "^2.1.1",
-        "electron": "^4.1.5",
-        "electron-packager": "^13.1.1",
-        "file-loader": "^3.0.1",
+        "css-loader": "^3.2.0",
+        "electron": "^6.0.10",
+        "electron-packager": "^14.0.6",
+        "file-loader": "^4.2.0",
         "html-webpack-plugin": "^3.2.0",
-        "mini-css-extract-plugin": "^0.5.0",
+        "mini-css-extract-plugin": "^0.8.0",
         "postcss-cssnext": "^3.1.0",
         "postcss-import": "^12.0.1",
         "postcss-loader": "^3.0.0",
-        "postcss-nested": "^4.1.1",
+        "postcss-nested": "^4.1.2",
         "postcss-pxtorem": "^4.0.1",
-        "style-loader": "^0.23.1",
-        "ts-loader": "^6.0.1",
-        "webpack": "^4.32.2",
-        "webpack-cli": "^3.3.2",
-        "webpack-dev-server": "^3.4.1"
+        "style-loader": "^1.0.0",
+        "ts-loader": "^6.2.0",
+        "webpack": "^4.41.0",
+        "webpack-cli": "^3.3.9",
+        "webpack-dev-server": "^3.8.1"
     }
 }

src/assets/css/Channel.css

@@ -1,13 +1,12 @@
 .channel-body {
     color: white;
-    background-color: #2f2f2f;
+    background: linear-gradient(#2f2f2f 0px,#2f2f2f 730px, rgb(0, 0, 0) 1px, #2f2f2f 740px, #2f2f2f 100%);
     margin: 4px;
     border-radius: 10px;
     max-width: 100px;
     position: relative;
 }
 
-
 .channel-name {
     margin-top: 10px;
     text-align: center;
@@ -27,6 +26,7 @@
     color: white;
     height: 90px;
     width: 80px;
+    font-size: 105%;
     background-color: rgb(66, 27, 27);
     border-radius: 7px;
     border-color: rgb(99, 99, 99);
@@ -37,22 +37,47 @@
     background-color: red;
 }
 
-.channel-pst-button {
+
+.channel-vo-button {
     outline : none;
     -moz-outline : none;
     margin-left: 10px;
     margin-top: 5px;
     color: white;
     height: 90px;
     width: 80px;
-    background-color: rgb(59, 73, 59);
+    font-size: 105%;
+    background-color: rgb(66, 54, 27);
+    border-radius: 7px;
+    border-color: rgb(99, 99, 99);
+}
+
+
+.channel-vo-button.on {
+    background-color: rgb(207, 135, 1);
+}
+
+.channel-pst-button {
+    outline : none;
+    -moz-outline : none;
+    margin-left: 10px;
+    margin-top: 30px;
+    color: white;
+    height: 90px;
+    width: 80px;
+    font-size: 103%;
+    background-color: rgb(88, 88, 88);
     border-radius: 7px;
     border-color: rgb(99, 99, 99);
     margin-bottom: 0;
 }
 
 .channel-pst-button.on {
-    background-color: green;
+    background-color: rgb(124, 0, 0);
+}
+
+.channel-pst-button.vo {
+    background-color: rgb(163, 106, 0);
 }
 
 .channel-pfl-button {
@@ -122,11 +147,11 @@
     width: 60px;
     border-radius: 7px;
     border-color: rgb(68, 68, 68);
-    background-color: rgb(89, 83, 10);
+    color: rgb(89, 83, 10);
 }
 
 .channel-snap-button.on {
-    background-color: rgb(183, 182, 20);
+    color: rgb(183, 182, 20);
 }
 
 
@@ -176,6 +201,17 @@ input[type=range]::-webkit-slider-thumb {
     position: relative;
 }
 
+input[color-pgm=pgm-on]::-webkit-slider-thumb {
+    border: 1px solid rgb(253, 60, 60);
+    background: linear-gradient(to left, #3a1d1d 0%, #c04d4d 20%, #811919 50%, #00a 1px, #8a2626 52%, #bd5151 80%, #411f1f 100%);
+}
+
+input[color-vo=vo-on]::-webkit-slider-thumb {
+    border: 1px solid rgb(252, 255, 86);
+    background: linear-gradient(to left, #353006 0%, #c59327 20%, #856b14 50%, #00a 1px, #866724 52%, #cca22d 80%, #463b0a 100%);
+}
+
+
 input[type=range]:focus::-webkit-slider-runnable-track {
     background: #000000;
 }

src/assets/css/ChannelRouteSettings.css

@@ -0,0 +1,78 @@
+.channel-settings-body {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 400px;
+	overflow: auto;
+    max-height: 90vh;
+    background-color: rgb(31, 31, 31);
+    border-color: rgb(124, 124, 124);
+    border-style: solid;
+    border-width: 4px;
+	text-align: left;
+	z-index: 1;
+
+	color: #fff;
+}
+
+.channel-settings-body > h2 {
+	border-bottom: 1px solid #999;
+	margin: 0;
+	padding: 10px 0;
+	line-height: 50px;
+	text-align: center;
+
+}
+
+
+.channel-settings-body > h4 {
+	margin: 0;
+	margin-left: 40px;
+	padding: 0px 0;
+	line-height: 20px;
+	text-align: left;
+	font-size: 110%;
+}
+
+.channel-settings-body > .close {
+	position: absolute;
+	outline : none;
+    border-color: rgb(99, 99, 99);
+    background-color: rgb(27, 27, 27);
+	border-radius: 100%;
+	display: block;
+	color: #fff;
+	width: 50px;
+	height: 50px;
+	font-size: 30px;
+	line-height: 50px;
+	top: 9px;
+	right: 9px;
+}
+
+.channel-settings-group {
+	border-bottom: 1px solid #999;
+}
+
+.channel-settings-group > button {
+	line-height: 10px;
+
+	outline : none;
+    border-color: rgb(99, 99, 99);
+    background-color: rgb(27, 27, 27);
+    margin-right: auto;
+	margin-top: 15px;
+    margin-bottom: 15px;
+	margin-left: auto;
+	border-radius: 7px;
+	display: block;
+	color: #fff;
+	width: 90%;
+	font-size: 30px;
+    line-height: 50px;
+}
+
+.channel-settings-group > button.active {
+	border-color: rgb(17, 0, 255);
+}

src/assets/css/Channels.css

@@ -8,7 +8,6 @@
 .channels-mix-body {
     max-width: 100px;
     min-height: 800px;
-    background-color: #414040;
     color: white;
     background-color: #2f2f2f;
     margin: 4px;
@@ -45,17 +44,32 @@
 }
 
 
+.channels-show-storage-button {
+    outline : none;
+    -moz-outline : none;
+    color: white;
+    height: 60px;
+    width: 90px;
+    border-color: rgb(71, 71, 71);
+    background-color: rgb(53, 53, 53);
+    margin-left: 5px;
+    margin-right: 4px;
+    margin-top: 10px;
+    border-radius: 7px;
+}
+
+
 .channels-mix-button {
     outline : none;
     -moz-outline : none;
     color: white;
     height: 90px;
     width: 90px;
-    border-color: rgb(18, 70, 11);
-    background-color: rgb(6, 70, 6);
+    border-color: rgb(139, 139, 139);
+    background-color: rgb(65, 65, 65);
     margin-left: 4px;
     margin-right: 4px;
-    margin-top: 106px;
+    margin-top: 50px;
     border-radius: 7px;
 }
 
@@ -67,7 +81,7 @@
     height: 90px;
     width: 90px;
     border-color: rgb(99, 99, 99);
-    background-color: rgb(66, 27, 27);
+    background-color: rgb(19, 19, 19);
     margin-left: 4px;
     margin-right: 4px;
     margin-top: 50px;