Army formation creator

The aim of this tool is to help you create a simplified version of a battlefield and in doing so help you plan out fictional battles and/or to just help you visualize a large fictional battle with ease.
The tool is pretty simple and straight forward, you click on the piece you want to add and they're immediately added to the battlefield. You can then drag them in a position you like, change their background color to indicate what army they belong to or whichever other meaning you'd like to attach to those colors and you can rotate the pieces. Like I said, it's very straight forward. But here's a list of more in depth instructions in case you need them.

Instructions

- Adding pieces: Simply click on the pieces in the lists marked 'Helmets', 'Weapons', 'Animals' and 'Vehicles & Siege'. Click on each to bring up their respective icon lists.
- Selecting pieces: Once you've added a piece to the battlefield (or empty canvas), simply click on it to turn its borders blue. It is now selected. You can select multiple pieces at the same time. Selected pieces can be rotated, deleted and their background color can be changed by clicking on colors you've added to your palette.
- The color palette: To add colors to your palette simply use the color selector, pick the color you like and click the 'add to palette' button. It'll add the color in the palette below. Clicking on a color in the palette will select it (border will turn blue) and all future icons added to the battlefield will be added with this background color. Click on the selected color again to deselect it. Future icons will now be added with a white background until you select a color again.
If you've selected icons on the battlefield (they'll have a blue border) selecting a color in the palette will change their background colors to the selected color as well. This doesn't happen if you deselect a color by clicking it while it's already selected.
The color picker doesn't work in older browsers, so if you see a text field instead I advise you to update your browser or simply enter your own hex values.
- Deleting pieces: Simply click 'delete selected' to delete all icons which have been selected (blue border) or click 'clear field' to delete everything on the field.
- Rotate pieces: Enter how many degrees you want the selected icons to turn and click the 'rotate selected' button.
- Field height: You can increase the size of the battlefield by entering how high you want the battlefield to be. Simply enter a number and click 'change field height' to set this height. Note that it's set in pixels, so use larger numbers. For reference, the default value is 400.
- Background color: Do you prefer a different background color for the battlefield? Simply pick a color using the color picker on the right and click 'Change background color' to change it. If you want to revert back to the standard blue use these values: Red: 21 Green: 31 Blue: 80
- Background image: If you prefer to use an image for the battlefield background, perhaps a muddy texture or something you drew yourself, simply enter the link to that background image in the input field and then click on 'Set background image' to change it. If you no longer want a background image simply leave the field empty and click the button again.
- Saving and loading: There are 4 save slots available. Simply click any of the save buttons and your battlefield, palette, background color and background image will be saved locally in your browser. Note that this only works if you're not using incognito mode. You can safely close your browser and come back at another time and load your battlefield again.
This feature does not work in older browsers.

NATO icons

The NATO Joint Military Symbology icons are used for map marking by NATO. Each icon has a meaning depending on the shape and symbol, but since there's loads of them it's easier to just link you to the Wikipedia page about it rather than explaining each in this section, so here's the link.

Saving the image

If you wish to save the battleground you've created all you have to do is click the 'Turn into image' button and an image will appear below it that looks exactly like what you've created. The only difference being that this is a single image, rather than a whole lot of separate images. Simply right click it, select 'save as' and name it what you wish. That's all there is to it.

Saving locally

It's also possible to save your army formation data locally. Simply click the "Save local" button to have the code create a text file with all the army formation code in it, then click on the download link to download it directly to your computer. Now you can use the "Choose file" field to upload your army formation data and use it in the future. This method makes sure there's no risk of losing all your data in case your browser data is wiped, for example, but it does mean keeping track of your downloaded file.