Pebble Smartwatch has offered SDK to develop watchfaces and watchapps in C language for a while now. But most recently they tried something different: Pebble.JS a project that lets you code for Pebble in JavaScript. Unlike native app – JS code runs on your phone, so it’s not as fast, and Bluetooth communication required to display any data, but there’re numerous advantages as well.

To test it I decided to write a simple app that would use basic, but important features of Pebble.JS: displaying of information card (a la Pebble notifcation), using menu and executing an AJAX call to bring information from the Net.

Enter AutoInsult for Pebble – application that is based on autoinsult.com – it generates a random insult based on style you selected.

Here’s main application module app.js

/* Main app module */

var UI = require('ui');
var Insult = require('insult');

var iInsultType;

// main insult card to display insults
var insultCard = new UI.Card({
  title: 'Insult',
  scrollable: true
});

// on clicking "select" on the card regenerate the insult  
insultCard.on('click', function(e) {
  if (e.button == 'select') {
    insultCard.body('Please wait to be insulted...');
    Insult.generateInsult(iInsultType, displayInsult);
  } 
});

// callback funtion that displays generated insult
function displayInsult(i_sInsultText){
   insultCard.body(i_sInsultText + '\n\n([select] for new)');
}


// creating selection menu
var typeMenu = new UI.Menu({
  sections: [{
    title: 'Select insult style',
    items:[
      {title:'Arabian'},
      {title:'Shakespearean'},      
      {title:'Mediterranean'},      
      {title:'Modern'}      
    ]
  }]
});

// on clicking "select" on menu generate the insult  
typeMenu.on('select', function(e) {
  iInsultType = e.itemIndex;
  insultCard.body('Please wait to be insulted...');
  insultCard.show();  
  Insult.generateInsult(iInsultType, displayInsult);
});

typeMenu.show();

As you can see it is pretty straightforward. First we load external libraries (Lines 03-04) one predefined that is used to create UI, the other custom to generate insults (more about it later). Then we create UI element “card” and assign it handler for “click” event (Lines 08-20). Inside of click handler we call function to generate insults and pass callback function to process it – that function is defined in Lines 22-25 and it simple displays the text in body of the card.

That’s it for card, but initially we need to display the menu of the style selection and this is done in Lines 28-39, then Lines 41-47 add click event handler to menu which shows the card we defined earlier and makes the first call to generate insult function. Line 49 displays menu to the user.

This is all well and good, but we still need to define “insult” library that is imported in Line 04 and contains “generateInsult” function. And here it is Insult.js:

/* This module makes AJAX request to generate insult */

var ajax = require('ajax');

// Making module into an object so other modules (app.js) can import it via require("insult") command
var insult = {
  
  // generates insult of a given type (i_iInsultType) and passes it to callback function (i_fCallBackFunction)
  generateInsult: function(i_iInsultType, i_fCallBackFunction) {
    
      // Make request to autoinsults.com
      ajax(
        {
          url:'http://autoinsult.com/scripts/webinsult.server.php?xajax=generate_insult&xajaxargs[]=' + i_iInsultType,
        },
        
        // on success parsing XML string and passing it to callback function
        function(data) {
          data = data.substring(data.indexOf('[CDATA[') + 7);
          data = data.substring(0, data.indexOf(']]'));
          i_fCallBackFunction(data);
        },
        
        // on error passing error message to callback function
        function(error) {
          i_fCallBackFunction('Insult failed: ' + error);
        }
      );
        
        }
      };

this.exports = insult;

Line 3 imports AJAX library used for Net communications and Lines 09-30 define the function to generate insult. Basically it makes an ajax call to autoinsult.com in Lines 12-15 and then in case of successful return parses the result in Lines 17-22. Lines 24-27 handle error in case it happens.

The entire code is wrapped into an object (Lines 06, 31) and exported (Line 33) so that other modules (in our case app.js) can import it via require("insult")

That’s pretty much it. When the application starts – a menu is displayed, offering user to select insult style. Once selected – first insult is displayed, which is refreshed with new random one every time user clicks “Select” button.

Some useful links:

• Pebble.JS documentation
• AutoInsult for Pebble in Pebble App store, so you can load it directly onto your watch
• Github repo for AutoInsult, so you can import it directly into CloudPebble to play with.
  

  Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)