Pebble for lazy programmers

I was "lucky" - Pebble Time watches came to me at the same time as the news about the sale of the company. The joy of buying was overshadowed by two things: the ambiguity of the future platform and the not so big developer community and the lack of the applications I needed. But these shortcomings more than paid off the opportunity to quickly and easily write the applications I needed, despite the lack of experience in C programming and JavaScript (I’ll tell you more about it today).

Pebble turned out to be really good for quickly writing applications for yourself. Starting from receiving any information, ending with the management of their smart home crafts from the clock. So hurry to buy pebble while they are in stock. If you already have a pebble, I hope this article will help you spend a few holidays with benefit;)
On Habré before there were articles on programming for Pebble, but they are somewhat outdated. In this article I will talk about the current state of affairs with the Pebble IDE and we will write a simple JavaScript application.

The ease and speed of programming begins with IDE. Pebble has this very, very good. I would not be surprised if one of the reasons for buying a company is to get ownership of such great development tools.

The IDE is available in several versions: “offline” and new-fashioned “cloudy”, thanks to which, you can start working from scratch and get the first working application in just 5 minutes, using only the browser.
')
A few words about "offline": officially IDE is available for linux and Mac OS. Windows users are encouraged to use the virtual machine. I personally don’t like to use them (joke about sex in a condom), and I found a way to launch IDE “natively”.

The trick is to use the built-in bash in windows 10. The only problem occurred with the emulator, which needs a GUI. The problem was solved by installing xming , after which the emulator needs to be run like this:

DISPLAY=:0 pebble install --emulator basalt 

CloudPebble IDE

This is a really handy tool (available here ).

Of the benefits:

• Integration with github (import of projects, export and commits without leaving the browser)
• Full development cycle, starting from the creation of the project, to the receipt of the finished package for distribution.
• Debugging and running the application in the emulator (yes, yes, the emulator runs directly in the browser window), or immediately on the clock.

For those who do not use the cloud in principle, as well as for those who read this article after 2017, when it is possible the online IDE will no longer work, it is possible to install and run it on your local machine or server. The way is official , from the developers.

Program easily and quickly.

Programming for Pebble on C, many articles were devoted, including on habr. Now there is another interesting tool, this is the Pebble.js framework.

The JavaScript program is not executed on the clock itself, but in the Pebble application, which is installed on the smartphone. The clock serves as a kind of terminal that transmits keystrokes, etc., and to which come “commands”, such as drawing text, displaying a menu, etc. All this is completely transparent to the programmer.

But this results in a significant disadvantage: without connecting to a smartphone, the application will not even start. Therefore, it is not recommended to write on this framework, for example, watch faces (dials). But applications that cannot work without a smartphone in any case (for example, a weather forecast) can be safely written in JavaScript.

There are still some minor problems with the emulator: sometimes the application does not behave at all as it should, but when installed on the clock, everything works fine.

Let's write something simple application that will show us some useful, useless information from the Internet. I somehow liked one site that gives short but succinct advice on a given topic. They have an API , so you can do without additional layers in the form of parsers, etc.

Open the online ide and create a project.



First of all, we need to create an icon for the menu and configure the application. In the left menu RESOURCES → Add New. We load the png icon (25x25), save and select the saved image in the settings menu image. Please note that in the settings we can specify for which platforms we will compile the application (aplite - pebble and pebble steel, basalt - pebble time and time steel, chalk - pebble round). Support for multiple platforms is a desirable thing if you will distribute the application, but for yourself you can leave one platform. If the difference with color and non-color pebble is minimal, then with the pebble round you need to do a little different UI, although pebble.js does a lot for you.

So, click on app source - app.js and write a few lines:

 var UI = require('ui'); var main = new UI.Card({ banner: 'images/app_icon.png', title:'Hello!', body: ', !', style:'large' }); main.show(); 

All, we have already received a working application, which we will immediately launch. Click the build button on the right. The application compiles and runs in the selected location. In the compilation tab, we can choose the place to start the application. This is either a built-in emulator, or directly on the clock (the developer mode in the pebble application and the devolopment connection must be enabled).



Pay attention to the Russian language. Now pebble supports Russian out of the box, if the corresponding setting is selected, but this cannot be done in the emulator. On the watch itself, everything works without problems:


Now it remains to add the ability to receive information from the Internet, for this is the most common library ajax. Also add the ability to choose the topic of tips and save this setting. For this we have the most common localStorage available.

 var UI = require('ui'); var ajax = require('ajax'); //     var themes=['','','','','','','','','','','','',' ',' ',' ']; //      localStorage var cur_theme=localStorage.getItem('theme'); if (!cur_theme){cur_theme=0;} var main = new UI.Card({ banner: 'images/app_icon.png', subtitle:'', body: '', style:'large' }); function update(){ //  json  API ajax({ url: 'http://fucking-great-advice.ru/api/random_by_tag/'+themes[cur_theme]+'/', type: 'json' }, function(data) { //     main.subtitle(themes[cur_theme]); main.body(data.text.replace(/ /g, ' ')); } ); } function changeTheme(){ //   ,      cur_theme++; if (cur_theme==themes.length){cur_theme=0;} localStorage.setItem('theme',cur_theme); update(); } main.show(); //     select -   main.on('click','select',update); //     select -   main.on('longClick','select',changeTheme); update(); 

As a result, we got a working application that can be installed directly on the watch (compilation - get PBW, and then open this file on the smartphone), or put it on the pebble market.


For a few free nights, I wrote and laid out already 4 applications (one of them is a client for instagram, it was written in C, because I couldn’t find a way to show downloaded graphics from the Internet in pebble.js).

Full documentation on pebble.js can be found here . And this project is available on github .