Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Make the app behave more like a native app -->
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width, height=device-height" />
<!-- Bootstrap styles -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen" />
<title>BluetoothDemo</title>
</head>
<body>
<!-- Every application needs a topbar, right? -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">Bluetooth Demo</a>
</div>
</nav>
<!-- Actual content of the application hosted here -->
<div class="container">
<!-- On and Off buttons -->
<div class="row">
<div class="col-xs-6">
<button id="btn-bt-on" type="button" class="btn btn-success btn-lg btn-block btn-bt" disabled>
On
</button>
</div>
<div class="col-xs-6">
<button id="btn-bt-off" type="button" class="btn btn-danger btn-lg btn-block btn-bt" disabled>
Off
</button>
</div>
</div>
<!-- Discovery button -->
<div class="row" style="margin-top:16px;">
<div class="col-md-12">
<button id="btn-bt-discover" type="button" class="btn btn-info btn-lg btn-block btn-bt" data-loading-text="Discovering..." disabled>
<span class="glyphicon glyphicon-eye-open"></span> Start Discovery
</button>
</div>
</div>
<!-- The found devices appear inside this div -->
<div id="list-devices"></div>
</div>
<!-- Our precious libraries -->
<script src="js/lib/jquery.js"></script>
<script src="js/lib/bootstrap.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="phonegap.js"></script>
<!-- holds our templates in a single global 'templates' variable -->
<script src="js/templates.js"></script>
<!-- Basically our whole app -->
<script src="js/main.js"></script>
</body>
</html>
# Extend jQuery with helper functions to quickly enable/disable
# Bootstrap buttons
$.fn.extend
enable: () ->
return @removeAttr("disabled")
disable: () ->
return @attr("disabled", "disabled")
# When extending a Backbone Model, the second argument
# contains the class-methods and variables that can be
# accessed directly from the 'class' itself
BluetoothState = Backbone.Model.extend({}, {
Off: 1
Busy: 2
Ready: 3
Connected: 4
})
# We set our initial state as Off
Bluetooth = new BluetoothState({ state: BluetoothState.Busy })
# Model for our Bluetooth devices
Device = Backbone.Model.extend
defaults:
name: "name"
address: "address"
isConnected: false
# And the respective collection
DeviceCollection = Backbone.Collection.extend
model: Device
# View for a single bluetooth-device, that handles the
# connect and disconnect functionality
DeviceView = Backbone.View.extend
template: templates.device
events:
"click .btn-bt-connect": "connect"
"click .btn-bt-disconnect": "disconnect"
initialize: () ->
@model.on("change", @render, @)
# In 'subviews' it is customary to return 'this' for
# 'render'-method chaining via 'el'
render: () ->
@$el.html(_.template(@template, {
name: @model.get("name")
isConnected: @model.get("isConnected")
}))
return @
connect: () ->
onError = () =>
Bluetooth.set({ state: BluetoothState.Ready })
@$(".btn-bt-connect").button("reset")
gotUuids = (device) =>
onConnectionEstablished = () =>
onMessageReceived = (msg) =>
console.log(msg);
onConnectionLost = () =>
@model.set({ isConnected: false })
onError()
@model.set({ isConnected: true });
# When a connection has been established, we can start listening
# to received messages. We could also write to the current connection
# using 'window.bluetooth.write' method
window.bluetooth.startConnectionManager(onMessageReceived, onConnectionLost)
# After getting the UUIDs, we use the first one to try and
# establish connection with the device at given address
window.bluetooth.connect(onConnectionEstablished, onError, {
address: @model.get("address")
uuid: device.uuids[0]
})
Bluetooth.set({ state: BluetoothState.Busy })
@$(".btn-bt-connect").button("loading")
# We first get the UUIDs of the device we want to connect to
window.bluetooth.getUuids(gotUuids, onError, @model.get("address"))
disconnect: () ->
onDisconnected = () ->
@model.set({ isConnected: false })
Bluetooth.set({ state: BluetoothState.Ready })
Bluetooth.set({ state: BluetoothState.Busy })
window.bluetooth.disconnect(onDisconnected)
# This view acts as a 'parent' to 'DeviceViews' and appends them
# to the DOM-structure
DeviceListView = Backbone.View.extend
el: "#list-devices"
initialize: () ->
@collection.on("reset add", @render, @)
render: () ->
@$el.html("")
@collection.each (device) =>
@$el.append(new DeviceView({ model: device }).render().el)
# Gets called after phonegap has finished loading and is ready to be used
onDeviceReady = () ->
deviceList = new DeviceListView({ collection: new DeviceCollection })
# When Bluetooth changes its state (eg. Off, Ready), we
# adjust the UI elements to match the state
onBluetoothStateChanged = () ->
switch Bluetooth.get("state")
when BluetoothState.Off
$("#btn-bt-on").enable()
$("#btn-bt-off").disable()
$("#btn-bt-discover").disable()
$(".btn-bt-connect").disable()
$(".btn-bt-disconnect").disable()
when BluetoothState.Busy
$("#btn-bt-on").disable()
$("#btn-bt-off").disable()
$("#btn-bt-discover").disable()
$(".btn-bt-connect").disable()
$(".btn-bt-disconnect").disable()
when BluetoothState.Ready
$("#btn-bt-on").disable()
$("#btn-bt-off").enable()
$("#btn-bt-discover").enable()
$(".btn-bt-connect").enable()
$(".btn-bt-disconnect").enable()
when BluetoothState.Connected
$("#btn-bt-on").disable()
$("#btn-bt-off").disable()
$("#btn-bt-discover").disable()
$(".btn-bt-connect").disable()
$(".btn-bt-disconnect").enable()
# Invoked when 'On'-button is pressed
onToggleOn = () ->
onBluetoothEnabled = () ->
Bluetooth.set({ state: BluetoothState.Ready })
Bluetooth.set({ state: BluetoothState.Busy })
window.bluetooth.enable(onBluetoothEnabled)
# Invoked when 'Off'-button is pressed
onToggleOff = () ->
onBluetoothDisabled = () ->
Bluetooth.set({ state: BluetoothState.Off })
Bluetooth.set({ state: BluetoothState.Busy })
window.bluetooth.disable(onBluetoothDisabled)
# Invoked when 'Dicovery'-button is pressed
onDiscover = () ->
onDeviceDiscovered = (device) ->
deviceList.collection.add(new Device(device))
onDiscoveryFinished = () ->
Bluetooth.set({ state: BluetoothState.Ready })
$("#btn-bt-discover").button("reset")
Bluetooth.set({ state: BluetoothState.Busy })
# Bootstrap buttons have a special 'loading'-state, where the
# button is disabled and text is replaced with the one inside
# 'data-loading-text'-attribute
$("#btn-bt-discover").button("loading")
# Clear the current list of devices when discovery is started
deviceList.collection.reset()
# Start the discovery for Bluetooth devices
window.bluetooth.startDiscovery(onDeviceDiscovered, onDiscoveryFinished, onDiscoveryFinished)
# Set needed event-listeners
$("#btn-bt-on").on("click", onToggleOn)
$("#btn-bt-off").on("click", onToggleOff)
$("#btn-bt-discover").on("click", onDiscover)
Bluetooth.on("change", onBluetoothStateChanged)
# Do an initial check of Bluetooth-state
window.bluetooth.isEnabled (isEnabled) ->
if isEnabled
Bluetooth.set({ state: BluetoothState.Ready })
else
Bluetooth.set({ state: BluetoothState.Off })
# When 'deviceready'-event happens, we start our app
$(document).on("deviceready", onDeviceReady)
// Templates of our example BT app, uses underscore.js templating
var templates = {
// Single BluetoothDevice using Bootstrap components to
// display nicely
device:
"<div class='panel panel-default' style='margin-top:16px;'>" +
"<div class='panel-body'>" +
"<div class='row'>" +
"<div class='col-xs-8'><b><%= name %></b></div>" +
"<div class='col-xs-4'>" +
"<% if(isConnected) { %>" +
"<button type='button' class='btn btn-danger btn-block btn-bt btn-bt-disconnect'>" +
"<span class='glyphicon glyphicon-remove'></span> Disconnect" +
"</button>" +
"<% } else { %>" +
"<button type='button' class='btn btn-default btn-block btn-bt btn-bt-connect' data-loading-text='Connecting...' disabled>" +
"<span class='glyphicon glyphicon-transfer'></span> Connect" +
"</button>" +
"<% } %>" +
"</div>" +
"</div>" +
"</div>" +
"</div>"
}
@cheesuslovesme

This comment has been minimized.

Copy link

commented Apr 13, 2014

Can't find the library files (jquery.js, bootstrap.js, underscore,js, backbone,js). Where are they located?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.