Last active 1481515504

A javascript thing to get ukulele tab charts quickly. https://b303.me/uketabs.html

Steven Smith revised this gist 1481551504. Go to revision

1 file changed, 10 insertions, 1 deletion

uketabs.html

@@ -6,7 +6,7 @@
6 6 </head>
7 7 <body>
8 8 <form id="form">
9 - <input type="text" id="tabs" style="width:70%" value="E♭|F7|B♭7|G♭|E♭|G♭aug|E|E♭|n|B♭7|E♭|B♭7|E♭|G7|Cm|B♭|E♭dim|E♭">
9 + <input type="text" id="tabs" style="width:70%" value="E♭|F7|B♭7|G♭" autofocus>
10 10 <input type="submit">
11 11 </form>
12 12 <div id="display"></div>
@@ -15,6 +15,7 @@
15 15
16 16 function showtabs() {
17 17 var tabs = $("input#tabs").val().replace(/♭/g, "b");
18 + window.location.hash = tabs.replace(/ /g, ",")
18 19 // If multiple chords, support these separators
19 20 $.each(" ,|/", function(i,s){
20 21 if (tabs.indexOf(s) != -1 && tabs.split) tabs = tabs.split(s);
@@ -41,6 +42,14 @@ function showtabs() {
41 42 }
42 43 }
43 44
45 + window.onload = function() {
46 + if (window.location.hash) {
47 + tabs = window.location.hash.substr(1)
48 + $("#tabs").val(tabs)
49 + $("#form").submit()
50 + }
51 + }
52 +
44 53 $("#form").bind("submit", function(e){
45 54 e.preventDefault();
46 55 $("#display").empty();

Steven Smith revised this gist 1480975464. Go to revision

1 file changed, 12 insertions, 8 deletions

uketabs.html

@@ -16,8 +16,8 @@
16 16 function showtabs() {
17 17 var tabs = $("input#tabs").val().replace(/♭/g, "b");
18 18 // If multiple chords, support these separators
19 - $.each(",|/", function(i,s){
20 - if (tabs.indexOf(s) != -1) tabs = tabs.split(s);
19 + $.each(" ,|/", function(i,s){
20 + if (tabs.indexOf(s) != -1 && tabs.split) tabs = tabs.split(s);
21 21 });
22 22 // If only one chord, we need an array
23 23 if (!$.isArray(tabs)) {
@@ -31,16 +31,20 @@ function showtabs() {
31 31 else if (tabs[i].indexOf("n") != -1) {
32 32 $("<br>").appendTo($('#display'));
33 33 } else {
34 - newimg = $("<img class='tabimg'>")
35 - newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png")
34 + newimg = $("<img class='tabimg'>");
35 + newimg.bind("error", function(e){
36 + e.target.style.display="none"
37 + });
38 + newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png");
36 39 newimg.appendTo($('#display'));
37 40 }
38 41 }
39 42 }
40 - $("#form").submit(function(){
41 - $('#display').empty();
42 - showtabs();
43 - return false;
43 +
44 + $("#form").bind("submit", function(e){
45 + e.preventDefault();
46 + $("#display").empty();
47 + showtabs()
44 48 });
45 49
46 50 </script>

Steven Smith revised this gist 1480974184. Go to revision

1 file changed, 10 insertions, 6 deletions

uketabs.html

@@ -1,11 +1,12 @@
1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4 + <meta charset="utf-8">
4 5 <title>UkeTabGenerator</title>
5 6 </head>
6 7 <body>
7 8 <form id="form">
8 - <input type="text" id="tabs" value="Eb,F7,Bb7,Gb,Eb,Gbaug">
9 + <input type="text" id="tabs" style="width:70%" value="E♭|F7|B♭7|G♭|E♭|G♭aug|E|E♭|n|B♭7|E♭|B♭7|E♭|G7|Cm|B♭|E♭dim|E♭">
9 10 <input type="submit">
10 11 </form>
11 12 <div id="display"></div>
@@ -23,13 +24,16 @@ function showtabs() {
23 24 tabs = [tabs];
24 25 }
25 26 for (var i=0;i<tabs.length;i++) {
26 - if (tabs[i].indexOf("#") == -1) {
27 + if (tabs[i].indexOf("#") != -1) {
28 + if (!window.sharpalertshown) alert("All sharp chords must be converted to their flat counterpart (D# = Eb)");
29 + window.sharpalertshown = true;
30 + }
31 + else if (tabs[i].indexOf("n") != -1) {
32 + $("<br>").appendTo($('#display'));
33 + } else {
27 34 newimg = $("<img class='tabimg'>")
28 35 newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png")
29 - newimg.appendTo($('#display'))
30 - } else if (!window.sharpalertshown) {
31 - alert("All sharp chords must be converted to their flat counterpart (D# = Eb)");
32 - window.sharpalertshown = true;
36 + newimg.appendTo($('#display'));
33 37 }
34 38 }
35 39 }

Steven Smith revised this gist 1480972973. Go to revision

1 file changed, 13 insertions, 6 deletions

uketabs.html

@@ -14,16 +14,23 @@
14 14
15 15 function showtabs() {
16 16 var tabs = $("input#tabs").val().replace(/♭/g, "b");
17 + // If multiple chords, support these separators
17 18 $.each(",|/", function(i,s){
18 19 if (tabs.indexOf(s) != -1) tabs = tabs.split(s);
19 20 });
21 + // If only one chord, we need an array
22 + if (!$.isArray(tabs)) {
23 + tabs = [tabs];
24 + }
20 25 for (var i=0;i<tabs.length;i++) {
21 - newimg = $("<img class='tabimg'>")
22 - newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png")
23 - newimg.error(function(e){
24 - alert(tabs[i] + " doesn't seem to be a valid chord. Keep in mind that sharp chords need to be converted to their flat alternatives (D# = Eb)");
25 - });
26 - newimg.appendTo($('#display'))
26 + if (tabs[i].indexOf("#") == -1) {
27 + newimg = $("<img class='tabimg'>")
28 + newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png")
29 + newimg.appendTo($('#display'))
30 + } else if (!window.sharpalertshown) {
31 + alert("All sharp chords must be converted to their flat counterpart (D# = Eb)");
32 + window.sharpalertshown = true;
33 + }
27 34 }
28 35 }
29 36 $("#form").submit(function(){

Steven Smith revised this gist 1480972383. Go to revision

1 file changed, 8 insertions, 3 deletions

uketabs.html

@@ -1,4 +1,3 @@
1 -
2 1 <!DOCTYPE html>
3 2 <html>
4 3 <head>
@@ -14,10 +13,16 @@
14 13 <script>
15 14
16 15 function showtabs() {
17 - var tabs = $("input#tabs").val().split(",");
16 + var tabs = $("input#tabs").val().replace(/♭/g, "b");
17 + $.each(",|/", function(i,s){
18 + if (tabs.indexOf(s) != -1) tabs = tabs.split(s);
19 + });
18 20 for (var i=0;i<tabs.length;i++) {
19 21 newimg = $("<img class='tabimg'>")
20 22 newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png")
23 + newimg.error(function(e){
24 + alert(tabs[i] + " doesn't seem to be a valid chord. Keep in mind that sharp chords need to be converted to their flat alternatives (D# = Eb)");
25 + });
21 26 newimg.appendTo($('#display'))
22 27 }
23 28 }
@@ -29,4 +34,4 @@ $("#form").submit(function(){
29 34
30 35 </script>
31 36 </body>
32 - </html>
37 + </html>

Steven Smith revised this gist 1480970656. Go to revision

1 file changed, 32 insertions

uketabs.html(file created)

@@ -0,0 +1,32 @@
1 +
2 + <!DOCTYPE html>
3 + <html>
4 + <head>
5 + <title>UkeTabGenerator</title>
6 + </head>
7 + <body>
8 + <form id="form">
9 + <input type="text" id="tabs" value="Eb,F7,Bb7,Gb,Eb,Gbaug">
10 + <input type="submit">
11 + </form>
12 + <div id="display"></div>
13 + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
14 + <script>
15 +
16 + function showtabs() {
17 + var tabs = $("input#tabs").val().split(",");
18 + for (var i=0;i<tabs.length;i++) {
19 + newimg = $("<img class='tabimg'>")
20 + newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png")
21 + newimg.appendTo($('#display'))
22 + }
23 + }
24 + $("#form").submit(function(){
25 + $('#display').empty();
26 + showtabs();
27 + return false;
28 + });
29 +
30 + </script>
31 + </body>
32 + </html>
Newer Older