_phonegap.html

<style>
    #eventLog
    {
        /* We are using mobile device! Scrollbars are a bit annoying on mobiles, and
        so are disabled by default and must be enabled by force. */
        width: 100%;
        font-size: 8pt;
        min-height: 100px;
        box-sizing: border-box;
        font-family: monospace;
        border: solid 3px royalblue;
    }

    .audio-buttons a
    {
        width: 100%;
        margin-bottom: 7px;
        box-sizing: border-box;
    }

    .audio-buttons div.pull-left, .audio-buttons div.pull-right
    {
        width: 45%;
        box-sizing: border-box;
    }
</style>

<!-- Connection -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_connection_connection.md.html#Connection -->
<!-- Needs: <feature name="http://api.phonegap.com/1.0/network"/> in config.xml! -->

<h1 data-i18n="phonegap.connection.title">phonegap.connection.title</h1>

<p><span data-i18n="phonegap.connection.label">phonegap.connection.label</span>: <span id="connectionType" style="font-weight: bold" data-i18n="phonegap.loader">Please, wait...</span></p>

<div class="page-header"></div>


<!-- Geolocation -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_geolocation_geolocation.md.html#Geolocation -->
<!-- Needs: <feature name="http://api.phonegap.com/1.0/geolocation"/> in config.xml! -->

<a id="btnGeolocationStart" class="btn btn-primary btn-large">Geolocation</a>
<a id="btnGeolocationStop" class="btn btn-info btn-large" style="display: none">Geolocation</a>

<p></p>
<p><span id="positionText"></span></p>

<div class="page-header"></div>


<!-- Accelerometer -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_accelerometer_accelerometer.md.html#Accelerometer -->

<a id="btnAccelerationStart" class="btn btn-primary btn-large" data-i18n="phonegap.acceleration.title">phonegap.acceleration.title</a>
<a id="btnAccelerationStop" class="btn btn-info btn-large" data-i18n="phonegap.acceleration.title" style="display: none">phonegap.acceleration.title</a>

<p></p>
<p><span id="accelerationText"></span></p>

<div class="page-header"></div>


<!-- Compass -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_compass_compass.md.html#Compass -->

<a id="btnCompassStart" class="btn btn-primary btn-large">Compass</a>
<a id="btnCompassStop" class="btn btn-info btn-large" style="display: none">Compass</a>

<p></p>
<p><span id="compassText"></span></p>

<div class="page-header"></div>


<!-- Media -->
<!-- Example: https://gist.github.com/alunny/2380994 -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_media_media.md.html#Media -->
<!-- Needs: <feature name="http://api.phonegap.com/1.0/media"/> in config.xml! -->

<h3>Media</h3>

<div class="audio-buttons">
    
    <div class="pull-left">
        
        <a class="btn btn-small" onclick="app.playAudio('audio/hangout.m4a')"><kbd>hangout.m4a</kbd></a>
        <a class="btn btn-small" onclick="app.playAudio('beep.wav')"><kbd>beep.wav</kbd></a>
        
    </div>
    
    <div class="pull-right text-right">
        
        <a class="btn btn-small" onclick="app.playAudio('audio/averno.mp3')"><kbd>averno.mp3</kbd></a>
        <a class="btn btn-small" onclick="app.playAudio('audio/mayday.mp3')"><kbd>mayday.mp3</kbd></a>
        
    </div>
    
    <div style="clear: both"></div>

</div>

<div class="page-header"></div>


<!-- Battery -- only available through events -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_events_events.md.html#Events -->
<!-- Needs: <feature name="http://api.phonegap.com/1.0/battery"/> in config.xml! -->

<h3>Battery</h3>

<p>Level: <strong><span id="lblBatteryLevel">[waiting]</span></strong></p>
<p>Status: <strong><span id="lblBatteryStatus">[waiting]</span></strong></p>
<p>Charging: <strong><span id="lblBatteryPlugged">[waiting]</span></strong></p>

<div class="page-header"></div>


<!-- Events -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_events_events.md.html#Events -->

<h3>Event log</h3>

<p><div id="eventLog"></div></p>

<div class="page-header"></div>


<!-- Storage -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_storage_storage.md.html#Storage -->
<!-- Normal storage an maybe fileReader example: -->
<!-- https://gist.github.com/alunny/1904992 -->
<!-- http://docs.phonegap.com/en/3.0.0/cordova_file_file.md.html#FileEntry -->

<h3>Storage</h3>

<p></p>
<p>To be continued...</p>

<div class="page-header"></div>

<!-- Notification -->
<!-- API: http://docs.phonegap.com/en/3.0.0/cordova_notification_notification.md.html#Notification -->
<!-- Needs: <feature name="http://api.phonegap.com/1.0/notification"/> in config.xml! -->

<a id="btnNotificationBeep" class="btn btn-inverse btn-large">Beep!</a>
<a id="btnNotificationVibrate" class="btn btn-danger btn-large">Vibrate!</a>

<div class="page-header"></div>

<!-- Bottom description and code -->

<p></p>

<p data-i18n="phonegap.description">phonegap.description</p>

<script type="text/javascript">
/*<![CDATA[*/
    function onAccelerationSuccess(acceleration)
    {
        var timestampText = i18n.t('phonegap.acceleration.line2', {timestamp: acceleration.timestamp});
        
        acceleration.x = app.ensureValue(acceleration.x.toFixed(2), ' m/s\u00b2');
        acceleration.y = app.ensureValue(acceleration.y.toFixed(2), ' m/s\u00b2');
        acceleration.z = app.ensureValue(acceleration.z.toFixed(2), ' m/s\u00b2');

        var accelerationText = i18n.t('phonegap.acceleration.line1',
        {
            axis: 'X',
            acceleration: acceleration.x
        });

        accelerationText = accelerationText + '<br />' + i18n.t('phonegap.acceleration.line1',
        {
            axis: 'Y',
            acceleration: acceleration.y
        });

        accelerationText = accelerationText + '<br />' + i18n.t('phonegap.acceleration.line1',
        {
            axis: 'Z',
            acceleration: acceleration.z
        });

        $('#accelerationText').html(accelerationText + '<br />' + timestampText);
    }
    
    function onAccelerationError()
    {
        $('#accelerationText').html(i18n.t('phonegap.acceleration.error'));
    };
    
    function onCompassSuccess(compass)
    {
        compass.trueHeading = app.ensureValue(compass.trueHeading.toFixed(2), '\u00b0');
        compass.magneticHeading = app.ensureValue(compass.magneticHeading.toFixed(2), '\u00b0');
        compass.headingAccuracy = app.ensureValue(compass.headingAccuracy.toFixed(2), '\u00b0');
        
        var
            timestampText = 'Current timestamp is "<strong>' + compass.timestamp + '</strong>".',
            headingText = '<strong>Magnetic heading</strong> is <strong>' + compass.magneticHeading + '</strong>.<br />';
    
        headingText = headingText + '<strong>True heading</strong> is <strong>' + compass.trueHeading + '</strong>.<br />';
        headingText = headingText + '<strong>Heading accuracy</strong> is <strong>' + compass.headingAccuracy + '</strong>.';

        $('#compassText').html(headingText + '<br />' + timestampText);
    }
    
    function onCompassError(CompassError)
    {
        if(CompassError.code === CompassError.COMPASS_NOT_SUPPORTED)
        {
            $('#compassText').html('<strong>ERROR</strong>: Compass is not supported on this device!');
        }
        else if(CompassError.code === CompassError.COMPASS_INTERNAL_ERR)
        {
            $('#compassText').html('<strong>ERROR</strong>: Internal compass error!');
        }
        else
        {
            $('#compassText').html('<strong>ERROR</strong>: Unknown compass error!');
        }
        
        console.log(CompassError);
    };
    
    function onGeolocationSuccess(position)
    {
        console.log(position);
        
        var
            coords = position.coords,
            timestamp = position.timestamp;
        
        coords.speed = app.ensureValue(coords.speed, ' m/s');
        coords.heading = app.ensureValue(coords.heading, '\u00b0');
        coords.altitude = app.ensureValue(coords.altitude, ' m');
        coords.latitude = app.ensureValue(coords.latitude);
        coords.accuracy = app.ensureValue(coords.accuracy, ' m');
        coords.longitude = app.ensureValue(coords.longitude);
        coords.altitudeAccuracy = app.ensureValue(coords.altitudeAccuracy, ' m');
        
        var
            timestampText = 'Current timestamp is <strong>' + timestamp + '</strong>.',
            geoText = '<strong>Longitude</strong> is <strong>' + coords.longitude + '</strong>.<br />';
    
        geoText = geoText + '<strong>Latitude</strong> is <strong>' + coords.latitude + '</strong>.<br />';
        geoText = geoText + '<strong>Accuracy</strong> is <strong>' + coords.accuracy + '</strong>.<br />';
        geoText = geoText + '<strong>Altitude</strong> is <strong>' + coords.altitude + '</strong>.<br />';
        geoText = geoText + '<strong>Altitude Accuracy</strong> is <strong>' + coords.altitudeAccuracy + '</strong>.<br />';
        geoText = geoText + '<strong>Heading</strong> is <strong>' + coords.heading + '</strong>.<br />';
        geoText = geoText + '<strong>Speed</strong> is <strong>' + coords.speed + '</strong>.';
        
        $('#positionText').html(geoText + '<br />' + timestampText);
    }
    
    function onGeolocationError(PositionError)
    {
        console.log(PositionError);
        
        if(PositionError.code === PositionError.PERMISSION_DENIED)
        {
            $('#positionText').html('<strong>ERROR</strong>: User does not allow your application to retrieve position information! Additional error message: "' + PositionError.message + '".');
        }
        else if(PositionError.code === PositionError.POSITION_UNAVAILABLE)
        {
            $('#positionText').html('<strong>ERROR</strong>: Position unavailable -- Device is unable to get a satellite fix! Additional error message: "' + PositionError.message + '".');
        }
        else if(PositionError.code === PositionError.TIMEOUT)
        {
            $('#positionText').html('<strong>ERROR</strong>: Timeout -- Device is unable to retrieve a position within the specified time! Additional error message: "' + PositionError.message + '".');
        }
        else
        {
            $('#positionText').html('<strong>ERROR</strong>: Unknown geolocation error! Additional error message: "' + PositionError.message + '".');
        }
    };
    
	$(function($)
    {
        var
            compassID = 0,
            geolocationID = 0,
            accelerationID = 0;
            
        /**
         * Acceleration
         */
        $('body').on('click', '#btnAccelerationStart', function()
		{
            var accelerationOptions =
            {
                frequency: 100
            };
            
			accelerationID = navigator.accelerometer.watchAcceleration(onAccelerationSuccess, onAccelerationError, accelerationOptions);
			
			$('#btnAccelerationStop').show();
			$('#btnAccelerationStart').hide();
		});

		$('body').on('click', '#btnAccelerationStop', function()
		{
			navigator.accelerometer.clearWatch(accelerationID);
            
			$('#btnAccelerationStart').show();
			$('#btnAccelerationStop').hide();
            $('#accelerationText').empty();
		});
        
        /**
         * Compass
         */
		$('body').on('click', '#btnCompassStart', function()
		{
            var compassOptions =
            {
                frequency: 100
            };
            
			compassID = navigator.compass.watchHeading(onCompassSuccess, onCompassError, compassOptions);
			
			$('#btnCompassStop').show();
			$('#btnCompassStart').hide();
		});

		$('body').on('click', '#btnCompassStop', function()
		{
			navigator.compass.clearWatch(compassID);
            
			$('#btnCompassStart').show();
			$('#btnCompassStop').hide();
            $('#compassText').empty();
		});
 
        /**
         * Geolocation
         */
		$('body').on('click', '#btnGeolocationStart', function()
		{
            var geolocationOptions =
            {
                timeout: 21000,
                maximumAge: 3000,
                enableHighAccuracy: true
            };
            
			geolocationID = navigator.geolocation.watchPosition(onGeolocationSuccess, onGeolocationError, geolocationOptions);
			
			$('#btnGeolocationStop').show();
			$('#btnGeolocationStart').hide();
		});

		$('body').on('click', '#btnGeolocationStop', function()
		{
			navigator.geolocation.clearWatch(geolocationID);
            
			$('#btnGeolocationStart').show();
			$('#btnGeolocationStop').hide();
            $('#geolocationText').empty();
		});
                
        /**
         * Notification
         */
		$('body').on('click', '#btnNotificationVibrate', function()
		{
			navigator.notification.vibrate(1000);
		});
        
		$('body').on('click', '#btnNotificationBeep', function()
		{
            /**
             * The iPhone does not feature a native beep API. Cordova implements
             * beeps by playing an audio file via the media API. The app must provide
             * a file with the desired beep tone. This file must be less than
             * 30 seconds long, located in the www root directory, and must be named
             * `beep.wav`.
             * 
             * Good beep-click sounds library: http://www.soundjay.com/button-sounds-1.html
             * .wav File Signal Generator: http://www.audiocheck.net/audiofrequencysignalgenerator_sinetone.php
             */
			navigator.notification.beep(3);
            app.writeEventLog('btnNotificationVibrate.click();');
		});
    });
/*]]>*/
</script>