Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser. Upcoming version 10 of Internet Explorer should also handle it.

Utah's Wildlife-Vehicle Collision Reporting System

Scott Davis, Utah AGRC

Bio



Other Projects

Objectives
Project Intro
Mobile
Desktop
"I can do anything."

Why All This Fuss About Roadkill?

Citizen and Wildlife Projection

Mitigation Planning

Photos © P.Cramer USU, UDWR, UDOT

Herd Health Tracking

(Xyphoid Fat Measurement)

Roadkill Reporter

vs.

Wildlife-Vehicle Collision Reporter

Nail down a project name before you begin!

Application Type? Pro's vs. Con's
Native

Web

Hybrid
*BuildMobile Article
Performance & Stability
Easy Access to Device Hardware
Enterprise Distribution is a Pain
Platform-specific Development Environment
Slow Updates
Examples:
wunderlist.com
Angry Birds
Single Codebase on All Devices
Re-use Existing Web Skills
Instant Install & Updates
Limited OS Access
Examples:
mail.google.com
twitter.com
Single Codebase & App Store
Better OS Access
Distribution & Updates
Examples:
Phonegap Facebook
UI Framework? Pro's vs. Con's
Dojo Mobile

jQuery Mobile
It's Dojo!
Native Look & Feel
Phonegap Ready
Wasn't Mature in 2011 (dojo 1.6)
Momentum & Maturity
Simple
jQuery

                <!DOCTYPE html>
                <html>
                    <head>
                        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
                        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
                        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
                    </head>
                    <body>
                        <div data-role='page'>
                            <div data-role='header'>
                                <h1>jQuery Mobile Example</h1>
                            </div>
                            <div data-role='content'>
                                <h2>Button</h2>
                                <button>Demo Button</button>
                                <h2>Text Box</h2>
                                <input type='text'/>
                                <h2>Select</h2>
                                <select data-native-menu='false'>
                                    <option value='1'>please select an option</option>
                                    <option value='2'>option 1</option>
                                    <option value='3'>option 2</option>
                                    <option value='4'>option 3</option>
                                </select>
                            </div>
                        </div>
                    </body>
                </html>

Drum Roll Please...

HTML5 Geolocation API


            var timerid = navigator.geolocation.watchPosition(function(pos){
                that.processPosition(pos);
            }, function(er) {
                ...
                navigator.geolocation.clearWatch(timerid);
                navigator.geolocation.watchPosition(function(pos){
                    that.processPosition(pos);
                }, function(er){...},
                {timeout: 10000, enableHighAccuracy: false});
            }, {
                enableHighAccuracy: true
            });

Use watchPosition() instead of getCurrentPosition() for higher accuracy.

HTML5 Doctor

Offline/Cache Manifest


            <html manifest="roadkill.appcache">

Increment version number in manifest file.
Don't bother with it during active development.

Performance
HTML5 Rocks Article
roadkill.appcache 

            CACHE MANIFEST

            # Version: 77

            CACHE:
            css/core.css
            css/images/ajax-loader.png
            css/images/icons-18-white.png
            css/images/icons-18-black.png
            css/images/icons-36-white.png
            css/images/icons-36-black.png
            css/jquery.mobile-1.0.min.css

            images/icon.png
            images/splash.png

            dojo.js
            roadkill_en-us.js
            roadkill.js

            index.html

            NETWORK:
            *
LocalStorage used to store reports offline for later submission to server.
Web Inspector Remote (Weinre)
Twitter's Bootstrap

Be careful with css collisions with ESRI's JavaScript API. 


            input, textarea {
              -webkit-transform-style: preserve-3d;
            }
            .btn {
              -webkit-transform-style: preserve-3d;
            }

Drum Roll Please...

Desktop App
ClusterLayer from globoserv

Python GP Web Services

Pass in all parameters; pass "" for optional params.
Make sure to specify a scheme (in ArcCatalog) for all input parameters of type FeatureSet. 

            import arcpy

            '''
            GP Parameters
            0 - route
            1 - fromMP
            2 - toMP
            3 - outSegment - FeatureSet
            '''

            arcpy.env.overwriteoutput = True

            # variables
            route = arcpy.GetParameterAsText(0)
            fromMP = float(arcpy.GetParameterAsText(1))
            toMP = float(arcpy.GetParameterAsText(2))

"You'll be famous!" - @MattAGRC

Scott Davis, Utah AGRC

@ScottAGRC | stdavis@utah.gov

Presentation built with impress.js (dramamine not included).
Wrench icon by http://dryicons.com
David and Goliath © By Intellectual Reserve, Inc. Used by permission.