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.
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.
| Available Templates | Description |
|---|---|
Football |
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. |
Basketball |
Generic full court and half court images with the ability to add players for each team and move them around. |
Hockey |
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. |
Soccer |
Generic full field and half field images. |
Lacrosse |
Generic full field and half field images. |
Baseball |
Generic full field images. |
Demo |
All of the HTML used in the demonstration archive loaded when you first install the application. Can use this to see how it is |
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.
There are several ways to get your digital playbook into the app. Listed below are some of those ways.
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.
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.
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.
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.
Yes, you can use localstorage to store data inside the browser of the application.
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.
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.
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.
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.
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.