HTML/Java assistance please (electronic scoreboard)

[severdhed]

I have been asked by one of the instructors at my kid's karate school to help develop and electronic scoreboard system we can use for point sparring at our tournaments.  I am an IT consultant by trade, so i'm pretty good with computers and hardware...but programming is not my forte.  I was able to find a free, open source HTML scoreboard online that is pretty much just what we wanted.  i managed to edit the code a little to remove a few features we didn't need, and to modify a few other settings.  it is a single HTML file, which makes it very flexible with which hardware it would run on.  initially it will probably be run from either a chromebook or an old windows laptop, which would be connected to an LCD TV.  Like i said, i am not a programmer, but i can't help but think this shouldn't be that difficult   with the slight tweaking i've done, i've pretty much got it running the way i would like, with one exception.  I'd like to make it so that i can control it via key presses instead of clicking on buttons on the page. (see where i'm going with this?)  i'd like to end up building a small control panel using either an ipac (or similar device) or usb gamepad and some arcade buttons that would operate all of the functions on the scoreboard.  I just want to make sure this is something that can be done before i spend hours and hours trying to learn how to do it.

I will attach the html file i have so you can see what i have to work with.  there is basically a blue score and a red score, with buttons to add 1 or subtract 1 from each score.  a timer that can be set to different time intervals, start and pause buttons for the timer, and a reset all button that resets the timer and the score.  all of this functions right now by clicking the buttons on the page, i just need help figuring out how to map these commands to key presses.  can anyone here help me with this?  We are a small school and don't really have the money to spend on an expensive electronic scoreboard...any help would be greatly appreciated.

Thanks

[ed12]

would a normal 9-x-9 or 6-x-6 matrix not do this job ?
or better yet just an old asci key board encoder
pluged into the ps2 port of the laptop
and just hack the old acsi chip to use the up/down/pause/esc key/+/-
that is 6-x-6

ed

[Howard_Casto]

Ed I can only assume you didn't read his question or didn't understand it one.

Yes you can do keystate detection in html/javascript, but support is rather iffy depending upon how old your browser is.

http://unixpapa.com/js/key.html

Also keep in mind that most html documents won't start reading keys until you've clicked on the form... so that's a pain in the butt. 

This is more or less what you want:

====================================


document.onkeyup = function(e) {
  e = e || event
  switch(e.keyCode) {
  case 37: // left
        function1(args);
        return false
  case 38: // up
        function2(args);
        return false
  case 39: // right
    function3(args);
    return false
  case 40: // down
   function4(args);
    return false 
  }
}
==========================================

I don't work in html a lot so this might need some tweaking.  I binded to the keyup event because it shouldn't repeat like keydown does. 

Basically that switch function in there should be customized for the keys you want to use.  37-40 represent the keycodes for the keys, in this case it's the arrow keys.  Instead of "function#(args)" you want to put the function you want to bind to that key.  You can find those in the "onclick=" portion of the button definitions towards the bottom of your original file. Once you've binded each function to a key, you can delete the buttons. 

Also note the "return false" at the end of each switch.  This is important!  Some keyboard keys perform functions in a browser, so forcing the key back to false keeps those events from firing. 

I hope that helps.   

[severdhed]

thank you for your assistance....i still can't seem to get it to work though.  I have been messing with this all evening, but it just doesn't seem to function.  Any help would be appreciated.

[Howard_Casto]

Post what you have thus far.  I'm a teach a man to fish kind of guy. 

I just did a quick test via copying and pasting the code I posted into the script section and binding the functions for scoreboard + to the up key and it worked fine though.  Aside from a security warning upon startup from IE of course.

[severdhed]

well, right now i'm back to where i was when i posted the code.  whenever i inserted your code and tried to bind the functions, it broke everything and i couldn't even click on the buttons...i clearly don't understand what I am doing.  I don't understand the proper syntax for binding functions to the keys.

[Howard_Casto]

Ok I'll walk you through it.  As an IT guy you really need to know this stuff anyway. 

In javascript { and } are just like ( and ) in C... they just group your function together so the program knows how far to go. 

To save space and processing time (not that you'll notice) what I did was make an event equal to a function, instead of just making the function elsewhere and calling it. 

So the event "document.onkeup" is made equal to the function :

function(e) {
...
...
}

That "e = e || event" business is just a way to transform whatever event happened and it's arguments (in this case a keyup event) in a variable so that we can work with it easily.

After that we've got a switch statement.  A switch statement is just like the one you'd find in C with slightly different syntax.  We are comparing the keyup value of "e" to various values, 4 in total.  These 4 values in this particular instance are 37, 38, 39 and 40, which are the scancodes for up, down left and right on the keyboard.  The "function1(args)" I put in each one doesn't do anything... that was just an example of the syntax you should use.....

Let me set a few up for you so you can get the hang of it.  Remember where I said you can look at your click events?  I'll just pull two random ones off of the bottom of the file you posted:

<input type='button' value=" " onclick="change_element('score_left', 1)" id="plus_left_label"><br />
<input type='button' value="-" onclick="change_element('score_left', -1)" id="minus_left_label">

We want what "onclick" equals. 

So lets make a new switch statement that specifically uses those two. 

=================================
document.onkeyup = function(e) {
  e = e || event
  switch(e.keyCode) {
    case 38: // up
       change_element('score_left', 1)
        return false
    case 40: // down
   change_element('score_left', -1)
    return false 
  }
}
=======================================

Now the up and down arrow keys will add and subtract to the left score.  You can put the function anywhere in the "<script>" section really.  I put it just after the "set_element" function towards the top of your file. 

You are going to have to customize this obviously, adding enough cases for all of your functions and changing their comparative numbers to whatever the scancodes for the keys you wish to use are.  That link I posted originally has a big-old table with all of the values in it for you. 

Once you do this, if you no longer want the buttons, you can remove them from the file... just don't remove the functions they call.

[severdhed]

Thank you so much!!! that worked out just fine.  I was able to get all of the keys defined, and removed all of the unnecessary links so it basically just shows the score and timer.

now i just need to find a cheap USB keybaord encoder!!!!


thanks again

[PL1]

now i just need to find a cheap USB keybaord encoder!!!!

KADE firmware on an AVR FTW.


Scott

[Howard_Casto]

now i just need to find a cheap USB keybaord encoder!!!!

I don't think I would bother honestly.  I would get one of those little keypads they sell for laptops and go to town with the label maker. 

[severdhed]

It needs to be as idiot proof as possible..I'm thinking a raspberry pi connected to a tv/monitor with a simple control panel with a few arcade buttons. I just discovered the Minimus avr, which unless I am mistaken, seems to be exactly what I need. I can't seem to find a clear answer, does it come pre programmed as a usb keyboard, our do I have to flash some kind of special firmware?

[PL1]

The plain Minimus AVR (at90usb162 or atmega32u2) usually doesn't come with the KADE firmware loaded since that part isn't made by the KADE team.

If you order from the KADE Store, I'm sure Kevin (sharpfork) can load the firmware of your choice, probably MAME (custom) or Generic.

Check out the Quick Start guide on kadevice.com for a link to the KADE Loader program and directions.

The Loader is easy to use and the "help - instructions" menu has a pinout for the plain AVR -- 3rd hyper link at the top of that page. (also attached below)

When Loader refers to "pin A1" the marking on the AVR is "PC2" (upper left pin below), "pin A2" is "PD0", etc.


Scott

[severdhed]

I ordered a Minimus AVR and Raspberry Pi on friday, they should be here tomorrow.  I am very excited to get this project going.  Thank you so much for your help with the HTML and the advice in general.  I wasn't planning on doing a project thread, but i guess i might as well.