Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Tag

WordPress

SVG Platformer

Can you go from art to program in one or two steps? Well, that’s what today’s post is about.

One of the cool things I remember about web development from years ago was Adobe Flash.

Before you boo me, hear me out!

I’m not saying Flash is a better technologically than HTML5, The Name of Your Favorite JavaScript Framework, CSS, Web Assembly etc… However one place Flash excelled was visual design & layout… an important part of the web!

The problem with many modern tools isn’t that they can’t convey design, it’s that they decouple the design and the development processes!

In practice this means writing code to describe the elements of your software like HTML and later writing more code to style the elements (like CSS, SASS or LESS), none of which is actually visual, though you definitely can get some great results!

Flash Builder (or whatever it was called) was half art studio and half IDE (Integrated Development Environment) where you could draw anything and it was an “object” and you could write code (ActionScript) to control it’s behavior. It wasn’t a mockup or illustration, it was the actual program!

As I recall, once the switch to ActionScript 3 was made the ability to store your code on the objects themselves was depreciated in favor of using references and listeners stored in the main keyframe timeline… I preferred keeping my code on the objects themselves but I digress.

Even with the change to where you stored your code you could still accomplish anything you wanted with the centralized keyframe code and some developers even found this easier to maintain than storing the code on the components.

You would setup your scripts on layered keyframe’s that extended to the last keyframe used in the project, or the last frame that needed that code and by using a sort of “goto keyframe name or id” method you could actually build complex applications quite easily, and more importantly… visually!

That’s why all the games used to be made with Flash, you could basically draw a picture and then turn it into an animation or even a full program in a couple of hours. This meant you were free to experiment & push boundaries.

Now, yes of course there are visual workflows you can use today.There are WYSIWYG editors and CMS App Platforms like WordPress, Drupal & Joomla not to mention the full featured layout capabilities of site builder tools like Wix.

Fundamentally though these tools facilitate laying out HTML elements and applying CSS and maybe some JavaScript via a drag and drop interface. Which is significantly faster than doing visual development via code in my opinion, though I am not arguing it is inherently “better”.

Unlike the aforementioned tools which specialize in “page based” HTML applications, Flash was an element or object that you embed into your page that used Vector Graphics to create lossless re-sizable images, animations and applications.

Inside the Flash movie/app you could draw anything and you were not constrained to HTML elements but you were also not required to code the visual elements.

This made for a wonderfully rapid prototyping experience that I was unable to reproduce until I tried working with Unity 3D which describes itself as “the ultimate game development platform” though I’d go so far as to describe it as “the ultimate app development platform”.

Think about it, at the time of writing this Unity supports 25 Platforms including Desktops (Win/Mac/Linux), the mobile OS’s, and all the major gaming consoles, not to mention the Smart TV’s, Watches etc…. Any platform you want your app on, including the web, well… Unity pretty much supports it right out of the box. Oh, and it’s free until you make $100K a year with it, not too shabby!

The catch? Well, its highly optimized but leans in the 3D gaming direction (though I’ve built 2D apps with Unity) so the applications it produces tend to have a larger size (as far as my tests go) than if you used PhoneGap/Cordova or went native. My guess is this is due to the embedded physics engine and graphics rendering code that gets packaged with the app but i’m only guessing, and there are a few options that let you exclude unnecessary things from the compiled app.

Then again, you may be able to make use of those features in your app so it need not be a negative either.

In any case, the problem as I see it with Unity is that the builder isn’t readily available on Linux, but it will build for Linux ❓ Maybe they should build Unity with Unity so that it can Unity being Unity… 😛

I am aware they kinda released a limited version for Linux… but I could never seem to make it work right and the truth is that it takes some decent (but not outrageous) resources to run the Unity builder application so most micro computers are out and sadly it won’t run on the ARMf architecture so using a Raspberry Pi to do Unity development is just not happening.

Is there another way?

Well, there is a modern Vector Graphic format available for the web called SVG that is basically XML code that can be written in a text editor or it can be drawn using a program like Inkscape (free and what I use) or Adobe Illustrator if you prefer a commercial paid tool.

Since SVG is code, if you place the code inside your HTML (sadly not link to or embed) you don’t just get a static vector image but instead you get elements that are accessible via the DOM (Document Object Model) that you can manipulate using CSS and JavaScript.

That last part should really interest you if you enjoy rapid application prototyping!

Which is the origin of this project, I wanted to know… could I rapid prototype an application by just drawing a picture and writing some code?

Understand that I am not talking about drawing a picture, slicing it then building an app from sliced components or using the sliced images as placeholders or writing code to draw the slices onto a canvas context.

I challenged myself to see if I could only write code that was part of the core functionality and not basic graphic asset creation and certainly not the code to display it, just manipulate it.

I set about creating a very simple “proof of concept” a while back that is basically a “Die Rolling App” that you can view a live example of here: SVG Roller though I never wrote about it. Roller is half image and half app but very basic.

Roller consists mainly of showing and hiding elements in the SVG based on a button click and a random number… good but not all that flashy!

Recently I have been wanting a better SVG application that would be more visual and expand on what I have already done but retain the simplicity of “Draw It then Code it”.

So, I opened up Inkscape and drew this image:


I grouped all the associated assets and gave them id’s like “cloud1”, “player”, “coin2” etc… then saved the image as demo.svg and closed Inkscape.

Why a game? Well, it’s more visual than my SVG Roller and I think it illustrates more of what is possible with an SVG app.

After that I opened demo.svg with a text editor and copied the SVG code into the body tag of my HTML file (remember you can’t link to it you have to include the code in the HTML).

I then wrote a little CSS that helps position the SVG on the page, applied a background color, disabled text highlighting and changed the cursor to the hand icon when the mouse is over a button, minimal CSS.

After that I wrote the JavaScript that turns the image into a playable application.

Game.js

Here is all the code that makes the SVG Platformer game demo work:

var keyEvents = {}; // keyboard state object

// Listen to keyboard outside of game loop to be less "blocky"
var onkeydown = onkeyup = function(key){
  key = key || event; // IE Fix 😦

  if(key.type == 'keydown'){
    keyEvents[key.keyCode] = true;
  }
  else{
    keyEvents[key.keyCode] = false; 
  }
  //console.log(keyEvents);
}


var game = document.getElementById('game'); // A reference to the SVG
if(game){
    game.addEventListener("load",function(){
    ///////////
    // Functions
        
    // Clear Instructions    
    // removes the instructions element
    function ClearInstructions() {
      instructions.remove();
    }

    // Get Position
    // This function gets the current (x,y) cordinates of GetPosition(object)     
    function GetPosition(object){
      var transformlist = object.transform.baseVal;
      var group = transformlist.getItem(0);
      var X = 0;
      var Y = 0;
      if (group.type == SVGTransform.SVG_TRANSFORM_TRANSLATE){
        X = group.matrix.e;
        Y = group.matrix.f;
      }
      return [X, Y];
    }
    
    // Collide
    // A basic box collision detector
    function Collide(element1, element2) {
      var collisionBox1 = element1.getBoundingClientRect();
      var collisionBox2 = element2.getBoundingClientRect();

      return !(collisionBox1.top > collisionBox2.bottom ||
        collisionBox1.right < collisionBox2.left ||
        collisionBox1.bottom < collisionBox2.top ||
        collisionBox1.left > collisionBox2.right);
    }

    // Inside
    // A basic inside box collision detector
    function Inside(element1, element2) {
      var collisionBox1 = element1.getBoundingClientRect();
      var collisionBox2 = element2.getBoundingClientRect();

      return (collisionBox1.top <= collisionBox2.bottom && 
        collisionBox1.bottom >= collisionBox2.top && 
        collisionBox1.left <= collisionBox2.right && 
        collisionBox1.right >= collisionBox2.left);
    }
      
    // Get Bank Total
    // Get the number of diamond or coins the player has
    function GetBankTotal(element){
      var currentValue = element.textContent;
      return parseInt(currentValue);
    }
    
    // Collect 
    // Increment the Coin or a Diamond "player bank"
    function Collect(element){
      element.textContent = GetBankTotal(element) + 1;
    }
      
    
            
    ///////////
    // Game play
    
    // Set the "constants"
    var step = 1;
    var jump = 20;
    var gravity = 1.5;

    // Setup references to the "named" SVG XML elements
    var gameOver = game.getElementById("gameover"); // A hidden "eater/detector" element below the play area to detect player death
    var instructions = game.getElementById('instructions');  // Instructions element
    var gameOverMenu = game.getElementById("gameovermenu");  // Game over screen element
    var player = game.getElementById("player");              // The player element
    var playerCoins = game.getElementById("playercoins");    // The "bank" element showing how many coins the player has collected
    var playerDiamonds = game.getElementById("playerdiamonds");// The "bank" element showing how many diamond the player has collected

    //  Setup references to the "named" SVG XML coin elements
    var coinPieces = ['coin1', 'coin2'];
    var coins = [];
    coinPieces.forEach(element => {
      coins.push(document.getElementById(element));
    });
        
    // Setup references to the "named" SVG XML diamond elements
    var diamondPieces = ['diamond1'];
    var diamond = [];
    diamondPieces.forEach(element => {
      diamond.push(document.getElementById(element));
    });

    // Setup references to the "named" SVG XML ground elements
    var terrainPieces = ['ground1', 'ground2', 'ground3', 'ground4'];
    var terrain = [];
    terrainPieces.forEach(element => {
      terrain.push(document.getElementById(element));
    });

    var winningBankTotal = diamondPieces.length + coinPieces.length;


    // Clear the instructions after 3 seconds
    setTimeout(ClearInstructions, 3000);


    // Redraw Game Loop
    var redrawRate = 30; // microseconds
    var gameLoop = setInterval(function(){
      fall = true; // always try to fall
      allowedToJump = false;// disallow jumping because player might be falling
      allowedToMove = true; // allow moving until the player is dead

      // Check for collisions with ground elements
      terrain.forEach(ground => {
        // If there is a collision with the ground
        if(Collide(player, ground)){
          fall = false; // Stop falling
          allowedToJump = true; // Allow jumping
        }
      });

      // if player fell below the ground
      if(Inside(player, gameOver)){
        fall = false; // stop falling
        allowedToJump = false; // dont allow jumping
        allowedToMove = false; // player is dead stop player movment
        ClearInstructions(); // just in case
        gameOverMenu.style.display = "inline"; // show game over menu
      }


      // if there was no collision between a ground element and
      // the player
      if(fall === true){
        position = GetPosition(player); // get updated player position
        allowedToJump = false; // dont allow jumping
        player.transform.baseVal.getItem(0).setTranslate(position[0], position[1] + gravity); // player falls
      }


      if(allowedToMove === true){
        position = GetPosition(player); // get updated player position
        // keyboard movment
        // left || a
        if (keyEvents[37] === true || keyEvents[65] === true) {
          if(position[0] > -10){
            player.transform.baseVal.getItem(0).setTranslate(position[0] - step, position[1]);
          }
        }
        // right || d
        if (keyEvents[39] === true || keyEvents[68] === true) {
          if(position[0] < 140){
            player.transform.baseVal.getItem(0).setTranslate(position[0] + step, position[1]);
          }
        }
        // up || w || space
        if ((keyEvents[38] === true || keyEvents[87] === true || keyEvents[32] === true) && allowedToJump === true) {
          player.transform.baseVal.getItem(0).setTranslate(position[0], position[1] - jump);    
        }
        // down || s
        if (keyEvents[40] === true || keyEvents[83] === true) {
          //console.log("Down");
        }
      }


      // Item Collection        
      // Collect coins
      coins.forEach(coin => {
        if(Inside(player, coin)){
          coin.remove();
          Collect(playerCoins);
        }
      });

      // Collect diamond
      diamond.forEach(diamond => {
        if(Inside(player, diamond)){
          diamond.remove();
          Collect(playerDiamonds);
        }
      }); 

      // Check for Win
      if((GetBankTotal(playerDiamonds) + GetBankTotal(playerCoins)) == winningBankTotal){
        clearInterval(gameLoop); // stop the game
        fall = false; // stop falling
        allowedToJump = false; // dont allow jumping
        allowedToMove = false; // player won stop player movment
        gameOverMenu.style.display = "inline"; // show game over menu
        // Change Game Over text to You Win
        game.getElementById("gameovermessage").textContent = '  You Win!';
      }

    }, redrawRate); // Game Loop - redraw every 30 microseconds
  }); // game load event listener
} // if game

 

As you can see from the code it supports WASD as well as the arrow keys and spacebar for movment. There is a win condition if you collect the two coins and the single diamond. You lose if you fall into one of the two spike pits.

Overall I am pleased with what I accomplished however the collision detection could be improved and there is quite a bit of room for improving how items are collected and enemies would be nice in addition to a larger/longer level, and maybe even a parallax scrolling  effect on some background elements as the player moves would also be nice, though again, I am happy with how it turned out.

You can Play a Live Demo: Here

You can Get the Code: Here

You can find a list of all my other posts on my Topics and Posts page.

I hope you enjoyed reading about and playing this SVG game prototype.

Your financial support allows me to dedicate time to developing projects like this and while I am publishing them without cost, that isn’t to say they are free. It takes me a lot of time and effort to build and publish projects like this for your enjoyment.

So I ask that if you like my content, please support me on Patreon for as little as $1 or more a month.

Feel free to suggest a project you would like to see built in the comments and if it sounds interesting it might just get built and featured here on my blog for you to enjoy.

 

 

Much Love,

~Joy

Advertisements

A Modern Gold Rush

There is a modern “gold rush” going on today that emulates the Californian Gold Rush that took place between 1848 to 1855.

It has long been known that automation is rapidly supplanting so called “blue collar” jobs, however it is only more recently (this past couple of years in fact) that people have really started to perk up and take notice of the fact that automation now has a firm foothold on “white collar” jobs as well.

What was once the domain of skilled professionals is now on shaky ground and it may not be very long at all before a machine is functionally capable of doing your job!

Recently Alpha GO, the AI that was trained to defeat Grand Masters in the game of GO, can now learn to defeat the Grand Masters without any human input whatsoever . The AI begins as a blank slate and proceeds by using a “generic learning algorithm” to play games against itself and subsequently becomes better than any human player after only 3 days of playing itself. This is many orders of magnitude faster than the original human led training that initially lead to an Alpha GO win!

Only just a few years ago this was believed to be an impossible task for many decades yet!

I believe this reflects Ray Kurzweil‘s (Law of Accelerating Returns) whereby seemingly unforeseen breakthroughs in technology solve previously impossible tasks with ease leading to even faster growth (Accelerating Returns).

This is sort of like saying that we use todays technology to build tomorrows technology and since todays tech is already pretty good then tomorrow’s will be even better as a result and since you can usually then apply that new tech broadly there is an exponential growth due to all the “doors” that are unlocked as a result of all the “windfall” that comes from applying the new technology in unforeseen ways.

Alpha GO can teach itself how to play a game so well that it can defeat human Grand Masters, and I don’t care how long it took to earn your degree in business or accounting, GO grand masters are trained from childhood (literally) to master this one game, and a so called “general purpose learning algorithm” can supplant decades of human mastery in just 3 days all by itself!

How long until Alpha GO can teach itself to do TPS Reports without human interaction?

😛

How many employees are in your Accounting Department? What about your General Office or even Customer Service staff? How many of those positions (despite having skilled and qualified people performing those duties) amount to glorified data entry and verification? Don’t get me wrong, I an not saying there is anything wrong with the people doing those jobs, what I am saying though is that once Alpha GO (or a system like it) is given access to a terminal and allowed to experiment with a sales ledger for a bit or a mock ERP system or a dummy factory inventory system or maybe even some shipping software, how long until it masters it do you think?

How long until it’s so GOOD at doing your job that you could essentially be replaced? Many still cling to the notion that it’s decades away. They are in the “not my job” crowd!

Perhaps some of them are right and they are one of the few currently employed who will be left unaffected or even bettered (employment wise) after the new tools that automation had wrought are brought to bare, most however will be negatively affected financially in the coming years as their once secure position is quietly replaced by a glowing box.

That isn’t to say automation is bad, its just that we have not yet implemented mechanisms in our societies to handle an automated workforce. The automation itself is a good thing and everyone will benefit from the improved production and reduced costs associated with automation.

We are already seeing signs of a frothy and churning market as professionals from all industries and backgrounds are turning to content creation either out of necessity or because they see the writing on the wall. I wrote a little about this in my article The impending Death of the Programmer which specifically addresses the subject from the programmer’s perspective.

The ability to consume entertainment and educational content online from anywhere in the world has ignited a modern global “gold rush” of content creation!

Individuals and small groups of creators “stake their claim” on the digital frontier by carving out their niche and serving a previously unserved or under served market. You and your 5K-10K fellow minded individuals can share your unique interest and consume content tailor made just for your community! It is now possible to find content on just about any topic you care to read or watch!

The thing is that unlike the miners of mid 1800 California gold rush who were rewarded for their efforts at the end of the day by refining the various ore’s extracted from the ground being a content creator is much like being an entertainer in one of the old saloons and working for tips alone.

Week after week, sometimes day after day creators are creating for your entertainment and or education and make their content freely available in the hope that you will appreciate it and commit to spending a dollar or more every month to help make their work possible.

Now it would be lovely if you support me over on Patreon but I am also talking about all the other creators out there who need your support to continue doing what they do. How many free articles have you read or videos have you watched from individual creators over the years?

Consider showing the creators your love and support by giving to them financially so they can continue to produce all the great content that you love!

If I have managed to inform or entertain you then, please consider supporting me over on Patreon or donating to my anonymous Bitcoin Tip Jar.

All my posts are made possible by the generous contributions and hard work of my sponsors!

I will see you all in my next post!

Much Love,

~Joy

 

 

Tickle the Monday Ivories

Its Monday so hopefully I can bring even just a little Joy into your life today! 😛

Mondays are sort of my Friday in the sense that I’ve tied up all lose ends from the previous week, updated my clients on their projects or sites, fed Xavier countless times (and changed almost as many diapers) and generally my 80ish hour work week is coming to a close, though I don’t have long to ‘rest on my laurels‘, its back to the grind this evening but right now I owe you all a project don’t I? 😉

As you may know I am funding this little experiment with the proceeds I get on Patreon and as such I am limited sometimes in what I can do for you guys in some ways. This does provide me with a nice challenge every week to bring you something interesting that also costs me nothing and generally this has not been an issue since most of the projects we’ve done together have been “back-end” code focusing on PHP and C# with the exception of the Magic 8 Ball post I published in February.

This post will again showcase a “front-end” project that could run right here on this page save for the fact that I am currently using a free WordPress.com account instead of a paid account with more features or more preferentially something like a VPS which will let us do basically whatever we wanted. Now of course there are other options and when it’s time I will weigh the options and ensure that we get the most bang for our buck (meaning the highest marginal utility for the lowest marginal cost) but until then, most unfortunately WordPress.com wont let me embed any functional code on these pages and that includes JavaScript.

Additionally, there are times when you will see ads on my content. I get nothing from them and I cannot remove them. So, if you like these posts and would like MORE out of each then head over to Patreon and drop a buck or more in my hat every month and you will be making a meaningful contribution to growing the quality of my content and at only $12 a year that’s a huge bargain!

So with that, lets to a little Q&A on today’s project.

Q: Why a Piano/Keyboard?

A: Cause its cool! Next question. 😛

Q: Why is there is no PHP in this post?

A: There is actually a tiny amount of PHP in this project which I use to switch between the SVG and the PNG but outside of that there is no PHP tied into the core of this project. I honestly thought about it but  I wanted to keep it simple. Building a music playing neural network on top of the piano did cross my mind but again, this post is about showing that we can build something entirely awesome without it also being overly complex so… I nixed it. Maybe some other time. 😉

Q: Why do the same project using SVG and PNG?

A: The first and most simplest reason is to demonstrate the principal of there being more than one way to do something, but also because there are differences. The SVG uses inline hyper links wrapped around the <g> (groups) in the SVG whereas the PNG uses an image map with the Javascript instead attaching to the link in the map and not the image itself.

Of course the SVG will scale flawlessly on any size screen and the PNG is shorter to code out but will get pixelated the more you zoom in or resize it to be larger.

 

Playable Piano / Keyboard

This could be playable! Support me on Patreon so projects like this can be previewed.

keyboard

Live Preview

You can preview a live version of this project over here

The Code


<!DOCTYPE html>
<html>
    <head>
        <title>Playable SVG & PNG Keyboard</title>
        <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center; /* !!! */
            background-color: #222222;
        }
        h1,p {
            color:white;
        }

        .centered {
            margin: 0 auto;
            text-align: left;
            width: 600px;
        }
        </style>
    </head>
    <body>
        <audio id="C-Audio"><source src="audio/C.wav" type="audio/wav">
          Your browser doesn't support the audio element.
        </audio>
        <audio id="D-Audio"><source src="audio/D.wav" type="audio/wav"></audio>
        <audio id="E-Audio"><source src="audio/E.wav" type="audio/wav"></audio>
        <audio id="F-Audio"><source src="audio/F.wav" type="audio/wav"></audio>
        <audio id="G-Audio"><source src="audio/G.wav" type="audio/wav"></audio>
        <audio id="A-Audio"><source src="audio/A.wav" type="audio/wav"></audio>
        <audio id="B-Audio"><source src="audio/B.wav" type="audio/wav"></audio>
        <audio id="C-Sharp-Audio"><source src="audio/C-Sharp.wav" type="audio/wav"></audio>
        <audio id="D-Sharp-Audio"><source src="audio/D-Sharp.wav" type="audio/wav"></audio>
        <audio id="F-Sharp-Audio"><source src="audio/F-Sharp.wav" type="audio/wav"></audio>
        <audio id="G-Sharp-Audio"><source src="audio/G-Sharp.wav" type="audio/wav"></audio>
        <audio id="A-Sharp-Audio"><source src="audio/A-Sharp.wav" type="audio/wav"></audio>


        <?php
        if(isset($_POST['method'])){
            $method = $_POST['method'];
        }
        else{
        $method = "svg";
        }
        ?>

        <div class="centered">
        <?php if($method == "svg"){ ?>
            <h1>SVG</h1>
        <?php } elseif($method == "png"){ ?>
            <h1>PNG</h1>
        <?php } ?>
            <p>Click the keys to play a little tune!</p>

            <form action="#" method="POST">
                <select id="method" name="method" onchange="this.form.submit()">
                  <option value="svg" <?php if($method == "svg"){ echo "selected"; }?>>SVG - Inline Hyperlinks</option>
                  <option value="png" <?php if($method == "png"){ echo "selected"; }?>>PNG - ImageMap Hyperlinks</option>
                </select> 
            </form>
            
        <?php if($method == "svg"){ ?>
            <svg
           xmlns:dc="http://purl.org/dc/elements/1.1/"
           xmlns:cc="http://creativecommons.org/ns#"
           xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:svg="http://www.w3.org/2000/svg"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
           xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
           width="600"
           height="500"
           viewBox="0 0 158.75 132.29167"
           version="1.1"
           id="geekgirljoys-playable-keyboard"
           inkscape:version="0.92.0 r15299"
           sodipodi:docname="keyboard.svg"
           inkscape:export-filename="C:\Users\Joy\Desktop\Piano\New\piano.png"
           inkscape:export-xdpi="300"
           inkscape:export-ydpi="300"
           style="enable-background:new">
          <defs
             id="defs12918">
            <linearGradient
               inkscape:collect="always"
               id="linearGradient5259">
              <stop
                 style="stop-color:#003380;stop-opacity:1;"
                 offset="0"
                 id="stop5255" />
              <stop
                 style="stop-color:#003380;stop-opacity:0;"
                 offset="1"
                 id="stop5257" />
            </linearGradient>
            <linearGradient
               inkscape:collect="always"
               id="linearGradient5021">
              <stop
                 style="stop-color:#ffffff;stop-opacity:1;"
                 offset="0"
                 id="stop5017" />
              <stop
                 style="stop-color:#ffffff;stop-opacity:0;"
                 offset="1"
                 id="stop5019" />
            </linearGradient>
            <linearGradient
               inkscape:collect="always"
               id="linearGradient4664">
              <stop
                 style="stop-color:#ffffff;stop-opacity:1"
                 offset="0"
                 id="stop4660" />
              <stop
                 style="stop-color:#000000;stop-opacity:0;"
                 offset="1"
                 id="stop4662" />
            </linearGradient>
            <linearGradient
               inkscape:collect="always"
               id="linearGradient4614">
              <stop
                 style="stop-color:#000000;stop-opacity:1;"
                 offset="0"
                 id="stop4610" />
              <stop
                 style="stop-color:#000000;stop-opacity:0;"
                 offset="1"
                 id="stop4612" />
            </linearGradient>
            <linearGradient
               inkscape:collect="always"
               id="linearGradient15315-5">
              <stop
                 style="stop-color:#f9f9f9;stop-opacity:1;"
                 offset="0"
                 id="stop15311" />
              <stop
                 style="stop-color:#000000;stop-opacity:0.79605263"
                 offset="1"
                 id="stop15313" />
            </linearGradient>
            <linearGradient
               inkscape:collect="always"
               id="linearGradient15157">
              <stop
                 style="stop-color:#333333;stop-opacity:1"
                 offset="0"
                 id="stop15153" />
              <stop
                 id="stop15161"
                 offset="0.5"
                 style="stop-color:#191919;stop-opacity:1;" />
              <stop
                 style="stop-color:#333333;stop-opacity:1"
                 offset="1"
                 id="stop15155" />
            </linearGradient>
            <linearGradient
               inkscape:collect="always"
               xlink:href="#linearGradient15157"
               id="linearGradient15159"
               x1="79.876411"
               y1="325.5043"
               x2="79.886864"
               y2="264.30887"
               gradientUnits="userSpaceOnUse"
               gradientTransform="translate(1.3680627e-7,-79.375004)" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient15315-5"
               id="radialGradient15736"
               cx="38.679722"
               cy="236.95551"
               fx="38.679722"
               fy="236.95551"
               r="12.541217"
               gradientTransform="matrix(5.7072155,0.26868388,-0.01027659,0.21828878,-179.63869,174.83816)"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient4614"
               id="radialGradient4616"
               cx="85.9496"
               cy="328.67267"
               fx="85.9496"
               fy="328.67267"
               r="79.375"
               gradientTransform="matrix(1.7919596,0.01649915,-8.0047577e-4,0.08693941,-62.780617,263.66084)"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient15315-5"
               id="radialGradient4634"
               cx="77.359444"
               cy="176.91103"
               fx="77.359444"
               fy="176.91103"
               r="25.082434"
               gradientTransform="matrix(1.3135871,-0.1191492,0.02348472,0.25891276,-28.413636,140.32382)"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient4664"
               id="radialGradient4666"
               cx="13.091763"
               cy="235.10512"
               fx="13.091763"
               fy="235.10512"
               r="16.501682"
               gradientTransform="matrix(2.2777563,-0.10674805,0.01546079,0.32989785,-20.362998,158.94195)"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient5021"
               id="radialGradient5086"
               cx="77.261093"
               cy="169.72464"
               fx="77.261093"
               fy="169.72464"
               r="1.3028055"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient5021"
               id="radialGradient5146"
               cx="77.261093"
               cy="169.72464"
               fx="77.261093"
               fy="169.72464"
               r="1.3028055"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient5021"
               id="radialGradient5174"
               cx="77.261093"
               cy="169.72464"
               fx="77.261093"
               fy="169.72464"
               r="1.3027751"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient5021"
               id="radialGradient5199"
               cx="77.261093"
               cy="169.72464"
               fx="77.261093"
               fy="169.72464"
               r="1.3028055"
               gradientUnits="userSpaceOnUse" />
            <radialGradient
               inkscape:collect="always"
               xlink:href="#linearGradient5021"
               id="radialGradient5239"
               cx="101.47026"
               cy="169.59991"
               fx="101.47026"
               fy="169.59991"
               r="1.3028055"
               gradientUnits="userSpaceOnUse" />
            <linearGradient
               inkscape:collect="always"
               xlink:href="#linearGradient5259"
               id="linearGradient5265"
               x1="-3.1599205"
               y1="235.1051"
               x2="29.343447"
               y2="235.1051"
               gradientUnits="userSpaceOnUse" />
          </defs>
          <sodipodi:namedview
             id="base"
             pagecolor="#ffffff"
             bordercolor="#666666"
             borderopacity="1.0"
             inkscape:pageopacity="0.0"
             inkscape:pageshadow="2"
             inkscape:zoom="1"
             inkscape:cx="239.02174"
             inkscape:cy="369.94902"
             inkscape:document-units="px"
             inkscape:current-layer="layer1"
             showgrid="false"
             units="px"
             showguides="false"
             inkscape:window-width="1680"
             inkscape:window-height="987"
             inkscape:window-x="-8"
             inkscape:window-y="-8"
             inkscape:window-maximized="1" />
          <metadata
             id="metadata12921">
            <rdf:RDF>
              <cc:Work
                 rdf:about="">
                <dc:format>image/svg+xml</dc:format>
                <dc:type
                   rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                <dc:title></dc:title>
              </cc:Work>
            </rdf:RDF>
          </metadata>
          <g
             inkscape:label="Layer 1"
             inkscape:groupmode="layer"
             id="layer1"
             transform="translate(0,-164.70831)">
            <rect
               style="opacity:1;fill:url(#linearGradient15159);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.31061602;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
               id="keyboad-body"
               width="158.75"
               height="132.29167"
               x="0.26458335"
               y="164.44371"
               rx="0.26458335"
               ry="0.26458335"
               inkscape:export-xdpi="72"
               inkscape:export-ydpi="72" />
               
               
               <a href="http://geekgirljoy.wordpress.com" target="_blank" id="go-go-geekgirljoy">
            <g
               id="geekgirljoy-text">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
                 transform="matrix(1.1225043,0,0,1.1225043,5.0633408,-92.71991)"
                 id="geekgirljoy-bottom">
                <text
                   xml:space="preserve"
                   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
                   x="-3.5401669"
                   y="236.54588"
                   id="text5285"><tspan
                     sodipodi:role="line"
                     id="tspan15285-1"
                     x="-3.5401669"
                     y="236.54588"
                     style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none">GeekGirlJoy</tspan></text>
                <text
                   id="text5283"
                   y="236.54588"
                   x="-3.5401669"
                   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
                   xml:space="preserve"><tspan
                     style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
                     y="236.54588"
                     x="-3.5401669"
                     id="tspan15307-6"
                     sodipodi:role="line">GeekGirlJoy</tspan></text>
              </g>
              <g
                 id="geekgirljoy-top"
                 transform="matrix(1.1225043,0,0,1.1225043,5.0633408,-92.71991)"
                 style="opacity:0.97000002;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                 inkscape:export-xdpi="72"
                 inkscape:export-ydpi="72">
                <text
                   id="text5247"
                   y="236.54588"
                   x="-3.5401669"
                   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                   xml:space="preserve"><tspan
                     style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                     y="236.54588"
                     x="-3.5401669"
                     id="tspan5245"
                     sodipodi:role="line">GeekGirlJoy</tspan></text>
                <text
                   xml:space="preserve"
                   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                   x="-3.5401669"
                   y="236.54588"
                   id="text5251"><tspan
                     sodipodi:role="line"
                     id="tspan5249"
                     x="-3.5401669"
                     y="236.54588"
                     style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">GeekGirlJoy</tspan></text>
              </g>
            </g>
            </a>
            
            
            <rect
               ry="0.26458335"
               rx="0.26458335"
               y="283.19775"
               x="2.7755576e-017"
               height="13.802217"
               width="158.75"
               id="shading-bottom"
               style="opacity:1;fill:url(#radialGradient4616);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.39234722;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
               inkscape:export-xdpi="72"
               inkscape:export-ydpi="72" />
            <rect
               style="opacity:0.95999995;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#182943;stroke-width:4.23333339;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
               id="keys-background"
               width="96.388542"
               height="95.16375"
               x="30.018394"
               y="189.01839"
               rx="0.26458332"
               ry="0.26458332"
               inkscape:export-xdpi="72"
               inkscape:export-ydpi="72" />
               
            <a href="#" id="Key-B">   
            <g
               id="white-key-b"
               transform="translate(0,-0.56104268)">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 id="b-rect-group"
                 transform="matrix(3.2767822,0,0,3.2767822,-80.626374,-672.05687)">
                <rect
                   style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="b-grey-rect"
                   width="3.9700634"
                   height="1.970214"
                   x="59.26228"
                   y="289.85236"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="b-white-rect"
                   width="3.9781194"
                   height="27.495825"
                   x="59.26228"
                   y="262.95197"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="b-text"
                 y="276.75943"
                 x="117.51627"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;stroke-width:0.26458335"
                   y="276.75943"
                   x="117.51627"
                   id="tspan4668-6-9"
                   sodipodi:role="line">B</tspan></text>
            </g>
            </a> 
            <g
               id="keyboard-text">
              <text
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 id="keyboard-bottom"
                 y="179.79259"
                 x="51.96806"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.88270187px;line-height:3.09445357px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f9f9f9;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
                 xml:space="preserve"><tspan
                   style="fill:#f9f9f9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
                   y="179.79259"
                   x="51.96806"
                   id="tspan15285"
                   sodipodi:role="line">Keyboard</tspan></text>
              <text
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 xml:space="preserve"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.88270187px;line-height:3.09445357px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4634);fill-opacity:1;stroke:none;stroke-width:0.12377814"
                 x="51.96806"
                 y="179.79259"
                 id="keyboard-top"><tspan
                   sodipodi:role="line"
                   id="tspan15307"
                   x="51.96806"
                   y="179.79259"
                   style="fill:url(#radialGradient4634);fill-opacity:1;stroke-width:0.12377814">Keyboard</tspan></text>
            </g>
            
            <a href="#" id="Key-C" name="Key-C"> 
            <g
               id="white-key-c">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 transform="matrix(3.2767822,0,0,3.2767822,-164.17119,-672.61793)"
                 id="c-rect-group">
                <rect
                   style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.19712651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="c-grey-rect"
                   width="3.9700837"
                   height="1.9451796"
                   x="59.26228"
                   y="289.87738"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="c-white-rect"
                   width="3.9781194"
                   height="27.495825"
                   x="59.26228"
                   y="262.95197"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="c-text"
                 y="276.7594"
                 x="33.866669"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;stroke-width:0.26458335"
                   y="276.7594"
                   x="33.866669"
                   id="tspan4668"
                   sodipodi:role="line">C</tspan></text>
            </g>
            </a> 
            
            <a href="#" id="Key-D"> 
            <g
               id="white-key-d"
               transform="translate(0,-0.14374268)">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 id="d-rect-group"
                 transform="matrix(3.2767822,0,0,3.2767822,-150.17727,-672.47417)">
                <rect
                   style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="d-grey-rect"
                   width="3.9700634"
                   height="1.970214"
                   x="59.26228"
                   y="289.85236"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="d-white-rect"
                   width="3.9781194"
                   height="27.495825"
                   x="59.26228"
                   y="262.95197"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="d-text"
                 y="276.75943"
                 x="47.997005"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;stroke-width:0.26458335"
                   y="276.75943"
                   x="47.997005"
                   id="tspan4668-6"
                   sodipodi:role="line">D</tspan></text>
            </g>
            </a>
            
            
            <a href="#" id="Key-E"> 
            <g
               id="white-key-e"
               transform="translate(0,-0.19166268)">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 id="e-rect-group"
                 transform="matrix(3.2767822,0,0,3.2767822,-136.30317,-672.42625)">
                <rect
                   style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="e-grey-rect"
                   width="3.9700634"
                   height="1.970214"
                   x="59.26228"
                   y="289.85236"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="e-white-rect"
                   width="3.9781194"
                   height="27.495825"
                   x="59.26228"
                   y="262.95197"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="e-text"
                 y="276.75943"
                 x="61.623047"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;stroke-width:0.26458335"
                   y="276.75943"
                   x="61.623047"
                   id="tspan4668-6-7"
                   sodipodi:role="line">E</tspan></text>
            </g>
            </a>
            
            <a href="#" id="Key-F"> 
            <g
               id="white-key-f"
               transform="translate(0,-0.33544268)">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 id="f-rect-group"
                 transform="matrix(3.2767822,0,0,3.2767822,-122.30925,-672.28247)">
                <rect
                   style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="f-grey-rect"
                   width="3.9700634"
                   height="1.970214"
                   x="59.26228"
                   y="289.85236"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="f-white-rect"
                   width="3.9781194"
                   height="27.495825"
                   x="59.26228"
                   y="262.95197"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="f-text"
                 y="276.75943"
                 x="75.976692"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;stroke-width:0.26458335"
                   y="276.75943"
                   x="75.976692"
                   id="tspan4668-6-3"
                   sodipodi:role="line">F</tspan></text>
            </g>
            </a>
            
            <a href="#" id="Key-G"> 
            <g
               id="white-key-g"
               transform="translate(0,-0.36934268)">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 id="g-rect-group"
                 transform="matrix(3.2767822,0,0,3.2767822,-108.4944,-672.24857)">
                <rect
                   style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="g-grey-rect"
                   width="3.9700634"
                   height="1.970214"
                   x="59.26228"
                   y="289.85236"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="g-white-rect"
                   width="3.9781194"
                   height="27.495825"
                   x="59.26228"
                   y="262.95197"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="g-text"
                 y="276.75943"
                 x="89.272003"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;stroke-width:0.26458335"
                   y="276.75943"
                   x="89.272003"
                   id="tspan4668-6-73"
                   sodipodi:role="line">G</tspan></text>
            </g>
            </a>
            
            <a href="#" id="Key-A"> 
            <g
               id="white-key-a"
               transform="translate(0,-0.51312268)">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 id="a-rect-group"
                 transform="matrix(3.2767822,0,0,3.2767822,-94.50048,-672.10479)">
                <rect
                   style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="a-grey-rect"
                   width="3.9700634"
                   height="1.970214"
                   x="59.26228"
                   y="289.85236"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="a-white-rect"
                   width="3.9781194"
                   height="27.495825"
                   x="59.26228"
                   y="262.95197"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="a-text"
                 y="276.75943"
                 x="104.02252"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;stroke-width:0.26458335"
                   y="276.75943"
                   x="104.02252"
                   id="tspan4668-6-6"
                   sodipodi:role="line">A</tspan></text>
            </g>
            </a>
            
            
            <a href="#" id="Key-C-Sharp"> 
            <g
               id="black-key-c-sharp">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 transform="matrix(3.2767822,0,0,3.2767822,-205.38614,-673.39341)"
                 id="c-sharp-rect-group">
                <rect
                   style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79170525;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="c-sharp-grey-rect"
                   width="2.6989212"
                   height="1.2514575"
                   x="74.291664"
                   y="280.27954"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="c-sharp-black-rect"
                   width="2.6957428"
                   height="17.689808"
                   x="74.291664"
                   y="262.95673"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="c-sharp-text"
                 y="243.509"
                 x="38.438705"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
                   y="243.509"
                   x="38.438705"
                   id="tspan4668-2"
                   sodipodi:role="line">C#</tspan></text>
            </g>
            </a>
            
            
            <a href="#" id="Key-D-Sharp"> 
            <g
               id="black-key-d-sharp">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 transform="matrix(3.2767822,0,0,3.2767822,-189.99357,-673.39346)"
                 id="d-sharp-rect-group">
                <rect
                   style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="d-sharp-grey-rect"
                   width="2.6988971"
                   height="1.2716219"
                   x="74.291664"
                   y="280.25937"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="d-sharp-black-rect"
                   width="2.6957428"
                   height="17.689808"
                   x="74.291664"
                   y="262.95673"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="d-sharp-text"
                 y="243.509"
                 x="53.773075"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
                   y="243.509"
                   x="53.773075"
                   id="tspan4668-2-2"
                   sodipodi:role="line">D#</tspan></text>
            </g>
            </a>
            
            
            <a href="#" id="Key-F-Sharp"> 
            <g
               id="black-key-f-sharp">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 transform="matrix(3.2767822,0,0,3.2767822,-163.56119,-673.39346)"
                 id="f-sharp-rect-group">
                <rect
                   style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="f-sharp-grey-rect"
                   width="2.6988971"
                   height="1.2716219"
                   x="74.291664"
                   y="280.25937"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="f-sharp-black-rect"
                   width="2.6957428"
                   height="17.689808"
                   x="74.291664"
                   y="262.95673"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="f-sharp-text"
                 y="243.509"
                 x="80.059036"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
                   y="243.509"
                   x="80.059036"
                   id="tspan4668-2-1"
                   sodipodi:role="line">F#</tspan></text>
            </g>
            </a>
            
            
            
            <a href="#" id="Key-G-Sharp"> 
            <g
               id="black-key-g-sharp">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 transform="matrix(3.2767822,0,0,3.2767822,-148.92173,-673.39346)"
                 id="g-sharp-rect-group">
                <rect
                   style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="g-sharp-grey-rect"
                   width="2.6988971"
                   height="1.2716219"
                   x="74.291664"
                   y="280.25937"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="g-sharp-black-rect"
                   width="2.6957428"
                   height="17.689808"
                   x="74.291664"
                   y="262.95673"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="g-sharp-text"
                 y="243.10257"
                 x="94.651955"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
                   y="243.10257"
                   x="94.651955"
                   id="tspan4668-2-4"
                   sodipodi:role="line">G#</tspan></text>
            </g>
            </a>
            
            
            
            <a href="#" id="Key-A-Sharp"> 
            <g
               id="black-key-a-sharp">
              <g
                 inkscape:export-ydpi="72"
                 inkscape:export-xdpi="72"
                 transform="matrix(3.2767822,0,0,3.2767822,-133.19786,-673.39346)"
                 id="a-sharp-rect-group">
                <rect
                   style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="a-sharp-grey-rect"
                   width="2.6988971"
                   height="1.2716219"
                   x="74.291664"
                   y="280.25937"
                   rx="0.08074487"
                   ry="0.08074487" />
                <rect
                   style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
                   id="a-sharp-black-rect"
                   width="2.6957428"
                   height="17.689808"
                   x="74.291664"
                   y="262.95673"
                   rx="0.08074487"
                   ry="0.08074487" />
              </g>
              <text
                 id="a-sharp-text"
                 y="243.509"
                 x="110.64803"
                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
                 xml:space="preserve"><tspan
                   style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
                   y="243.509"
                   x="110.64803"
                   id="tspan4668-2-5"
                   sodipodi:role="line">A#</tspan></text>
            </g>
            </a>
            
            
            
            
            <path
               d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
               inkscape:randomized="0"
               inkscape:rounded="0"
               inkscape:flatsided="false"
               sodipodi:arg2="1.4640607"
               sodipodi:arg1="0.67866249"
               sodipodi:r2="0.51810318"
               sodipodi:r1="0.99390382"
               sodipodi:cy="169.72464"
               sodipodi:cx="77.261093"
               sodipodi:sides="4"
               id="flare-1"
               style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5174);stroke-width:1.0582726;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;enable-background:new"
               sodipodi:type="star"
               transform="matrix(2.1681284,0,0,0.50590109,-110.80528,84.48127)" />
            <path
               d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
               inkscape:randomized="0"
               inkscape:rounded="0"
               inkscape:flatsided="false"
               sodipodi:arg2="1.4640607"
               sodipodi:arg1="0.67866249"
               sodipodi:r2="0.51810318"
               sodipodi:r1="0.99390382"
               sodipodi:cy="169.72464"
               sodipodi:cx="77.261093"
               sodipodi:sides="4"
               id="flare-2"
               style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5146);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;enable-background:new"
               sodipodi:type="star"
               transform="matrix(1,0,0,0.68256474,-14.497777,54.437717)" />
            <path
               d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
               inkscape:randomized="0"
               inkscape:rounded="0"
               inkscape:flatsided="false"
               sodipodi:arg2="1.4640607"
               sodipodi:arg1="0.67866249"
               sodipodi:r2="0.51810318"
               sodipodi:r1="0.99390382"
               sodipodi:cy="169.72464"
               sodipodi:cx="77.261093"
               sodipodi:sides="4"
               id="flare-3"
               style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5199);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;enable-background:new"
               sodipodi:type="star"
               transform="matrix(1,0,0,0.68256474,-8.203631,68.866748)" />
            <path
               d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
               inkscape:randomized="0"
               inkscape:rounded="0"
               inkscape:flatsided="false"
               sodipodi:arg2="1.4640607"
               sodipodi:arg1="0.67866249"
               sodipodi:r2="0.51810318"
               sodipodi:r1="0.99390382"
               sodipodi:cy="169.72464"
               sodipodi:cx="77.261093"
               sodipodi:sides="4"
               id="flare-4"
               style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5086);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
               sodipodi:type="star"
               transform="matrix(1,0,0,0.68256474,0,53.630995)" />
            <path
               sodipodi:type="star"
               style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5239);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
               id="flare-5"
               sodipodi:sides="4"
               sodipodi:cx="101.47026"
               sodipodi:cy="169.59991"
               sodipodi:r1="0.99390382"
               sodipodi:r2="0.51810318"
               sodipodi:arg1="0.67866249"
               sodipodi:arg2="1.4640607"
               inkscape:flatsided="false"
               inkscape:rounded="0"
               inkscape:randomized="0"
               d="m 102.24393,170.22384 -0.71847,-0.10877 -0.67912,0.25851 0.10877,-0.71847 -0.25852,-0.67912 0.71848,0.10877 0.67912,-0.25851 -0.10877,0.71847 z"
               transform="matrix(1,0,0,0.74845571,0,42.467279)" />
          </g>
        </svg>

            
        <?php } elseif($method == "png"){ ?>
            
            <img src="keyboard.png" align="middle" usemap="#keyboardmap">

                <map name="keyboardmap">
                  <area id="go-go-geekgirljoy" alt="go-go-geekgirljoy" title="go-go-geekgirljoy" shape="rect" coords="0,0,148,48" target="_blank" href="http://geekgirljoy.wordpress.com" >
                  <area id="Key-C" alt="" title="" href="#" shape="poly" target="_self" coords="115,93,115,433,163,433,164,319,145,318,145,93" />
                  <area id="Key-D" alt="" title="" href="#" shape="poly" target="_self" coords="178,93,179,319,167,319,167,433,217,433,217,319,202,319,203,93" />
                  <area id="Key-E" alt="" title="" href="#" shape="poly" target="_self" coords="236,93,236,319,219,319,220,434,269,434,268,93" />
                  <area id="Key-F" alt="" title="" href="#" shape="poly" target="_self" coords="272,93,272,434,322,434,322,320,303,320,302,93" />
                  <area id="Key-G" alt="" title="" href="#" shape="poly" target="_self" coords="336,93,336,320,324,321,324,434,374,434,374,320,357,319,358,93" />
                  <area id="Key-A" alt="" title="" href="#" shape="poly" target="_self" coords="392,93,392,319,378,319,378,433,428,433,427,319,418,319,418,93" />
                  <area id="Key-B" alt="" title="" href="#" shape="poly" target="_self" coords="451,93,451,319,430,320,430,433,479,433,479,93" />
                  <area id="Key-C-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="146,93,146,308,178,308,178,93" />
                  <area id="Key-D-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="204,92,204,308,236,308,236,93" />
                  <area id="Key-F-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="304,93,304,308,336,308,336,93" />
                  <area id="Key-G-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="360,92,359,308,392,308,391,93" />
                  <area id="Key-A-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="419,93,420,309,451,308,450,93" />
                </map>
        <?php } ?>

        </div>


        <script>
          document.getElementById("Key-C").addEventListener("click", function () {document.getElementById("C-Audio").play(); });
          document.getElementById("Key-D").addEventListener("click", function () {document.getElementById("D-Audio").play(); });
          document.getElementById("Key-E").addEventListener("click", function () {document.getElementById("E-Audio").play(); });
          document.getElementById("Key-F").addEventListener("click", function () {document.getElementById("F-Audio").play(); });
          document.getElementById("Key-G").addEventListener("click", function () {document.getElementById("G-Audio").play(); });
          document.getElementById("Key-A").addEventListener("click", function () {document.getElementById("A-Audio").play(); });
          document.getElementById("Key-B").addEventListener("click", function () {document.getElementById("B-Audio").play(); });
          document.getElementById("Key-C-Sharp").addEventListener("click", function () {document.getElementById("C-Sharp-Audio").play(); });
          document.getElementById("Key-D-Sharp").addEventListener("click", function () {document.getElementById("D-Sharp-Audio").play(); });
          document.getElementById("Key-F-Sharp").addEventListener("click", function () {document.getElementById("F-Sharp-Audio").play(); });
          document.getElementById("Key-G-Sharp").addEventListener("click", function () {document.getElementById("G-Sharp-Audio").play(); });
          document.getElementById("Key-A-Sharp").addEventListener("click", function () {document.getElementById("A-Sharp-Audio").play(); });
        </script>


    </body>
</html>

 

If you have any questions please leave them in the comments.

If you would like to get a copy of this entire project’s code and assets you can get a copy over on GitHub here.

Please Like, Comment & Share my posts with your friends and followers on social media.

If you would like to suggest a topic or project for an upcoming post feel free to contact me.

If you found this article useful or want to help me grow consider supporting me over on Patreon.

With that, have a great week & I will see you all in the next post!

Much Love,

~Joy

Exciting KikAppTools News

I know many of you are waiting for the last installment of the OCR Neural network series and I will be posting that soon. Today, however I want to talk about something different.

As you know, occasionally I talk about cool tech products and trends that I think my readers should know about and recently I mentioned KikAppTools in this post.

In case you don’t recall, KikAppTools is a free transpiler that lets you build mobile apps using PHP and then compile them to a native iOS or Android installer package.

Well, recently I was speaking with the Executive Developer Liaison for KikAppTools who told me that the initial beta testing phase went better than expected!

During the conversation they let slip a short list of some very exciting features that are being discussed by their dev team for implementation during their next development cycle and at the TOP of everyone list was a GUI interface!

They also said they are looking to expand their operation as they have a small team of developers and need funding to grow so they have started an Indiegogo campaign to help fund their expansion, they need our help to grow!

IF you are a PHP programmer then listen carefully, You can right now (today) automatically expand into the mobile device arena, Over 2 Billion Android devices and while I couldn’t find an exact number for iOS devices it’s roughly around the same adoption, so approximately 4 Billion devices total in 2017, all by adding this free tool to your work flow!

Further still, consider that most of the world now accesses websites and their associated apps from a mobile device! Then its a no brainier to add PHP mobile development to your work flow!

The fact is that yes, today you can make a very good living only developing WordPress, Zend Framework, Laravel, Cake, Symfony etc… sites and calling it a day, however unless you are willing to grow, expand and innovate, projects that would have gone to you tomorrow will instead go to the Node, Python, Go or Ruby developers because they are innovating!

You owe it to yourself and the larger PHP community as a whole to start using KikAppTools today! Go download it then head over to their Indiegogo page and fund their work so we can ensure PHP remains the top Server Language on the web and also becomes the preferred language to develop mobile apps with as well!

Please note that the statements and thoughts in this post are my own, KikAppTools has not payed me or offered me anything for this blog post. Having said that, I would love to have them and all of you as sponsors over on Patreon!

As always I hope you found this post both interesting and informative. Please Like, Comment & Share this post with your friends and followers on your social media platforms and don’t forget to click the follow button over on the top right of this page to get notified when I post something new.

If would like to suggest a topic or project for an upcoming post feel free to contact me.

Much Love,
~Joy

Blog at WordPress.com.

Up ↑

%d bloggers like this: