Skip to content

Commit 8c66a3d

Browse files
Josiah OslundJosiah Oslund
Josiah Oslund
authored and
Josiah Oslund
committed
Initial Commit
1 parent de441e6 commit 8c66a3d

9 files changed

+698
-1
lines changed

‎README.md

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,25 @@
1-
# midi-bridge
1+
#midi-bridge
2+
====
3+
24
A utility for ProPresenter 6 and midi devices to control iTunes, Spotify and ATEM switchers.
5+
6+
###Install
7+
====
8+
9+
$ npm install -g midi-bridge
10+
11+
###Run
12+
====
13+
$ midi-bridge
14+
15+
Manage Triggers and Actions via the GUI: [http://localhost:3030](http://localhost:3030):
16+
17+
![image](screenshot.png)
18+
19+
20+
If you don't have a Midi Device, you can use a Virtual Midi Device such as [MidiKeys](http://www.manyetas.com/creed/midikeys.html) to try it out.
21+
22+
###Remote Access
23+
====
24+
* Access the GUI from other devices at http://your-ip-address:3030 (eg. http://192.168.0.19:3030)
25+
* There's even an icon for adding Midi Bridge to your smartphone's homescreen;)

‎app.css

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
body {
2+
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
3+
padding: 1.1em 0.2em 0.2em;
4+
}
5+
6+
#indicator {
7+
position: fixed;
8+
top: 0;
9+
right: 0;
10+
left: 0;
11+
background-color: #f6f6f6;
12+
text-align: center;
13+
padding-top: 0.2em;
14+
padding-bottom: 0.2em;
15+
color: silver;
16+
z-index: 1;
17+
font-weight: bold;
18+
font-size: 0.8em;
19+
}
20+
#indicator.a {
21+
color: white;
22+
background-color: #61c248;
23+
}
24+
#modal {
25+
z-index: 2;
26+
background-color: rgba(255, 255, 255, 0.97);
27+
position: fixed;
28+
top: 0;
29+
right: 0;
30+
left: 0;
31+
bottom: 0;
32+
padding: 1em;
33+
display: none;
34+
}
35+
.bigDelete {
36+
font-size: 3em;
37+
display: inline-block;
38+
position: absolute;
39+
right: 0.4em;
40+
cursor: pointer;
41+
color: #2173d9;
42+
}
43+
44+
.h {
45+
border-bottom: 2px solid #2173d9;
46+
margin-bottom: 0.5em;
47+
padding-bottom: 0.5em;
48+
}
49+
.mh {
50+
text-align: center;
51+
padding-top: 3em;
52+
}
53+
.bigMidi {
54+
font-size: 4em;
55+
text-align: center;
56+
color: silver;
57+
}
58+
.area {
59+
position: relative;
60+
}
61+
.area.a {
62+
color: white;
63+
background-color: #2173d9;
64+
}
65+
.area.a .arrow {
66+
border-left: 18px solid white;
67+
}
68+
.area.a .h {
69+
border-bottom: 2px solid white;
70+
}
71+
.area.a .midi {
72+
color: #114382;
73+
}
74+
label {
75+
font-weight: bold;
76+
font-size: 0.8em;
77+
color: gray;
78+
}
79+
input {
80+
font-size: 1.2em;
81+
padding: 0.4em;
82+
-moz-box-sizing: border-box;
83+
-webkit-box-sizing: border-box;
84+
box-sizing: border-box;
85+
width: 100%;
86+
outline: none;
87+
border: 2px solid #e3e3e3;
88+
-webkit-appearance:none;
89+
border-radius: 4px;
90+
}
91+
input:focus {
92+
border: 2px solid #2173d9;
93+
}
94+
.arrow {
95+
width: 0;
96+
height: 0;
97+
border-top: 10px solid transparent;
98+
border-bottom: 10px solid transparent;
99+
border-left: 18px solid #2173d9;
100+
position: absolute;
101+
top: 0.7em;
102+
right: 1.2em;
103+
cursor: pointer;
104+
}
105+
.arrow:hover {
106+
border-left: 18px solid black;
107+
}
108+
.action {
109+
text-align: left;
110+
}
111+
.action > div {
112+
display: inline-block;
113+
}
114+
.action .delete {
115+
display: none;
116+
color: silver;
117+
margin-left: 0.5em;
118+
}
119+
.action:hover .delete {
120+
display: inline-block;
121+
}
122+
.o {
123+
cursor: pointer;
124+
}
125+
.o:hover {
126+
color: black;
127+
}
128+
.h.o.a {
129+
margin-top: 0.4em;
130+
}
131+
.midi {
132+
position: absolute;
133+
color: silver;
134+
cursor: pointer;
135+
}
136+
.midi:before {
137+
content: 'MIDI: ';
138+
}
139+
.midi:hover {
140+
color: #2173d9;
141+
}
142+
143+
144+
.button {
145+
display: block;
146+
padding: 12px 20px 10px;
147+
font-size: 16px;
148+
font-weight: 600;
149+
color: #2173d9;
150+
border: 2px solid #2173d9;
151+
border-radius: 4px;
152+
cursor: default;
153+
-webkit-transition: all 0.3s;
154+
-moz-transition: all 0.3s;
155+
-o-transition: all 0.3s;
156+
-ms-transition: all 0.3s;
157+
transition: all 0.3s;
158+
text-align: center;
159+
margin-top: 0.5em;
160+
}
161+
.button.b {
162+
cursor: pointer;
163+
}
164+
.button.b:hover {
165+
background-color: #2173d9;
166+
color: white;
167+
}

‎db.db

Whitespace-only changes.

‎icon.gif

3.28 KB
Loading

0 commit comments

Comments
 (0)