Skip to content
Snippets Groups Projects
Commit 4b73c274 authored by Jonas Blumer's avatar Jonas Blumer
Browse files

added graphics boy

parent f78f4b22
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app.js
+ 1
− 1
View file @ 4b73c274
......@@ -41,7 +41,7 @@ setInterval(function(){
}, speed);
*/
setInterval(function(){
io.sockets.emit('click', getStepPos());
io.sockets.emit('metronome', getStepPos());
}, (60000 / bpm)/4);
function getStepPos(){
......
index.html
+ 61
− 14
View file @ 4b73c274
......@@ -2,10 +2,19 @@
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<link href='https://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
margin-top:120px;
background-color:#1c1a1a;
font-family: 'Codystar', cursive;
color:#9d0000;
}
#container{
width:500px;
margin:auto;
}
.beatIndicator{
......@@ -19,11 +28,11 @@
}
.beatIndicator.inactive{
background-color:white;
background-color:#303030;
}
.beatIndicator.active{
background-color:red;
background-color:#9d0000;
}
......@@ -31,7 +40,41 @@
width:20px!important;
}
.four{
background-color:grey!important;
background-color:#3f0e0e!important;
}
input[type=checkbox].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:20px;
height:20px;
display:inline-block;
line-height:20px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:20px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -20px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e735e2688b7676957c8e335c4c9e2311.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
td{
vertical-align: middle!important;
}
</style>
......@@ -43,11 +86,8 @@
$(function(){
/*
** SOUNDS
*/
//var bd = $("#bd")[0];
// generate graphics
generateSteps();
var iosocket = io.connect();
......@@ -55,7 +95,8 @@
});
iosocket.on('click', function(serverStepPos){
// metronome
iosocket.on('metronome', function(serverStepPos){
stepPos = serverStepPos;
advanceStep(serverStepPos);
playSound();
......@@ -88,11 +129,16 @@
if(i<4){
$('#steps').append('<tr class="row" id="row'+i+'">');
for(var j = 0; j < 16; j++){
if(j%4==0){
$('#row'+i).append('<td class="four"><input class="checkbox step'+j+' row'+i+'" type="checkbox"/></td>');
//if(j%4==0){
$('#row'+i).append('<td id="td'+j+i+'"><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
if(j%4==0){
$('#td'+j+i).addClass('four');
}
/*
}else{
$('#row'+i).append('<td><input class="checkbox step'+j+' row'+i+'" type="checkbox"/></td>');
}
$('#row'+i).append('<td><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
}
*/
}
$('#row'+i).append(
......@@ -113,7 +159,7 @@
'<option value="snare">Snare</option>'+
'</select>'
);
$('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="2" step=".1" name="power" list="powers">');
$('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="powers">');
$('#steps').append('</div>');
}else{
......@@ -146,6 +192,7 @@
</script>
</head>
<body>
<center><h1>JDRUMMER XPRIENCE</h1></center>
<div id="container">
<table id="steps">
</table>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment