<commit_before><!DOCTYPE html>
<html>
  <head>
	<style>
	  canvas {
	  border: 2px solid #CCCCCC;
	  margin: 20px;
	</style>
  </head>
  <body>
	<canvas id="piano" width="590" height="160"></canvas>
	<pre>
	  Controls:
	   2 3   5 6 7   9 0   black keys
	  q w e r t y u i o p  white keys
	  
	   s d   g h j   l ;   black keys
	  z x c v b n m , . /  white keys

	  a  transpose down
	  f  transpose up

	  1  clear selection
	<script>
          //

        var pianoElem = document.getElementById('piano');
        var pianoOffsetLeft = pianoElem.offsetLeft;
        var pianoOffsetTop = pianoElem.offsetTop;
        var context = pianoElem.getContext('2d');
        var keys = [];
        var whiteWidth = 20;
        var whiteHeight = 120;
        var blackWidth = 14;
        var blackHeight = 75;
        var blackWidthOffset = 2;

        function Key(i) {
          var blacks = [1, 3, 6, 8, 10];
          var names = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
          var offsets = [0, 0.5, 1, 1.5, 2, 3, 3.5, 4, 4.5, 5, 5.5, 6];
          var leftMargin = 15;
          var topMargin = 15;
          
          this.index = i;
          this.name = names[i % 12];
          this.selected = false;
          
          this.isBlack = blacks.indexOf(this.index % 12) > -1;

          this.left = leftMargin + (offsets[i % 12] * whiteWidth) + (Math.floor(i / 12) * 7 * whiteWidth);
          this.top = topMargin;

          if (this.isBlack) {
            this.left += blackWidthOffset;
            this.width = blackWidth;
            this.height = blackHeight;
          } else {
            this.width = whiteWidth;
            this.height = whiteHeight;
          }
        }

        Key.prototype.draw = function() {
          var whiteColor = "#FFFFFF";
          var whiteSelectedColor = "#AAEE99";
          var blackColor = "#000000";
          var blackSelectedColor = "#229911";

          var strokeColor = "#CCCCCC";
          var fillColor = "#FFFFFF";

          if (this.isBlack) {
            if (this.selected) {
              fillColor = blackSelectedColor;
            } else {
              fillColor = blackColor;
            }
          } else {
            if (this.selected) {
              fillColor = whiteSelectedColor;
            } else {
              fillColor = whiteColor;
            }
          }

          context.beginPath();
          context.rect(this.left, this.top, this.width, this.height);
          context.fillStyle = fillColor;
          context.fill();
          context.lineWidth = 2;
          context.strokeStyle = strokeColor;
          context.stroke();
        }

        for (var i = 0; i < 48; i++) {
          keys.push(new Key(i));
        }
        
        function redraw() {
          // draw white keys first, then blacks
          keys.forEach(function(key) {
            if (!key.isBlack) {
              key.draw();
            }
          });

          keys.forEach(function(key) {
            if (key.isBlack) {
              key.draw();
            }
          });
        }

        redraw();

        pianoElem.addEventListener('click', function(e) {
          var x = e.pageX - pianoOffsetLeft;
          var y = e.pageY - pianoOffsetTop;

          keys.forEach(function(key) {
            // blacks
            if (y > key.top && y < key.top + blackHeight && key.isBlack && 
                x > key.left && x < key.left + key.width) {
              key.selected = !key.selected;
            } else if (y > key.top + blackHeight && y < key.top + key.height && x > key.left && x < key.left + key.width) {
              key.selected = !key.selected;
            }
          });

          redraw();
        }, false);

        function transpose(steps) {
          var newSelected = [];
          for (var i = 0; i < keys.length; i++) {
            newSelected[i+steps] = keys[i].selected;
            keys[i].selected = false;
          }
          for (var i = 0; i < keys.length; i++) {
            keys[i].selected = newSelected[i];
          }
          redraw();
        }

        function clearSelection() {
          keys.forEach(function(key) {
            key.selected = false;
          });
        }
        
        function select(keyIndicesString) {
          var keyIndices = keyIndicesString.split(",");
          clearSelection();
          keyIndices.forEach(function(i) {
            keys[i].selected = true;
          });
          redraw();
        }
        
        window.onkeypress = function(e) {
          var bottomRow = [122,115,120,100,99,118,103,98,104,110,106,109,44,108,46,59,47];
          var topRow = [113,50,119,51,101,114,53,116,54,121,55,117,105,57,111,48,112];
          if (bottomRow.indexOf(e.keyCode) > -1) {
            keys[bottomRow.indexOf(e.keyCode) + 12].selected ^= 1;
          }
          if (topRow.indexOf(e.keyCode) > -1) {
            keys[topRow.indexOf(e.keyCode) + 24].selected ^= 1;
          }
          if (e.keyCode === 97) {
            transpose(-1);
          }
          if (e.keyCode === 102) {
            transpose(1);
          }
          if (e.keyCode === 49) {
            clearSelection();
          }
          redraw();
        };
	    
	</script>
  </body>
</html><commit_msg>transpose whole song<commit_after><!DOCTYPE html>
<html>
  <head>
	<style>
	  canvas {
	  border: 2px solid #CCCCCC;
	  margin: 20px;
	</style>
  </head>
  <body>
	<canvas id="piano" width="590" height="180"></canvas>
	<textarea id="chords" rows="12"></textarea>
	<br>
	<span id="keyboardStatus">(click inside piano area to activate keyboard controls)</span>
	<p>
	  <input type="text" size="3" id="songTransposeInput" value="0">
	  <input type="text" id="currentChord">
	</p>
	<p>
	  <input type="button" id="transposeDownButton" value="<">
	  <input type="button" id="transposeUpButton" value=">">
	</p>
	
          
	<pre>
      Controls (first click inside piano area):
        
	   2 3   5 6 7   9 0   black keys
	  q w e r t y u i o p  white keys
	  
	   s d   g h j   l ;   black keys
	  z x c v b n m , . /  white keys

	  a  transpose down
	  f  transpose up

	  1  clear selection
	</pre>

	
	<script>
          //

        var pianoElem = document.getElementById('piano');
        var pianoOffsetLeft = pianoElem.offsetLeft;
        var pianoOffsetTop = pianoElem.offsetTop;
        var context = pianoElem.getContext('2d');
        var keys = [];
        var whiteWidth = 20;
        var whiteHeight = 120;
        var blackWidth = 14;
        var blackHeight = 75;
        var blackWidthOffset = 2;

        var songTranspose = 0;

        function Key(i) {
          var blacks = [1, 3, 6, 8, 10];
          var names = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
          var offsets = [0, 0.5, 1, 1.5, 2, 3, 3.5, 4, 4.5, 5, 5.5, 6];
          var leftMargin = 15;
          var topMargin = 15;
          
          this.index = i;
          this.name = names[i % 12];
          this.selected = false;
          
          this.isBlack = blacks.indexOf(this.index % 12) > -1;

          this.left = leftMargin + (offsets[i % 12] * whiteWidth) + (Math.floor(i / 12) * 7 * whiteWidth);
          this.top = topMargin;

          if (this.isBlack) {
            this.left += blackWidthOffset;
            this.width = blackWidth;
            this.height = blackHeight;
          } else {
            this.width = whiteWidth;
            this.height = whiteHeight;
          }
        }

        Key.prototype.draw = function() {
          var whiteColor = "#FFFFFF";
          var whiteSelectedColor = "#AAEE99";
          var blackColor = "#000000";
          var blackSelectedColor = "#229911";

          var strokeColor = "#CCCCCC";
          var fillColor = "#FFFFFF";

          if (this.isBlack) {
            if (this.selected) {
              fillColor = blackSelectedColor;
            } else {
              fillColor = blackColor;
            }
          } else {
            if (this.selected) {
              fillColor = whiteSelectedColor;
            } else {
              fillColor = whiteColor;
            }
          }

          context.beginPath();
          context.rect(this.left, this.top, this.width, this.height);
          context.fillStyle = fillColor;
          context.fill();
          context.lineWidth = 2;
          context.strokeStyle = strokeColor;
          context.stroke();
        }

        for (var i = 0; i < 48; i++) {
          keys.push(new Key(i));
        }
        
        function redraw() {
          // draw white keys first, then blacks
          keys.forEach(function(key) {
            if (!key.isBlack) {
              key.draw();
            }
          });

          keys.forEach(function(key) {
            if (key.isBlack) {
              key.draw();
            }
          });
        }

        redraw();

        pianoElem.addEventListener('click', function(e) {
          var x = e.pageX - pianoOffsetLeft;
          var y = e.pageY - pianoOffsetTop;

          keys.forEach(function(key) {
            // blacks
            if (y > key.top && y < key.top + blackHeight && key.isBlack && 
                x > key.left && x < key.left + key.width) {
              key.selected = !key.selected;
            } else if (y > key.top + blackHeight && y < key.top + key.height && x > key.left && x < key.left + key.width) {
              key.selected = !key.selected;
            }
          });

          redraw();
        }, false);

        function transpose(steps) {
          var newSelected = [];
          for (var i = 0; i < keys.length; i++) {
            newSelected[i+steps] = keys[i].selected;
            keys[i].selected = false;
          }
          for (var i = 0; i < keys.length; i++) {
            keys[i].selected = newSelected[i];
          }
          redraw();
        }

        function clearSelection() {
          keys.forEach(function(key) {
            key.selected = false;
          });
        }
        
        function selectFromIndices(keyIndicesString) {
          var keyIndices = keyIndicesString.split(",");
          clearSelection();
          keyIndices.forEach(function(val) {
            var i = Number(val);
            // keys[i].selected = true;
            if (i+songTranspose >= 0 && i+songTranspose < keys.length) {
              keys[i+songTranspose].selected = true;

            }
          });
          redraw();
        }

        var currentChord = document.getElementById("currentChord");

        currentChord.onkeyup = function(e) {
          parseChord(this.value);
        };


        var songTransposeInput = document.getElementById("songTransposeInput");

        function setSongTranspose(offset) {
          songTranspose = parseInt(songTransposeInput.value) + offset;
          songTransposeInput.value = songTranspose;
          redraw();
        }
        
        songTransposeInput.onkeyup = function(e) {
          songTranspose = parseInt(this.value);
          parseChord(currentChord.value);
        };

        var keyboardHighlight = function(e) {
          var bottomRow = [122,115,120,100,99,118,103,98,104,110,106,109,44,108,46,59,47];
          var topRow = [113,50,119,51,101,114,53,116,54,121,55,117,105,57,111,48,112];
          if (bottomRow.indexOf(e.keyCode) > -1) {
            keys[bottomRow.indexOf(e.keyCode) + 12].selected ^= 1;
          }
          if (topRow.indexOf(e.keyCode) > -1) {
            keys[topRow.indexOf(e.keyCode) + 24].selected ^= 1;
          }
          if (e.keyCode === 97) {
            transpose(-1);
            // setSongTranspose(songTranspose-1);
          }
          if (e.keyCode === 102) {
            transpose(1);
            // setSongTranspose(songTranspose+1);
          }
          if (e.keyCode === 49) {
            clearSelection();
          }
          redraw();
        };

        // http://stackoverflow.com/questions/12886286/addeventlistener-for-keydown-on-canvas
        var lastDownTarget;
        document.addEventListener('mousedown', function(e) {
          lastDownTarget = e.target;
          displayKeyboardStatus();
        }, false);

        window.onkeypress = function(e) {
          if (lastDownTarget == pianoElem) {
            keyboardHighlight(e);
          }
        }

        function displayKeyboardStatus() {
          var keyboardStatus = document.getElementById('keyboardStatus');
          keyboardStatus.innerHTML = (lastDownTarget == pianoElem) ? "Keyboard active" : "(click inside piano area to activate keyboard controls)";
        }

        var transposeUpButton = document.getElementById("transposeUpButton");
        var transposeDownButton = document.getElementById("transposeDownButton");
        transposeUpButton.onclick = function(e) {
          songTranspose = songTranspose + 1;
          songTransposeInput.value = songTranspose;
          parseChord(currentChord.value);
        }
        transposeDownButton.onclick = function(e) {
          songTranspose = songTranspose - 1;
          songTransposeInput.value = songTranspose;
          parseChord(currentChord.value);
        }
        
        function parseChord(s) {
          var nameToIndex = {
            'c': 12,
            'c#': 13,
            'db': 13,
            'd': 14,
            'd#': 15,
            'eb': 15,
            'e': 16,
            'f': 17,
            'f#': 18,
            'gb': 18,
            'g': 19,
            'g#': 20,
            'ab': 20,
            'a': 21,
            'a#': 22,
            'bb': 22,
            'b': 23,

            'c+': 13,
            'd+': 15,
            'f+': 18,
            'g+': 20,
            'a+': 22,
           
            'C': 24,
            'C#': 25,
            'Db': 25,
            'D': 26,
            'D#': 27,
            'Eb': 27,
            'E': 28,
            'F': 29,
            'F#': 30,
            'Gb': 30,
            'G': 31,
            'G#': 32,
            'Ab': 32,
            'A': 33,
            'A#': 34,
            'Bb': 34,
            'B': 35,

            'C+': 25,
            'D+': 27,
            'F+': 30,
            'G+': 32,
            'A+': 34,
          }
          if (s === '') {
            clearSelection();
            redraw();
            return 0;
          }
          var notes = s.trim().split(" ");
          var indices = notes.map(function(note) {
            return nameToIndex[note].toString();
          }).join(",");
          selectFromIndices(indices);
        }
	</script>
  </body>
</html>
{'fraction_non_alphanumeric': 0.13604787124286402, 'fraction_numerical': 0.03363367494325607, 'mean_word_length': 1.4453414059872183, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6096237', 'n_tokens_mistral': 4779, 'n_tokens_neox': 4327, 'n_words': 983}