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 26, 2012

Floating Point Precision

When ASP CInt( ( 0.3 - 0.2 ) * 10 ) gives you 1, but PHP (int) ( ( 0.3 - 0.2 ) * 10 ) gives you 0;

When MySQL SELECT CAST( 3 * ( 1.0 / 3 ) AS SIGNED ) gives you 1, but MSSQL SELECT CAST( 3 * ( 1.0 / 3 ) AS INT) gives you 0;

How accurate the result you can expect from your web application?

floating point

When your web application is built on top of the myth of the floating point, you can’t even expect 0.1 from JavaScript (0.3-0.2), it gives 0.09999999999999998

Filed under: Web — Tags: , , , , , , , , — GG @ 7:30 pm

July 26, 2007

GG jsWindow

A flash actionscript component integrates JavaScript popup window function, launch JavaScript popup window in Flash, with fully customizable window properties, include toolbar, location, directories, status, menubar, scrollbars, resizable, copyhistory, width, and height.

openWindow function
componentInstance.openWindow(url, windowName);

e.g.:

my_btn.onPress = function() {
my_popup.openWindow(“http://www.ggshow.com”, “my_window”);
};

Example:

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

© 2024 GGSHOW | Powered by WordPress