Onsenui Bluetooth Tutorial

[peabucket]

Any way to integrate Bluetooth 2.0 or 4.0 with Onsenui? I am using Monaca and since v 5 they do not have bluetooth support, so I looked around and found a tutorial using a iBeacon plugin (https://docs.monaca.io/en/sampleapp/samples/ibeacon/) but no tutorial on a standard Bluetooth plugin, would think this would be pretty popular feature to implement… any help with this would be great! thanks

[munsterlander]

What exactly do you need to do? Remember, Onsen is simply a UI framework and not a hardware interface. For that, you would need a Cordova plugin such as: https://github.com/randdusing/cordova-plugin-bluetoothle

[peabucket]

Thanks for the reply. I have tried another plugin (https://github.com/don/BluetoothSerial). But for some reason it does not load and keeps giving an error “bluetoothSerial is undefined”. I have some simple code below to check if Bluetooth is enabled and to get name of bluetooth devices:

app.service('bleService', function() {
    var bluetoothSerial = cordova.require('bluetoothSerial');//new cordova.plugins.bluetoothSerial.Delegate();

    return {
        sendMessage: function(message) {
            // interact with bluetoothSerial
        }
    };
});

app.controller('InfoPageCtrl', ['$scope', 'bleService', function($scope, bleService) {
        bluetoothSerial.isEnabled(
            function() {
                console.log("Bluetooth is enabled");
            },
            function() {
                console.log("Bluetooth is *not* enabled");
            }
        );
}]);

Or if I am able to do the same with the plugin you have suggested some example that works with Monaca IDE would be useful also. I need to work with Bluetooth 2.0 and 3.0.

There is an example of how to use Bluetooth plugin on Monaca IDE docs but it seems only compatble for Monaca 3.5 version: http://docs.s.monaca.mobi/3.5/en/reference/third_party_phonegap/bluetooth/

[peabucket]

Thanks again, but it seems that I can not get the cordova plugins to loaded correctly, any idea why this is happening from the code above. I have tried cordova.require(‘bluetoothSerial’); and new cordova.plugins.bluetoothSerial.Delegate();

[munsterlander]

@peabucket What platform are you using to develop on, i.e. Visual Studio, Monca Cloud, etc?

[peabucket]

@munsterlander Monaca Cloud IDE , the latest version

[munsterlander]

Ok, apologies for the delay but it took me a bit of research. After installing the plugin with Monaca IDE and doing the custom Android build, I was able to get it to work using the following code:

ons.ready(function(){
        bluetoothSerial.isConnected(
            function() {
                alert("Bluetooth is connected");
            },
            function() {
                alert("Bluetooth is not connected");
            }
        );      
    });

I can post a whole Monaca IDE project to import if you need. It would contain a lot of other code from other threads where I have helped people though. The big thing to note, is you need to check for ons.ready, then access your variable.

Good luck and hope this helps you with your Arduino project!

[peabucket]

Still getting the same error: Uncaught (in promise) module bluetoothSerial not found undefined:0

What is the correct way to use a plugin functions inside Onsenui? Do you just call the plugin, i.e. bluetoothSerial() … or use cordova.require();… There is nothing in the docs about using cordova plugins even though you can import them from Monaca

app.controller('InfoPageCtrl', ['$scope', function($scope, bleService) {
    var bluetoothSerial = cordova.require('bluetoothSerial'); 
    ons.ready(function(){
            bluetoothSerial.isConnected(
                function() {
                    alert("Bluetooth is connected");
                },
                function() {
                    alert("Bluetooth is not connected");
                }
            );      
        });
}]);

[peabucket]

Really need help with this … seems like such a simple question about using Cordova plugins…

[peabucket]

What was the full code you used, it still gives me same error as I just posted now above

[munsterlander]

@peabucket That was the full code. Do not create the variable how you are doing it. With Monaca, you will never do an import of a plugin. Once you load it via the IDE, it will be added to your project correctly during the build process. You will have to do a debug build for this in order for it to be included on your device for testing. More information on that can be found here: https://docs.monaca.io/en/manual/debugger/installation/debugger_android/

I have uploaded a Monaca IDE project that works here: https://www.dropbox.com/s/vt4gmyjoxh8wzxi/project.zip?dl=0

Here is the full code as well. The only thing I can’t show in code is uploading the plugin via the Monaca IDE.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/js/onsenui.js"></script>
    <script src="components/loader.js"></script>   
    <script>
    ons.ready(function(){
        bluetoothSerial.isConnected(
            function() {
                alert("Bluetooth is connected");
            },
            function() {
                alert("Bluetooth is not connected");
            }
        );      
    });
  </script>
</head>

<body>
<ons-page id="bluetooth">
    <div>
        Ready
    </div>
</ons-page>
 
</body>
</html>