Taktiktafel - A Soccer Chalkboard

Taktiktafel is a chalkboard for a soccer match, running in the browser. It is written in JavaScript and stores data locally using Web Storage, therefore it basically works offline.

Interface Overview

The interface can be divided into five different regions that are highlighted in the screenshot on the left:
  1. The pitch.
  2. An area for the home team.
  3. An area for the away team.
  4. A timeline.
  5. A controls bar.
Players can be moved anywhere along the pitch or on one of the team areas. You can connect players with a line, or draw on the pitch. The current state of the players and the pitch can be saved with an entry on the timeline, or loaded from such an existing entry.

Move Players

You can move the players along the pitch simply by dragging them with the left mouse button pressed. In the screenshot on the left you can see an example where all players from one team are positioned on the pitch.

What you can also see is that the players have "names" (or descriptions) associated with them. If you move the mouse below the circle that represents the player, you can enter these displayed names.

You can also change the colors of a team by changing the color values in the box at the top of the corresponding team's area.

Draw Things

You can draw on the pitch by moving the mouse with the left mouse button pressed. Select the color from one of the boxes on the left side of the "Controls" region.

Click the "Clear" button to remove all drawings from the pitch, or select the erase color left to the "Clear" button to remove drawings just as if you were drawing.

Connect Players

You can connect players with a line. The line is created the first time you right-click on a player, and then follows the mouse until you right-click a second time on a player. If it is a different player, the line will connect both, if it is the same player the line will be removed.

These connections differ from the drawings, because they follow the movements of the players.

To remove an existing connection, left-click on the line.

Take Snapshots

You can left-click anywhere on the timeline to create a snapshot of the current state of the pitch. The snapshot will be represented by a marker "X" on the timeline.

If you then change something on the pitch (for example by clicking on the "Reset Pitch" button to remove all connections and reset the player positions), you can restore the previous state by left-clicking on the marker that was placed on the timeline.

A right-click on the marker will remove it, as well as the snapshot associated with it. Clicking the "Remove Saved Data" Button will remove all saved states.

If your browser supports Web Storage the snapshots will be saved by the browser, so that they are not lost when the browser (or tab) is closed. Beware however that only the snapshots are saved, not the current state of the pitch. Also note that Web Storage does not work cross-browser. To remove all locally stored data, click the "Remove Saved Data" button.