Skip to content

Commit

Permalink
feat: CasparCG support as audio mixer (tv2#35)
Browse files Browse the repository at this point in the history
* chore: include stronger typing for OSC module
* feat(casparCG): initial implementation of CasparCG mixer
* feat(casparcg): move mixer geometry to external file
* fix(casparcg): remove premultiply channels, as it's not needed and causes bugs
* feat(casparcg): only show CasparCG option if geometry file found
* feat(casparcg): Allow to save channel labels in geometry file
  • Loading branch information
jstarpl authored Jun 7, 2019
1 parent 622281a commit d47cf5b
Show file tree
Hide file tree
Showing 22 changed files with 540 additions and 239 deletions.
55 changes: 55 additions & 0 deletions Docs/sisyfos-casparcg-geometry.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{
"label": "Sample Mixer Geometry",
"MONITOR_CHANNEL_FADER_LEVEL": [
[
{
"channel": 2,
"layer": 51
}
],
[
{
"channel": 2,
"layer": 52
}
],
[
{
"channel": 2,
"layer": 53
}
],
[
{
"channel": 2,
"layer": 54
}
]
],
"PGM_CHANNEL_FADER_LEVEL": [
[
{
"channel": 1,
"layer": 51
}
],
[
{
"channel": 1,
"layer": 52
}
],
[
{
"channel": 1,
"layer": 53
}
],
[
{
"channel": 1,
"layer": 54
}
]
]
}
5 changes: 4 additions & 1 deletion main.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ function createWindow() {
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
show: false
show: false,
webPreferences: {
nodeIntegration: true
}
})

// and load the index.html of the app.
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@types/hoist-non-react-statics": "^3.3.1",
"@types/react-redux": "^7.0.9",
"@types/react-select": "^2.0.19",
"casparcg-connection": "^4.7.0",
"osc": "https://github.com/PieceMeta/osc.js/tarball/master",
"react": "^16.8.6",
"react-dom": "^16.8.6",
Expand Down
69 changes: 68 additions & 1 deletion src/@types/osc/index.d.ts
Original file line number Diff line number Diff line change
@@ -1 +1,68 @@
declare module 'osc'
declare module 'osc' {
import { EventEmitter } from 'events'
import * as dgram from 'dgram'

interface TimeTag {
raw: number[],
native: number
}

interface OSCMessage {
address: string,
args: TypeAnnotatedArg | TypeAnnotatedArg[]
}

type OSCMessageOrBundle = OSCMessage | OSCBundle

interface OSCBundle {
timeTag: TimeTag,
packets: OSCMessageOrBundle[]
}

type OSCData = any

interface Colour {
r: number,
g: number,
b: number,
a: number
}

interface TypeAnnotatedArg {
type: string
value: any
}


interface OSCPort extends EventEmitter {
on(event: 'ready', handler: () => void): this
on(event: 'message', handler: (message: OSCMessage, timeTag: TimeTag | undefined, info: any) => void): this
on(event: 'bundle', handler: (bundle: OSCBundle, timeTag: TimeTag, info: any) => void): this
on(event: 'osc', handler: (packet: OSCMessageOrBundle, info: any) => void): this
on(event: 'raw', handler: (data: Uint8Array, info: any) => void): this
on(event: 'error', handler: (error: Error) => void): this
send(packet: OSCMessage | OSCBundle): void
}

interface UDPPortOptions {
localPort?: number,
localAddress?: string,
remotePort: number,
remoteAddress: string,
broadcast?: boolean,
multicastTTL?: number,
multicastMembership?: string[],
socket?: dgram.Socket,
metadata?: boolean
}
class UDPPort extends EventEmitter implements OSCPort {
constructor(options: UDPPortOptions)
on(event: "ready", handler: () => void): this
on(event: "message", handler: (message: OSCMessage, timeTag: TimeTag | undefined, info: any) => void): this
on(event: "bundle", handler: (bundle: OSCBundle, timeTag: TimeTag, info: any) => void): this
on(event: "osc", handler: (packet: OSCMessage | OSCBundle, info: any) => void): this
on(event: "raw", handler: (data: Uint8Array, info: any) => void): this
on(event: "error", handler: (error: Error) => void): this
send(packet: OSCMessage | OSCBundle): void
}
}
1 change: 1 addition & 0 deletions src/assets/css/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ body {
padding: 0;
font-family: sans-serif;
background-color: black;
user-select: none;
}

.App {
Expand Down
99 changes: 30 additions & 69 deletions src/assets/css/Channel.css
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,33 @@
color: white;
height: 40px;
width: 80px;
background-color: rgb(17, 0, 255);
background-color: rgb(9, 0, 59);
border-radius: 7px;
border-color: rgb(99, 99, 99);
}

@keyframes pfl-active-flash {
0% {
box-shadow: 0 0 10px rgba(105, 140, 255, 1);
}
50% {
box-shadow: 0 0 10px rgba(105, 140, 255, 1);
}
50.0001% {
box-shadow: 0 0 10px rgba(105, 140, 255, 0);
}
100% {
box-shadow: 0 0 10px rgba(105, 140, 255, 0);
}
}

.channel-pfl-button.pfl-active {
background-color: rgb(17, 0, 255);
animation: 2s pfl-active-flash;
animation-direction: normal;
animation-iteration-count: infinite;
}

.channel-snap-body {
margin-top: 10px;
}
Expand Down Expand Up @@ -109,78 +131,17 @@ input[type=range]::-webkit-slider-runnable-track {

input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #111111, 0px 0px 1px #1e1e1e;
border: 1px solid white;
height: 30px;
width: 10px;
border: 1px solid #aaa;
height: 50px;
width: 70px;
border-radius: 8px;
background: #919191;
background: linear-gradient(to left, #3a3a3a 0%, #c2c2c2 20%, #919191 50%, #00a 1px, #919191 52%, #c2c2c2 80%, #3a3a3a 100%);
cursor: pointer;
-webkit-appearance: none;
margin-top: -11px;
margin-top: -21px;
position: relative;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #000000;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
background: #424242;
border-radius: 5px;
border: 1px solid black;
}

input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #111111, 0px 0px 1px #1e1e1e;
border: 1px solid white;
height: 30px;
width: 30px;
border-radius: 8px;
background: #555bc8;
cursor: pointer;
}

input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}

input[type=range]::-ms-fill-lower {
background: #353535;
border: 1px solid black;
border-radius: 10px;
box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
}

input[type=range]::-ms-fill-upper {
background: #424242;
border: 1px solid black;
border-radius: 10px;
box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
}

input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #111111, 0px 0px 1px #1e1e1e;
border: 1px solid white;
height: 30px;
width: 30px;
border-radius: 8px;
background: #555bc8;
cursor: pointer;
height: 10px;
}

input[type=range]:focus::-ms-fill-lower {
background: #424242;
}

input[type=range]:focus::-ms-fill-upper {
background: #4f4f4f;
}
}
98 changes: 1 addition & 97 deletions src/assets/css/GrpFader.css
Original file line number Diff line number Diff line change
Expand Up @@ -73,100 +73,4 @@

/*do same for other browsers if required*/
background-color: rgb(39, 39, 39);
}

input[type=range] {
-webkit-appearance: none;
}

input[type=range]:focus {
outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
background: #424242;
border-radius: 5px;
border: 1px solid black;
}

input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #111111, 0px 0px 1px #1e1e1e;
border: 1px solid white;
height: 30px;
width: 10px;
border-radius: 8px;
background: #919191;
cursor: pointer;
-webkit-appearance: none;
margin-top: -11px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #000000;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
background: #424242;
border-radius: 5px;
border: 1px solid black;
}

input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #111111, 0px 0px 1px #1e1e1e;
border: 1px solid white;
height: 30px;
width: 30px;
border-radius: 8px;
background: #555bc8;
cursor: pointer;
}

input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}

input[type=range]::-ms-fill-lower {
background: #353535;
border: 1px solid black;
border-radius: 10px;
box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
}

input[type=range]::-ms-fill-upper {
background: #424242;
border: 1px solid black;
border-radius: 10px;
box-shadow: 2px 2px 2px #222222, 0px 0px 2px #2f2f2f;
}

input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #111111, 0px 0px 1px #1e1e1e;
border: 1px solid white;
height: 30px;
width: 30px;
border-radius: 8px;
background: #555bc8;
cursor: pointer;
height: 10px;
}

input[type=range]:focus::-ms-fill-lower {
background: #424242;
}

input[type=range]:focus::-ms-fill-upper {
background: #4f4f4f;
}
}
7 changes: 5 additions & 2 deletions src/assets/css/Settings.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
.settings-body {
position: absolute;
top: 100px;
left: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: auto;
max-height: 90vh;
width: 700px;
background-color: rgb(31, 31, 31);
border-color: rgb(124, 124, 124);
Expand Down
Loading

0 comments on commit d47cf5b

Please sign in to comment.