drums
Version:
AngularJS Drums
177 lines (172 loc) • 9.43 kB
HTML
<html ng-app="myModule">
<head>
<title>Paradiddles System</title>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/angular.min.js"></script>
<script src="/js/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/js/jquery-ui-1.10.3.custom.css">
<link rel="shortcut icon" href="/images/mid.ico">
<script src="/js/pragmatic-angular.js"></script>
<script src="/js/drumset.js"></script>
<style type="text/css">
body {color: #001326; background: #F4F4F4; font-family: monospace;}
.PS {height: auto; float: right; cursor: pointer;}
#right {margin-right:1%;}
#play {cursor: url(images/Drumsticks.cur),auto;}
.first {color: red;}
.btn-large {padding: 8px 15px; font-size: 17.5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; cursor: pointer;}
.btn-large:hover { background-color: #BACCDF;}
pre {border: 1px solid #999; background-color: #FFE; font-weight: bold; word-wrap: break-word; text-align: center; padding-top:1px;}
.l {background-color: rgb(254, 254, 210)}
.r {background-color: rgb(242, 230, 255)}
#selectmidi, input[type="number"] {border-radius: 18px; border:1px dotted #0071b5; font-weight: bolder; height: 28px; background-color:#FFE; cursor: pointer; text-align: center;}
input[type="number"] {height: 23px;}
input[type=text] { border: none; font-family: monospace; font-size: inherit; font-weight: bold; background: #FFE;}
span {line-height: 270%;}
.Center {
width: 86%; height: 28%; margin: auto; margin-top: 25px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: inherit;
}
li { border:2px solid white; display: table; letter-spacing:5px; text-align: center; padding-top:3px;}
li:hover { border:2px dotted grey;}
i:hover { border:1px dotted grey;}
i { border:1px solid white; width: 8%; display: table; color: rgb(111, 59, 139);font-size: 0.9em;text-align:center;white-space:nowrap;
-webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer;}
i.L {border:1px solid red;}
i.R {border:1px solid green;}
.selected {
color: black; border:2px dotted rgb(128, 146, 132);
}
#drumsetL, #drumsetR {height: 450px; width: 46%; margin-top: 18px; border:2px solid white; border-radius: 18px; float: right; margin-right: 15px; background-image: url("./images/midi.png");}
.set {
font:bold italic 27px/45px Georgia;
width:120px;
height:120px;
border:#000 1px solid;
border-radius:100px;
background:#fee;
color: rgba(196, 255, 121, 0.55);
text-shadow: 2px 2px #000913;
transform:scaleY(0.4);
-moz-transform:scaleY(0.4);
-webkit-transform:scaleY(0.4);
cursor: move;
box-shadow: -5px 7px 15px rgba(103, 59, 59, 0.76);
}
.drum {height:54px;}
.set.down, .set.Down {background: grey;}
.set.up, .set.Up {background:#fee;}
.finale {margin-top:18px;height: 50px; width: 336px;background-position: center;}
#invert {float:right;} #Invert {float:left;}
</style>
</head>
<body ng-controller="myController" ng-init="onReady()">
<div style="float:right;width:40%">
<div id="right" class="PS">
<ul>
<li ng-repeat="i in R5" ng-mousedown="changeRpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Rp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in R6" ng-mousedown="changeRpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Rp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in R7" ng-mousedown="changeRpattern(i);" ng-class="{ 'selected': i == Rp }"><strong>{{i}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in R8" ng-mousedown="changeRpattern(i);" ng-class="{ 'selected': i == Rp }"><strong>{{i}}</strong></li>
<br><input type="checkbox" id="Invert" style="cursor: pointer;" ng-model="Invert"/>
</ul>
</div>
<div class="PS">
<ul>
<li ng-repeat="i in R1" ng-mousedown="changeRpattern(i.p);" ng-class="{ 'selected': i.p == Rp }" style="background:{{i.bg}}"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in R2" ng-mousedown="changeRpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Rp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in R3" ng-mousedown="changeRpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Rp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in R4" ng-mousedown="changeRpattern(i);" ng-class="{ 'selected': i == Rp }"><strong>{{i}}</strong></li>
</ul>
</div>
<div class="PS">
<ul>
<li ng-repeat="i in L1" ng-mousedown="changeLpattern(i.p);" ng-class="{ 'selected': i.p == Lp}" style="background:{{i.bg}}"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in L2" ng-mousedown="changeLpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Lp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in L3" ng-mousedown="changeLpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Lp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in L4" ng-mousedown="changeLpattern(i);" ng-class="{ 'selected': i == Lp }"><strong>{{i}}</strong></li>
</ul>
</div>
<div class="PS">
<ul>
<li ng-repeat="i in L5" ng-mousedown="changeLpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Lp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in L6" ng-mousedown="changeLpattern(i.p);" style="background:{{i.bg}}" ng-class="{ 'selected': i.p == Lp }"><strong>{{i.p}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in L7" ng-mousedown="changeLpattern(i);" ng-class="{ 'selected': i == Lp }"><strong>{{i}}</strong></li>
</ul>
<ul>
<li ng-repeat="i in L8" ng-mousedown="changeLpattern(i);" ng-class="{ 'selected': i == Lp }"><strong>{{i}}</strong></li>
<br><input type="checkbox" id="invert" style="cursor: pointer;" ng-model="invert"/>
</ul>
</div>
</div>
<div style="float:right;">
<p>
<label>MIDI Out:</label><select id=selectmidi ng-change="changemidi();" ng-model="_out">
<option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label> Metronome </label> <input type="checkbox" ng-model="checked">
<button class="btn-large" id=play ng-click='play();' ng-jquery-plugin="{button : { label: playing }}"></button>
</p>
</center>
<div>
<label>Tempo: </label><input type="number" min="0" max="400" ng-change='changetempo();' ng-click="blur();" ng-model="_tempo"/>
<label>Pitch: </label><input type="number" min="0" max="127" ng-change='changePitch();' ng-click="blur();" ng-model="_pitch"/>
<button ng-click='shuffle();' ng-jquery-plugin="{button : { label: 'R.N.'}}" ng-init="shuffle()"></button>
<button ng-click='changePatterns();' ng-jquery-plugin="{button : { label: 'R.P.'}}"></button>
<button ng-click='random();' ng-disabled="state" ng-jquery-plugin="{button : { label: 'Randomize',disabled:false}}"></button>
</div>
<pre> beats: <input type="text" ng-click="blur();" ng-model="beats">count: <input type="text" size="4" ng-model="count" ng-click="blur();" value="1" ng-class="{ 'first': count == 0 }"></pre>
<div><center>
<div title="beats" ng-jquery-plugin="{ slider : { min: 1, max: 16, value: 8, stop : onStop }, width: W }"></div></center>
</div>
<div>
<img id = "header" class="finale" style="float:right" ng-init="Folder='R'" ng-model="Rpattern" ng-style="{'background-image':'url(' + Folder + '/' + Rpattern + '.jpg )'}">
<img id = "header" class="finale" style="float:left" ng-model="Lpattern" ng-init="folder='L'" ng-style="{'background-image':'url(' + folder + '/' + Lpattern + '.jpg )'}">
</div>
<div ng-click="side = 'R';" id="drumsetR">
<div ng-model="Set" class="drum" ng-repeat="i in Set track by $index">
<div class='set' title='drag it' ng-class="{'down': ((Set.length==1&&$index==!Snd)||(Set.length>1&&$index==Snd)), 'up': ((Set.length==1&&$index==Snd)||(Set.length>1&&$index==!Snd)) }" ng-jquery-plugin="{draggable : { containment: '#drumsetR' }}" ng-dblclick="destroy('R',$index);">{{Set.length==1?Sound:mas[i]}}</div>
</div>
</div>
<div ng-click="side = 'L';" id="drumsetL">
<div ng-model="set" class="drum" ng-repeat="i in set track by $index">
<div class='set' title='drag it' ng-class="{'down': ((set.length==1&&$index==!snd)||(set.length>1&&$index==snd)), 'up': ((set.length==1&&$index==snd)||(set.length>1&&$index==!snd)) }" ng-jquery-plugin="{draggable : { containment: '#drumsetL' }}" ng-dblclick="destroy('L',$index);">{{set.length==1?sound:mas[i]}}</div>
</div>
</div>
</div>
<div style="float:left;" ng-class="{'l': (side=='L'), 'r': (side=='R')}">
<i ng-repeat="ms in mas" ng-mousedown="OnChange(side,$index);" ng-dblclick="addToSet(side,$index);" ng-class="{'L': ms==sound , 'R': ms==Sound }" ng-if="$index<31"> <!--ng-hide="$index>30" -->
<i>{{ ms }}</i>
</i>
</div>
<div style="float:left;" ng-class="{'l': (side=='L'), 'r': (side=='R')}">
<i ng-repeat="ms in mas" ng-mousedown="OnChange(side,$index);" ng-dblclick="addToSet(side,$index);" ng-class="{'L': ms==sound , 'R': ms==Sound }" ng-if="$index>30"> <!--ng-hide="$index<31" -->
<i>{{ ms }}</i>
</i>
</div>
</body>
</html>