146 lines
5.3 KiB
HTML
146 lines
5.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Parallaxis</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="parallaxis.css">
|
||
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
|
||
|
|
<script type="text/javascript" src="js/TweenMax.min.js"></script>
|
||
|
|
<script src="/socket.io/socket.io.js"></script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body >
|
||
|
|
<script language="javascript">
|
||
|
|
function toggle(e) {
|
||
|
|
e = document.getElementById(e);
|
||
|
|
if(e.style.display == "block") {
|
||
|
|
e.style.display = "none";
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
e.style.display = "block";
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// CLOSE BUTTON FOR DIVS
|
||
|
|
$(document).on('click','.close_box',function(){
|
||
|
|
$(this).parent().fadeTo(300,1,function(){
|
||
|
|
$(this).css( "display", "none" )
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="outer">
|
||
|
|
|
||
|
|
<div class="controls">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="scorecontainer">
|
||
|
|
<div class="score" id="scoreid">
|
||
|
|
<div id="title" class="atexts" style="top: 100px;"> <p style="font-size:120px;">PARALLAXIS</p></div>
|
||
|
|
<div id="ensemble" class="atexts" style="top: 320px;"> <p style="font-size:75px;">IN FOUR PARTS</p></div>
|
||
|
|
<div id="robcanning" class="atexts" style="top: 630px;"> <p style="font-size:35px;">rc@kiben.net 2012</p></div>
|
||
|
|
|
||
|
|
<div id="hitstart" class="atexts" style="top: 45%;">
|
||
|
|
<p style="font-size:35px; font-weight:normal; text-align:center;">
|
||
|
|
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<img id="svga0" class="scoresvg" src="assets/scoreparts/png/p2.png"/>
|
||
|
|
<img id="svga1" class="scoresvg" src="assets/scoreparts/png/p1.png" />
|
||
|
|
<img id="svga2" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
<img id="svga3" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
|
||
|
|
<img id="svgb0" class="scoresvg" src="assets/scoreparts/png/p3.png"/>
|
||
|
|
<img id="svgb1" class="scoresvg" src="assets/scoreparts/png/p1.png" />
|
||
|
|
<img id="svgb2" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
<img id="svgb3" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
|
||
|
|
<img id="svgc0" class="scoresvg" src="assets/scoreparts/png/p2.png"/>
|
||
|
|
<img id="svgc1" class="scoresvg" src="assets/scoreparts/png/p1.png" />
|
||
|
|
<img id="svgc2" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
<img id="svgc3" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
|
||
|
|
<img id="svgd0" class="scoresvg" src="assets/scoreparts/png/p3.png"/>
|
||
|
|
<img id="svgd1" class="scoresvg" src="assets/scoreparts/png/p1.png" />
|
||
|
|
<img id="svgd2" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
<img id="svgd3" class="scoresvg" src="assets/scoreparts/png/p4.png" />
|
||
|
|
|
||
|
|
<div class="readaheadhead"> </div>
|
||
|
|
|
||
|
|
<div class="playhead" id="playa" > </div>
|
||
|
|
<div class="playhead" id="playb" > </div>
|
||
|
|
<div class="playhead" id="playc" > </div>
|
||
|
|
<div class="playhead" id="playd" > </div>
|
||
|
|
|
||
|
|
<div class="playzones playzonea" id="playzonea"> </div>
|
||
|
|
<div class="playzones playzoneb" id="playzoneb"> </div>
|
||
|
|
<div class="playzones playzonec" id="playzonec"> </div>
|
||
|
|
<div class="playzones playzoned" id="playzoned"> </div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cue">
|
||
|
|
<input class="tbuttons" value="<<" type="button" onclick="socket.emit('seek',cue(-1)); localSeek(cue(-1))" />
|
||
|
|
<input class="tbuttons" value=">>" type="button" onclick="socket.emit('seek',cue(1)); localSeek(cue(1))" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="timer">00:00:00</div>
|
||
|
|
|
||
|
|
<div class="help">
|
||
|
|
<a id="displayText" style="display:inline;" href="javascript:toggle('helpText');">help </a>
|
||
|
|
<a id="displayControlPanel" style="position:absolute; left:1100px;" href="javascript:toggle('controlPanel');">settings</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="helpb" id="helpText">
|
||
|
|
<div class="close_box">X</div>
|
||
|
|
<h3>Keyboard Controls</h3>
|
||
|
|
SPACEBAR = play from start
|
||
|
|
<br/> . = pause
|
||
|
|
<br/> , = resume
|
||
|
|
<br/> click on playzone will also pause part
|
||
|
|
<br/> 1 2 3 4 = keydown to pause parts and key upto resume
|
||
|
|
<br/> - + = global slower/faster 10%
|
||
|
|
<br/> [ ] = preview back/forward (paused)
|
||
|
|
|
||
|
|
<br/> h = this help panel
|
||
|
|
<br/> s = settings panel
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="helpb" id="controlPanel">
|
||
|
|
<div class="close_box">X</div>
|
||
|
|
|
||
|
|
<h3>Control Panel</h3>
|
||
|
|
Speed (2 double - 0.5 half) <input class="inputboxes"
|
||
|
|
type="number" id="speedxx" step="0.1" min="0.4" max="4"
|
||
|
|
size="2" value="1" onchange="allSpeed(this.value)"><br>
|
||
|
|
|
||
|
|
LAN Server IP <input class="inputboxes" type="text"
|
||
|
|
id="ctrlspeed" value="192.168.2.4" size="13"><br/>
|
||
|
|
OSC Port A (Ardour Tranport) <input class="inputboxes" type="text"
|
||
|
|
id="oscA" value="1111" size="5"><br/>
|
||
|
|
OSC Port B (Realtime FX Parameters) <input class="inputboxes" type="text"
|
||
|
|
id="oscB" value="1112" size="5"><br/>
|
||
|
|
OSC Port C (Playback Locations) <input class="inputboxes" type="text"
|
||
|
|
id="oscC" value="1113" size="3"><br/>
|
||
|
|
OSCgroups server <input class="inputboxes" type="text"
|
||
|
|
id="oscgroupsserver" size="25" value="http://oscgroups.kiben.net"><br/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="parallaxis.js"></script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|