GGshow reloaded GGshow reloaded

January 4, 2014

Chord Canvas

This is a HTML5 build of Dynamic Chord Diagam.

Usage:

  • Include JavaScript at HTML head.
    <script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
  • Creating/rendering chord instance.
    var myChord = new ChordCanvas(value, size);
    myChord.render();

Simplified method:

  • <script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>

Customize Color:

  • var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150");
    chord1.backgroundcolor = "#CCF";
    chord1.bordercolor = "";
    chord1.titlecolor = "#FFF";
    chord1.labelcolor = "#00F";
    chord1.chordcolor = "#00F";
    chord1.titlebackgroundcolor = "#00F";
    chord1.render();

Overwrite chord container display style:

  • Chord container has block display by default, you can overwrite the display style by .chord-container class selector. e.g:
    <style>
    .chord-container {
        display:inline-block;
    }
    </style>

Examples:

Source:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chord Canvas - Example 01</title>
<style>
.chord-container {
display:inline-block;
}
</style>
<script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
</head>
<body>
<h1>Chord Canvas Examples</h1>
<h3>Basic</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>
<script>new ChordCanvas("Am,X,0,2,2,1,0","100").render();</script>
<script>new ChordCanvas("F,X,X,3,2,1,1","100").render();</script>
<script>new ChordCanvas("G,X,0,2,2,1,0","100").render();</script>
<br />
<script>new ChordCanvas("C#7-5,X,X,3,4,2,3","100").render();</script>
<script>new ChordCanvas("D♭7-9,X,4,3,4,3,X","100").render();</script>
<script>new ChordCanvas("E♭,11,10,8,8,8,11","100").render();</script>
<script>new ChordCanvas("B♭m,X,X,11,10,11,9","100").render();</script>
<h3>Customize Size</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","150").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","250").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","").render();</script>
<h3>Customize Color</h3>
<script>
var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150");
chord1.backgroundcolor = "#CCF";
chord1.bordercolor = "";
chord1.titlecolor = "#FFF";
chord1.labelcolor = "#00F";
chord1.chordcolor = "#00F";
chord1.titlebackgroundcolor = "#00F";
chord1.render();

var chord2 = new ChordCanvas("C,8,10,10,9,8,8","150");
chord2.backgroundcolor = "#F00";
chord2.bordercolor = "#F00";
chord2.titlecolor = "#F00";
chord2.labelcolor = "#000";
chord2.chordcolor = "#FFF";
chord2.titlebackgroundcolor = "#FFF";
chord2.render();
</script>
</body>
</html>
Filed under: CSS,HTML5,JavaScript — Tags: , , , , , , — GG @ 8:44 am

December 7, 2008

Dynamic Chord Diagram

A single SWF file to generate diagrams for all kinds of guitar chords.
Pass a variable from HTML to SWF when loading it.

Examples:

chord.swf?chord=C,X,3,2,0,1,0
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

It is customizable…
chord.swf?chord=Am,X,0,2,2,1,0&bgcolor=0xDDFFDD&fgcolor=0x009900

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.) (Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

It is scalable…

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.) (Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.) (Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.) (Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
Filed under: Flash Platform,GG's Flash Extensions,Web — Tags: , , — GG @ 2:09 pm

© 2019 GGSHOW | Powered by WordPress