Grow your CSS skills. Land your dream job.

Feedback on my Interactive Sports Diagrams

  • # September 21, 2012 at 10:32 am

    Hi everyone,

    I created interactive sports diagrams for various sports to help coaches easily diagram lineups, plays, and drills on their internet capable phone.

    I would appreciate feedback on them. If there are better ways of writing the jquery code let me know.

    The diagrams are available at http://www.jacorre.com/sports/.

    Thank you!

    # September 22, 2012 at 3:02 pm

    Nice!

    It might be more convenient if the diagrams had some default lineups so they can choose one and then just move the existing icons around instead of dragging new ones down and then having to keep count of how many are on the field.

    Also being able to draw arrows on the layout would be nice. Player 1 moves from this spot to this spot, like in the play books!

    Lastly, add an ability to save and load, maybe even print when they are connected to a printer, the layouts.

    # September 22, 2012 at 4:30 pm

    I checked it out at a public hotspot and it looks great, just a tad slow to load. I agree with Mottie’s suggestions. Perhaps look into a way that you can cache all the elements onto the user’s device, lets say an iPad (would be perfect for this). Then, when on the sidelines without WiFi, they can still use the application offline.

    Just to reiterate, a favorites list for the user and predetermined starting layouts. It would be cool if you could save some basic formations like the Umbrella for the hockey one. This is a sweet application idea.

    **EDIT: Perhaps a combination of Cache Manifest and localStorage would make the above suggestions possible.

    # September 22, 2012 at 8:02 pm

    Thanks for the feedback and suggestions! I will definitely take them into consideration and continue to fine tune the diagram functionality.

    # September 22, 2012 at 8:12 pm

    @Mottie I included arrows to drag out to show direction, but yes people have been asking for a way to draw lines. I was trying to keep it simple but I guess I can see a need for drawing movement.

    # September 23, 2012 at 9:16 am

    Any suggestions on how to handle the screen orientation in relation to the player positions on the field? I adjust the field orientation based on the screen size. But I think it would be a bit difficult to adjust the positions of the players based on the screen size changing?

    # October 2, 2012 at 7:49 pm

    @Mottie and @pmac627, I have added preset formations to the sport of [Soccer](http://www.jacorre.com/sports/soccer/soccer.html “Soccer”) (still need to work on the other sports next).

    I also included a Save option which uses local storage. A message will appear stating nothing can be saved if the user’s browser cannot do local storage.

    If you have something in local storage, it will load that on page load. If not it will load the default formation.

    The field will adjust based on the screen orientation. I also had the formations adjusting to the screen orientation. However, I ran into a problem with this because on smaller screens, the screen’s size can adjust with the slightest movements and that was causing the formation to adjust itself often. This would be annoying to a user trying to place players in certain positions and then seeing the formation reset itself because the screen size changed slightly.

    # October 2, 2012 at 9:29 pm

    @jacorre – Perhaps it would be worth looking into forcing the page to stay horizontal? Anyway, I’d hope the user would be using a larger screen such as a tablet. A phone might be too small for a whole team to see. Not really a fault of the application, but the technology to present it. Looks great.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".