Project Info

  • Type : Web Application Development
  • Client : Better Coaching
  • Location : Denmark
  • Client overview
    Danish Sports startup that offers a digital platform for football clubs to manage a complete training plan with individual programs, goals tracking, and communication center for sharing information between coaches and players.
#
#
#
#

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 dimentions
  • 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 Gererator 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
Prev Project