Working with JavaScript key input

Recently I was selected to win a free googletv as part of their tv web developers program. Layout wise I don’t expect much to be different that any other device with a 1080p monitor, but the controller has some other media buttons that I though might have some use, and with a lack of a mouse, alternative control methods came into mind.

The devices media buttons are, unfortunately, outside of my testing ability because I can’t replicate their input, but assume the control unit has some basic arrow inputs* then it should be no problem to highjack those to do my bidding.

I’ve done a few things and decided to upload them to the Examples tab under javascript (once, you know, I program all the stuff and make it work, havent done that yet) so ou can check them out, all the code is in the file so it should be easy to look at and examine the construction process. The simplest (and probably the most convient to use) is below in all it’s coded glory. To make it short, it allows you to go between H1 tags with the Left and Right keyboard buttons.

Snipplr: http://snipplr.com/view/45909/javascript-keyboard-navigation/

There is a current problem with the system, if you manually scroll past a H1 tag then it doesn’t register it and press the next one may ump you back up the document. I’m pretty sure I have a solution but havent really had the time to implement it, and so It’s not in this code, I’ll update if/when I do fix that downside and pose the code.

You can view this code, along with some other modifications of the same concept on the example page. Also note, the example that uses this has been modified, it uses the H2 tag to work better with how project guttenburg lays out it’s HTML files.

*The device given to me is a Logitech Revue, which actually comes with a full keyboard control, but since I love my Logitech Harmony remote I’m much more likely to use that instead of whip out a keyboard. And I can see a time in the future where full keybaord layouts are probably either less common or, not particularly convient.

UPDATE: 8:58PM
the examples are up on the example page now, looks a little baren, just not enough time to fill it properly.

Multi-forms, the amazing time saver

I’ve done a couple of things that involve a very similar front end, and a identical back end, the latest of which was a basic quiz system. The front end always involves forms (because the internet was made to fill out pointless data on) and making form and form can be a pain. So, i’ve adapted a technique I made for the quiz to make it a little more clear.

To start, I use a multidimensional array usually, kinda link the one below

So thats the data for the form, it’s very simple but it’s only an example, I’ve done this with large forms over 100 entries and it does make things simpler, I’ve also added default value formulas and if the form is saved (used in conjunction with my javascript ajax auto-saver), you can add any additional variables you want, I usually stick in a save one set true/false to denote if I am saving it, I also usually store this in an external file separate from the document and display code so it can be called in multiple places (for instance, the script that saved this data also calls it and checks it against that save field to determine if it should be included in the mysql_query(). That lets me use one saver file and have it save the data from a bunch of files.

Another advantage of this system is that the from is not generated in a very predictable manner and a less experienced user can change it (either through details instructions or blind “replace this thingy here” methodology) and when properly linked to the saving script neither they or you have to deal with making modifications to the save code (and that can save some serious time if the form changes often or there are many of them to work with)

So how does the saving work? simple, lets say we have loaded the data up into the save script. the array is called $form, and it has the subfeilds type, default, and save as mentioned above, and we’ll send it to the save script via POST. The simplest method of managing this would be something like this:

So that will write the name of the form item into a mysql table with the needed schema, it again is very basic, I have added features to make the sceme as it writes (be careful who can do that or you’ll have a huge mess on your hands), and to overwrite old entries, really all depends on what you need it to do.

So thats the style of the array holding the information and saving it, the display part is the key part though, it too is very simple. If you use any non-input type types (like I did in the first example) it’s best to check for those first, then display the standard type fields afterwards (most often the standard ones I use are text and hidden) A basic outline could be like this

‘; foreach($form as $name => $data){ echo $name.”:”; if($data[‘type’]==’date’){ list($month,$day,$year)=explode(‘/’,$data[‘default’]); echo ‘The dates can be put where, with their own loops, or you could load a JS date module or something’; echo ‘I didn’t put them in here because there long, and this post is long enough already’; }else if($data[‘type’]==’gender’){ echo ”; echo ”; }else{ echo ‘ ‘; } echo ‘
‘; } echo ‘

Modify and needed and you got a form, if you decide to make further changes to the form it’s a lot simpler and faster than going through the html code. You have have someone not experience in HTML at all do it, you can have it output in another language, really anything, it’s all in the output section.

You can also get really fancy with this, I have one that calculates the information in the save file and sends in back to the page to update the non-saved fields (a little slower than a native JS update but it doesn’t requires another et of formulas to update). I’ve also used this concept for a quiz engine, the files are easy to modify and instead of the save engine I have a correction engine which determines the users score. And with a quick $_GET script I can load an infinite number of quizes without ever having to re-look at the correction or display code. It’s all in the implementation of the ideal.

Please note that none of the code on this page has been tested and was written from memory, if there’s one thats not working post a comment and I’ll fix it up for you.

PHP imagecolorallocation producing incorrect color?

A problem with a simple explanation and fix that’s surprising hard to find an answer for on google. In php, when working with certain images imagecolorallocate() will not return the color you want, and instead return any old color. It’s a rather frustrating problem on the surface, as your code is correct and the result the server ives you is not. but after a little troubleshoot the answer hit me in one of those moments of clarity you hear alcoholics talk about. It’s all a problem of the images color allocation table.

See, the problem is that an image in certain formats (GIF and PNG (8 bit) and there are probable other, less common formats that are susceptible) Store every color in the image in a table. This is what the command imagecolorallocate modifies to give you your color. Specifically it ads one to the end of the table and return it back to you. This is the root of the problem. See, if the image is full color (relative to the limited number of colors they can have) imagecolorallocate can’t add a new color to the images color allocation table, and instead returns a random color (which I’m sure is not random, it’s probably just the last color in the table). So thats the problem, whats the solution?

Simple, remove a color from the color table. Not I suggest doing this prom Photoshops “Save for Web and Devices..” feature as it will be able to re-jigger the color table to still look good, randomly pulling a specific color and turning it black (which can be done entirely from PHP) runs the risk of ruining the image. You can over-ride the Photoshop palet size option simple by typing in the box next to it, 255 will leave you one more color to fill, if you want to use multiple colors then you need to adjust you images pallet size accordingly.