daffl · September 30, 2013 02:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8" />
    <title>Phonegap hello world</title>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 </head>
 <body style="padding: 20px;">
    <div class="container">
        <div class="row">
            <ul class="list-unstyled" id="messages"></ul>

            <form role="form">
                <div class="form-group">
                    <input type="text" class="form-control" name="message" placeholder="Enter message" />
                </div>
                <button type="submit" class="btn btn-lg btn-primary col-xs-12">Send message</button>
            </form>
            <button class="picture btn btn-lg col-xs-12">Take picture</button>
        </div>
    </div>

    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:8080/socket.io/socket.io.js"></script>
    <script type="text/javascript">
        // Wait for device API libraries to load
        document.addEventListener("deviceready", onDeviceReady, false);

        // device APIs are available
        //
        function onDeviceReady() {
            // Empty
        }

        $(function() {
            var socket = io.connect('http://localhost:8080');

            function addMessage(message) {
                $('#messages').append('<li class="alert alert-success">' + message + '</li>');
            }

            function addImage(imageData) {
                var img = $('<img alt="Photo" class="col-xs-12">');
                img.attr('src', "data:image/jpeg;base64," + imageData);
                $('#messages').append($('<li class="alert">').append(img));
            }

            socket.on('image', addImage);
            socket.on('message', addMessage);

            $('form').submit(function(ev) {
                var messageEl = $('[name="message"]');

                addMessage(messageEl.val(), 'info');
                socket.emit('message', messageEl.val());

                messageEl.val('');
                ev.preventDefault();
            });

            $('.picture').click(function() {
                navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
                    destinationType: Camera.DestinationType.DATA_URL
                });

                function onSuccess(imageData) {
                    socket.emit('image', imageData);
                }

                function onFail(message) {
                    alert('Failed because: ' + message);
                }
            });
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Phonegap hello world</title>
	<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
	</head>
	<body style="padding: 20px;">
	<div class="container">
	<div class="row">
	<ul class="list-unstyled" id="messages"></ul>

	<form role="form">
	<div class="form-group">
	<input type="text" class="form-control" name="message" placeholder="Enter message" />
	</div>
	<button type="submit" class="btn btn-lg btn-primary col-xs-12">Send message</button>
	</form>
	<button class="picture btn btn-lg col-xs-12">Take picture</button>
	</div>
	</div>

	<script type="text/javascript" src="phonegap.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://localhost:8080/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	// Wait for device API libraries to load
	document.addEventListener("deviceready", onDeviceReady, false);

	// device APIs are available
	//
	function onDeviceReady() {
	// Empty
	}

	$(function() {
	var socket = io.connect('http://localhost:8080');

	function addMessage(message) {
	$('#messages').append('<li class="alert alert-success">' + message + '</li>');
	}

	function addImage(imageData) {
	var img = $('<img alt="Photo" class="col-xs-12">');
	img.attr('src', "data:image/jpeg;base64," + imageData);
	$('#messages').append($('<li class="alert">').append(img));
	}

	socket.on('image', addImage);
	socket.on('message', addMessage);

	$('form').submit(function(ev) {
	var messageEl = $('[name="message"]');

	addMessage(messageEl.val(), 'info');
	socket.emit('message', messageEl.val());

	messageEl.val('');
	ev.preventDefault();
	});

	$('.picture').click(function() {
	navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
	destinationType: Camera.DestinationType.DATA_URL
	});

	function onSuccess(imageData) {
	socket.emit('image', imageData);
	}

	function onFail(message) {
	alert('Failed because: ' + message);
	}
	});
	});
	</script>
	</body>
	</html>