Situation
You've just had an awesome idea for a really cool remote. One that isn't in the gallery already, and that you think there is a need for. You might want to ask someone to make one for you (me), or they might be really busy at the moment (which I usually am) so you decide to go and make one yourself.Step 1: Plan the features you want
Write down all of the buttons you want on your remote, along with their relevant keyboard shortcuts.Step 2: Plan the remote's layout
Use an app like DoodleBuddy to work out where you want to place the buttons. I'd recommend doing this on your iOS device because you know straight away how big the buttons will be, and how comfortable you will find the remote. When you're happy with the picture you have created, save it and load it to your PC.Step 3: Design the remote interface
This is the creative bit. I used PowerPoint to design my remotes because of the shape gallery and of the nice 3D effects you can apply to them to actually make them look like buttons. You could also use an image editor like GIMP to make something similar. You need to have one image where all the buttons are up, and one where all the buttons are being pressed. Have your original layout design open so you can place the buttons exactly where you wanted them.Important points:
- The image size should be 320x480, otherwise it will get stretched.
- Even if you are designing a landscape remote, ensure you are saving the images in a portrait rotation.
- You must have a button that returns to the list of remotes. Traditionally, this is in the form of an eject symbol and should be placed on the bottom left of your remote.
- The two images should be named such that you can easily distinguish the Up from the Down image.
- Save these images as a .jpg.
Step 4: Design the mask file
This is an image that uniquely identifies the buttons you have made. I would really recommend using GIMP. The image has to be the same size as your Up and Down images, with a black background and a solid colour for each button. For each colour you use, note its hexadecimal value on your feature list. In order to make sure users are pressing the button they want, you can make the mask bigger than the button, especially for the smaller buttons. If you are using GIMP, use the pencil tool (rather than the brush), and layer your Up image on top of your mask layer. I thought it might have been a good idea.Make sure that when you save the mask, hide the Up layer and save it as a .bmp.
Step 5: Write the XML code
Well done for getting this far. The best thing to do when writing XML is to have someone else's configuration open next to yours. I use Microsoft Visual Studio, but you can do the same with Notepad++, or if you're feeling brave, Notepad will also do the trick, although I don't recommend it. Just don't use Word - that would be stupid. The XML must be named layout.xml.Firstly, fill out the title, author and description tags. Outside of these tags, feel free to write your own comments.
You will need to specify the names of the images you have created in the Image tag.
The button tag is paramaterised with a hexadecimal colour code. This is to say, if you tap any area on your remote where the mask matches that colour, run all of this code below it. Within the button tag are Down and Up tags. These contain the code to run as soon as you press on the screen, and when you release your finger respectively. Inside those, type what you want your remote to do. Here are all of the pressable keys:
| esc | np_left | downarrow | = | ' |
| f1 | np_5 | down | + | " |
| f2 | np_6 | rightarrow | tab | enter |
| f3 | np_right | right | q | z |
| f4 | np_7 | backspace | w | x |
| f5 | np_home | ` | e | c |
| f6 | np_8 | ~ | r | v |
| f7 | np_up | 1 | t | b |
| f8 | np_9 | 2 | y | n |
| f9 | np_pgup | 3 | u | m |
| f10 | np_0 | 4 | i | , |
| f11 | np_insert | 5 | o | < |
| f12 | np_del | 6 | p | . |
| np_slash | np_. | 7 | [ | > |
| np_/ | scrolllock | 8 | { | / |
| np_asterix | printscreen | 9 | ] | ? |
| np_* | pageup | 0 | } | space |
| np_minus | home | ! | capslock | menu |
| np_- | uparrow | @ | a | \\ |
| np_plus | up | # | s | | |
| np_+ | end | $ | d | leftshift |
| np_enter | insert | % | f | shift |
| np_1 | delete | ^ | g | leftcontrol |
| np_end | numlock | & | h | control |
| np_2 | break | * | j | leftwin |
| np_down | pause | ( | k | win |
| np_3 | pagedown | ) | l | leftalt |
| np_pgdn | leftarrow | - | : | alt |
| np_4 | left | _ | ; |
If you want a key to be typed once (e.g. a pause button), consider putting the code Press [keys] Release [keys] in the Down tag, and nothing in the Up tag.
The button to return to the remote menu should have the code back in the Up tag.
Step 6: Make an icon
In GIMP, make an icon with is 48x48 pixels, and save it as icon.bmp. I recommend GIMP because it can create .bmps with transparency. It just looks nice.Step 7: Save everything as a Jumi file
Once you have your Up, Down and Mask images, your icon and XML, save these into a zip file with the extension .zip.jumitap.jumi.Loading the remote
Make sure JumiController is running on your PC. Now double click your remote's Jumi file to import it. Now the next time you run JumiRemotes on your iPone/iPod Touch and connect to your PC, the remote is already in the list for you!Multiple pages
If your remote is fairly complex, you may want to spread your buttons over two or more different screens. This is done by having another Up, Down and Mask image, and an XML with a different name. Layout.xml will always load first. In order to switch between your remotes, you will need a button with the code load [otherone].xml in the Up tag. Obviously you will also need a button in your second XML file to load layout.xml.All that's left for me to say is good luck to you. After you have created your first remote, further ones will be a lot easier to make.
If anything here is unclear, contact me and I'll answer your questions and modify this page accordingly.
Oh, also, I haven't finished this page yet. If you've found it already, well done.
No comments:
Post a Comment