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:

#1 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Javascript for virtual keyboard key value assignment

Posted 22 January 2012 - 02:53 PM

I'm working on a Web app that uses a virtual keyboard. I have a custom unifont I made that has over 200 characters. The keyboard has a row of multiple keys above the character keys. What I am trying to do is when I select a button on the top row, I need to assign the value for the character key. So, the top row buttons are numbered 1, 2, 3, and 4. When I select 1, I need to assign a value to key A. When I select 2, I need to assign a different value to key A, and so on. The same is true for all the keys. Each key has multiple characters that I need to assign the value based on the button selected in the top row. I have all the codepoints, and can manually assign the value, but I'm having trouble figuring out how to code the Javascript. I've searched the Web but have not found info that solves my problem.

Is This A Good Question/Topic? 0

Replies To: Javascript for virtual keyboard key value assignment

#2 hiddenghost

D.I.C Addict

Reputation: 36

Posts: 599
Joined: 15-December 09

Re: Javascript for virtual keyboard key value assignment

Posted 22 January 2012 - 08:47 PM

Are the keys just plain html. If they are then you can assign an id to each of them.

Code a function that updates the value of the key using the dom.

You can use event listeners to do it.

You might be able to store the id's in an array and loop through them to set the event listeners.

Was This Post Helpful? 0

#3 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 22 January 2012 - 09:28 PM

Can you show a small example of the keyboard and what you are trying to do?
I'm having trouble understanding the concept.

Was This Post Helpful? 0

#4 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 23 January 2012 - 04:56 AM

JMRKER, on 22 January 2012 - 09:28 PM, said:

Can you show a small example of the keyboard and what you are trying to do?
I'm having trouble understanding the concept.

Here's an example:

These are a few of the top row of buttons:

<button class=minitouch type=button key="A" value="A" onclick="click">A</button>
<button class=minitouch type=button key="Bb" value="Bb" onclick="click">Bb</button>
<button class=minitouch type=button key="B" value="B" onclick="click">B</button>

These are a few of the keys:

<button class=touch type=button name="maj" value=Ց onclick="addIt(this)">maj</button>
<button class=touch type=button name="7" value=ե onclick="addIt(this)">7</button>
<button class=touch type=button name="min" value=՗ onclick="addIt(this)">min</button>

If I select "A" from the top row, I need to assign the values to the keys for "A" chords.
If I select "B", I need to assign "B" chord values.

Here's a working prototype:

http://www.ukefarm.c.../chordette.html

The top row buttons don't work. I hard-coded the keys for "C#", so if I click "C#" you should see the C# chords when keys are pressed. If I select "E", the values would change for "E" chords. I have hard-coded "dim7" key for "E".

I don't necessarily need to change every key when to top row button is pressed, although that would work. In actual use the user will be selecting a top row button, entering a chord, and then selecting a different top row button to enter the next chord. The value change is based on the top row button selected. So, maybe the value change happens when a key is pressed.

Was This Post Helpful? 0

#5 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 23 January 2012 - 05:10 AM

hiddenghost, on 22 January 2012 - 08:47 PM, said:

The buttons are form buttons. I need to enter the values into a textarea field. See the response below for more info.

John Baxter, on 23 January 2012 - 05:08 AM, said:

hiddenghost, on 22 January 2012 - 08:47 PM, said:

The buttons are form buttons. I need to enter the values into a textarea field. See the response below for more info.

Sorry, I meant see the response to JMRKER.

Was This Post Helpful? 0

#6 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 23 January 2012 - 09:10 AM

I don't have the special characters to display
(and they may not be valid within a <textarea>)
but this should be a little close to what it is
that I think you are going for.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Chordette</title>

<style type='text/css'>
.touch {
	border:1px solid black;
	font-family:tahoma,sans-serif;
	font-size:12px;
	font-weight:bold;
	background-color:#ccc;
	color:black;
	width:64px;
	height:46px;
	}
	
.minitouch {
	border:1px solid black;
	font-family:tahoma,sans-serif;
	font-size:14px;
	font-weight:bold;
	background-color:#777;
	color:white;
	width:50px;
	height:30px;
	}
	
#touchDiv,fieldset {text-align:center;}
</style>


<script type='text/javascript'>
// From: http://www.dreamincode.net/forums/topic/263844-javascript-for-virtual-keyboard-key-value-assignment/

// Following are not really needed in this version, but could be useful in future versions
var Chord = '';
var ChordAttr = '';

function chord(mKey) {
  var sel = document.getElementById('chords').getElementsByTagName('button');
  for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = '#777'; }
  mKey.style.backgroundColor = 'orange';
  Chord = mKey.value;
  document.getElementById('q').value += Chord;
}
function addIt(cKey) {
/* MAJOR CHANGE HERE
  selectedElement = (document.forms["GetName"].elements["focusedField"].value!='')
    ?document.forms["GetName"].elements["focusedField"].value
    :"FirstName";
  d = document.forms["GetName"].elements[selectedElement];
  d.value =  (cKey.value=='backspace') ? d.value.slice(0,-1) : d.value+cKey.value;
*/
  var sel = document.getElementById('q');
  ChordAttr = cKey.value;
  switch (ChordAttr) {
    case 'backspace' : sel.value = sel.value.substring(0,sel.value.length-1); break;
    case 'clear' : sel.value = ''; break;
    default : sel.value += ChordAttr; break;
  }
}
</script>

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

</style>
<!-- end Custom Font -->

</head>

<body>
<div>
<form name="GetName" action='' onsubmit="return false">
<fieldset>

<textarea id="q" name="q" cols="16" rows="4" style="font-family: ukefont; font-size:72px;"
 value="Erase when focused" onfocus='document.forms["GetName"].elements["focusedField"].value = this.name'
 onfocus="if(this.value=='Erase when focused')this.value=''"></textarea><br />
													   <BR>
<input type='hidden' name='focusedField'>
</fieldset>
</form>
</div>

<div id='touchDiv'>
 <div id="chords">
 <button class=minitouch type=button key="A" value="A" onclick="chord(this)">A</button>
 <button class=minitouch type=button key="Bb" value="Bb" onclick="chord(this)">Bb</button>
 <button class=minitouch type=button key="B" value="B" onclick="chord(this)">B</button>
 <button class=minitouch type=button key="C" value="C" onclick="chord(this)">C</button>
 <button class=minitouch type=button key="C#" value="C#" onclick="chord(this)">C#</button>
 <button class=minitouch type=button key="D" value="D" onclick="chord(this)">D</button>
 <button class=minitouch type=button key="Eb" value="Eb" onclick="chord(this)">Eb</button>
 <button class=minitouch type=button key="E" value="E" onclick="chord(this)">E</button>
 <button class=minitouch type=button key="F" value="F" onclick="chord(this)">F</button>
 <button class=minitouch type=button key="F#" value="F#" onclick="chord(this)">F#</button>
 <button class=minitouch type=button key="G" value="G" onclick="chord(this)">G</button>
 <button class=minitouch type=button key="Ab" value="Ab" onclick="chord(this)">Ab</button>
 </div>
 <br><br>
 <button class=touch type=button name="maj" value='Ց' onclick="addIt(this)">maj</button>
 <button class=touch type=button name="7" value='ե' onclick="addIt(this)">7</button>
 <button class=touch type=button name="min" value='՗' onclick="addIt(this)">min</button>
 <button class=touch type=button name="m7" value='Ւ' onclick="addIt(this)">m7</button>
 <button class=touch type=button name="dim7" value='ࡹ' onclick="addIt(this)">dim7</button>
 <button class=touch type=button name="aug" value='յ' onclick="addIt(this)">aug</button>
 <button class=touch type=button name="7sus" value='թ' onclick="addIt(this)">7sus</button>
 <button class=touch type=button name="sus2" value='կ' onclick="addIt(this)">sus2</button>
 <button class=touch type=button name="sus4" value='Ր' onclick="addIt(this)">sus4</button>
 <button class=touch type=button name="maj7" value='ա' onclick="addIt(this)">maj7</button>
 <input type='button' value='backspace' onclick="addIt(this)" style='width:110px' class='touch'>
 <br><br>
 <button class=touch type=button name="6" value='Փ' onclick="addIt(this)">6</button>
 <button class=touch type=button name="m6" value='Մ' onclick="addIt(this)">m6</button>
 <button class=touch type=button name="6/9" value='զ' onclick="addIt(this)">6/9</button>
 <button class=touch type=button name="7b5" value='է' onclick="addIt(this)">7b5</button>
 <button class=touch type=button name="7#5" value='ը' onclick="addIt(this)">7#5</button>
 <button class=touch type=button name="m7b5" value='ժ' onclick="addIt(this)">m7b5</button>
 <button class=touch type=button name="9" value='ի' onclick="addIt(this)">9</button>
 <button class=touch type=button name="m9" value='լ' onclick="addIt(this)">m9</button> 
 <button class=touch type=button name="maj9" value='՚' onclick="addIt(this)">maj9</button>
 <br><br>
 <button class=touch type=button name="7b9" value='՘' onclick="addIt(this)">7b9</button>
 <button class=touch type=button name="7#9" value='Ճ' onclick="addIt(this)">7#9</button>
 <button class=touch type=button name="11" value='ծ' onclick="addIt(this)">11</button>
 <button class=touch type=button name="m11" value='Ս' onclick="addIt(this)">m11</button>
 <button class=touch type=button name="add9" value='Ֆ' onclick="addIt(this)">add9</button>
 <button class=touch type=button name="madd9" value='բ' onclick="addIt(this)">m add9</button>
 <button class=touch type=button value='clear' onclick="addIt(this)">blank
</div>

</div>

<!-- Font Mapping
ࡸ - E7b9
՘ - C#7b9
ࡹ - Edim7
ՙ - C#dim7
-->

</body>
</html>

Was This Post Helpful? 0

#7 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 23 January 2012 - 03:05 PM

Hi JMRKER,
Thank you for your response. I'm having trouble implementing your code. When I press a button on the top row, it enters a character into the text field. The top row buttons are only for selecting the key, which needs to be used to assign a character to a keyboard key. These characters are called codepoints. Here's another take on how I envision it working:

[A] [Bb] [B] [C] <-- Chord Key buttons on top row
<button id=A>
<button id=Bb>
etc.

[maj] [7] [min] [m7] <-- Chord buttons
<button value=codepoint>

Select Chord Key button (A selected)
Press maj Chord button (q key on keyboard)
onkeydown
If id of Chord Key button = A
then set value of maj Chord button to Ց <--(codepoint)
If id of Chord Key button = Bb
then set value of maj Chord Button to ՗
onkeyup
Ց character should be entered in text field

Select Chord Key button (Bb selected)
Press min Chord button (e key on keyboard)
onkeydown
If id of Chord Key button = A
then set value of min Chord button to ࡹ
If id of Chord Key button = Bb
then set value of min Chord button to ա
onkeyup
ա character should be entered in text field

Was This Post Helpful? 0

#8 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 23 January 2012 - 07:06 PM

I'm not sure I fully understand the end result of the process.

If you don't want the KEY of the chord to be displayed in the <textarea>
all you need to do is change this:

function chord(mKey) {
  var sel = document.getElementById('chords').getElementsByTagName('button');
  for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = '#777'; }
  mKey.style.backgroundColor = 'orange';
  Chord = mKey.value;
//  document.getElementById('q').value += Chord;  // display selection by un-commenting this line

The current selection (the KEY that changes to orange) will be saved in the global variable 'Chord'
and can be available at any time after it has been selected.

What is the exact purpose of the function "addit()"?
Is that where the selection gets put into the <textarea>?
My main difficulty is understanding what becomes displayed when a selection is made since the characters don't make sense to me.
Maybe it is because I don't understand the 'maj', '7', 'min', 'm7' and the rest of the keyboard layout.
Do you have a more simplified example of what you expect to happen?
Perhaps a series of GIF or JPG images to show what should happen as opposed to what does happen?

Are you expecting that when a keyboard key is pressed, for example the 'q' key
that an image or character will appear in the <textarea> display?

Was This Post Helpful? 0

#9 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 23 January 2012 - 09:34 PM

Hi JMRKER,
Sorry for any confusion I may be causing. I think one area of confusion is the term "key". Sometimes I'm referring to a musical key, i.e., A, Bb, C, C#, etc. Other times I'm referring to a keyboard key. The buttons on the top row are selection buttons. They don't display in the <textarea>. I'll rename them 1 through 12, maybe that will help. The keys on the keyboard (I'll refer to them as q, w, e, r, etc.) can be one of 12 characters each. My font is a unicode font which allows me to create hundreds of characters (I use about 300). For each key there are 12 characters to choose from in the font. So, If I type q, the character that gets displayed in <textarea> will be determined by which selection button is highlighted. If selection button 2 is highlighted, I need to put a specific character in the value for the q key. If selection button 4 highlighted, I need to put a different character in the value. I have all the unicode names to use in the code, but for testing, the alphabet can be used. I think the logic would be:

if Selection button 2 is highlighted
put k into value of key
else if Selection button 4 is highlighted
put z into value of key

[What is the exact purpose of the function "addit()"? Is that where the selection gets put into the <textarea>?]. Yes, this displays the character (value) in the <textarea>. For now, I have hard-coded the value of the keys. I need to have a value=varible that changes based on the selection button highlighted.

[Are you expecting that when a keyboard key is pressed, for example the 'q' key that an image or character will appear in the <textarea> display?] Yes. the image will be based on the variable in the value of the key, which will be determined by the selection button highlighted.

I really appreciate your quick response and willingness to help.
John

Attached image(s)

Was This Post Helpful? 0

#10 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 24 January 2012 - 11:11 AM

So where are the selections / displays defined?
If, for example, the following is true:

Choices:    1  2  3  4 and
Selection:  1  _  _  _
Keypressed: q  w  e  r  t  y  u  i  o  p
Results in: k  _  _  _  _  _  _  _  _  _

and

Choices:    1  2  3  4 and 
Selection:  _  _  _  4
Keypressed: q  w  e  r  t  y  u  i  o  p
Results in: z  _  _  _  _  _  _  _  _  _

What are the combinations for the other choices / selections / keypresses and results desired?
What are the results desired for the '_' in the 'Results in: ' line?

Should be fairly easy to map out a solution then. :bananaman:

Was This Post Helpful? 0

#11 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 24 January 2012 - 02:05 PM

[So where are the selections / displays defined?]
The selections / displays would be defined in the javascript code, unless you know of a way to reference a look-up table to populate the variables.

[What are the combinations for the other choices / selections / keypresses and results desired? What are the results desired for the '_' in the 'Results in: ' line?]
This where it gets confusing, so I'm using numbers for the selection buttons, and alpha characters for the keypresses and results (The final design will label the selector buttons by music key, and the keyboard by chord, but for simplicity I'm using numbers and alpha characters). If you go to my test page at:

http://www.ukefarm.c...yboardTest.html

and type a "q" on the virtual keyboard, you will see a "A" chord diagram. But, what if I want to display a "C"? That is what the selector buttons are for. If I select button 1, an "A" should display. If I select button 4, the "C" chord would display.

I'm attaching two PDF files:

Chord Set - ukechordA
This shows chord diagrams with their corresponding characters.

Font Map
This shows the chord name and the corresponding character and keystroke.

q key:
Choices: 1 2 3 4 and
Selection: 1 _ _ _
Keypressed: q w e r t y u i o p
Results in: A

Choices: 1 2 3 4 and
Selection: _ 2 _ _
Keypressed: q w e r t y u i o p
Results in: W

Choices: 1 2 3 4 and
Selection: _ _ 3 _
Keypressed: q w e r t y u i o p
Results in: B

Choices: 1 2 3 4 and
Selection: _ _ _ 4
Keypressed: q w e r t y u i o p
Results in: C

w key:
Choices: 1 2 3 4 and
Selection: 1 _ _ _
Keypressed: q w e r t y u i o p
Results in: H

Choices: 1 2 3 4 and
Selection: _ 2 _ _
Keypressed: q w e r t y u i o p
Results in: \

If you are interested, here's a prototype of the keyboard:

http://www.ukefarm.c...elop/chordette/

Thanks,
John

Attached File(s)

ukechordA.pdf (76.77K)
Number of downloads: 15
Chordette FontMap.pdf (29.95K)
Number of downloads: 24

Was This Post Helpful? 0

#12 JMRKER

D.I.C Addict

Reputation: 99

Posts: 653
Joined: 25-October 08

Re: Javascript for virtual keyboard key value assignment

Posted 24 January 2012 - 05:37 PM

OK, let's step back a bit and see if this proof of concept program is heading in the right direction.

You will need to populate the 'uniCode0' ... 'uniCode3' arrays with the correct <textarea> displays.
Currently they are all the same for testing purposes.

If, or when, it is right, then we should be able to convert it to your original post requirements.

Let me know how close this is compared to where you finally want to get!

<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
//<![CDATA[
var keyCodes = "qwertyuiop[]asdfghjkl;'zxcvbnm,./1234567890-=";
var uniCodes0 = [  // to contain display codes of keys pressed above
    'Q','W','E','R','T','Y','U','I','O','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes1 = [  // different set of unicodes for selection 2
    'Q','W','E','R','T','Y','U','I','O','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes2 = [
    'Q','W','E','R','T','Y','U','I','O','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
var uniCodes3 = [
    'Q','W','E','R','T','Y','U','I','O','P','{','}',
    'A','S','D','F','G','H','J','K','L',':','"',
    'Z','X','C','V','B','N','M','<','>','?',
    '!','@','#','$','%','^','&','*','(',')','_','+'
];
function addit(KbdKey) {
  var tarr = [];
  var mKey = getRBtnName('MusicKey');
  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;
    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];
  }
}

/* Optional use in program */
function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
  }
  return fnd;   // return option index of selection
// comment out next line if option index used in line above  
//  return str;
} 
//]]>
</script>

</head>
<body>
<input type="radio" name="MusicKey" value="0" checked> 1 
<input type="radio" name="MusicKey" value="1"> 2 
<input type="radio" name="MusicKey" value="2"> 3 
<input type="radio" name="MusicKey" value="3"> 4 
<br>
<input type='button' value='q' onclick="addit(this.value)">
<input type='button' value='w' onclick="addit(this.value)">
<input type='button' value='e' onclick="addit(this.value)">
<input type='button' value='r' onclick="addit(this.value)">
<input type='button' value='t' onclick="addit(this.value)">
<input type='button' value='y' onclick="addit(this.value)">
<input type='button' value='u' onclick="addit(this.value)">
<input type='button' value='i' onclick="addit(this.value)">
<input type='button' value='o' onclick="addit(this.value)">
<input type='button' value='p' onclick="addit(this.value)">
<input type='button' value='[' onclick="addit(this.value)">
<input type='button' value=']' onclick="addit(this.value)">
<br>
<input type='button' value='a' onclick="addit(this.value)">
<input type='button' value='s' onclick="addit(this.value)">
<input type='button' value='d' onclick="addit(this.value)">
<input type='button' value='f' onclick="addit(this.value)">
<input type='button' value='g' onclick="addit(this.value)">
<input type='button' value='h' onclick="addit(this.value)">
<input type='button' value='j' onclick="addit(this.value)">
<input type='button' value='k' onclick="addit(this.value)">
<input type='button' value='l' onclick="addit(this.value)">
<input type='button' value=';' onclick="addit(this.value)">
<input type='button' value="'" onclick="addit(this.value)">
<br>
<input type='button' value='z' onclick="addit(this.value)">
<input type='button' value='x' onclick="addit(this.value)">
<input type='button' value='c' onclick="addit(this.value)">
<input type='button' value='v' onclick="addit(this.value)">
<input type='button' value='b' onclick="addit(this.value)">
<input type='button' value='n' onclick="addit(this.value)">
<input type='button' value='m' onclick="addit(this.value)">
<input type='button' value=',' onclick="addit(this.value)">
<input type='button' value='.' onclick="addit(this.value)">
<input type='button' value='/' onclick="addit(this.value)">
<p>

<textarea id="TArea" rows="9"></textarea>
</body>
</html>

Was This Post Helpful? 0

#13 John Baxter

New D.I.C Head

Reputation: 0

Posts: 12
Joined: 22-January 12

Re: Javascript for virtual keyboard key value assignment

Posted 24 January 2012 - 08:31 PM

This is great! The basic function is there. There are a few issues I came across:

1) I entered some unicode in the array and it didn't work from the virtual keyboard, although it worked from the physical keyboard. Instead of getting the chord, it displayed the unicode, i.e., &#oo5C;. This may just be a matter of syntax. For testing I can use the A, B, C, but for over 300 chords, I quickly run out of letters. I'm using characters like a Latin capital letter A with a Tilde. The unicode worked in my prototype page, but it was hard-coded into the value of the key.

2) The characters "/" and "<" don't work. They break the code. This is not a major issue, I can just avoid using any characters that would conflict with programming syntax.

3) My virtual keyboard uses buttons, the same as the keyboard keys, rather than radio buttons. Changing them to buttons breaks the code. Can this be changed?

Here's an updated test page. I only did the first five keys (q, w, e,r ,t). The w key is incorrect for selection 2 because it uses a "/" which breaks the code. I just repeated the selection 1 value.

http://www.ukefarm.c...rdkey_test.html

You did a great job on this, and fast too!
Thank you.

Was This Post Helpful? 0

#14 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 - 07:56 AM

I'm on my way to teach class right now, so I'll look into the 1st problem later.

Concerning the '/' and '<' characters, they are used in the HTML tags so I'm not suprised they don't work as expected.
I'll see if there is a way to bypass the problem, but the easiest solution would be to assign those keys to different keyboard locations.

The radio buttons were only used for my lazyness. You can easily substitute your original logic, just pass the value of the button to the addit() function like the radio button 'MusicKey' variable is being used.

I'll get back to you later, but try some of those changes yourself while I'm gone to see what happens.

Was This Post Helpful? 0

#15 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 - 07:07 PM

I've made good progress today, but most of my time has been spent on modifying the keyboard and creating a new font, avoiding using characters that conflict with the code. I'm also scaling down the number of characters. I think I may be able to use the actual character rather than the unicode, as a result of limiting the number of characters. I found a tool that lets me cut and paste the characters into the code, and it seems to work so far.

I tried to change the radio buttons to keyboard style buttons, but I can't seem to get it to work.

At this stage, I'm not sure what else I need, other than the radio button issue. I do plan on supporting guitar, ukulele, and mandolin fonts, but I can just load a separate page for each of those, with the font changed in the code. It's probably not worth using a variable to just change the font.

How can I repay you for your effort and kindness?

Was This Post Helpful? 0

(2 Pages)
1
2
→

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

Javascript for virtual keyboard key value assignment

Replies To: 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

Re: Javascript for virtual keyboard key value assignment

Attached image(s)

Re: Javascript for virtual keyboard key value assignment

Re: Javascript for virtual keyboard key value assignment

Attached File(s)

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