Browse files

Docs and lowercased options

  • Loading branch information...
1 parent ae1c0c7 commit 85fc2b5188609c43301ffe4f5fef24d27cb46dcb @leegee committed Oct 29, 2012
Showing with 22 additions and 19 deletions.
  1. +17 −14 README.md
  2. +5 −5 Source/PcmImage.js
View
31 README.md
@@ -14,7 +14,7 @@ In each case, specific DOM elements are replaced with the graph, either as a can
*Basic Use*
-Once this library, and MooTools, have been included, a graph with default settings can be generated by defining a CSS class for its display, and attaching that class to a DOM element. Size and colour settings are extracted from the DOM container and applied to the canvas that is added in its place. The location of the sound file must be specified in the DOM element's data-uri attribute:
+Once this library, and MooTools, have been included, a graph with default settings can be generated by defining a CSS class for its display, and attaching that class to a DOM element. Size and colour settings are extracted from the DOM container and applied to the canvas that is added in its place. The location of the sound file must be specified in the DOM element's `data-uri` attribute:
<style>
.pcmimg {
@@ -27,9 +27,9 @@ Once this library, and MooTools, have been included, a graph with default settin
</style>
<div class='pcmimg' data-uri='pluck.wav'></div>
-Any PcmImage option that can be supplied via the JavaScript API can be supplied via markup, by supplying the option as an attribute with the **data-** prefix. Such options are specified below.
+Any PcmImage option that can be supplied via the JavaScript API can be supplied via markup, by supplying the option as an attribute with the `data-` prefix. Such options are specified below, and are in lowercase, not camelcase, for this reason.
-The automatic application of the substitution to the DOM is handled by **PcmImage.parseDOM(selector)**. The *selector* is, by default, **.pcmimg**.
+The automatic application of the substitution to the DOM is handled by `PcmImage.parseDOM(selector)`. The `selector` is, by default, `.pcmimg`.
*JavaScript API*
@@ -41,9 +41,9 @@ The automatic application of the substitution to the DOM is handled by **PcmImag
playable: true,
overlayclr: 'pink', // #abc #123456
asimg: true,
- strokeStyle: 'black', /* foreground colour */
+ strokestyle: 'black', /* foreground colour */
background: 'lime',
- lineWidth: 1,
+ linewidth: 1,
onXhrError: function(){ throw 'XHR Error getting '+this.options.uri },
onNoBufferError: function(){
throw 'Error decoding file data from '+self.options.uri;
@@ -58,23 +58,26 @@ The automatic application of the substitution to the DOM is handled by **PcmImag
});
});
-**element** (string): 'id' of, or reference to, a DOM element to hold the graph.
+Options
+-------
-**uri** (string): Address of the sound file to process.
+`element` (string): 'id' of, or reference to, a DOM element to hold the graph.
-**asimg** (boolean): If true, the 'canvas' element on which the graph is drawn will be converted to a standard 'img' element, to allow the user to save the created image.
+`uri` (string): Address of the sound file to process.
-**strokeStyle** (string): Supplied to the canvas context to set the foreground colour. Default is to use the value of th **color** style setting of the **element**.
+`asimg` (boolean): If true, the 'canvas' element on which the graph is drawn will be converted to a standard 'img' element, to allow the user to save the created image.
-**background** (string): Supplied to the canvas context to set the background color. Defaul tis to use the **backgroundColor** style setting of the **element**.
+`strokeStyle` (string): Supplied to the canvas context to set the foreground colour. Default is to use the value of th `color` style setting of the `element`.
-**lineWidth** (number): Supplied to the canvas context, defaults to 1.
+`background` (string): Supplied to the canvas context to set the background color. Defaul tis to use the `backgroundColor` style setting of the `element`.
-**onXhrError** (code reference): Fires if an error is encounted fetching the sound file from **uri**.
+`lineWidth` (number): Supplied to the canvas context, defaults to 1.
-**noBufferError** (code reference): Fires is the data fetched from **uri** is invalid/non-existent.
+`onXhrError` (code reference): Fires if an error is encounted fetching the sound file from `uri`.
-**onCanvasLoaded** (code reference): Called after the sound file has been loaded, and the canvas object created, but before rendering begins. Can be used to set rendering options, or to over-ride previously supplied, as in the 'gradient' example above.
+`onNoBufferError` (code reference): Fires is the data fetched from `uri` is invalid/non-existent.
+
+`onCanvasLoaded` (code reference): Called after the sound file has been loaded, and the canvas object created, but before rendering begins. Can be used to set rendering options, or to over-ride previously supplied, as in the 'gradient' example above.
Instantiation of the object creates the image.
View
10 Source/PcmImage.js
@@ -40,9 +40,9 @@ var PcmImage = new Class({
options: {
element: null, /* conatiner to replace with canvas/image */
uri: null, /* uri of sound */
- strokeStyle: null, /* foreground colour, may come from css */
+ strokestyle: null, /* foreground colour, may come from css */
background: null, /* background colour, may come from css */
- lineWidth: 1, /* width of line used in graph */
+ linewidth: 1, /* width of line used in graph */
step: 4, /* process PCM in steps */
asimg: false, /* replace canvas with image, prevents playable */
playable: true, /* can the image be clicked to play? */
@@ -80,7 +80,7 @@ var PcmImage = new Class({
this.options.background = this.options.background
|| this.element.getStyle('backgroundColor');
- this.options.strokeStyle = this.options.strokeStyle || this.element.getStyle('color');
+ this.options.strokestyle = this.options.strokestyle || this.element.getStyle('color');
if (actx)
this.actx = actx;
@@ -191,8 +191,8 @@ var PcmImage = new Class({
var cd = [];
this.cctx.beginPath();
- this.cctx.strokeStyle = this.options.strokeStyle;
- this.cctx.lineWidth = this.options.lineWidth;
+ this.cctx.strokestyle = this.options.strokestyle;
+ this.cctx.linewidth = this.options.linewidth;
this.cctx.moveTo( 0, this.height/2);
for (var c=0; c < this.buffer.numberOfChannels; c++)

0 comments on commit 85fc2b5

Please sign in to comment.