My goal was to use nothing but client-side Dynamic HTML (mainly JavaScript), so that you would not need to download any special plug-ins or components. This way any machine running IE could use the app. Well, OK, I did not quite get there. I wound up having to write one easily-installed component (ImageHandler) so you could save an image of your map directly to a JPEG file. Oh well...
Of course, if you don't want to install ImageHandler, you can always save your maps just by pressing the "print screen" button and pasting the window image from the clipboard into Paint or a similar bitmap-editing tool.
Have you ever wanted to write up an article about a battle you have played? How did you make the map? Unless you have a specialized tool such as GameMapr or CyberBoard, you probably made a sketch map of the game table and either scanned it in or just included it as-is with your article text. Let's be honest: Maps like that don't really look all that good.
But what if you could re-draw your sketch map using standardized symbols, then save it off as an image file? What if you could easily move the symbols on the map around, saving each phase of the game to a new image file. It would suddenly be a lot easier to write your article, don't you think?
That is the purpose behind "Gbgen". I am hoping that gamers will use it to create good-looking, maybe even professional-looking maps of their battles, then include them in articles or campaign diaries.
If you try using Gbgen, I would be very interested in your feedback; please use the feedback link on the settings page to send me an e-mail and tell me what you think of the application.
Gbgen is a "work in progress", so I am open to (reasonable) suggestions for improvements and additions.
Thanks for reading this, and I hope you find Gbgen fun and useful.
Browser Requirements
This page requires JavaScript, frames, and
Internet Explorer 5 or later to work properly. Netscape 6.1 does not seem to
work correctly.
Acknowledgements:
The web page is divided into three frames.
The top-left frame displays the wargame table map you will be drawing. The map intially shows a table 8 squares by 6 squares. it can be shrunk to 1 X 1 or expanded to 8 X 12.
The bottom-left frame shows the help text for the application.
The right frame shows the map controls and terrain pieces you map place into the squares.
All frames are scrollable and can be resized.
This select list lets you set the background color of the map.
This select list lets you set the side-to-side length of the map. The default is 8 squares.
This select list lets you set the top-to-bottom width of the map. The default is 6 squares.
This checkbox shows/hides the grid lines for the map. The outline ofthe map area is always visible.
For developer use only (unless you like seeing alerts all over the place...).
You enter or leave select mode either by clicking on the "multi-select mode" checkbox.
You may also toggle in and out of select mode when control is in the map frame by pressing the <alt+s> keys (lower case). Be careful doing this; the alt key also causes all selected objects to rotate by 180 degrees. Try to press them both at the same time.
When you enter multi-select mode, the behavior of the map changes. You may not place new objects when in select mode. When you click on a map object, a box appears around it, to show that it has been selected. You may select as many objects as desired.
To unselect them, simply click in a neutral area of the map.
When a set of objects has been selected, you may:
Note on rotation: You must click on one of the selected objects to perform rotation. The cursor must be showing as a "hand".
This control lets you browse to an image file on your hard disk, or enter the URL of an image file on the internet. You may then use this as the source of custom symbols not included in the regular application.
First use the browse button to navigate to the desired image file and select it.
Then click the "Load user image" checkbox.
Now, if you click on a neutral area of the map screen (when the cursor is a crosshair), a copy of your custom image will be placed at that location. You can then move or rotate it just like any other image.
By entering a pathname to a JPEG file on your machine into the text box provided, and clicking on the "Save Map" button, you can save an image of your map to disk as a JPEG image file. This control uses an applet, and also requires that you have installed the ImageHandler component (it's easy to do).
If "Save map area only" is checked, then only the map itself is saved (with a small amount of whitespace around the edges). Otherwise the entire visible map frame area is saved. You may size this area by resizing the frame area.
Example:
ImageHandler is a component -- that is, a small program used by other programs -- which lets you save an image of your map directly to disk as a JPEG file.
Installing ImageHandler takes less than 2 minutes, and you only need to do it once:
If you have an interest in how ImageHandler works, click here to read about it in detail.
This button causes everything outside the map edges to be cut off. You may mask the map edges as many times as you like, but you may have to re-enter any captions you have placed outside the map edges.
This button causes the grid lines to pop to the top of the images queue, thus making them show up over your map objects.
Once you bring the grid to the top, there is no way to send it back to the bottom (not that I could figure out, anyway...).
This checkbox lets you say that you want to place text blocks onto the map.
The Length text box lets you specify how long the text block will be. All text blocks are single-line.
Size lets you set the font size of the text block (6-point, 10-point, or 16-point).
Weight lets you set the font to be normal or bold weight.
Text blocks cannot be rotated.
This select list lets you set the angle at which new image objects will appear when pasted into the map area.
This select list lets you set color for the symbols in the "units" column. The symbols in the column will change to the selected color.
A map object is an image or a text block.
Image Objects
Terrain and symbol images are usually shown at 1/4 actual size. Most unit images are shown full size.
To place a map image, click on the desired image in the settings frame. Its border will become thick red, to indicate which has been selected.
Move your cursor into the map frame. The cursor will change to a cross-hair. Any time the cursor is a cross-hair, it is in a "neutral" area of the map, and you can click at that spot to place a new image or text area.
You can only place images when the cursor is a crosshair.
Wherever you click, the selected image will appear.
To place text blocks on the map, check the "Create Text" checkbox. You may also set the length and other properties at this time.
Now when you click on the map (when the cursor is a crosshair), an empty 1-line text block will appear where you click. You may then type into the text block and move it around the map freely. Text blocks may not be rotated.
If you hold down the alt key and click in a text block, the background will toggle between white and clear. You may have to click and press alt a couple of times to get this property to "take".
You may set the size of the text in the text block to small, normal, or large, and set the weight to normal or bold.
You may give your text block a border by clicking the border checkbox. The border will disappear if you toggle the text to be clear. It will reappear if you toggle the text to be opaque again.
To erase a map image, hold down the ctrl+alt keys and click on the object. It will disappear. You can also just shove objects out of the browser window (this is actually quicker and easier).
To erase a text block, you must enter multi-select mode, click on the text block, then press alt+x to erase it.
To move an object from point to point, move the cursor atop it, so that it changes to a hand symbol. Then drag the object to a new location.
Whenever the cursor is a hand, you can move that object in question.
Rotating Images By Standard Angles
You may rotate images as follows:
Rotation is always clockwise.
Copying Images
You may make a copy of animage by holding down the alt+shift keys, and
clicking on the desired image. The copy will appear slightly offset from the
original. It will have the same size and angle as the original.
Enlarging Images
You may enlarge an image by double-clicking on it, with no special keys held down. The symbol will increase in size 25% each time you double-click on it. There is no way to shrink images.
File Save will not save the page properly to let you re-display the same map, since the images have been placed into it dynamically.
You may of course print off your map by clicking in the map frame and using your print button. However, most printers will not render rotated images correctly.
You may use your "print screen" button to save an image of the entire screen to the clipboard. Then open a paint program such as MS Paint and paste the large clipboard image into the paint program. You may now select the wargame table map and save it off as a separate image, or paste it into a document file such as a Word document or Excel spreadsheet.
Lastly, you may install ImageHandler and save copies of your map area directly to disk as JPEG files.