Web Annotator: Digital Playbook


Web Annotator is an iOS application that will let you display a web page inside the application and then draw on top of it. The web pages can use any web technology, HTML5/CSS/Javascript. I built this primarly as a digital playbook for coaching football. After seeing no other apps that offered the same functionality, I released it to the App Store. It doesn't have to be sports related, but that is the main use. Anything you might need to draw on top of can be displayed as long as it can be shown using HTML. The power is in what you design with HTML. The app just provides a place to host it and annotate.

Getting Started

If you've just downloaded the Web Annotator application and are looking for a basic template to import, then use one below. Just click on the sport name and when asked, open the file in Web Annotator and you'll see a basic HTML based template for that sport. They are primarly designed for use on iPads, they may not look as good on iPhones. You can modify them to suit your needs.

Templates to import into Web Annotator

Available Templates Description


Imaginary playbook with three plays. Two using images to dispaly, one using HTML to display and animate. Contains some generic backgrounds and defensive formation. Displays a number as large as possible on the screen for calling plays from the sideline.


Generic full court and half court images with the ability to add players for each team and move them around.


Generic full ice, one zone, and one zone with nuetral zone images with the ability to add players for each team and move them around.


Generic full field and half field images.


Generic full field and half field images.


Generic full field images.


All of the HTML used in the demonstration archive loaded when you first install the application. Can use this to see how it is

Frequently Asked Questions

  1. How do I create my own digital playbook or website?

    You can use any HTML technology, CSS/Javascript/HTML5, that would normally display in a browser. The templates above demonstrate simple menu bars with images. The football one shows more complex version to have images and/or HTML web pages with plays, possibly with animation, and tabs for play types. It can even call plays using numbers displayed on the screen. Feel free to download and unzip the football one to see how that is done. Once you've designed your digital playbook just zip up the contents while making sure the main page is named index.html and is in the root of the zip file and not inside a folder. Once zipped up, simply change the extension to webz.

  2. How do I get my digital playbook/website into the app?

    There are several ways to get your digital playbook into the app. Listed below are some of those ways.

    • Use Air Drop to Share a WEBZ or ZIP file.
    • Copy your WEBZ or ZIP file to your iCloud drive and then using the Files application import it.
    • Email a .ZIP or .WEBZ file to yourself and open it with this application.
    • Connect your device to iTunes and use iTunes file sharing to drag either a .ZIP, .WEBZ, or the web files directly.

  3. How do I navigate to the previous page?

    To give as much space as possible to your digital playbook/website, the embedded browser does not have any navigation bars. Everything can be done with gestures. To go back to the previous page, swipe your finger from left to right on the screen. You can also pinch zoom and swipe right to left to go forward.

  4. Can my digital playbook/website contain outside links?

    Yes. However, you will need to ensure the device you're running the app on has Internet connectivity. I have not tested every possible web scheme, but simple links should work. Downloading of files does not work, however. Those links will need to be opened in Safari directly.

  5. Can I embed video?

    Embedded HTML5 video, where the video file is in available locally, does work and you can draw on top of it. Remote video has not been tested.

  6. How do I save what I draw?

    The easiest way is to take a screen shot after drawing. If you'd like to record the motions, then activate screen recording before drawing.

  7. Can I store/retrieve data locally in my digital playbook/website?

    Yes, you can use localstorage to store data inside the browser of the application.

  8. How do I change the pencil color using Javascript?

    Call the javascript function webkit.messageHandlers.pencilColor.postMessage(). It takes a string as a paraemter that is an HTML color preceded by a #. The color is defined using two hexidecimal numbers for red, green, and blue. As an example, white is "#FFFFFF". See the demo application above for an example.

  9. How do I change the pencil width using Javascript?

    Call the javascript function webkit.messageHandlers.pencilWidth.postMessage(). It takes an integer as the parameter that is the pencil width. It must be 1 or greater. A common mistake is to send a string and not an integer as a parameter. See the demo application above for an example.

  10. How do I disable drawing and hide the pencil using Javascript?

    Call the javascript function webkit.messageHandlers.drawing.postMessage(). It takes a boolean, false disables drawing and true enables it again. If you disable drawing, you must enable it on page load or it will stay disabled even when navigating to another page. See the demo application above for an example.

  11. How do I quit my web application/playbook and return to the main menu using Javascript?

    Call the javascript function webkit.messageHandlers.exitWebview.postMessage(null). You must pass null as the parameter as iOS requires at least one parameter be passed. See the demo application above for an example.

  12. Can I edit my loaded digital playbook or website?

    If you have an HTML editor installed on your iOS device you can edit the files in place. Using the Files application you can see the Web Annotator Documents folder where it says "On My iPhone" or "On My iPad". Editing any files inside the Web Annotator directory will show next time you view your installed digital playbook/website.