Tag Archives: guitar scales

Guitar Note Atlas (my iPhone app) coming soon!

Guitar Note Atlas

www.guitarnoteatlas.com

So a few years ago I nerded out pretty hard and stayed up many nights to program the Guitar Scales page of this website. Ever since then I’ve wanted to make a mobile app version of it, but as it turns out that kind of programming is completely different from html. So it has taken me a long time (with plenty of false starts) but after conceding to letting a professional help me I’m happy to say that it is almost here. We’re just putting the final touches on it and then it’s ready. So I’m starting to get the word out, including making a website for it with a nifty demo. Check it out and tell me what you think!

Updates to the Guitar Scales page / new web-coding tricks

I did a couple of cool things to improve the Guitar Scales page, and learned some tricks along the way. Whenever I’m searching for how to do things in html/css/php/javascript I always appreciate when people post advice, so I figure I should start paying that forward.

1. Scales are now printer-friendly, meaning that when you print off of the Guitar Scales page it no longer has a bunch of unnecessary buttons and links–just the scale, the name of the scale, and the scale degrees. Just go to the scale you want and push CTRL-P or Command-P. You should have the option to do it in landscape, which fits nicely, though is kinda huge.

As for the coding, the way you accomplish this is by including the following code into the CSS styles portion of the header:

@media print {
.noprint {
display:none;
}
}

And then you can just put

class=”noprint”

into any div, table, td, tr, img, just about anything you want to hide during printing. Put it inside the < > . Very simple.

 

2. I re-discovered the little PHP code to get the current year for putting into the copyright statement. It’s just

&copy; Your Name <?php echo date(“Y”); ?>

The &copy; is just the html code for the copyright symbol. The other part is the PHP for getting the current year. The only tricky thing to this is that your page has to have a .php file extension, not .htm or .html. But all you have to do is save your page with the new extension and it works just fine. You don’t have to call PHP earlier in the code or anything like that.

 

3. I added the Chromatic Scale. I don’t know why it didn’t occur to me until now to do that. So it now says “Chromatic Scale” at the top when you click the Show All button, or when you push down all of the scale degrees. The tricky part came when I realized I had to make it recognize every permutation of the Chromatic Scale a person could end up creating with my little system (of which there turned out to be 27). That’s just because of the whole #2/b3, #4/b5, #5/6b thing. Through this process I learned a little about Javascript functions. I assumed I would have to list a new else if statement for every condition, but as it turns out you can use || in between each condition to indicate “or”. Also && indicates “and”. For example, instead of

else if (x==5)
{
y=100;
}
else if (x==6)
{
y=100;
}
else if (x==7)
{
y=100;
}

you can just do

else if (x==5 || x==6 || x==7)
{
y=100;
}

Which might not seem like a big deal, but when you’re dealing with 27 conditions that all result in “Chromatic Scale” it’s pretty great. In retrospect I think I learned this in my high school Computer Science class. I’m pretty sure my brain is shrinking.