Connection to the device

Posted on
  • Hi,

    I create and small app using angular to connect to the device. It was working to test the LED. However, when I send the command Puck.mag it is getting the error that the function doesnt exit.

    Should I import any other library than puck.js?

    I'm not understand why this error.

    Thanks

  • Thr 2019.05.30

    Hi @user100558

    There Isn't enough info there to assist you. Which device, (Puck?) what error, in response to what call?

    Please post your code, the error as seen in the left-hand console side of the IDE, and the results of process.env

    The link to a tutorial, if one was used.

    Thank you


    Does this help?

    http://www.espruino.com/Puck.js+Door+Lig­ht

  • @user100558, could please show the request you sent to puck for checking the LED, the request you sent for the magnetometer? ...and publish the code you loaded on puck, if you loaded any.

    For the LED example, did you use this example from the Espruino site https://www.espruino.com/Web%20Bluetooth­ ?

    I guess that the code you sent to puck as string to do something with the magnetometer has some JS syntax issue. What you send to the puck you can verify in the IDE when typing it into the console. Get the Espruino IDE going in Chrome browser on your computer, connect to puck and type it in the left hand side pane - the console, and you get what you asked for.

  • Hi Guys, sorry for my mistake and didn't place the code.

    I'm using cordova with angular v 1.*.

    Follow:

    my head

    <!DOCTYPE html> <html>
        <head>
            <!--
            Customize this policy to fit your own app's needs. For more guidance, see:
                https://github.com/apache/cordova-plugin­-whitelist/blob/master/README.md#content­-security-policy
            Some notes:
                * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
                * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
                * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                    * Enable inline JS: add 'unsafe-inline' to default-src
            -->
            <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.min.css­">
            <link rel="stylesheet" href="css/angular-material.min.css">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <link rel="stylesheet" type="text/css" href="css/specialinputs.css">
            <script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
            <script type="text/javascript" src="js/bootstrap/js/bootstrap.min.js"><­/script>
            <script src="js/angular.js"></script>
            <script src="js/angular-route.js"></script>
            <script src="js/angular-animate.js"></script>
            <script src="js/angular-aria.min.js"></script>
            <script src="js/angular-messages.min.js"></scrip­t>
            <script src="js/angular-material.min.js"></scrip­t>
            <script src="https://www.puck-js.com/puck.js"></­script>
            <script src="https://maps.googleapis.com/maps/ap­i/js?key=AIzaSyDKO91w7TH8iP4MN1ziQT0BOqj­sWtJtpqk&libraries=places,drawing,geomet­ry" async defer></script>
            <title>Myspot</title>
    

    Then, my code in the angular file.

    scope.btnstatus = function(action) {
            if(action == 'on') {
                Puck.write('LED1.set();\n',function() {
                alert(Puck.getBatteryPercentage());
                initMap();
                });
            }
            else {
                Puck.write('LED1.reset();\n',function() {
                    //Puck.magOff();
                });
            }
        };
    
        $scope.magOn = function() {
            Puck.magOn();
            Puck.on('mag', function(xyz) {
                console.log(xyz);
            });
        }
    
  • @user100558, now I see where your are coming from.

    I'll try to explain what is going on:

    In Line 27 you are pulling in a piece of communication software so that your angular app running in the browser can use to connect to Puck via BLE and then send data - requests - to Puck and in return receive data - responses - from Puck - all via the BLE connection and Puck's console.

    Think of puck's console like a command or terminal window of a computer. You can type something, and if the terminal / console program - understands it, it will respond. Similar you enter ls in the linux shell and you get the list of files of the current directory you are in, or dir in windows bat shell und you get the list files of the current directory you are in.

    Puck's operating system - so to speak - though does not understand sh or bat shell commands, but it understands JavaScript. The data - or more precisely - source code you send to Puck as request is tried to be interpreted / executed and the response created in Puck's console is sent back to you.

    Where the confusion comes is that in your browser you have an object referred to with the global variable Puck that understands certain commands / has certain methods. On the Puck there is also an object referred to with the global variable Puck with its methods, but ***these 'Puck' objects are not the same', and therefore, do not understand the same commands / have not the same methods.

    Let's have a look at the key method of the Puck object residing in you browser. This key method is .write(arg1, arg2) and accepts two arguments:

    arg1 is a string of JavaScript source code that can be executed / is understood by Pucks JavaScript interpreter, such as you used to set the LED1 on when a button in your angular app in the browser triggers the 'on'-action, else the LED1 is set off (reset). The code - javascript expression - you use to set and reset the LED1 is the string you send in Line 3 and Line 9, respective. The string is terminated with a new line to tell the interpreter that it can now look at the string and interpret it:

    LED1.set();
    

    and

    LED1.reset();
    

    I'm sure you have the Espruino Web IDE installed and you have connected to the Puck via BLE. Enter any of these strings in the console - left pane - and you see the same effect by directly entering into Puck's console. The console of Espruino Web IDE is nothing else than a terminal that sends your key strokes - command - to Puck, and displays what Puck responds: echoing your key strokes and on pressing enter printing the response of your entered command.

    Since there is no meaningful response to setting and resetting a LED and these methods on the LED objects return nothing - in this case undefined - you see

    undefinded
    

    as response in the console - as the response to your command (beside the echo of what you typed).

    arg2 is a so called callback function that is invoked with one argument - the response from Puck. Both of these callback functions in Line 3 and Line 9 are defined as anonymous functions and without accepting an argument (even though in the JavaScript environment passed arguments are available in the local and predefined variable arguments). There is nothing wrong with not providing an argument in this example of turning LED on and off, because the response is anyway the string "undefined". (If you though would have a syntax or interpretation error, you don't catch it.)

    The arg2 is optional and could be dropped completely in your code. (Your try to read Puck's battery percentage throws actually an error, because it is directed towards your Puck object in the browser, but you meant to talk to the Puck object in Puck to return the battery percentage. Former Puck object does not understand, but latter one does, and you can get the battery percentage - just a little bit different - as I'll show later).

    To be clear what the browser side Puck.write() method does, is:

    • sending the JavaScript source as string as given as 1st argument to Puck
    • receive Pucks response as string and then invoke the callback function - which runs in the browser - with the response string as sole argument.

    To see these details look at https://www.puck-js.com/puck.js - the function beginning with

    connection.write = function(data, callback) {
    ...
    };
    

    data is the first argument and is the JavaScript source code executed on Puck, and callback is the function invoked the the response string from Puck as only parameter```.

    To use the callback with meaningful command data, let's head for the battery percentage:

    Replace Lines 3 and 4 with following lines:

                Puck.write('Puck.getBatteryPercentage();­\n',function(batteryPercentage) {
                    alert( batteryPercentage);
    

    Since ..getBatteryPercentage() is deprecated in the newest version of Espruino (Puck/Pixel/MDBT42Q) firmware, we do it right and use the E.getBattery() expression:

                Puck.write('E.getBattery();\n',function(­batteryPercentage) {
                   alert("Battery: "+batteryPercentage+"%");
    

    Now you are able to get your Magnetometer example going in a similar way.

    Recap:

    • arg1 is javascript source that is to be executed on Puck/Pixel/MDBT42Q
    • arg2 is callback function with argument 'to catch and process' the response created by execution of arg1 on Puck/Pixel/MDBT42Q
  • The browser local Puck object is very helpful for essential and basic stuff, such as connectivity and sending data and receiving response back.

    BUT: What if I want to execute something much more elaborate on my Puck and get the response back?

    Response: create these elaborate code pieces in the Espruino IDE in the right hand side Editor pane as custom functions with your names and upload them to Puck (and save them there - so on re-power / restart, the functions are still there). Then just invoke these functions by the names in your local browser application.

    For example, you create a function that responds in JSON battery percentage and BTN1 status - pressed or not.

    function batAndBut() {
      var responseObject = { battery: E.getBattery(), but: digitalRead(BTN1) };
      var response = JSON.stringify(responseObject);
      console.log(response);
    }
    

    The example is intentionally made verbose.
    Upload this code to Puck. Then test it with entering

    batAndBut();
    

    in the console. The response you should see is something like:

    {"battery":85,"but": 0}  
    

    Now, in your angular Web app you do something like that:

      Puck.write('echo(0);batAndBut();echo(1);­\n',function(data) {
          var batAndBut = JSON.parse(data);
          alert("Battery: "+batAndBut.battery+"%,"
                   +" BTN1"+((batAndBut.but)?"":" NOT")+" pressed."
                    );
        });
    

    Enjoy!

    PS: since I could not test (yet), line 1 may need to be:

      Puck.write('echo(0);\nbatAndBut();\necho­(1);\n',function(data) {
    
  • Thanks so much....I totally understand my mistakes.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Connection to the device

Posted by Avatar for user100558 @user100558

Actions