DJCtrlEmu/view/index.html

93 lines
4.6 KiB
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DJ Controller Emulator</title>
<link rel="stylesheet" href="assets/stylesheets/style.css">
<script src="assets/scripts/knobs.js" charset="utf-8"></script>
<script src="assets/scripts/main.js" charset="utf-8"></script>
</head>
<body>
<main>
<div id="sections">
<div class="deck">
<div class="deck-effects">
</div>
<div class="deck-playback">
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(0, 127 - this.value);" ondblclick="controller.speed(0, this.value = 63);">
</div>
<div class="play">
<div class="deck-pads">
<button type="button" class="deck-pad" onclick="controller.pad(0, 0);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 1);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 2);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 3);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 4);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 5);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 6);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 7);"></button>
</div>
<button type="button" onclick="controller.load(0);">Load</button>
<button type="button" onclick="controller.play_pause(0);">PlayPause</button>
<button type="button" onclick="controller.sync(0);">Sync</button>
</div>
</div>
<div id="mixer">
<div id="eq-knobs">
<div class="deck-eq-knobs">
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(0, 'high',this.value);"></knob-input>
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(0, 'mid',this.value);"></knob-input>
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(0, 'low',this.value);"></knob-input>
</div>
<div class="deck-eq-knobs">
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(1, 'high', this.value);"></knob-input>
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(1, 'mid', this.value);"></knob-input>
<knob-input min="0" value="63" step="1" max="127" oninput="controller.eq(1, 'low', this.value);"></knob-input>
</div>
</div>
<div id="volume">
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(0, this.value);">
<div id="volume-meters">
<div class="volume-meter">
<div id="volume-meter-left" class="volume-meter-level"></div>
<div class="silence-meter-level"></div>
</div>
<div class="volume-meter">
<div id="volume-meter-right" class="volume-meter-level"></div>
<div class="silence-meter-level"></div>
</div>
</div>
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(1, this.value);">
</div>
<input id="crossfader" type="range" min="0" value="63" step="1" max="127" oninput="controller.crossfade(this.value);">
</div>
<div class="reverse deck">
<div class="deck-effects">
</div>
<div class="deck-playback">
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(1, 127 - this.value);" ondblclick="controller.speed(1, this.value = 63);">
</div>
<div class="play">
<div class="deck-pads">
<button type="button" class="deck-pad" onclick="controller.pad(1, 0);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 1);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 2);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 3);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 4);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 5);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 6);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 7);"></button>
</div>
<button type="button" onclick="controller.load(1);">Load</button>
<button type="button" onclick="controller.play_pause(1);">PlayPause</button>
<button type="button" onclick="controller.sync(1);">Sync</button>
</div>
</div>
</div>
</main>
</body>
</html>