-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·133 lines (116 loc) · 3.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OSC to OBS WebSocket Server</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=700, user-scalable=no" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="toc">
<ul>
<li><a href="#Intro">OSC to OBS WebSocket</a></li>
<li>
<a href="#srvr">Servers</a>
<ul>
<li><a href="#srvr-obs-ws">OBS WebSocket Server</a></li>
<li><a href="#zoom-osc">ZoomOSC</a></li>
<li><a href="#touch-osc">TouchOSC</a></li>
</ul>
</li>
</ul>
<svg class="toc-marker" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path stroke="#444" stroke-width="3" fill="transparent" stroke-dasharray="0, 0, 0, 1000"
stroke-linecap="round" stroke-linejoin="round" transform="translate(-0.5, -0.5)" />
</svg>
</nav>
<article class="contents">
<section id="intro">
<h2>OSC to OBS WebSocket Server</h2>
</section>
<section>
<div id="srvr-obs-ws">
<h3>OBS WebSocket Server</h3>
<p><label for="IP">Enter IP address or "localhost":</label>
<input type="text" id="IP" name="IP" value="ip" /><br>
<label for="Port">Enter Port Number:</label>
<input type="text" id="Port" name="Port" value="port" /><br>
<label for="PW">Enter Password:</label>
<input type="password" id="PW" name="PW" value="password" /><br>
<input type="button" id="WSconnectButton" value="Connect to OBS" /><br>
</p>
</div>
</section>
<section>
<div id="zoom-osc">
<h3>ZoomOSC connection</a></h3>
<p><label for="oscIP">Enter ZoomOSC IP address or "localhost":</label>
<input type="text" id="oscIP" name="oscIP" value="127.0.0.1" /><br>
<label for="oscInPORT">Enter ZoomOSC In (receive) Port Number:</label>
<input type="text" id="oscInPORT" name="oscInPort" value="1234" /><br>
<label for="oscOutPORT">Enter ZoomOSC Out (transport) Port Number:</label>
<input type="text" id="oscOutPORT" name="oscOutPort" value="9090" /><br>
<input type="button" id="oscButton" value="Create ZoomOSC Server and Client" />
</p>
<p>Messages from ZoomOSC to OBS</p>
<div id="zoomInMessages"></div>
<p>Messages from OBS to ZoomOSC</p>
<div id="zoomOutMessages"></div>
</div>
</section>
<section>
<div id="touch-osc">
<h3>TouchOSC connection</a></h3>
<p><label for="toscIP">Enter TouchOSC IP address or "localhost":</label>
<input type="text" id="toscIP" name="toscIP" value="127.0.0.1" /><br>
<label for="toscInPORT">Enter TouchOSC In (receive) Port Number:</label>
<input type="text" id="toscInPORT" name="toscInPort" value="2345" /><br>
<label for="toscOutPORT">Enter TouchOSC Out (transport) Port Number:</label>
<input type="text" id="toscOutPORT" name="toscOutPort" value="9092" /><br>
<input type="button" id="toscButton" value="Create TouchOSC Server and Client" />
</p>
<p>Messages from TouchOSC to OBS</p>
<div id="touchInMessages"></div>
<p>Messages from OBS to TouchOSC</p>
<div id="touchOutMessages"></div>
</div>
</section>
</article>
<div class="credits">
<a href="https://github.com/UUoocl/OSC_to_OBS_WebSocket">Source on GitHub</a>
</div>
<style type="text/css" media="screen">
.credits {
position: fixed;
left: 3em;
bottom: 4em;
font-size: 1em;
z-index: 20;
color: #444;
vertical-align: middle;
}
.credits *+* {
margin-top: 15px;
}
.credits a {
display: block;
padding: 8px 10px;
color: #777;
border: 2px solid #bbb;
background: #fff;
text-decoration: none;
}
.credits a:hover {
border-color: #555;
color: #222;
}
@media screen and (max-height: 700px) {
.credits {
display: none;
}
}
</style>
</body>
</html>