Skip to content

Instantly share code, notes, and snippets.

@daffl
Created September 30, 2013 02:00
Show Gist options
  • Save daffl/6758496 to your computer and use it in GitHub Desktop.
Save daffl/6758496 to your computer and use it in GitHub Desktop.
A Phonegap Hello world chat and image posting example using Twitter Bootstrap and jQuery
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment