Sports Whiteboard App
August 13, 2020 • Javascript
When coaching, it’s always helpful to visually explain to players what’s expected. Using a whiteboard, you can illustrate set plays, formations, drills, etc. However, whiteboards are usually big, take up space in your bag, cost money, and you can never seem to find the pen! Since a mobile phone is something you probably have with you all the time nowadays, why not use it as your whiteboard!
We developed a Sports Whiteboard web application using p5. The entire screen is a canvas allowing you to drag and drop objects and draw lines to illustrate anything you’d like!
Links
Features
- Generic board and objects to allow for use by a variety of sports
- Select from 12 different color options when adding objects or drawing
- Add objects easily by clicking/touching wherever you want them
- Adjust object location by dragging
- Draw and erase
- Easily clear the whiteboard and start over
- Works offline
Change Color
- Select the Change Color button to open the color palette.
- If you select a color, the Change Color button’s color will appear as the selected color.
- If you don’t select a color, you can click on the Change Color icon again to close the color palette.
Add Object (Toggle On/Off)
- There are two objects to choose from: Player and Circle.
- The circle can represent things like a cone or any type of sports ball.
- Select the Add Object button to enable or disable it.
- When enabled, select anywhere on the screen to place the object.
- The object’s color will depend on what’s currently selected as the color of choice.
Drag Object
- When none of the toggle buttons are enabled, then you are in drag mode where you can reposition any of the objects.
Draw (Toggle On/Off)
- Select the Draw button to enable or disable it.
- When enabled, drag anywhere on the screen to draw a line.
- The line’s color will depend on what’s currently selected as the color of choice.
Erase (Toggle On/Off)
- Select the Erase button to enable or disable it.
- When enabled, drag anywhere on the screen to erase lines.
- When enabled, select any objects to remove them.
Clear Board
- Select the Clear Board button to remove all objects and erase all lines.