Javascript for virtual keyboard key value assignment

(2 Pages)
←
1
2

22 Replies - 1579 Views - Last Post: 26 January 2012 - 09:04 PM

Topic Sponsor:

#16 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 25 January 2012 - 08:57 PM

I already have the radio button conversion covered.
Post or link to the code you currently have and I'll show you where to add/change.
:bananaman:

Was This Post Helpful? 0

#17 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 25 January 2012 - 10:23 PM

Here's the link to my development file. Most of the buttons on the top row work. I'm still working on the font.

http://goo.gl/jLgbf

What to you teach? I taught Technical Writing in the evening for four years at San Jose State University.

Was This Post Helpful? 0

#18 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 26 January 2012 - 11:20 AM

Here is a version that uses your buttons rather than the radio button version. You did not supply the style sheet or link to make it look exactly like your posted version, but I assume that will change with the correct links. I tried to match the links by adding 'http://www.ukefarm.com/develop/chordette/' to all your src= statements, but I must have missed one or more. Or the references are not where I thought you put them.

I'm not sure why you have added the checks for IE and have started using Jquery as I don't see a need for it nor where you are currently using it. At least in this version.

You seem to change the display faster that I can keep up with it, so this code may need some tweeking for your current keyboard display.

Note that the keyboard keys beyond the 1st line were not working because you referenced the function 'addit' as 'addIt'. I corrected the syntax as far as I could find it in this version.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Chordette</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="http://www.ukefarm.com/develop/chordette/stylesheets/master.css" />

<!--[if IE 8]>
<link rel="stylesheet" href="http://www.ukefarm.com/develop/chordette/assets/stylesheets/ie8.css" />
<![endif]-->
<!--[if !IE]><!-->
<script src="http://www.ukefarm.com/develop/chordette/js/iscroll.js"></script>
<!--<![endif]-->
<script src="http://www.ukefarm.com/develop/chordette/js/jquery.js"></script>

<script src="http://www.ukefarm.com/develop/chordette/js/master.js"></script>
<script type="text/javascript" src="http://www.ukefarm.com/develop/chordette/js/keyboard.js" charset="UTF-8"></script>
<link href="http://www.ukefarm.com/develop/chordette/stylesheets/keyboard.css" rel="stylesheet" type="text/css" />


<style type='text/css'>	
 #touchDiv,fieldset {text-align:center;}
 li { list-style-type:none; }  /* this line probably NOT needed when access to stylesheet is available */
</style>

<!-- Custom Font -->
<style type="text/css" media="screen">
@font-face {
font-family: ukefont;
src: url( "http://www.ukefarm.com/develop/chordette/fonts/ukefont.ttf");
}
</style>
<!-- end Custom Font -->

<script type="text/javascript">
//<![CDATA[
var keyCodes = "qwertyuiop[]asdfghjkl;'zxcvbnm,./1234567890-=";
var uniCodes0 = [  // to contain display codes of keys pressed above
    'A','H','a','h','O','Ä','∫','é','ö','P','{','}',
    '|','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes1 = [  // different set of unicodes for selection 2
    'W','†','p','u','z','@','?','è','õ','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes2 = [
    'B','I','b','i','P','Å','0','ê','ú','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes3 = [
    'C','J','c','j','Q','$','1','ë','ù','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes4 = [
    'X',']','q','v','§','%','2','í','û','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes5 = [
    'D','K','d','k','R','&','3','ì','ü','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes6 = [
    'Y','°','r','w','|','Ç','4','î','Æ','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes7 = [
    'E','L','e','l','S','É','5','ï','Ø','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes8 = [
    'F','M','f','m','T','Ñ','6','ñ','∞','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes9 = [
    'Z','_','s','x','ß','Ö','7','ó','¥','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes10 = [
    'G','N','g','n','U','Ü','8','ò','µ','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes11 = [
    'V','[','o','t','y','á','9','ô','∂','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];

var Chord = 0;
var ChordNames = ['A','Bb','B','C','C#','D','Eb','E','F','F#','G','Ab'];

function chords(mKey) {
  var sel = document.getElementById('chord').getElementsByTagName('button');
  for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = '#AAA'; }
  if (mKey == '-1') { Chord = 0; } else {
    mKey.style.backgroundColor = 'orange';
    Chord = mKey.value;
  }
}

function addIt(KbdKey) {
  var tarr = [];
  var mKey = Chord;
  switch (mKey) {
    case '0' : tarr = uniCodes0.slice(0); break;
    case '1' : tarr = uniCodes1.slice(0); break;
    case '2' : tarr = uniCodes2.slice(0); break;
    case '3' : tarr = uniCodes3.slice(0); break;
    case '4' : tarr = uniCodes4.slice(0); break;
    case '5' : tarr = uniCodes5.slice(0); break;
    case '6' : tarr = uniCodes6.slice(0); break;
    case '7' : tarr = uniCodes7.slice(0); break;
    case '8' : tarr = uniCodes8.slice(0); break;
    case '9' : tarr = uniCodes9.slice(0); break;
    case '10': tarr = uniCodes10.slice(0); break;
    case '11': tarr = uniCodes11.slice(0); break;
    default: alert('Invalid input: '+mKey); break;
  }
  N = keyCodes.indexOf(KbdKey);  // alert(mKey+'\n'+KbdKey+'\n'+N);
  if (N != -1) {
    document.getElementById('TArea').value += tarr[N];
  }
}
window.onload = function() {
  chords('-1');
}
//]]>
</script>

</head>
<body>
<div id="main_content" class="abs">
 <div id="main_content_inner">
  <div>
   <form name="GetName" action='' onsubmit="return false">
    <fieldset>
     <textarea id="TArea" rows="4" cols="16" style="font-family: ukefont; font-size:72px;"></textarea>
     <input type='hidden' name='focusedField'>
    </fieldset>
   </form>
  </div>

  <div id='touchDiv'>
    <ul>
     <li id="chord">
 <button class='chords' type='button' value="0"  onclick="chords(this)" id="Achord">A</button>
 <button class='chords' type='button' value="1"  onclick="chords(this)">Bb</button>
 <button class='chords' type='button' value="2"  onclick="chords(this)">B</button>
 <button class='chords' type='button' value="3"  onclick="chords(this)">C</button>
 <button class='chords' type='button' value="4"  onclick="chords(this)">C#</button>
 <button class='chords' type='button' value="5"  onclick="chords(this)">D</button>
 <button class='chords' type='button' value="6"  onclick="chords(this)">Eb</button>
 <button class='chords' type='button' value="7"  onclick="chords(this)">E</button>
 <button class='chords' type='button' value="8"  onclick="chords(this)">F</button>
 <button class='chords' type='button' value="9"  onclick="chords(this)">F#</button>
 <button class='chords' type='button' value="10" onclick="chords(this)">G</button>
 <button class='chords' type='button' value="11" onclick="chords(this)">Ab</button>
     </li>
   
    <li> <hr size="1"> </li>

    <li>
<button class=chords type=button value='q' onclick="addIt(this.value)">maj</button>
<button class=chords type=button value="w" onclick="addIt(this.value)">7</button>
<button class=chords type=button value="e" onclick="addIt(this.value)">min</button>
<button class=chords type=button value="r" onclick="addIt(this.value)">m7</button>
<button class=chords type=button value="t" onclick="addIt(this.value)">maj7</button>
<button class=chords type=button value="y" onclick="addIt(this.value)">dim7</button>
<button class=chords type=button value="u" onclick="addIt(this.value)">aug</button>
<button class=chords type=button value="i" onclick="addIt(this.value)">7sus</button>
<button class=chords type=button value="o" onclick="addIt(this.value)">6</button>
<button class=chords type=button value="p" onclick="addIt(this.value)">m6</button>
<button class=chords type=button value="a" onclick="addIt(this.value)">B</button>
    </li>

    <li>
<button class=chords type=button value="s" onclick="addIt(this.value)">7b5</button>
<button class=chords type=button value="d" onclick="addIt(this.value)">7#5</button>
<button class=chords type=button value="f" onclick="addIt(this.value)">m7b5</button>
<button class=chords type=button value="g" onclick="addIt(this.value)">6/9</button>
<button class=chords type=button value="h" onclick="addIt(this.value)">9</button>
<button class=chords type=button value="j" onclick="addIt(this.value)">m9</button>
<button class=chords type=button value="k" onclick="addIt(this.value)">maj9</button>
<button class=chords type=button value="l" onclick="addIt(this.value)">7b9</button>
<button class=chords type=button value="z" onclick="addIt(this.value)">add9</button>
<button class=chords type=button value="x" onclick="addIt(this.value)">l</button>
<button class=chords type=button value="c" onclick="addIt(this.value)">l</button>
    </li>

    <li>
<button class=chords type=button value="v" onclick="addIt(this.value)">z</button>
<button class=chords type=button value="b" onclick="addIt(this.value)">x</button>
<button class=chords type=button value="n" onclick="addIt(this.value)">c</button>
<button class=chords type=button value="m" onclick="addIt(this.value)">v</button>
<button class=chords type=button value="," onclick="addIt(this.value)">b</button>
<button class=chords type=button value="." onclick="addIt(this.value)">n</button>
<button class=chords type=button value="/" onclick="addIt(this.value)">m</button>
<button class=chords type=button value="*" onclick="addIt(this.value)">2x</button>
<button class=chords type=button value="(" onclick="addIt(this.value)">3x</button>
<button class=chords type=button value=")" onclick="addIt(this.value)">4x</button>
<button class=chords type=button value="_" onclick="addIt(this.value)">blank</button>
    </li>

    <li>
<button type="button" class="space">&nbsp;</button>
<button type="button" class="specialkey return">return</button>
<button class=chords type=button name="madd9" value='+' onclick="addIt(this.value)">KB</button>
    </li>
   </ul>

  </div>
 </div>
</div>

</body>
</html>

Note also that I may come back with a more simplified version if you can provide me with the correct fonts or a link to the actual images you wish to display. Your code seems a bit complicated at this time and I think it could be compressed when I understand what the actual end result is to look like!

Finally to answer your questions in the last post:

I am an Optometrist by profession and have taught at two different universities over the last 32 years. Before that I was working in the aerospace industry for 6 years. I like to keep my computer skills up as a pastime.

I am a part-time banjo picker, which was the reason I got interested in your project initially. I have a Ukelele and will be interested to see if your final version of this code will be of any help to me in learning how to play it better!

BTW, what is the tuning you use for the images you wish to display?

:bananaman:

This post has been edited by JMRKER: 26 January 2012 - 11:23 AM

Was This Post Helpful? 0

#19 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 26 January 2012 - 01:35 PM

Sorry about all the changes. I'll just work with the code you sent me from now on. I'm still experimenting with layout and I shouldn't be sending them to you since they do change often. The checks for IE and Jquery are just left over from a template I used. As I get the layout nailed down, I'll clean all that up.

The 'addit' issue was just me being careless in cut and paste. The latest code works for select buttons G and Ab. They are highlighted in orange when I select them, and the keyboard works. The other buttons don't highlight or work. If I reload the page and click one of the other buttons, then click on the keyboard I get an error: invalid input = 0.

The images are for tenor ukulele - GCEA. I use a low G, and play mostly jazz standards. I also have a baritone uke tuned DGBE, although I have tuned it GDAE occassionaly. You can hear recordings I made at:

http://www.ukefarm.com/homerecordings/

Was This Post Helpful? 0

#20 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 26 January 2012 - 03:13 PM

John Baxter, on 26 January 2012 - 01:35 PM, said:

...
The latest code works for select buttons G and Ab. They are highlighted in orange when I select them, and the keyboard works. The other buttons don't highlight or work. If I reload the page and click one of the other buttons, then click on the keyboard I get an error: invalid input = 0.
...

Can you post the code or a link to the code so I can evaluate what's not working correctly.
It works fine in FF on an iMac I'm currently at, but I'll check it out on IE and FF on my PC at home later.

Thanks for the homepage link.

Was This Post Helpful? 0

#21 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 26 January 2012 - 04:41 PM

The code is the same file you attached in your message. I haven't made any changes to it. I'm having Internet problems. I can't access the Web from my desktop computer, but I can FTP. I access the Web through WiFi on my iPad and MacBook Air. So, I read the forum on my iPad, copy your code to a file, and FTP it from my iPad to my server. I then can FTP it down to my desktop computer. The file you attached is on the server unchanged at:

http://www.ukefarm.c...te/Newcode.html

If you click "A" through "F#" select buttons they don't highlight. "G" and "Ab" work fine. I'm using a Mac for my desktop computer. I use both Safari and FireFox.


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Chordette</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="http://www.ukefarm.com/develop/chordette/stylesheets/master.css" />

<!--[if IE 8]>
<link rel="stylesheet" href="http://www.ukefarm.com/develop/chordette/assets/stylesheets/ie8.css" />
<![endif]-->
<!--[if !IE]><!-->
<script src="http://www.ukefarm.com/develop/chordette/js/iscroll.js"></script>
<!--<![endif]-->
<script src="http://www.ukefarm.com/develop/chordette/js/jquery.js"></script>

<script src="http://www.ukefarm.com/develop/chordette/js/master.js"></script>
<script type="text/javascript" src="http://www.ukefarm.com/develop/chordette/js/keyboard.js" charset="UTF-8"></script>
<link href="http://www.ukefarm.com/develop/chordette/stylesheets/keyboard.css" rel="stylesheet" type="text/css" />


<style type='text/css'>   
 #touchDiv,fieldset {text-align:center;}
 li { list-style-type:none; }  /* this line probably NOT needed when access to stylesheet is available */
</style>

<!-- Custom Font -->
<style type="text/css" media="screen">
@font-face {
font-family: ukefont;
src: url( "http://www.ukefarm.com/develop/chordette/fonts/ukefont.ttf");
}
</style>
<!-- end Custom Font -->

<script type="text/javascript">
//<![CDATA[
var keyCodes = "qwertyuiop[]asdfghjkl;'zxcvbnm,./1234567890-=";
var uniCodes0 = [  // to contain display codes of keys pressed above
    'A','H','a','h','O','Ä','∫','é','ö','P','{','}',
    '|','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes1 = [  // different set of unicodes for selection 2
    'W','†','p','u','z','@','?','è','õ','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes2 = [
    'B','I','b','i','P','Å','0','ê','ú','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes3 = [
    'C','J','c','j','Q','$','1','ë','ù','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes4 = [
    'X',']','q','v','§','%','2','í','û','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes5 = [
    'D','K','d','k','R','&','3','ì','ü','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes6 = [
    'Y','°','r','w','|','Ç','4','î','Æ','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes7 = [
    'E','L','e','l','S','É','5','ï','Ø','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes8 = [
    'F','M','f','m','T','Ñ','6','ñ','∞','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes9 = [
    'Z','_','s','x','ß','Ö','7','ó','¥','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes10 = [
    'G','N','g','n','U','Ü','8','ò','µ','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes11 = [
    'V','[','o','t','y','á','9','ô','∂','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];

var Chord = 0;
var ChordNames = ['A','Bb','B','C','C#','D','Eb','E','F','F#','G','Ab'];

function chords(mKey) {
  var sel = document.getElementById('chord').getElementsByTagName('button');
  for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = '#AAA'; }
  if (mKey == '-1') { Chord = 0; } else {
    mKey.style.backgroundColor = 'orange';
    Chord = mKey.value;
  }
}

function addIt(KbdKey) {
  var tarr = [];
  var mKey = Chord;
  switch (mKey) {
    case '0' : tarr = uniCodes0.slice(0); break;
    case '1' : tarr = uniCodes1.slice(0); break;
    case '2' : tarr = uniCodes2.slice(0); break;
    case '3' : tarr = uniCodes3.slice(0); break;
    case '4' : tarr = uniCodes4.slice(0); break;
    case '5' : tarr = uniCodes5.slice(0); break;
    case '6' : tarr = uniCodes6.slice(0); break;
    case '7' : tarr = uniCodes7.slice(0); break;
    case '8' : tarr = uniCodes8.slice(0); break;
    case '9' : tarr = uniCodes9.slice(0); break;
    case '10': tarr = uniCodes10.slice(0); break;
    case '11': tarr = uniCodes11.slice(0); break;
    default: alert('Invalid input: '+mKey); break;
  }
  N = keyCodes.indexOf(KbdKey);  // alert(mKey+'\n'+KbdKey+'\n'+N);
  if (N != -1) {
    document.getElementById('TArea').value += tarr[N];
  }
}
window.onload = function() {
  chords('-1');
}
//]]>
</script>

</head>
<body>
<div id="main_content" class="abs">
 <div id="main_content_inner">
  <div>
   <form name="GetName" action='' onsubmit="return false">
    <fieldset>
     <textarea id="TArea" rows="4" cols="16" style="font-family: ukefont; font-size:72px;"></textarea>
     <input type='hidden' name='focusedField'>
    </fieldset>
   </form>
  </div>

  <div id='touchDiv'>
    <ul>
     <li id="chord">
 <button class='chords' type='button' value="0"  onclick="chords(this)" id="Achord">A</button>
 <button class='chords' type='button' value="1"  onclick="chords(this)">Bb</button>
 <button class='chords' type='button' value="2"  onclick="chords(this)">B</button>
 <button class='chords' type='button' value="3"  onclick="chords(this)">C</button>
 <button class='chords' type='button' value="4"  onclick="chords(this)">C#</button>
 <button class='chords' type='button' value="5"  onclick="chords(this)">D</button>
 <button class='chords' type='button' value="6"  onclick="chords(this)">Eb</button>
 <button class='chords' type='button' value="7"  onclick="chords(this)">E</button>
 <button class='chords' type='button' value="8"  onclick="chords(this)">F</button>
 <button class='chords' type='button' value="9"  onclick="chords(this)">F#</button>
 <button class='chords' type='button' value="10" onclick="chords(this)">G</button>
 <button class='chords' type='button' value="11" onclick="chords(this)">Ab</button>
     </li>
   
    <li> <hr size="1"> </li>

    <li>
<button class=chords type=button value='q' onclick="addIt(this.value)">maj</button>
<button class=chords type=button value="w" onclick="addIt(this.value)">7</button>
<button class=chords type=button value="e" onclick="addIt(this.value)">min</button>
<button class=chords type=button value="r" onclick="addIt(this.value)">m7</button>
<button class=chords type=button value="t" onclick="addIt(this.value)">maj7</button>
<button class=chords type=button value="y" onclick="addIt(this.value)">dim7</button>
<button class=chords type=button value="u" onclick="addIt(this.value)">aug</button>
<button class=chords type=button value="i" onclick="addIt(this.value)">7sus</button>
<button class=chords type=button value="o" onclick="addIt(this.value)">6</button>
<button class=chords type=button value="p" onclick="addIt(this.value)">m6</button>
<button class=chords type=button value="a" onclick="addIt(this.value)">B</button>
    </li>

    <li>
<button class=chords type=button value="s" onclick="addIt(this.value)">7b5</button>
<button class=chords type=button value="d" onclick="addIt(this.value)">7#5</button>
<button class=chords type=button value="f" onclick="addIt(this.value)">m7b5</button>
<button class=chords type=button value="g" onclick="addIt(this.value)">6/9</button>
<button class=chords type=button value="h" onclick="addIt(this.value)">9</button>
<button class=chords type=button value="j" onclick="addIt(this.value)">m9</button>
<button class=chords type=button value="k" onclick="addIt(this.value)">maj9</button>
<button class=chords type=button value="l" onclick="addIt(this.value)">7b9</button>
<button class=chords type=button value="z" onclick="addIt(this.value)">add9</button>
<button class=chords type=button value="x" onclick="addIt(this.value)">l</button>
<button class=chords type=button value="c" onclick="addIt(this.value)">l</button>
    </li>

    <li>
<button class=chords type=button value="v" onclick="addIt(this.value)">z</button>
<button class=chords type=button value="b" onclick="addIt(this.value)">x</button>
<button class=chords type=button value="n" onclick="addIt(this.value)">c</button>
<button class=chords type=button value="m" onclick="addIt(this.value)">v</button>
<button class=chords type=button value="," onclick="addIt(this.value)">b</button>
<button class=chords type=button value="." onclick="addIt(this.value)">n</button>
<button class=chords type=button value="/" onclick="addIt(this.value)">m</button>
<button class=chords type=button value="*" onclick="addIt(this.value)">2x</button>
<button class=chords type=button value="(" onclick="addIt(this.value)">3x</button>
<button class=chords type=button value=")" onclick="addIt(this.value)">4x</button>
<button class=chords type=button value="_" onclick="addIt(this.value)">blank</button>
    </li>

    <li>
<button type="button" class="space">&nbsp;</button>
<button type="button" class="specialkey return">return</button>
<button class=chords type=button name="madd9" value='+' onclick="addIt(this.value)">KB</button>
    </li>
   </ul>

  </div>
 </div>
</div>

</body>
</html>

Was This Post Helpful? 0

#22 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 26 January 2012 - 07:23 PM

In your last post, the posted code does not copy to clipboard and past to a text file very well. It has a lot of ' ' characters in the JS portion of the code where they don't belong. It may be due to all the things you have to do with FTP and such. I'm just using a show source code from the right mouse click menu, then a copy/past operation into a text file that I name with the .html extension.

The link you posted worked fine so I used that for testing.
I am not seeing the 'change to orange' button problem you spoke of.
All the keys turn from gray to orange as expected.
If you do not desire this feature, remove this line:

    mKey.style.backgroundColor = 'orange';

I added some code for the 'spacebar' and 'return' buttons.
I do not understand the purpose of the x2 x3 x4 and blank keys.
It is confusing to me as you have two keys with the 'B' display,
when one is for the key of B and the other I'm not sure of your intent.
Is the 'blank' supposed to act like a clear the <textarea> button?
If yes, then change from:

<button class='chords' type='button' value="_" onclick="addIt(this.value)">blank</button>

to this:

<button class='chords' type='button' value="_" onclick="document.getElementById('TArea').value=''">blank</button>

If not, then ignore the above code.

Here is the code as I modified it from your link, not the post.


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Chordette</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="http://www.ukefarm.com/develop/chordette/stylesheets/master.css" />
<script src="http://www.ukefarm.com/develop/chordette/js/master.js"></script>
<script type="text/javascript" src="http://www.ukefarm.com/develop/chordette/js/keyboard.js" charset="UTF-8"></script>
<link href="http://www.ukefarm.com/develop/chordette/stylesheets/keyboard.css" rel="stylesheet" type="text/css" />


<style type='text/css'> 
 #touchDiv,fieldset {text-align:center;}
 li { list-style-type:none; } /* this line probably NOT needed when access to stylesheet is available */
</style>

<!-- Custom Font -->
<style type="text/css" media="screen">
@font-face {
  font-family: ukefont;
  src: url( "http://www.ukefarm.com/develop/chordette/fonts/ukefont.ttf");
}
</style>
<!-- end Custom Font -->

<script type="text/javascript">
//<![CDATA[
var keyCodes = "qwertyuiop[]asdfghjkl;'zxcvbnm,./1234567890-=";
var uniCodes0 = [ // to contain display codes of keys pressed above
  'A','H','a','h','O','Ä','?','é','ö','P','{','}',
  '|','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes1 = [ // different set of unicodes for selection 2
  'W','†','p','u','z','@','?','è','õ','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes2 = [
  'B','I','b','i','P','Å','0','ê','ú','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes3 = [
  'C','J','c','j','Q','$','1','ë','ù','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes4 = [
  'X',']','q','v','§','%','2','í','û','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes5 = [
  'D','K','d','k','R','&','3','ì','ü','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes6 = [
  'Y','°','r','w','|','Ç','4','î','Æ','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes7 = [
  'E','L','e','l','S','É','5','ï','Ø','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes8 = [
  'F','M','f','m','T','Ñ','6','ñ','8','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes9 = [
  'Z','_','s','x','ß','Ö','7','ó','¥','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes10 = [
  'G','N','g','n','U','Ü','8','ò','µ','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes11 = [
  'V','[','o','t','y','á','9','ô','?','P','{','}',
  'A','S','D','F','G','H','J','K','L',':','"',
  'Z','X','C','V','B','N','M','<','>','?',
  '!','@','#','$','%','^','&','*','(',')','_','+'
];

var Chord = 0;
var ChordNames = ['A','Bb','B','C','C#','D','Eb','E','F','F#','G','Ab'];

function chords(mKey) {
  var sel = document.getElementById('chord').getElementsByTagName('button');
  for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = '#AAA'; }
  if (mKey == '-1') { Chord = 0; } else {
    mKey.style.backgroundColor = 'orange';
    Chord = mKey.value;
  }
}

function addIt(KbdKey) {
  var tarr = [];
  var mKey = Chord;
  switch (mKey) {
    case '0' : tarr = uniCodes0.slice(0); break;
    case '1' : tarr = uniCodes1.slice(0); break;
    case '2' : tarr = uniCodes2.slice(0); break;
    case '3' : tarr = uniCodes3.slice(0); break;
    case '4' : tarr = uniCodes4.slice(0); break;
    case '5' : tarr = uniCodes5.slice(0); break;
    case '6' : tarr = uniCodes6.slice(0); break;
    case '7' : tarr = uniCodes7.slice(0); break;
    case '8' : tarr = uniCodes8.slice(0); break;
    case '9' : tarr = uniCodes9.slice(0); break;
    case '10': tarr = uniCodes10.slice(0); break;
    case '11': tarr = uniCodes11.slice(0); break;
    default: alert('Invalid input: '+mKey); break;
  }
  N = keyCodes.indexOf(KbdKey); // alert(mKey+'\n'+KbdKey+'\n'+N);
  if (N != -1) { document.getElementById('TArea').value += tarr[N]; }
}
window.onload = function() {
 chords('-1');
}
//]]>
</script>

</head>
<body>
<div id="main_content" class="abs">
 <div id="main_content_inner">
  <div>
  <form name="GetName" action='' onsubmit="return false">
   <fieldset>
   <textarea id="TArea" rows="4" cols="16" style="font-family: ukefont; font-size:72px;"></textarea>
   </fieldset>
  </form>
  </div>

  <div id='touchDiv'>
   <ul>

    <li id="chord">
<button class='key' type='button' value="0" onclick="chords(this)" id="Achord">A</button>
<button class='key' type='button' value="1" onclick="chords(this)">Bb</button>
<button class='key' type='button' value="2" onclick="chords(this)">B</button>
<button class='key' type='button' value="3" onclick="chords(this)">C</button>
<button class='key' type='button' value="4" onclick="chords(this)">C#</button>
<button class='key' type='button' value="5" onclick="chords(this)">D</button>
<button class='key' type='button' value="6" onclick="chords(this)">Eb</button>
<button class='key' type='button' value="7" onclick="chords(this)">E</button>
<button class='key' type='button' value="8" onclick="chords(this)">F</button>
<button class='key' type='button' value="9" onclick="chords(this)">F#</button>
<button class='key' type='button' value="10" onclick="chords(this)">G</button>
<button class='key' type='button' value="11" onclick="chords(this)">Ab</button>
    </li>
 
    <li> <hr size="1"> </li>

    <li>
<button class='chords' type='button' value='q' onclick="addIt(this.value)">maj</button>
<button class='chords' type='button' value="w" onclick="addIt(this.value)">7</button>
<button class='chords' type='button' value="e" onclick="addIt(this.value)">min</button>
<button class='chords' type='button' value="r" onclick="addIt(this.value)">m7</button>
<button class='chords' type='button' value="t" onclick="addIt(this.value)">maj7</button>
<button class='chords' type='button' value="y" onclick="addIt(this.value)">dim7</button>
<button class='chords' type='button' value="u" onclick="addIt(this.value)">aug</button>
<button class='chords' type='button' value="i" onclick="addIt(this.value)">7sus</button>
<button class='chords' type='button' value="o" onclick="addIt(this.value)">6</button>
<button class='chords' type='button' value="p" onclick="addIt(this.value)">m6</button>
<button class='chords' type='button' value="a" onclick="addIt(this.value)">B</button>
    </li>

    <li>
<button class='chords' type='button' value="s" onclick="addIt(this.value)">7b5</button>
<button class='chords' type='button' value="d" onclick="addIt(this.value)">7#5</button>
<button class='chords' type='button' value="f" onclick="addIt(this.value)">m7b5</button>
<button class='chords' type='button' value="g" onclick="addIt(this.value)">6/9</button>
<button class='chords' type='button' value="h" onclick="addIt(this.value)">9</button>
<button class='chords' type='button' value="j" onclick="addIt(this.value)">m9</button>
<button class='chords' type='button' value="k" onclick="addIt(this.value)">maj9</button>
<button class='chords' type='button' value="l" onclick="addIt(this.value)">7b9</button>
<button class='chords' type='button' value="z" onclick="addIt(this.value)">add9</button>
<button class='chords' type='button' value="x" onclick="addIt(this.value)">l</button>
<button class='chords' type='button' value="c" onclick="addIt(this.value)">l</button>
    </li>

    <li>
<button class='chords' type='button' value="v" onclick="addIt(this.value)">z</button>
<button class='chords' type='button' value="b" onclick="addIt(this.value)">x</button>
<button class='chords' type='button' value="n" onclick="addIt(this.value)">c</button>
<button class='chords' type='button' value="m" onclick="addIt(this.value)">v</button>
<button class='chords' type='button' value="," onclick="addIt(this.value)">b</button>
<button class='chords' type='button' value="." onclick="addIt(this.value)">n</button>
<button class='chords' type='button' value="/" onclick="addIt(this.value)">m</button>
<button class='chords' type='button' value="*" onclick="addIt(this.value)">2x</button>
<button class='chords' type='button' value="(" onclick="addIt(this.value)">3x</button>
<button class='chords' type='button' value=")" onclick="addIt(this.value)">4x</button>
<button class='chords' type='button' value="_"
 onclick="document.getElementById('TArea').value=''">Clear</button>    </li>

    <li>
<button type="button" class="space" style="width:100px"
 onclick="document.getElementById('TArea').value += ' '">&nbsp;</button>
<button type="button" class="specialkey return"
 onclick="document.getElementById('TArea').value += '\n'">return</button>
<button class=chords type=button name="madd9" value='+' onclick="addIt(this.value)">KB</button>
    </li>

   </ul>
  </div>
 </div>
</div>
</body>
</html>

Was This Post Helpful? 0

#23 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 26 January 2012 - 09:04 PM

This works great. The previous file must have gotten messed up in the transfer from my cut and paste and the upload to the server. It frustrating to not have Internet access from my Mac. I spent an hour on the phone with AT&T, but it's not their problem. Tomorrow I call Apple.

The change to orange is great. I may change the color when I get my final UI done.

The 2x, 3x, and 4x are characters I'm adding to the font. If you create a chord sheet where you play CC-FFFF-CC-G7, you can just show the F chord once and add a 4x to indicated it plays four times. The B key on the first row of the keyboard is a backspace key. It will have a backspace symbol, but I haven't created that yet. The KB key will be replaced with a symbol to hide the keyboard on a mobile device. The blank is just a key for a blank chord diagram. If you create a chord sheet that needs a chord I don't provide, you could just include a blank chord and fill in the dots on a print out. There's a lot to this project, if you are interested to know more, it may be better to talk through email. I do like the clear button you did. I think it will be handy.

It's taking longer than I planned to do the font. There are so many characters, and it's a little trial and error to ensure the characters either don't conflict with the code, or are displayed properly. I hope to have the uke font finished by this week end. Once that is done, the guitar and mandolin fonts can use the same mapping.

If you want to email me, my email is:
john@ukefarm.com

There's a lot of info on my UkeFarm site.

Was This Post Helpful? 0

(2 Pages)
←
1
2

Javascript for virtual keyboard key value assignment

22 Replies - 1579 Views - Last Post: 26 January 2012 - 09:04 PM

#16 JMRKER

Re: Javascript for virtual keyboard key value assignment

#17 John Baxter

Re: Javascript for virtual keyboard key value assignment

#18 JMRKER

Re: Javascript for virtual keyboard key value assignment

#19 John Baxter

Re: Javascript for virtual keyboard key value assignment

#20 JMRKER

Re: Javascript for virtual keyboard key value assignment

#21 John Baxter

Re: Javascript for virtual keyboard key value assignment

#22 JMRKER

Re: Javascript for virtual keyboard key value assignment

#23 John Baxter

Re: Javascript for virtual keyboard key value assignment

General Discussion

Programming Help

Web Development

Follow & Share

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

22 Replies - 1579 Views - Last Post: 26 January 2012 - 09:04 PM

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Related Topicsbeta

Follow & Share

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing

Related Topics^beta