目前藍芽推出BLE低功率的傳輸模式，當然對藍芽有興趣的朋友們，可以一起來研究看看喔，和傳統藍芽不一樣的是採用藍芽4.0的標準，以傳統藍芽更省電，更有延展性傳輸多樣化的訊息，距離也比傳統藍芽更遠，其他就自已有空去GOOLE啦~
一、加入BLE的套件
$
ionic plugin add cordova-plugin-ble-central
|
二、搜尋藍芽的硬體
home.html
<ion-navbar
*navbar>
<ion-title>藍芽裝置</ion-title>
</ion-navbar>
<ion-content
padding
class="home">
<ion-nav
#mycontent
[root]="rootPage"></ion-nav>
<ion-list
inset>
<ion-item-sliding
*ngFor="let
device of devices"
#slidingItem>
<button
ion-item
(click)="connectToDevice(device)">
<h2>{{device.name}}</h2>
<p>{{device.id}}</p>
<p>{{device.rssi}}</p>
</button>
</ion-item-sliding>
</ion-list>
<button
full
(click)="startScanning()">開始掃瞄</button>
</ion-content>
|
Home.ts
import
{Component} from
'@angular/core';
import
{Page, NavController} from
'ionic-angular';
import
{Device} from
'./device';
//呼叫元件
import
{BLE} from
'ionic-native';
@Component({
templateUrl:
'build/pages/home/home.html'
})
export
class
HomePage {
private
devices;
private
isScanning = false;
constructor(public
navController: NavController) {
this.navController
= navController;
this.devices
= [];
}
startScanning()
{
console.log("Scanning
Started");
this.devices
= [];
this.isScanning
= true;
BLE.enable();
//開啟藍芽的授權
BLE.startScan([]).subscribe(device
=> {
this.devices.push(device);
});
setTimeout(()
=> {
BLE.stopScan().then(()
=> {
console.log("Scanning
has stopped");
console.log(JSON.stringify(this.devices))
this.isScanning
= false;
});
},
3000);
}
connectToDevice(device)
{
console.log("Connect
To Device");
console.log(JSON.stringify(device))
this.navController.push(Device,
{
device:
device
});
//轉頁到device的頁面
}
} |
設定3秒後自動停止搜尋，如果有搜尋到配對的藍芽裝置就加入device的陣列中
Device.html
<ion-navbar
*navbar>
<ion-title>{{device.name}}</ion-title>
</ion-navbar>
<ion-content>
<ion-list
inset>
<ion-item-sliding
*ngFor="let
characteristic of characteristics"
#slidingItem>
<button
ion-item
(click)="connectToCharacteristic(device.id,characteristic)">
<h2>{{characteristic.characteristic}}</h2>
<p>{{characteristic.properties}}</p>
<p>{{characteristic.isNotifying}}</p>
<p>{{characteristic.service}}</p>
</button>
</ion-item-sliding>
</ion-list>
<ion-spinner
*ngIf="connecting
==true"
name="circles"></ion-spinner>
</ion-content> |
點選配對的藍芽裝置後，導到Device.html的頁面，並顯示藍芽配備的相關屬性
Device.ts
|
import
{Page, NavController, NavParams} from
"ionic-angular";
import
{BLE} from
"ionic-native";
import
{Component} from
'@angular/core';
@Component({
templateUrl:
"build/pages/home/device.html"
})
export
class
Device {
static
get
parameters() {
return
[[NavParams], [NavController]];
}
private
nav;
private
navParams;
private
device;
private
connecting;
private
characteristics;
constructor(navParams,
nav) {
this.nav
= nav;
this.navParams
= navParams;
this.device
= this.navParams.get("device");
this.connecting
= true;
this.connect(this.device.id);
}
connect(deviceID)
{
this.characteristics
= [];
BLE.connect(deviceID).subscribe(peripheralData
=> {
console.log(peripheralData.characteristics);
this.characteristics
= peripheralData.characteristics;
this.connecting
= false;
},
peripheralData
=> {
console.log("disconnected");
});
}
stringToBytes(string)
{
var
array = new
Uint8Array(string.length);
for
(var
i = 0, l = string.length;
i < l; i++) {
array[i]
= string.charCodeAt(i);
}
return
array.buffer;
}
bytesToString(buffer)
{
return
String.fromCharCode.apply(null,
new
Uint8Array(buffer));
}
connectToCharacteristic(deviceID,
characteristic) {
alert(deviceID
+ "_"
+ characteristic);
console.log("Connect
To Characteristic");
console.log(deviceID);
console.log(characteristic);
//you
can write or read message
}
} |
BLE的屬性如下所示:
"characteristics":
[
{
"service":
"1800",
"characteristic":
"2a00",
"properties":
[ "Read"
]
}
]
|
如果要傳輸或接受藍芽的訊息，必需要取得deviceID,
serviceID, characteristicID，而有些屬性只允許【唯讀】、【唯寫】，必需先瞭解裝備的的屬性。
write(deviceId, serviceUUID, characteristicUUID, value)
read(deviceId, serviceUUID, characteristicUUID)
參考文件- https://ionicallyspeaking.com/2016/05/06/connecting-to-a-bluetooth-smart-sensor-with-ionic-2/
- http://ionicframework.com/docs/v2/native/ble/
沒有留言:
張貼留言