Drill Generator Web Application
01.Сhallenge
Club coaches need to give training instruction to the online platform users with visuals. Uploading videos has several disadvantages and limitations, so the client requested to develop a tool for coaches that allows them publish training instruction in a clear and comprehensible way.
02.Solution
We developed Drill Generator — a 2D graphic editor as a standalone HTML5/Canvas application that allows creating graphic schemes or diagrams of training sessions in the form of a visual editor.
Coach can use a preset library of football-specific assets, and add other graphic objects, like lines and arrows, and text labels. All objects placed on canvas can be adjusted the same way you do it in a common graphic editor.
03.Main Features
- Create a new drill by using preset field size and background, or set custom dimensions
- Place preset graphic assets on the field
- Add straight and freehand lines and arrows
- Move, rotate, and resize any object
- Add text labels
- Adjust color, line type, and text size
- Highlight the desired region of the field
- Snap to grid option
- Use undo and redo options
- Save a drill as an image, or as an editable template to be used later
04.Animation
Drill Generator v2.0 includes creation of animated drills. A coach is able to make a frame-by-frame animation by moving the desired objects on the field. Created animations can be embedded into the drills library, and attached to the training instructions for players.
- Frame-by-frame animation
- Configurable delay of each frame
- Preview of completed animation
- Save animation as a video file to be added to the drills library
- Save animated drill as an editable template