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

© 2024 GGSHOW | Powered by WordPress