Wednesday 12 February 2014

Chart Generation

Chordography generates chord charts for any fretted instrument, banjo, guitar, mandolin, ukulele etc., in any tuning. Charts can be quickly generated and downloaded in a variety of formats. Or, you can use Chordography's JavaScript routines to generate charts in your own web pages.

The chart is generated and rendered Initially as in-line xml markup, so you can't copy it normally, as a regular image (right-click and copy). But you can if you change the chart's format to png or jpeg (anything but xml). See the Format section, below, if you prefer to copy the chart as in-line markup.

Title
Frets
Labels
Footer
Barré
Style
Format
Note: The generated image can fail to display in some browsers. If this happens, try a different format, disable your ad-blocker, or change your browser.  …more▶

SVG is well supported in modern browsers. However, rasterizing a cross-sourced svg image can lead to potential security issues. Although images generated locally, as above, should not be affected, some browsers err on the side of caution and refuse to display a rasterized svg image, whether generated locally or otherwise.

Resolution of these issues has improved of late, and rasterized images now display in many popular browsers, including Chrome, Firefox, Opera, and MS Edge, but alas not in Safari and IE in which only xml and svg format options display correctly.
Click the Update button to implement any changes.
The image is generated as a Scalable Vector Graphic (svg) from four text inputs (Title, Frets, Labels, Footer) and three drop-down selectors (Barré, Style, Format). The chart header is generated automatically with blank, 0 and x entries for fingered, open and mute strings respectively.
Only Frets data are essential to create a basic chart; Title, Labels and Footer are all optional.
    No space is taken up by a null title
  • Title: optional chord name/type e.g. Am. Unicode characters such as ♯, ♭, ♮, °, Δ may be included, although not all are available in all fonts. Make a null entry if you prefer to use an external title.
  • Frets input also sets the number of strings on the instrument.
  • Frets: comma separated list of finger positions on the fret-board. Mute strings are represented by null, non-numeric or negative entries and show as x on the chart header. Every entry, even null or blank, should have a comma separator. Frets data alone are sufficient to create a basic chart.
  • Labels: optional comma separated list of labels used to indicate fingering, usually 1,2,3,4 for index, middle, ring, pinkie and t for thumb. Labels for non-fingered (open or mute) strings are ignored so anything, even null, is OK, but there must be a comma separator.
  • No space is taken up by a null footer
  • Footer: optional comma separated list of note names or chord function for each string. No specific tuning is assumed, so there can be no checks for errors; anything goes.
  • Barré: allows a barré to be drawn automatically for movable chords. Select none to omit it completely.
  • Style: offers a range of in line styles to make the image self-contained, usable without an external style-sheet. Choose none if you intend to use an external style-sheet with your svg image files, as in line styles will take precedence.
  • The chart looks much the same whatever format is selected
  • Format: determines how the image is rendered. Initially generated as a Scalable Vector Graphic (svg), it can be rendered directly as inline markup, as a regular image, or converted into a raster format. …more▶
    Only old browsers should fail to render in line XML.
    xml The svg code is rendered directly as in line XML markup. This is the most reliable way to display a generated image. The downside is that saving the image is a little less simple than usual:
    1. right-click the image and select 'Inspect Element' to open the Developer Console
    2. right-click the <svg> root element, and 'Copy' to the clipboard
    3. paste the image code to Notepad and 'Save As' an svg file (not as a txt file)

    svg The generated svg code is displayed as a regular HTML <img> element. As the image code is stored in memory rather than a file online, it has to be converted into a pseudo URL using the Data URI scheme. But the image can still be copied and saved normally.

    Safari and IE both fail to display rasterized svg images due to potential security issues
    png, jpeg, bmp, gif, etc. The svg code is converted into a non-scalable raster format and displayed as a regular HTML <img> element. Which raster formats are available varies with the browser, but usually includes png and jpeg. As for svg above, the image code has to be converted into a pseudo URL.

Example: Dm chart for a Banjo

The initial chart above is for an open chord on a guitar in standard tuning. Here's how to change it into a Dm chart for a Banjo in DGBD tuning. …more▶

Create a new chart

It takes three easy steps to create a basic chart:
  1. Clear the current data from all four text input boxes: Title, Frets, Labels, and Footer
  2. Add a new set of fret numbers i.e. 0,2,3,3
  3. Click Update to generate the new chart
Or you can cheat and click basic Dm to see how it should look at this stage.

Embellish the chart

Labels, Footer and Title can be added independently. Update the chart at each stage to see how it progresses.
  1. Add Labels to show the fingering i.e. 0,1,2,3
  2. Add a Footer to show the notes i.e. D,A,D,F
  3. Finally add a Title i.e. Dm
Or take the easy route and click embellished Dm to see how the completed chart should look.

Movable barré chords

Chordography automatically adjusts charts for movable chords. Only the fingered part of the fret-board is shown on the chart, subject to a minimum of four visible frets.
No labels means no barré will be drawn
If Barré = auto is selected, a barré is drawn when there are two or more fingered stages on the same fret with the same fingering (labels). Further visual clues that these are not open chords are a) the first fingered fret is numbered and b) the top-nut is not shown.
CAGED forms with a barré at the fifth fret on a guitar in standard tuning. Click scale up or scale down to change the scale in steps of 20%.
The five charts above are for a guitar in standard EADGBE tuning. They illustrate the major chords F D C A G played using open C A G E D forms respectively with a barré at the fifth fret. You can test your chart-generating skills by making up data to duplicate one of these examples. Enter your data into Chordography's text-input boxes, update the chart and compare the result with your chosen example. You can also check your data against that used to create the chart: click your example chart to load its actual data into Chordography.

Scale the image

A clue to the popularity of Scalable Vector Graphics lies in the name. SVG images are scalable. But judging by the large number of confusing articles on this topic, scaling svg images can cause a few headaches. It isn't difficult, but equally, it's not without its anomalies. …more▶
Chordography adds three attributes related to scaling the <svg> element: viewport, viewBox, and preserveAspectRatio. These are easily modified using a text editor such as Notepad.
  1. viewport comprises width and height attributes that tell the browser how much screen real estate you wish to allocate to the image. Typically, these will be the only attributes you ever need to modify.
    Chordography sets the width and height to display the image full size. But you can change these to any convenient values and the image will be rendered without distortion or pixellation.
  2. viewBox defines the region of the image canvas that gets mapped to the viewport. Chordography sets the four parameters (x y w h) to include the whole chart; there is normally no need to modify these values.
    No viewBox means no scaling takes place
    If you delete the viewBox attribute, the canvas will be copied full size and undistorted over the full extent of the viewport. In that case, top-left of the viewport corresponds to (0,0) on the canvas, even if the image extends into a negative quadrant
  3. preserveAspectRatio tells the browser how to map the image if the viewport and viewBox have differing aspect ratios. The region specified by the viewBox is either padded, clipped or distorted to make it fit.
    Chordography sets the default option viz. "xMidYMid meet"; this pads either the width or height equally on each side to centre the image in the viewport.
    Feel free to delete this attribute as it's the default option. Either way, you can set the viewport width and height to convenient values, roughly in the correct ratio, and it will look good.
Not recommended to those of a nervous disposition.
Things begin to get complicated if you delete the viewport width and height. With the viewBox in place, as set by Chordography, the image should be scaled but to what?

This can be a useful option.
If either the viewport width or height is defined (but not both) the image is scaled to it in the correct proportions. If neither width or height is defined, the image is scaled to the width of the enclosing HTML element.

But wait, we are not done yet. What if both viewBox and viewport are undefined? With no viewBox prescribed, the image gets copied to the viewport without any scaling as described above. But this time it's not the enclosing HTML element that determines the viewport width and/or height; default values 300 and 150 pixels are used instead (don't ask).

Adding style

In line styles take precedence over style sheets.
Rather than use one of Chordography's pre-defined styles, you may prefer to give your charts a customised look with your own style sheet. In that case you will need to select style = none for your charts and add an internal or an external style sheet.  …more▶
Each element of the chart is given a class to make it easy to target your styles exactly at the elements you want. Appropriate elements are also grouped together and these too are given a class so you can easily target the whole group. The main <svg> element is assigned the class chordChart; other groups and elements are arranged as follows:
Chart Element Classes
Element Class Sub-Group Classes
svg chordChart  grid, text, dots, nut, barre
group grid frets, strings
group text header, title, lofret, labels, footer
group dots  
lofret is the number of the first fingered fret on a movable chord
Perhaps the most useful svg-specific styles for chord charts are stroke (default none) and fill (default black). With stroke=none all text elements and geometric shapes such as dots, nut and barré are rendered solid black with no outline. Grid lines are invisible as are labels (black text on black dots), and the chart is transparent (no background specified).
A minimal style-sheet would need to include something like:
svg.chordChart .grid{ stroke: black;}
svg.chordChart .labels{ fill: white;}
These are in fact the in-line styles used with style=plain. The style sheet equivalent to style=default is only slightly more elaborate: Download default.css

Roll your own

Rather than save your images to file, you can also use Chordography's JavaScript code to generate and render svg images dynamically in your own web-pages. That will allow you full control of the image geometry and style (lines, fills, fonts etc.). You will need to download the source code, and provide a reference link to it in your HTML <head> section  ...more▶
The source-code comprises a single factory module, chartMaker(), that returns an anonymous function. The latter is the one that actually creates chord charts.
Assign the anonymous function to a variable (that is give it a name, e.g createChart), then locate the placeholder and execute createChart(), once for each chart you wish to create. e.g.:
var createChart = chartMaker();
var placeholder = document.getElementById("exampleChart");
createChart(placeholder,udi);
  • placeholder provides the HTML location of the chart
  • udi contains the data necessary to create the chart.
The placeholder corresponds to an empty <svg> element placed in your mark-up at the required chart location. Typically, the HTML <body> element would contain something like:
<svg id="exampleChart" >Example chart goes here</svg>
Timing can be an issue as the <svg> element must exist, that is the HTML page must be loaded, before the DOM method can find it.

User Data Input

User Data Input (udi) is a Javascript object that contains the details of the new chart e.g.:
var udi = {title:"C7♭9",fret:"x,3,2,3,2,3",label:"x,2,1,3,1,4",footer:" ,C,E,B♭,D♭,G"};
Only fret data are essential to create a chart.

Scale & Barré

As described above an existing chart can be scaled by changing the viewport width and height parameters in its <svg> element, relative to the viewBox dimensions. A dynamically generated chart can be similarly scaled by adding a scale factor to the udi object. e.g.
var udi = {title:"C7♭9", fret:"x,3,2,3,2,3", label:"x,2,1,3,1,4", footer:" ,C,E,B♭,D♭,G", scale:1.5};
Likewise, you can ensure a barré is not drawn by adding barre:false to the udi object.

Core data

At this point, you may be wondering why we employ a factory function. Why doesn't chartMaker() create chord charts directly instead of creating an anonymous function to do it?

All chart elements are scaled to the font height
The answer is that doing it in two stages allows us to separate the data into chart-specific, or variant data (title, frets etc.), and core data such as chart geometry.

As described above, the anonymous function creates charts with a default geometry based on a font height of 16 pixels and a cell aspect ratio (fret to string spacing) of 1.2. But chartMaker() is a factory function, with optional parameters fontHeight and aspectRatio. It can produce anonymous functions to generate charts with bespoke geometries. So if you prefer your charts to be small and squat for example, as shown right, you can create an anonymous function to do just that e.g.:
var fontHeight = 8, aspectRatio = 1.0;
var smallChart = chartMaker(fontHeight,aspectRatio);
smallChart(placeholder,udi);
Charts much smaller than this do not look good on-screen unless you zoom in, but are fine in documents printed at a higher resolution.

You can create as many chart-makers as you like, each with its own built-in geometry, and each chart-maker can generate as many charts as you like, each with a unique placeholder. Charts can also be overwritten at any time as all child nodes of the placeholder, including descriptive text, are removed before new nodes are added.

And finally...

This software (images and/or source code) is provided free of charge, licence fees or royalties, and without warranty. You may download it, redistribute it and/or modify it under the terms of the GNU General Public License.
The code is minified which makes it load more quickly, but more difficult to reverse-engineer. Ideas on how it might be improved are very welcome.

52 comments:

  1. Please tell me how to copy just the chord chart to my clipboard

    ReplyDelete
    Replies
    1. Pete,
      You can make a screen capture using your Print Screen button (Google" Print Screen" if you are not sure how to use it). I guess you were trying to right-click and save the image, but that doesn't work yet for svg.
      Alternatively almost any graphics software can convert svg code into bmp, png or whatever, as I understand it.But svg is the better format IMHO.
      Hope I've understood your question properly.

      Delete
    2. I really like your generator. However, I'd like to embed the diagrams in documents as images and I'm having trouble converting them. I tried opening the .svg file with The Gimp and Inkscape and in both all straight lines and numbers are missing. The diagrams are correctly rendered by the browser, so the screen capture trick does work. I'll use that for now. Thanks!

      Delete
    3. Chordography's user interface has been modified (Nov 2015) since this comment was originally answered. You can now save the image normally in any format but inline markup (xml). Read the ...more text under the Format option to see how to save as xml.

      Delete
  2. The problem arises because documents (eg Writer) don't do css. At the time I wrote Chordography I was just thinking of Web markup, so svg seemed like a good idea. On reflection, I should have included the styles in-line, and I intend to rectify this even though it will make it less flexible for markup. Also,I am looking at ways of 'rasterizing' the svg so you can choose alternative formats such as png or jpg, Works like a charm in Chrome but there are cross-browser issues, so watch this space.

    For now though you might like to try adding styles manually (unfortunately you'll have to do it to every chart) as follows:
    1) 'prettify' the svg code using XML Pretty Print or something similar. You can do that online so it is very quick and easy.
    2) Copy the prettified svg (excluding the first line <?xml version="1.0"?>) to Notepad, and add the required styles - see below
    3) Save the resulting code as an svg file.

    The minimum changes you will need to make are outlined in 'Adding Style:
    a) change the group element <g class="grid"> to <g class="grid" style="stroke: black; fill: white;">
    b) change the text element <text class="labels"> to <text class="labels" style="fill: white;">

    The class= parameters are redundant so you can remove them if you prefer. If you are feeling more adventurous, you might like to try adding all the styles from one of my colourful style sheets, or experiment with your own styles. Have fun.

    ReplyDelete
  3. Thanks but I'll wait until you have modified the software to allow me to copy and paste. Your other suggested workarounds are too involved. I am a Google browser user.

    ReplyDelete
    Replies
    1. Pete,
      What I am suggesting is really easy; you only need to be able to cut and paste.
      Open up Pretty Pring at http://xmlprettyprint.com/xml-pretty-printer.php, paste in a chart and replace the two styles. Nothing to it.
      FYI I am trying out the alternative formats on a new piano keyboard image generator.

      Delete
  4. Hi Clive,

    Great work! Is it possible to draw/generate a shape to represent a capo?

    Thanks,
    Patrick

    ReplyDelete
    Replies
    1. Thanks Patrick. I guess it would be possible, but why would you want to? I'm no expert but isn't a capo equivalent to the top nut, or would you want to show both?

      Delete
    2. Clive,

      Well, a capo does somewhat act as the top nut, but it alters the chordshape-to-chordname mapping. For example, if you take "0,2,2,1,0,0" in your chordography language, that yields the chord name of "E". On a guitar, If I place a capo on the first fret, that same "0,2,2,1,0,0" shape relative to the capo would be an "F". A capo on the 2nd fret would yield an "F#", etc... I am trying to create a user interface that allows the user to specify a capo position in addition to your fret string language ("0,2,2,1,0,0") and then have the correct chord name displayed.

      Thanks again,
      Patrick

      Delete
    3. Patrick,
      Sorry but I must be missing the point here. The capo changes the tuning, in effect, and is much the same as in barre charts where the index finger acts as the capo. My diagrams show the position of the barre and omits the 'dead' part of the neck. How would you modify the chart? Are you wanting to show the barre AND the nut? Can you refer to charts anywhere that illustrate what you are suggesting?

      Delete
  5. Hi Clive!

    For some reason, I can't get the frets and strings ("path" in the code) to appear. The nut path and also the other items/objects are showing properly. I'm using this with an online publishing platform (Wikidot). I saved the code as an .svg file and tested it with InkScape and the frets and strings are missing there too.

    On this page they appear properly (I'm using Chrome).

    You mentioned a similar tool for piano keyboard. Sounds very interesting, are you developing it?

    Kind Regards,
    J. from Finland

    ReplyDelete
  6. Hi J. from Finland,
    The problem is due to CSS, or rather the lack of it, as the defaults are "stroke:none; fill:black;". This is OK for text (no outline and black fill) but doesn't work for lines as you have found. It's not a bug, it's a design feature!. Honest, I did it on purpose.

    If you paste your image as xml markup you will need to include some appropriate CSS in your <head> section, such as a <link> to "default.css". This is how I thought Chordography would be used, so I did it like this to give maximum flexibility- it seemed like a good idea at the time!. Is there some way of including css in Wikidot?
    Alternatively, if that in not possible or if you intend use the file as an <img>; source, you might try adding inline styles to the "grid" group element as described above (March,15). SVG as an image only sees inline css.

    The good news is that my Keyboard Generator is testing out OK and I expect to upload it to blogspot anytime soon. By default, it includes inline css, so you should be able to use it, as is, without adding any css. It also renders the image as inline markup, as an <img> source, or as a non-scaleable raster format e.g. png, jpeg etc. It has taken me a while to get there because a) it has been a nice summer, and b) generated svg images pose cross-browser problems due to security issues. The resulting image files are fine, it just that some browsers refuse to show locally generated svg. As of now, Chrome, Opera and Firefox work well, but forget IE or MS Edge.

    Once the Keyboard Generator is uploaded, I intend to re-vamp Chord Chart Generator to do the same, with inline css and inline xml, svg image and rasterized format options.

    ReplyDelete
  7. Thanks for the quick reply!

    Yes, it's possible to use your own css with Wikidot. I didn't notice that you already mentioned the solution above, it seems to do the trick perfectly, thank you!

    Looking forward to see your keyboard generator!

    - J.

    ReplyDelete
  8. Hi Clive,

    Great software! However, the automatic addition of a barre bracket when two notes fall on the first visible fret is a bit limiting.

    For example, if I want to add a movable "D type" voicing such as
    frets=x,x,4,2,3,2
    labels=x,x,4,1,3,2
    I end up with a barre bracket, which is not correct since I decide to use all four fingers instead of a barre.
    Also, what about barres that fall on frets other than the first?
    Like the very common moveable "A type": x,1,3,3,3,x
    There should be a barre across the notes on the 3rd fret.

    So, I would do the following two things:
    1) make the barre bracket generation dependent on the fingering, not only the notes. If two notes on the same fret use the same fingering, draw the barre.
    2) don't restrict the bracket generation to the first visible fret.

    Also, it might be good to have the option to turn off the bracket altogether. Sometimes that makes the diagram clearer.

    Keep up the great work!

    Cheers,
    haiduc

    ReplyDelete
    Replies
    1. Hi haiduc,
      glad you like Chordography, and thanks for your comments- just keep them coming. It is hard to judge what is good or not so good on my own testing. This is a good time to raise points like this as I am in the process of re-vamping Chordography to add format and style options to the user interface. But the Chord Factory is not affected - so far.

      I did have the foresight to include an option to not have a barre, but it is not offered on the current user interface, on the grounds that I wanted to keep it as simple as possible.
      If you are using JavaScript to generate your charts, you can include csi.barre=false in your core data to exclude barre, just as you can also include a csi.scale factor. You can judge the importance I attached to barre at the time as I didn't even mention it in the instructions.
      The algorithm used to process the fret array is based on the idea that you use your index finger as a barre, hence its always going to be on the lowest fingered fret. But I did see the barre as an optional indication that the chord could be played that way, and the fingering data similar.

      I have taken another, long, hard look at the algorithm to generate the barre, and you are right. It really should depend on the fingering data so I have re-written it to include a barre if more than two fingered stages occur on any fret, providing they all have the same fingering (label). No labels = no barre. As it stands, there is some scope for improvement with three fingered stages on one fret (any two wil do or what?). Also a barre is still drawn if an open or lower fingered fret occurs within the barre, but these cases are more pathological than practical. Your practical examples work as you would expect. Essentially you control whether/where a barre ocurs with the fingering. It is possible to to have two frets both with two fingered strings e.g. 1,2,3,1,2,3 (try playing that!): in that case the lowest fret is chosen.

      By and large it works a lot better than it did, so thanks again for the suggestion. I'll do a bit more testing and should be able to upload it to blogger in a day or two, without waiting for the interface change. I would prefer not to have a barre off/auto selector.
      You have probably gathered that I am definitely not a guitar virtuoso, more like an aspiring beginner.

      Clive

      Delete
    2. Hi Clive,

      thanks for looking into the issue so quickly.
      The change you introduced to the algorithm sounds good. I had to laugh at the "pathological cases". ;)

      Really curious to check out the new version soon! :)

      Cheers,
      haiduc

      Delete
    3. By the way, I still think it would be good to have the option (checkbox in the UI) to toggle the barre on and off. In my opinion it would not make the user interface more complicated.

      Delete
  9. Hi Clive,

    I have another suggestion for Chordography.
    It would be great if the user had the possibility to use superscript (and maybe subscript) notation for chord names.
    This notation is very common in sheet music and makes the chord name look more professional and less cluttered, especially if there are additional intervals.
    Cmaj7/#11 would be a good example. I would put "maj7/#11" in superscript to make the chord name more readable.
    Maybe include a special syntax for superscript, such as putting the superscript text in curly braces or something like that, then parse it out before setting the label in the SVG.

    Subscript may be useful for slash chords (such as C/E) but it's less common.

    Great project!
    haiduc

    ReplyDelete
    Replies
    1. Hi haiduc,
      Is that really your name?
      The way I envisaged adding fancy titles to chord charts would be to use the facilities of the enclosing document e.g. OO Writer or HTML. That's why a null title doesn't take up space so it doesn't look ugly. Alternatively, you could always edit the svg to separate the title <text> element into a sub/superscript <tspan> element with a smaller font-size and baseline-shift parameters.
      It wouldn't be too difficult to add something like that to the title using a trigger char like v or v to initiate a sub- or super-script, but I decided against it as its just more bells and whistles to complicate everything.

      Delete
    2. Hi Clive,
      No not my real name but I started a habit of using it on forums. You know big brother has his eyes everywhere... ;)
      Yes, my suggestion was to add it to the enclosing HTML, not the chart generator code itself. I don't think it would make the interface more complicated. If the user doesn't wish to use the feature, they won't even notice it's there.
      I'm using this web page as my primary interface to the chart generator, so this is just my view of things. I'm fine with changing it manually in the SVG code.
      Cheers!

      Delete
  10. And another one, while I'm at it... ;)

    This is an addition to the user interface only.

    It would be helpful for the user to have buttons that insert Unicode characters that are commonly used in chord notation into the chord title text box.
    b and # come to mind, also the "delta" used for major 7th chords, the o and the strike-through o for diminished chords...

    Cheers,
    haiduc

    ReplyDelete
    Replies
    1. Hi again,
      You don't need any buttons to add Unicode chars, you can just paste them into the title, or note names. I already suggested you use ♯ and ♭ and there are no cross-browser problems (I think)! Come to think of it, how about using ☝ and ☟ to trigger sup- super-scripts?

      Delete
    2. Hi Clive,
      I know I can copy-paste Unicode characters, buttons would just make it easier for the user to add these symbols. This would be an addition merely to the UI (i.e. the current web page), not the chart generator logic.
      I wouldn't suggest using the "finger up/down" symbols for triggering sub/superscript, rather <sub></sub> and <super></super> or something equivalent, so it is clear where the style starts and ends.

      Delete
  11. Hi, I probably need to read a bit more to understand it all, but let me ask if this is the procedure: I enter the info into your generator here (on this page), and it creates the image to the right of my data entry. How do I then capture that image ? so that I can later insert the image of the chord into a guitar lesson video...

    ReplyDelete
    Replies
    1. Hi JW and Merry Christmas,
      Just copy the chart as you would any image. Right-click and Save. That will work for all formats except 'xml'.

      In the latter case the image forms a part of the page markup, so you can only copy it via the Developer Console as described under Format. Its not difficult, really, but you may prefer to choose another format such as png (don't forget to update the chart) and save as per usual.
      Clive.

      Delete
  12. Hi Clive,
    Great to see Chordography evolve. It's getting more and more useful!
    Cheers,
    ~haiduc

    ReplyDelete
    Replies
    1. Hi haiduc,
      Thanks, and glad you like the changes. I am still intrigued by your nom-de-plume. What does it mean?

      Delete
    2. I think it's some Romanian Robin Hood kind of character. Not fully sure myself... ;)

      Delete
  13. Hello Clive, It seems I could make very good use of this app although can't seem to find any link to download it.

    ReplyDelete
    Replies
    1. Hi Philip,
      The link to the JavaScript routine is in the "Roll Your Own" section, where it says "download the source code". Oops ... my fault, as I have the text decoration turned off unless you hover your mouse pointer over the text.
      Do let me know how you get on with it.
      Clive

      Delete
  14. Hi Clive,
    I used your script in my app. Thanks for making it open-source. It worked out really well! Check it out:
    https://bridge-guitar-app.herokuapp.com/

    ReplyDelete
    Replies
    1. Andy,
      It looks really cool, well done.
      Just one small point, it looks as if the movable charts, which show the first fret # and so are a little wider (157px) than the others (136px), seem to get scaled down to fit into the container div. They appear a lot shorter (should be 160px due to absence of nut, compared to 165px with the nut in place), and I suspect even the text is slightly smaller.

      Delete
    2. You are right--It was a concession I had to make. The diagrams flex to width of their parent container. The only fix I could see is adding a "movable" boolean to each chord object in the database, and then if that value were true, I would add a class that scales the SVG up slightly to compensate.

      Delete
  15. Clive, thank you for this great project! I have a project I'd like to try this on and I'm having a hard time putting it together. Seems silly but I'm very new to JS and it is much easier for me to figure out the code by experimenting with it in a sandbox such as jsfiddle.net, codepen.io, etc. Do you have any examples, or know of any, in such a format? I've tried putting it all into one of those myself but I must be missing something somewhere.

    Thanks again for the project and any help!!

    ReplyDelete
    Replies
    1. Hello Anon, and thanks for the comments.
      You are asking for simple examples using Chordography with JSFiddle etc.? Sorry but I am the wrong person to ask as I never use libraries. IMHO they make things more complex as you have to learn how they work, what they can do, and then use JS just to glue it together. And they add acres of impenetrable code that, by and large, do not very much. You end up finding out the limitations of the library, and very little about JS. Rant over, but seriously, I am not sure if you can include, or even link to, external code such as chartMaker.js with jsFiddle.
      If you can, just do it, and add the two or three lines of JS code and the placeholder HTML from "Roll your own" and that should be that. If not, you can create a simple web page and add the code to that.
      Let us know how you get on, and do post a link to your efforts, but try to keep it as simple as possible.

      Clive.

      Delete
    2. Hi again,
      I have had another look at JSFiddle, and managed to get the 'Roll Your Own' example working with chartMaker module an an External Resource. Hope you can find it at https://jsfiddle.net/derwentdale/L8koh7t6/

      Delete
    3. The jsFiddle example stopped working when Google Drive stopped serving the chartMaker module. As the module is now hosted by Talktalk I've had to change jsFiddle's External Resource reference. Result. It is now working again at http://jsfiddle.net/derwentdale/L8koh7t6/41/.
      NB ensure that you run it under HTTP and not HTTPS as I can only get Talktalk to serve under HTTP.

      Delete
  16. Great idea. Would it be possible to have the chance to make it available for 4 Stringed Instruments and with adjustable alternative tuning?

    ReplyDelete
  17. Irish,
    thanks for the comment. Chordography works for 4, 5, 6, 7 ..., any number of strings. Check out the Banjo example. And it doesn't know or care about how the instrument is tuned. But you have to give it the correct fingering (labels) and notes (footer) if you use them. Is that what you mean by adjustable alternative tuning?

    ReplyDelete
  18. Hi Clive Grant,

    Thanks for the share. It is a very nice tool. Can you please provide an example css header? something like this

    src="javascript/chartmaker.js"
    text style="fill: white;" class="labels"
    style="font-size:150%;" x="68" y="30" class="title"
    style="stroke: black; stroke-linecap: round;" class="grid"

    render the chord but does not show the finger numbering (actually paint in black) and the background is transparent.

    Regards

    ReplyDelete
    Replies
    1. Hi there Anon, Is it OK to call you that?
      Thanks for your comment. I am struggling to figure out just what you are attempting.
      I'm guessing that you would like to apply your own styles, but are not too sure how to do it. If so, you need to put your styles (start by downloading default.css) into a text file called "xxx.css" or whatever, and link to it in your HTML <head> section. You will always get a transparent chart unless the <svg>. element has a background color specified. Also, you will not see the fingering labels if the dot fill color and text fill color are both black.

      Let me know if that is what you are trying to do, and I will offer what help I can.

      Clive

      Delete
  19. Hi Clive,

    Sorry for the late reply! actually what I want is already documented above. Now it works fine.

    Thanks

    ReplyDelete
  20. Hi Clive,

    Thank to so much for an elegant and easy to use tool, it is helping me greatly in my learning of the guitar at the ripe old age of 67. My method is to create the chord, right click on the output box and choose save as *.svg. I then paste that into Inkscape (free, open source) and then Save as *.wmf. This gives a file that can be inserted into Word and which is completely scalable without any of the "jaggies" which occur when you use bit mapped outputs. Again, thanks for a great product. Peter.

    ReplyDelete
    Replies
    1. Hi Peter,
      Thanks for your comments. Its been a while since I used MS Word and I am surprised you can't insert an svg directly. I have used inkscape to simplify complex 'path' elements (actually treble, base and alto clefs used in key signature app fully working but not yet published: watch this space). It adds acres of unused code to the svg, but I was able to easily recover the simplified paths,scaled to the size I needed.
      Have you tried Chordography 2.0 yet?

      Delete
  21. Would you be opposed to someone using your chord images to write a chord instruction book?

    ReplyDelete
  22. Not at all. A credit would be nice though

    ReplyDelete
  23. Thanks for your post, it was pretty useful for me. It's great how you contribute your ideas and knowledge. I'll be following your blog with a great expectation. Cheers!
    Chord Gitar Chord Lagu Rohani Kristen

    ReplyDelete
  24. Fantastic!
    After exploring different guitar-related codes, I found yours.
    Thank you for sharing! It's super!
    I've tinkered around with your code, trying to add a sound option (a "play chord" button), but so far I haven't been successful. I'm both a guitar newbie and code newbie.
    In case you're interested - here is the piece of code I've been trying to combine with yours - "strumming" guitar chords by fret numbers via javascript.
    https://codepen.io/johnslipper/pen/eYgZMRL
    Just a thought...
    Again, thank you for sharing your work!



    ReplyDelete
    Replies
    1. Dear Anon,
      Thanks for your comments. I doubt you would need to alter Chordography code to add a sound option. I create most of the user input options dynamically, but its not recommended, especially if you are finding your way into the code. Chordography 2 is more rational, and likely to be more useful to you as it is unminified, and includes comments.
      Best wishes with your endevours,
      Clive

      Delete
    2. Thank you for responding to my comment (about implementing "strumming" code) It was just an idea about having fun with codes. But strumming on guitar! or ukulele is even more fun! Thanks again

      Delete