Dicing the image

I recommend that you use Dicer for dicing your image. The illustrations here, which show you how the cuts are placed, are Dicer screenshots. You can download Dicer, which is freeware, from here

Load remote1.bmp into Dicer. When the image is displayed, you will see at the bottom that the output format is bmp. Use the Output format menu at the top of the screen, and change this to jpg. You will then see this display at the bottom right of the screen.

Dicer will only cut right across an image in any direction. All our horizontal cuts go right across, so we can make all the horizontal cuts in one go, and the cutting lines will look like this. If at any time you put a line in the wrong place you can delete it. Move your cursor to the arrow at the end of the line. It will change to a circle with a diagonal line in it. Click with your mouse to erase the line. A right mouse click puts a horizontal cutting line in line with the horizontal cross hair on the cursor right across the image. A left mouse click inserts a vertical cutting line. Your cursor may be anywhere in the image when you put a line in - you do not have to work from the edge and can place it on the edge of the screen or a button.

When you use file/process image you will find that Dicer puts some files in the folder where you had stored the bitmap. Remote1.bmp will still be there, untouched and whole, but you have gained remo.grd, remo.htm and seven jpg files named remo000.jpg - remo006.jpg.

It is vital that you keep remo.grd - you will need it for dicing the other copy. Delete remo.htm - we shall not be using that. We will rename the jpg files so that we know what they are for future reference. Some of them are going to be re-diced, and Dicer will only use the first 4 letters of a filename, so if all the pieces we get from the dicing operation are to be given distinctive names, we need to keep renaming after every set of cuts. These pieces are the rows for our off remote, so I suggest you name them offr1.jpg to offr7.jpg.

offr1.jpg has no buttons on it, so it needs no further dicing. offr2.jpg, however, contains the screen, so that must be isolated from the bits on either side of it.

It is hard to see the dice lines on this illustration, but the red arrows at the top show you where they are. Once more, move the jpg ouptut quality slider to 100, and process the file. This time Dicer has produced offr.grd which you must keep but rename to row2.grd; offr.htm which you must delete; and offr000.jpg to offr002.jpg, which you should rename to offr2a.jpg to offr2c.jpg. Giving the jpgs these names means you can always identify where a piece belongs in the jigsaw. The screen itself is row2, piece b, and this is the off version of it, so its filename is offr2b.jpg.

The next row which needs dicing is row 4 - offr4.jpg. Load it into Dicer, move the quality slider to 100 and make these cuts.

Just as you did before, rename offr.grd to row4.grd, delete offr.htm and rename offr000.jpg to offr004.jpg to offr4a.jpg to offr4e.jpg.

There is only one more row to dice now, row6, offr6.jpg, and it is exactly the same as row 4. Load offr6.jpg into Dicer, move the quality slider to 100, but now, instead of putting dice lines in, use File/load grid and load row4.grd. The dice lines will be put in for you, in exactly the same places as they were in row 4. Process the image.

You will get a new offr.grd, but you do not need to keep it because it is exactly the same as row4.grd, so delete it and offr.htm. Rename the offr000.jpg - offr004.jpg files to offr6a.jpg to offr6e.jpg. That completes dicing the first copy of the remote.

Dicing the second copy is much easier, because you already have the grids with the cutting lines. Load remote2.bmp, change the output format to jpg, quality 100, and use File/Load grid and load remo.grd. You now have the exact same cutting lines that you used for the off remote. Process the image.

This time you will not have gained a new .grd file, because it would have the same name as the old. You have remo.htm (delete that one) and the seven files remo000.jpg - remo006.jpg. We are only interested in the rows which have buttons in them in this copy of the remote, so rename remo001.jpg to onr2.jpg, remo003.jpg to onr4.jpg, remo005.jpg to onr6.jpg, and delete all the others.

Dice onr2.jpg using the row2.grd. We only want the screen piece, so rename onr2001.jpg to onr2b.jpg, and delete everything else Dicer produced at this cut - the new onr2.grd file, the htm, and two unwanted jpgs.

Dice onr4.jpg, using the row4.grd. We only need the buttons, onr4001.jpg and onr4003.jpg. Rename them onr4b.jpg and onr4d.jpg and delete all the other files Dicer produced at this cut. Do the same with onr6.jpg, except that the button pieces you keep will be renamed onr6b.jpg and onr6d.jpg.

You now have all the pieces you need to make the mouseover remote. You have the complete graphic diced for the off position, and the screen and the buttons for the on position. (At this stage the on and off screens are identical, but we will do something about that later). We move on now to the really exciting part - coding the remote.