Daniel Lee
Published © GPL3+

Unleash Simblee UI With Customized Mobile App

Explore UI beyond Simblee's Arduino Sketch native UI.

BeginnerFull instructions provided1 hour1,999
Unleash Simblee UI With Customized Mobile App

Things used in this project

Hardware components

RFD77801 Simblee Starter Kit
×1

Software apps and online services

Evothings Studio
Evothings Studio
Arduino IDE
Arduino IDE

Story

Read more

Schematics

Simblee RFD77201 7pin DIP Schematic

RFD22121 USB Shield Schematic

RFD22122 LED Shield Schematic

Code

index.html

HTML
<!DOCTYPE html>
<html>
<!--
This is an example app that demonstrates how to control an
Simblee RFD77201 board using BLE (Bluetooth Low Energy).

Please note that this example requires an Simblee RFD77201 plus
and RGB LED Button shield (RFD22122). In addition, an
USB shield (RFD22121) is needed for programming the
Simblee from a PC orMac.
-->
<head>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no,
		shrink-to-fit=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

	<title>Simblee LED On/Off</title>

	<style>
		@import 'ui/css/evothings-app.css';
	</style>

	<style>
	div {
		margin: 10px 0px;
	}
	button {
		margin: 5px 0px;
	}
	.lead {
		font-weight: bold;
	}
	</style>

	<script>
	// Redirect console.log to Evothings Workbench.
	if (window.hyper && window.hyper.log) { console.log = hyper.log }
	</script>

	<script src="cordova.js"></script>
	<script src="libs/jquery/jquery.js"></script>
	<script src="libs/evothings/evothings.js"></script>
	<script src="libs/evothings/ui/ui.js"></script>
	<script src="libs/evothings/simbleeble/simbleeble.js"></script>

</head>

<body>

	<header>
		<button class="back" onclick="history.back()">
			<img src="ui/images/arrow-left.svg" />
		</button>

		<img class="logotype" src="ui/images/logo.svg" alt="Evothings" />

		<!--<button class="menu" onclick=""><img src="ui/images/menu.svg" /></button>-->
	</header>

	<h1>Simblee LED On/Off</h1>

	<p id="info" class="lead">Initializing...</p>

	<button type="button" class="yellow" onclick="app.connect()">
		Connect
	</button>

	<br />

	<button type="button" class="blue" onclick="app.ledOn()">
		Blue Led On
	</button>

	<button type="button" class="charcoal" onclick="app.ledOff()">
		Blue Led Off
	</button>

	<h2>Instructions</h2>
	<p>This example requires a Simblee RFD77201 and an Simblee RGB
	LED Button shield (RFD22122). You also need an Simblee USB shield
	for programming the Simblee from a PC/Mac.</p>

	<!-- TODO: Image is missing.
	<p><img src="Simblee_Image.png" style="max-height:30%;" /></p>
	-->

	<!-- JavaScript code for the app -->

	<script>
	// Short name for Simblee BLE library.
	var simbleeble = evothings.simbleeble;

	// Application object.
	var app = {};

	// Connected device.
	app.device = null;

	// Turn on LED.
	app.ledOn = function()
	{
		app.device && app.device.writeDataArray(new Uint8Array([1]));
	};

	// Turn off LED.
	app.ledOff = function()
	{
		app.device && app.device.writeDataArray(new Uint8Array([0]));
	};

	app.showMessage = function(info)
	{
		document.getElementById("info").innerHTML = info;
	};

	// Called when BLE and other native functions are available.
	app.onDeviceReady = function()
	{
		app.showMessage('Press the yellow button to connect');
	};

	app.connect = function()
	{
		console.log("close");
		simbleeble.close();

		// Wait 500 ms for close to complete before connecting.
		setTimeout(function()
		{
			console.log("connecting");
			app.showMessage("Connecting...");
			simbleeble.connect(
				"Simblee",
				function(device)
				{
					console.log("connected");
					app.showMessage("Connected");
					app.device = device;
				},
				function(errorCode)
				{
					app.showMessage("Connect error: " + errorCode);
				});
			},
			500);
	};

	// When the app is fully loaded the "deviceready" event is triggered.
	document.addEventListener(
		'deviceready',
		function() { evothings.scriptsLoaded(app.onDeviceReady) },
		false);
	</script>
</body>
</html>

simbleeble.js

JavaScript
// File: simbleeble.js

// Load dependent library EasyBLE.
evothings.loadScript('libs/evothings/easyble/easyble.js')

/**
 * @namespace
 * @author Patrik D.
 * @description <p>Functions for communicating with an Simblee board.</p>
 * <p>It is safe practise to call function {@link evothings.scriptsLoaded}
 * to ensure dependent libraries are loaded before calling functions
 * in this library.</p>
 */
evothings.simbleeble = {};

;(function()
{
	// Internal functions.
	var internal = {};

	/**
	 * Stops any ongoing scan and disconnects any connected devices.
	 * @public
	 */
	evothings.simbleeble.close = function()
	{
		evothings.easyble.stopScan();
		evothings.easyble.closeConnectedDevices();
	};

	/**
	 * Called when you have connected to the board.
	 * @callback evothings.simbleeble.connectsuccess
	 * @param {evothings.simbleeble.SimbleeBLEDevice} device -
	 * The connected BLE shield.
	 */

	/**
	 * Connect to an Simblee board.
	 * @param {evothings.simbleeble.connectsuccess} success -
	 * Success callback: success(device)
	 * @param {function} fail - Error callback: fail(errorCode)
	 * @public
	 */
	evothings.simbleeble.connect = function(deviceName, success, fail)
	{
		evothings.easyble.startScan(
			function(device)
			{
				console.log('found device: ' + device.name);
				if (device.name == deviceName)
				{
					evothings.easyble.stopScan();
					console.log('connectToDevice');
					internal.connectToDevice(device, success, fail);
				}
			},
			function(errorCode)
			{
				fail(errorCode);
			});
	};

	/**
	 * Connect to the device.
	 * @private
	 */
	internal.connectToDevice = function(device, success, fail)
	{
		device.connect(
			function(device)
			{
				// Get services info.
				internal.getServices(device, success, fail);
			},
			function(errorCode)
			{
				fail(errorCode);
			});
	};

	/**
	 * Read all services from the device.
	 * @private
	 */
	internal.getServices = function(device, success, fail)
	{
		device.readServices(
			null, // null means read info for all services
			function(device)
			{
				internal.addMethodsToDeviceObject(device);
				success(device);
			},
			function(errorCode)
			{
				fail(errorCode);
			});
	};

	/**
	 * Add instance methods to the device object.
	 * @private
	 */
	internal.addMethodsToDeviceObject = function(device)
	{
		/**
		 * Object that holds info about an Simblee device.
		 * @namespace evothings.simbleeble.SimbleeBLEDevice
		 */

		/**
		 * @function writeDataArray
		 * @description Write data to an Simblee.
		 * @param {Uint8Array} uint8array - The data to be written.
		 * @memberof evothings.simbleeble.SimbleeBLEDevice
		 * @instance
		 * @public
		 */
		device.writeDataArray = function(uint8array)
		{
			device.writeCharacteristic(
				'2D30C083-F39F-4CE6-923F-3484EA480596',
				uint8array,
				function()
				{
					console.log('writeCharacteristic success');
				},
				function(errorCode)
				{
					console.log('writeCharacteristic error: ' + errorCode);
				});
		};
	};
})();

Credits

Daniel Lee

Daniel Lee

1 project • 1 follower
Thanks to Evothings Team.

Comments

Related channels and tags
  • Evothings
  • Simblee