Scribd
Upload
3 views

Week 10

The Water Polo Whiteboard is a digital tool for coaches and players to visualize strategies with an intuitive interface for creating and sharing animations. It features drag-and-drop functionality, responsive design, and tools for animation and drawing, while proposed enhancements include personalization options, keyframe animation, and new features for better user experience. The platform is built using React and WordPress, with a subscription model for access.

Uploaded by

ducaleon69
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Week 10

The Water Polo Whiteboard is a digital tool for coaches and players to visualize strategies with an intuitive interface for creating and sharing animations. It features drag-and-drop functionality, responsive design, and tools for animation and drawing, while proposed enhancements include personalization options, keyframe animation, and new features for better user experience. The platform is built using React and WordPress, with a subscription model for access.

Uploaded by

ducaleon69
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Water Polo Whiteboard

Overview
●​ The water polo whiteboard is a digital tool designed for coaches and players to visualize
water polo strategies easily. It simplifies the creation of tactical plans, offering an intuitive
interface for creating and sharing animations

Inspiration websites to reference


●​ https://app.thehoopsgeek.com/playcreator
●​ https://www.soccerdrive.com/draw
●​ https://playspedia.com/
●​ https://waterpolostrategy.com/plays

Technology
●​ The current whiteboard is built in React with Javascript and HTML.
●​ The website is built on wordpress using Elementor page builder.
●​ The react project is exported to a build file, uploaded to ReactPress plugin and hosted
on a webpage via an iFrame.
●​ Users can pay for a subscription to access the whiteboard
Current Features:
●​ Drag and drop player and ball objects to move them around the board.
●​ Responsive size, works with touch on mobile and click on desktop
●​ Animation creation that exports to MP4
●​ Tools to draw 4 different types of arrows, freehand pen tool, add additional balls, and an
eraser to erase arrows and lines.
●​ Switch between half court and full court views.
●​ Instant positioning buttons to move players into commonly used player setups via
assigning player objects to coordinates.
●​ Editable player labels allow users to change the number displayed on each player object
○​ Quick labels based on different country numbering systems instantly update the
player object numbers

Proposed Features
🔥🔥🔥🔥🔥) 1 is low, 5 is high
Estimated level of effort (

🔥)
Personalization
-​ Changing team color (

🔥
-​
-​ Adding a background image ( )
-​ Question here, how can we have a user upload an image while logged in and then have
it saved? Wordpress API? Choice of background images?
🔥🔥
-​
-​ Team roster, initials/cap numbers ( )
-​ Similar question, how can we have the user upload or enter their roster so that it is
saved?

-​

Layout update ( 🔥🔥🔥 )


-​ Change the layout for QOL
-​ Move player label feature out of modal
-​ Minimize space that animation feature takes up
-​ Collapsable areas?
-​ Half/Full (remove “-Court”)
-​ Combine arrows into 1 arrow selector?

Keyframe animation ( 🔥🔥🔥🔥🔥 )


-​ Right now once you add a frame to the timeline, it is not editable, meaning you cannot
go back and change anything
-​ By switching to a keyframe animation technique, users would have more control over
creating animations
-​ Plays could then be saved as a file that can be reloaded and edited, and then exported
as a .MP4
-​ Plays could be saved and loaded as JSON files

Features
​ Add an arrow to denote a screen/pick ( 🔥)
a.​ Arrow with a line at the end

b.​
​ Add an arrow to denote a shot ( ) 🔥
a.​ Arrow with a crosshair at the end

b.​
​ Adding text to the whiteboard ( 🔥🔥 )
a.​ Tool that lets the user click on the whiteboard and type in a textbox that can then
be moved around or deleted
​ Adding body positioning elements ( 🔥🔥🔥🔥 )
-​ Toggle switch to activate this mode (adds arms and rotation ability)
-​ Add lines for arms
-​ Allow users to rotate players
-​ Number or text on player object should remain upright

-​

-​
-​ (arms at 160 and 20 degrees) .4 of length and 5 width
​ Magnet Mode ( 🔥🔥🔥🔥 )
-​ When Magnet Mode is activated, clicking a player and a ball links them together.
Dragging the player moves both objects in unison, with snapping guided by visual lines
at 45-degree intervals.
-​ Allows user to link 2 objects (player and player or player and ball) and move them
together
-​ Objects can snap to each other at 45 degree angles
-​ Visual indicators?

-​

You might also like