Introduction to Pebble Programming
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 170 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/50876 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC Oslo 2014133 / 170
2
3
5
6
8
11
12
16
21
22
23
27
31
35
37
42
43
45
47
48
49
50
52
54
56
57
58
61
65
66
67
71
74
77
80
81
83
84
85
87
88
89
90
91
94
95
96
97
98
100
102
107
108
112
114
115
116
118
120
121
122
123
126
127
128
130
133
135
137
138
139
140
141
142
143
144
145
147
148
149
150
153
155
156
157
158
159
160
161
162
163
166
169
170
00:00
Mobile WebSource codeConvex hullEvent horizonComputer configurationWeb pageFunctional (mathematics)MathematicsComputer fileSource codeCASE <Informatik>EmailCompilation albumNumberMultiplication signProjective planeWindowComputer clusterTouchscreenCycle (graph theory)GoogolSeries (mathematics)Form (programming)Revision controlSystem callLevel (video gaming)MereologyPoint (geometry)Greatest elementDemo (music)Web 2.0Server (computing)Right angleMobile appInformationMountain passData storage deviceMoment (mathematics)Type theoryTouch typingRepetitionPhase transitionResultantEngineering physicsElectronic visual displaySound effectUniform resource locatorScaling (geometry)Product (business)Power (physics)Computer virusFreewareTerm (mathematics)Graph coloringInternetworkingDiagramAndroid (robot)CircleBinary codeSampling (statistics)Extension (kinesiology)RectangleLabour Party (Malta)Data structureCore dumpSocial classTemplate (C++)Cartesian coordinate systemWeightHypermediaWebsiteDegree (graph theory)Traffic reportingMetropolitan area networkPixelAutomatic differentiationSign (mathematics)Internet service providerScripting languageVirtual machineConfiguration spaceContent (media)Row (database)Medical imagingExecution unitFile formatPosition operatorCategory of beingNetwork topologyHand fanContrast (vision)Default (computer science)Point cloudFormal languageComputer programmingSemiconductor memoryDot productAdditionElectronic mailing listSoftware developerGraphics tabletLink (knot theory)Selectivity (electronic)Web pageWeb service40 (number)Image resolutionService (economics)Value-added networkBit rateMetreView (database)Different (Kate Ryan album)Mobile WebComa BerenicesComputer configurationPurchasingBlock (periodic table)Symbol tableCodeLimit (category theory)Set (mathematics)Order (biology)NavigationComputer hardwareConnected spaceTable (information)Computer simulationNormal (geometry)Process (computing)CoprocessorFood energyDataflowClassical physicsAnalytic continuationKey (cryptography)Message passingFerry CorstenIntegrated development environmentFlash memoryEvent horizonRotationGoodness of fitInstallation art2 (number)Cross-platformComputing platformInternet forumSoftwareDemosceneMemory managementIP addressEnterprise architectureString (computer science)BitMaxima and minimaSpacetimeDivisorInsertion loss1 (number)Endliche ModelltheorieState of matterFunction (mathematics)CuboidPressureEvolutePointer (computer programming)RWE DeaCausalityMultiplicationRoutingDialectRoundness (object)Absolute valueLine (geometry)Arithmetic meanVideo gameGroup actionPhysical systemAirfoilPrice indexInformation securityArmOnline chatComputer iconAreaoutputNear-ringFront and back endsSoftware development kitComputer fontRootSurjective functionBuildingAnalogyDigitizingWeb applicationIntegerDrag (physics)Gateway (telecommunications)Disk read-and-write headCountingStandard deviationLoginCloud computingOcean currentError messageMultilaterationAsynchronous Transfer ModeOnline helpSlide ruleFluid staticsOvalInheritance (object-oriented programming)Solid geometryCompilerCrash (computing)FirmwareStructural loadSingle-precision floating-point formatComputer animation
Transcript: English(auto-generated)
00:03
Okay, so I guess we can get started. Okay, so a very good afternoon. So for the next one hour or so, I'll be talking about Pebble programming. So how many of you have a Pebble watch review?
00:22
Okay, so and how many of you have actually started playing with the SDK, writing some apps for your Pebble? Cool. So what we want to do is that for the next one hour, after the next one hour, you would be equipped with the skills to write some simple Pebble apps, and hopefully the session will give you some ideas
00:41
of what are the capabilities of the Pebble apps that you can actually develop. So my name is Wei Ming. So let's get started with the agenda. So first thing first, I want to talk about what is Pebble. So what is the hardware? What is the amount of memory that you have? What are the limitations of Pebble?
01:03
There are different ways to develop for Pebble. So whether you want to use a cloud-based solution or you want to use the native SDK, and for those of you who does not want to write code, there is a simpler way. So all you need to do is, for today, if you want to see how you can actually develop
01:21
your simple watch application, all you need to do have is, you just need to have your Pebble and your phone. And if your phone has a camera that can scan barcode, you'll be able to scan and download an application onto a Pebble within one minute. I'll show you later on. So I'll show you the structure of a Pebble application,
01:45
what are the various building blocks, what are the capabilities of Pebble apps, and how to test your app on your Pebble. Now, before we get started, so the different types of Pebble for the benefit of those who have not gotten your Pebble watch yet.
02:03
So there are two variants of the Pebble watch that you can buy today. One is the traditional plastic Pebble, and it costs 150 U.S. dollars. And the much more fashionable variant is the Pebble Steel, and that costs 249 U.S. dollars.
02:21
So they are both available for purchase today. You can go to getpebble.com, and you can actually order your watches right from the website. Now, let's talk a little bit about the hardware. Now, in terms of screen, you only at this moment have a black and white e-paper display.
02:41
So a lot of people are asking whether in future would they have a colored screen. I think it is possible, and I think they need to do that in order to survive and compete with other smartwatches that are coming into the market. So I'm sure you have heard of a lot of so-called competitors.
03:02
I think the most rumored one is iWatch. So everybody is waiting for Apple to do something in this area. So nevertheless, you have a black and white e-paper display, and in terms of screen size, it's really, really small. So it's 1.26 inches, and in terms of screen resolution, it's 144 by 168 pixels.
03:24
So this is the screen. Now, in terms of memory, you have 4-megabyte flash memory, and for those of you with the pebble steel, it has got 8 megabytes. Now, when you install four watch applications onto your pebble,
03:40
you can store at most eight apps. Now, what happens if you want to install more than eight apps? What you can do is that you can offload some of the apps onto your mobile device. So when you want to switch the apps between your watch and the mobile device, you will make use of this pebble mobile app to do the switching.
04:03
I'll talk more about that later on. Now, in terms of sensors, it has got three different types of built-in sensors, magnetometer, ambient light sensor, as well as your accelerometer. So the accelerometer is pretty cool. It allows you to measure the rate of acceleration in the three axes.
04:22
So if you are thinking of writing an application that allows the old folks to wear, so what happens if the old folks fall down? You might want to trigger an event, send it to the phone, and the phone can actually make a phone call to some emergency services or whatever. So these are the possibilities that you can work on
04:42
based on the sensors that are available. Now, in terms of processor, don't expect a quad-core processor or whatever. So it runs on 120 megahertz. So in terms of battery, it is 140 milliampere hour.
05:00
So it is tiny. But don't be fooled by this number. A typical pebble watch can last five to seven days. Those of you who have a pebble watch, you can attest to that. So it depends on the usage. So it can last between five to seven days on a single charge. But if you are running some health application
05:20
that tracks your walking speed, stuff like this, that typically takes about, it can last you for one day per single charge. So on average, five to seven days is the norm. Now, in terms of Bluetooth, this pebble watch supports two types of Bluetooth, classic Bluetooth. Now, classic Bluetooth is used for installing
05:43
and offloading applications from your pebble watch onto your mobile device. Now, for Bluetooth low energy, Bluetooth low energy is useful for devices like iOS devices that allows your iOS notifications to be pushed through the Bluetooth low energy link.
06:03
So if you have an iOS device, it can make use of the Bluetooth LE link. Now, just for your information, pebble has just released its new firmware, 2.2, yesterday. And in 2.2, it supports iBeacon, just for your information.
06:23
Now, in terms of the hardware buttons, in terms of the way you interact with this pebble watch, it has got four buttons. And these four buttons are your only way to interact with your watch. So you have on the left a back button. So a back button allows you to go back to the previous screen.
06:44
Now, on the right-hand side, you have three buttons. You have the up button for you to navigate upwards. You have the select button for you to select an item. And you have the down button for you to navigate downwards. So these are all the four buttons that you can use to navigate with your application.
07:02
Now, the next popular question is that, would there be a touch screen pebble watch in the near future? Well, I... Okay? Yeah. I can tell, sorry. And I think they have to do it one day. So, but at this moment, not yet.
07:24
Now, so what do you need to develop for pebble? So what are the tools that you need? Now, first thing first, you need a pebble. You really need to buy a pebble. So there is no emulator, there is no simulator available. So that's the only way you can develop for pebble. Now, the next thing that you need is,
07:43
you need a mobile device. You can either use an iOS device or an Android device. Unfortunately, Windows Phone devices are not supported yet. So now, from my experience, it is better to use an iOS device to connect to your pebble. How many of you are actually pairing up your pebble
08:03
with your Android devices? And there are some devices that have some connectivity issues. So if you have an iOS device, that's easier to do the development work. Now, when it comes to writing code for your pebble, there are two ways, two main ways to write for it.
08:23
First of all is to use the pebble native SDK released by pebble. But for this option, you need to have a Mac or a Linux or Unix-based machine. So the reason is because the SDK is based on Unix. So if you have a Windows machine, you cannot install the SDK natively on Windows.
08:42
You have to run a virtual machine like VirtualBox, and you might want to run a version of Linux that you prefer. Now, so that's the first option. Now, the second option is to use a cloud-based solution, and there is a cloud-based development environment called Cloud Pebble. Now, for this course, or rather for this talk,
09:02
I'm going to show you both of them. So I'll show you how to use a native SDK to develop, and at the same time, I'll show you how to use the Cloud Pebble. Now, if you are new to the pebble development, it is always good to use the Cloud Pebble because it has got a lot of code templates
09:20
that allows you to build your applications very, very easily. Now, there's one third option, which I'm going to show you later on. It's called the Watch Face Generator. So if you want to write a watch application, a watch face application, but you don't want to get your hands dirty, you can actually go to this website, follow through a series of steps,
09:41
and you can actually generate a really cool watch face application for your pebble in a matter of minutes. So let's go on. Now, when developing for pebble, you need to download this application called the Pebble Mobile App.
10:04
Now, this Pebble Mobile App serves as the middleman in which it pairs up with your pebble watch. It allows you to install and remove apps on your pebble watch, as well as it provides the pebble app store, where you can actually discover additional interesting pebble apps on the app store.
10:24
So this is the way for you to talk to your pebble watch, and basically this diagram here shows you the relationship between your pebble watch and your pebble mobile app. Now, in the middle, you see that you have two mobile devices,
10:42
be it an iPhone or an Android device, and you have your pebble mobile app. Now, the pebble mobile app allows you to go to the pebble app store, where you can actually download, install apps onto your pebble watch. And the binary for a pebble app ends with the .pbw extension.
11:03
So this is the binary version of your app. If you are familiar with Android, you know that in Android, you have your Android package, .apk. But in terms of pebble, it's .pbw. Now, so how do you actually distribute your apps once you have returned your app?
11:20
So one way would be for you to submit your apps to the app store. And at this moment, all pebble apps are free of charge. So you cannot monetize your apps at this moment. So in future, they may require users to pay for some of the apps. But that is in the pipeline. Now, if you do not wish to submit your apps through the pebble app store,
11:45
what you can do is that you can install the pebble app directly through the pebble mobile app. So how do you actually distribute your app? Simple. Once you have created your application, email that .pbw file to your friends or to your customers.
12:01
Now, when your customers receive that .pbw file through the email, all they need to do is download the attachment on the mobile device. And when they have downloaded the .pbw tab on it, the device will install your app through the pebble mobile app, and it will deploy onto the device that is connected, that is paired to your mobile device.
12:24
So this is a very easy way for you to deploy your pebble apps. Now, how do you get started? First thing first. Once you have purchased your pebble, the next thing for you to do would be to download the pebble mobile app
12:42
from the iOS app store or from the Google Play Store, depending on the phones that you're using. Now, pair your pebble with your mobile device and update your pebble to the latest firmware. Now, as of today, the latest version of firmware is version 2.2.
13:02
Now, let me show you a demo of how to develop for pebble. Now, first example I want to show you is using the native SDK. So if you want to create a new project, all you need to do is install the SDK. Now, you can go to pebble's website, and they have the instructions for installing the SDK,
13:22
so I'm not going to go through that. But once you have installed the SDK, you would have a folder called pebble-dev. Now, this is what we do. pebble-new-project, and let's call it hello-ndc.
13:43
Enter. And it would go ahead and create the project called hello-ndc. So let's cd into this folder. Let's do a listing. Now, you can see that you have a couple of files and a folder.
14:03
So you have your appinfo.json. Now, this is the file for you to edit the characteristics, the properties of your project, very much like your manifest file. You have your resources folder. This is where you store the images that you want to use for your pebble app.
14:22
You have a folder called source. This is the place where you have your source code. Now, I'm not too sure whether this is good news or bad news. The language that you use for pebble development is C.
14:41
So I don't know about your background, so I don't know whether this is something that you like or not, but the most painful thing about C, when I mention C, what comes into your mind? What's the first thing that comes into your mind? Pointers. So this is a good chance for you to relieve your childhood memories, your pointers.
15:01
And then you've always got a lot of crashes and stuff like this. Now, the wscript file is a configuration file for the compiler so that you can tell the compiler that you can compile all the C code in this source folder. Now, once you're done with this, let's take a look at the source folder.
15:23
And you have a hellondc.c. So this is your source code. Now, let's take a look at the content. And if you look at this, you have your entry point, your main, and you have your init method.
15:42
So let me just try to spend two minutes going through this code. It's not really that difficult to understand. It's quite okay. It's not that bad. Now, you have this init method, or rather, init function. And this init function is going to bring me up to this function here, static void init.
16:01
And the first thing I do is I want to create a window so that I can display my UI on my Pebble watch. Now, the next thing after I have done this is I want to call this function called window set click config provider. And I want to go to this function called click config provider.
16:24
Now, if you scroll this upwards, you will see this thing called click config provider. Basically, this block of code here says link up all these buttons here on the right,
16:42
the up, select, down buttons to the following functions. You are trying to create the event handlers for all these buttons. So, for example, you have this button id select. It is linked up to this select click handler. So, when the user presses the select button,
17:02
it is going to go to this function, select click handler. So, pretty straightforward. Now, let's go back to here. You have window set window handlers.
17:21
So, this time around, you are trying to set the event handlers for this window. So, you are trying to say, when this window is loaded for the first time, you want to go to this function called window load. And when this window gets unloaded, you want to go to this function called window unload.
17:42
Okay? And if you go up here, this is the window load. And what you are doing in this function here is you say that, okay, I have a window that I want to use to display my UI. Get me the root layer. So, in pebble, an application contains,
18:00
the UI contains multiple layers where you can add the various layers onto one another. So, you stack up. So, in this case, you are trying to get the window root layer. And next thing you do is I want to display a label. So, I create what we call a text layer,
18:22
specify the origin, specify the size, specify what I want to display, the alignment, and finally, add this layer onto my window layer. So, I'm going to show you the output in a moment.
18:41
Okay. So, enough of this. How do we actually compile this? So, let's go out to the main folder and let's do a pebble build. That's it. Now, if you compile your application, there's no error. You should see a bunch of outputs.
19:01
As long as you don't see anything in red color, you are safe. Okay? If you see something in red, that means there's a syntax error somewhere and you have to troubleshoot that. Now, on the pebble mobile app, it has got this option called the developer mode. Now, you have to turn on this developer mode on
19:24
and basically, this is how it works. So, your development machine and this mobile device must be on the same Wi-Fi network. So, what I will do is I will compile this and I will deploy this application onto here.
19:42
So, basically, this guy acts as a server. So, it will compile, take the PBW, send it over to this guy. This guy received that PBW and he will install that onto this watch here. So, how do you do that? Now, when you turn on your developer mode, there is an IP address for this fellow here.
20:03
So, all you need to do is type in the following. pebble install minus minus logs minus minus phone followed by the IP address of your phone. Now, once you have done that,
20:21
you just need to wait. And it is now deploying. I can't really show it here, but it is now deployed onto my pebble watch. And if you see the output here, it says that enabling application logging, installation successful, managed to push this and so forth.
20:41
Now, so the application is now running here. When I press the back button, take a look at the output, I'm going to press the back button. It tells you that this application has exited and look at this fellow here. Now, the bad news for this is that you have to do your own memory management.
21:02
So, when you create pointers to point to a structure, when you're done with it, you better release your memory yourself. So, this is very much like the early days of iOS development before the days of ARC, automatic reference counting. So, that's the thing about C.
21:20
Now, so, let me just see whether I can show you. Now, so this is how it looks like on my watch. So, when I press the up button, you will see this label here. If I press the select, you will see this. When I press the down, you will see this. So, nothing really fanciful.
21:43
So, this is what we saw earlier on. So, when you start up, you create a window and you get the window root layer. And once you have gotten the root layer, you add a text layer on top of your pebble window. Now, let me show you another way to develop for pebble.
22:08
So, earlier on, that was native SDK. Now, there is another way. If you go to cloudpebble.net, you have to go to cloudpebble.net,
22:21
you will see a screen like this. Now, if you are going to this website for the first time, they will ask you to sign in. So, you can either sign in using your existing pebble account or you can create a free account. Now, once you have done that, click on this button called create. And they will ask you,
22:40
so what kind of projects do you want to create? So, I'm going to call it my hello. And you see, just give it a name. And they will ask you, okay, so in terms of project template, what do you want? So, let's select this and we can choose all the different types of sample projects that they have written for you. And you don't have to crack your head on how to do all this.
23:02
So, let's select the simplest one, button click. Once you are done, click create. And the nice things about this cloud pebble is that it works for Windows user. So, you don't have to have a Mac. Now, once you have created a project,
23:21
look at the left hand side. You have your project name, you have your settings, your compilation. Let's select this settings. And you will be able to change the information about your project. What is the project name? What is your SDK version? What's the application kind? I'm going to talk about this in a while.
23:41
Now, there are two main types of pebble apps that you can develop. One is called watch app and one is called a watch face app. I'm going to elaborate on this in a moment. So, once I've done that, I can also change my application name, the short name, the long name.
24:02
So, they will tell you what's the effect of changing the short application name. It will appear on a watch. If we change this, it will appear in the application list on the phone, so on and so forth. Now, go to this tab, compilation. Click on this.
24:21
Now, so we have created our project. We need to build this. So, click run build. Just wait a while. They'll tell you pending. Okay, you're done. Now, when you are done with this application, all you need to do is click on install and run.
24:40
So, when you click on install and run, it will automatically look for your phone and it will install your application onto your watch. Okay, so I think it's done. So, it's installed successfully. Now, how do I prove to you that it has been installed successfully? Let me take a screenshot for you. So, dismiss.
25:00
Go to this button, screenshot. Okay, there you go. So, this is how you capture screenshots on the pebble. Now, in the early days of pebble development, there is no easy way to capture screenshot. You have to use your camera.
25:20
Okay, but this is really, really cool. Now, what happens if you want to give this application to your friend and your friend's watch is not paired up with your mobile device? Simple. Go to get PBW, click on this, and they will download this PBW.
25:40
All you need to do is email this PBW file to your friend and your friend who has got a pebble watch paired up with his or her mobile phone will be able to install the application directly onto the watch. Okay, now, this is how easy it is to use the Cloud pebble.
26:01
There's one part that is pretty cool. Let's go to the settings. Now, at the bottom of settings, you have one button called download as zip. So, this is for people who, after creating the project, they want to download all the source code for their project.
26:21
So, they want to download the source folder, the .c file, the appinfo.json file, so on and so forth. They can just click on this button and you can actually download this project as a zip file and unzip this and you can continue to edit your project
26:41
using the native SDK that you have installed on your Mac. Okay, so this is pretty cool. Now, so let's continue. Now, I'm going to show this in a while.
27:03
So, there you go. Now, there are two types of pebble apps that you can develop. One is called a watch app and one is called a watch face app. So, basically, a standard watch app is what we have just developed. A pebble watch app can interact with the user
27:23
through the buttons, the three buttons on the right. So, you can select, you can up, down, you can press the select button. Now, in contrast, if you develop what we call a watch face app, a watch face app is basically an application that runs by default on this watch itself.
27:41
So, if the user is not interacting with any applications, it will always be on your watch. It is always running. So, a very good example of a watch face app is your customized clock. So, if you want to build your own super solid watch application, you build what we call a watch face app.
28:00
Now, you can build a watch face app very easily using a native SDK as well as cloud pebble. If you recall, in the cloud pebble, I will go to my settings. I can simply toggle this from watch app to watch face.
28:22
And when I run this on the phone, it will automatically convert this into a watch face app. Now, so what happens if you are a non-programmer? You wouldn't be here, right? So, let's assume that you don't want to spend too much time writing your code
28:40
and you say, I hate C. I just want to create some really nice app on my watch so that I can show my wife. Now, go to this website. If you have a machine with you right now, you can do that together. Go to watchfacegenerator.de and look at this. So, let me show you how to create a watch face app in one minute.
29:03
So, click start. Select the background color. You want white or black, so let's select black. Choose the background image. Choose the image that you want. So, do I have some sample images? Let me see.
29:24
Yeah, I have this basketball. So, select this guy. And this ball is automatically converted into a format recognized by Pebble. And I can change the size of this image. So, drag this.
29:40
And I can change the position. And select the brightness. So, okay, let's put it in the middle. And you can do a rotation. You can spin the ball if you want. Now, next. Do you want to show an analog clock or not?
30:02
So, if you say yes, okay. I'm going to show an analog clock. So, I can change the clock type. The hand style. The hand order. I can change the hand width. Anyway, this is not important. So, go down to the bottom. I can add some decoration.
30:21
So, let's go next. And do you want to show the digital watch? Yes. So, we have the time here. 14.43, for example. Now, what color do you want? White or black? So, in this case, we have to choose white. And what's the font size? Make it bigger if you want.
30:40
And change the offset. Okay. And click next. Do you want to show today's date? Yes. And you can change the different format. And what's the font size? Okay, this is pretty good. This is pretty good. Okay. And what's the height and the alignment, the offset? Okay.
31:00
So, let me just move it down a little bit. Okay. Okay, looks good. Next, you can add in some text. So, for example, you're trying to create a pebble app for your wife. And you know tomorrow is her birthday. So, go in and say happy birthday or whatever. Okay.
31:22
And once you're done, click next. And you can even choose to include the battery indicator. So, I can put the battery indicator up here. And I can change the position of this. This is a Bluetooth symbol. So, okay, that's it.
31:41
Click next. Give it a name. So, you say my wife watch face app. Okay. And click create. And it says wait for a minute. Okay.
32:00
That's it. So, those of you with a pebble watch, if you're wearing a pebble watch and you have a mobile device that's paired with this pebble watch, take out your phone, activate the barcode scanner, scan this image. And when you scan this image, it will download the PBW onto your phone. And onto your phone, it will install that onto your pebble watch.
32:21
Try this if you have that. So, try this if you want. Now, if you alternatively, if you don't want to scan in this, you can always type in the URL here. And you can always share it with your friends if you want. Anybody try that?
32:41
Okay. So, let's see whether it works.
33:12
Now, for those of you who are interested to try this on your own, later on when you have the time, go to this URL. You'll be able to develop, try this out on your own.
33:24
Okay. So, I'm going to assume that it works. So, if it does not work, just assume that it works. Ah, there you go. Okay. Okay. So, it's there. Who else tried that? Anybody? Did you try that?
33:42
Oh, you couldn't find the app, is it? Oh, okay. Okay. Okay. So, you can install the, are you using an Android or iOS device? iOS, is it? You should be able to find a barcode scanner application from this company called Zebra Crossing.
34:01
Have you heard of that? Okay. It's okay. If you've got any problem, you can take this offline. Later on, I'll help you install this. I'll keep it here. Now, let's move on. Now, this session is about writing code, okay? So, I shouldn't really be showing you that part. So, okay.
34:25
Now, I just want to go through this slide here. So, now the size of a pebble app. So, a .pbw file contains your app binaries. That means your code that you have written, as well as your app resources. If you have pictures in your app,
34:41
that is inside your app resources folder. Now, just take note that after compilation, your app binaries must not exit 24K. And your app resources must not exit 96 kilobytes. So, this is the limitation of a pebble app.
35:00
So, I talk about watch apps as well as watch face apps. And so, this is what I have demonstrated. So, if you look at the one on the left, this is what we call a watch face app. So, basically, its use is to mainly display time, and you don't expect the user to really interact with it.
35:21
So, when you have a watch face app, the three buttons are disabled. Whenever you press, it's not going to be handled by your application. Whereas on the right, you have a standard watch app. So, your standard watch app allows the user to interact with your app through the three buttons on the right.
35:42
So, we can skip this. Now, for the navigation model, the windows goes in a navigation model. So, they are stacked up. So, just imagine a stacked data structure. First in, last out, last in, first out. So, now, let me just go through some of the things
36:01
that you can do with the pebble in terms of the programming capabilities. So, you can display text using different font sizes. So, what I have here is that I have a text layer. And in my text layer, I can set the alignment.
36:21
I can set the font as well as the font size. And after that, I'll add this to my window layer. So, apart from the standard text layer that was already created for you in the application template, you can also add your own text label. So, this is drawing.
36:42
Now, you can also draw paths. So, in this example here, in this example here, I have created a structure called the gpath info. And I set the members to number of points to six points. We want to draw six points.
37:01
And I specify the coordinates of each of the six points. And after that, I can actually create a gpath structure, rotate it by 15 degrees, translate this by 35 pixels on the horizontal scale,
37:21
as well as the vertical scale, 35. And I can fill the path, fill it with color, and outline the path so the end result will look something like what I have here. Okay? So, you can do your own customized drawings on the Pebble Watch.
37:41
Now, circles. You can also draw circles. So, in this example, I have two circles. In the first circle, I have drawn it using this. Just draw a circle. Now, in the second circles, I have drawn it as well as fill it with color.
38:03
Now, in this case, it's black. I can draw lines. Okay? I can draw rectangles. Now, for rectangles, it is pretty interesting. You can draw rounded corners. At the same time, you can also set which corner to round.
38:23
So, in the third block of code here, I have chosen to round the top left corner as well as the bottom right corner. So, these are the things that you can do. Now, you can also display what we call a number window.
38:40
So, very often, you want the user to enter a number, to select a number, for example, which year you were born. So, you can use what we call a number window. Display it. Set a caption. Set the event handler. What happens when you press the down button? Do you want to invoke another function?
39:00
What happens when you press the up button? Do you want to invoke another function to do something else? And what happens when the user has selected? So, in this case, you want to fire an event handler called year selected so that you can actually display the value that the user has entered. So, this is what we call a number window.
39:23
It allows you to display a UI for the user to cycle through a series of numbers. Now, you can also monitor your battery level. So, you want to, a lot of times in your application, you want to be able to know what is the current battery level of my Pebble Watch.
39:43
And at the same time, you want to keep on monitoring. What are the changes in battery levels? What happens when it reaches 20%? Do I need to sound a warning to the user or do I need to do some additional tasks? So, this is what you can do. Now, it has got a three axis accelerometer that allows you to measure acceleration in a three axis.
40:07
So, here is one simple code to allow you to handle changes to the accelerometer. As well as to subscribe to the changes in accelerometer data.
40:26
Now, for persistent storage, you can store your values in key value pairs on your Pebble Watch itself. Now, you can store the following types of values.
40:40
You can store a boolean value. You can store an integer value. You can store a string value. You can store a byte array, maximum 256 bytes. You can also store a structure, a struct. So, again, maximum 256 bytes. And each app is allowed a maximum of 4 kilobytes, 4K storage.
41:05
So, you don't have too much space to store data on your watch itself. Now, by itself, if you look at this, this watch itself, in terms of connectivity to the outside world, now, this guy is not really impressive.
41:23
Why? It only has got Bluetooth. And this guy doesn't have a GPS. It does not have Wi-Fi. It has got nothing. It only has got Bluetooth connection. So, when you pair this guy up with your mobile device, now, this fellow here, this mobile device becomes your gateway to the entire world.
41:43
So, if you want to access web services, for example, you can actually request your web services to be run on this phone here. And this phone can actually go out to the outside world, fetch the result from a web service, get it back, pass the result back to this watch.
42:01
So, like I mentioned, so the watch itself has got no network connectivity and no GPS. It relies on your mobile device for connectivity to the outside world. Now, how can you solve that? So, if you want to connect to the outside world, there are a number of ways.
42:23
So, first way, imagine that the user is using an iPhone. So, what you can do is you can write what we call a companion app for your Pebble Watch. So, my companion app runs and installs on my iOS device.
42:42
And my iOS device, my application, my iOS application uses this thing called the Pebble Kit for iOS. It's a set of APIs that allows your iOS application to talk to your Pebble Watch. So, this is the first option. Now, the second option is if the user is running on an Android device.
43:03
So, you write an Android application and you use the SDK Pebble Kit for Android, and your application will be able to connect to the internet to do whatever you want to do, and at the same time, communicate with your Pebble Watch. So, these are the two options available.
43:20
Now, remember earlier on, I mentioned that Pebble apps are all free of charge. So, how do you actually make money? How do you actually make money? This is the place for you to make money. So, you give away your Pebble app for free, but you charge for your companion app. So, if you want to make money, all you need to do is you tell the user,
43:41
hey, you can download my free Pebble app, but the app is useless unless you buy my companion app that installs on your iOS device or on your Android device. Now, the problem with this approach is now, at this moment,
44:01
you have to spend your efforts in developing your companion app for two platforms. So, you have to spend time writing for iOS. You have to spend time writing for Android. Now, what happens if one day Windows Phone becomes a significant platform
44:21
for developers to work on, and what do you do? So, developers have to write a third application for Windows Phone, for example. Now, this is not a very cost-effective way. Companies do not like that. I know developers like that because that gives you job security. So, is there a better way?
44:42
Now, let me talk about this part first. So, this is good because it gives you a native app, but the downside is that you have to develop individual applications. Of course, you can say that, oh, I can use Xamarin, and that's a good option. You can use Xamarin to develop an application that runs on iOS and Android,
45:03
and you have maximum code reuse. If that is an option for you, by all means go ahead and use Xamarin. Now, there is one more alternative. We want to take the middle path, JavaScript. So, let's write JavaScript, and let's write web apps.
45:21
So, Pebble introduces this feature, PebbleKit JavaScript, beginning with Pebble 2.0. So, how does it work? So, all you need to do is, this is what you need to do on your right-hand side. On the right-hand side, you write your traditional C code for your Pebble app.
45:43
Now, at the same time, you have another file, which is your JavaScript code. So, for example, you want your application to be able to communicate with the outside world. So, you want to communicate with the outside world to get your location, for example.
46:03
You want to talk to web services. So, put your code for getting your location data, put your code for connecting to your web services inside that JavaScript file. And so, what happens here is, once you have finished writing your code, you compile it, you install it onto your Pebble mobile app.
46:25
Now, during installation, the Pebble mobile app will strip away the JavaScript. It puts it on the Pebble mobile app itself and sends the C code over to your watch, and the watch runs as per normal. Now, when the watch wants to do something to connect to the outside world,
46:45
it will send a request to your JavaScript code that is going to run on the Pebble mobile app. So, the Pebble mobile app will run the JavaScript on your behalf, on the user's behalf. And once the JavaScript has finished execution, it will take the result and pass it back to your watch.
47:04
So, this is how it works. Now, the beauty of this approach is that you don't really have to deal with multiple platforms. You just need to know JavaScript. You just need to do your HTML5. And whatever things you can do with your HTML and your JavaScript, you can do it for this Pebble.
47:21
Okay? So, PebbleKit for JavaScript basically extends the functionality of your Pebble by running JavaScript code on the phone. And it's a platform agnostic, so you don't have to worry about multiple platforms.
47:40
And this is what actually happens. You bundle your JavaScript code with a Pebble app, and the phone extracts and installs the code during app installation. And the JavaScript code runs within a sandbox inside the Pebble mobile app. And basically, you send requests to and fro the Pebble watch and the Pebble mobile app
48:02
to execute your JavaScript. So, this is what I just mentioned. Now, I have one example that I have written. But unfortunately, I'm not able to show you the watch. But later on, if you are interested, I can show you. Now, this is one application that I have written.
48:21
So, what you can very easily do is, you can... What happens if you want to know your location? So, all you need to do is write your JavaScript code to find your location. So, you can use the JoeLocation class to do that. So, when I press the button on my watch,
48:40
it will send a request to my JavaScript code and tell him, hey, I want you to find out your location. So, on the phone itself, it will find out what's your latitude and longitude. I can return a latitude and longitude onto my watch. But the next thing I want to do is, having known the location, I want to do something more interesting. I want to check out what is today's weather for this location.
49:01
So, again, on my JavaScript code, I can actually take the latitude and longitude, and I can use the XMLHDDRequest class, go out to the web services, connect to a web service, pass them the location. They give me back my weather information. I send it back to the watch. So, I can have location.
49:21
I can have the weather information. Now, one more example. If you want to write an application that checks for stock prices, now, this is what you can do. So, you can actually press a button. Every time you want to know what is the latest stock price, press a button, send to your phone. Your phone goes to the outside world, to the Internet.
49:40
Consumer web service pulled out the data, passed back to this watch. So, this is what you can do. Now, next thing. Continuing with the example of stocks application. So, now, a typical person may have a few stocks
50:01
that they want to monitor in their portfolio. So, for example, there are a list of stocks that you can actually monitor. So, one very common way would be for the user to be able to select what are the stocks that they want to monitor. So, instead of asking the user to scan through the list here,
50:21
it might be better for the user to say, okay, I want to go to my Pebble mobile app, touch on that app, and I can say, oh, I want to configure my app to display the stock prices for the four stocks that I have purchased, for example. So, you want to provide an easy way for the user
50:41
to customize the behavior of your app. So, now, in Pebble, this is known as the settings. Now, those of you who are wearing a Pebble watch, if you look at the Pebble mobile application, you will realize that whenever you touch on an application,
51:02
sometimes you will see this button that says settings. So, when you touch on this settings, this is what happens. Let me say this again. When you touch on this application, this icon itself, it will display a window like this,
51:23
and you can tap on this item, settings. Now, when you touch on this settings button here, what actually happens is that it will load a page that allows you to further customize the behavior of the app. And what I'm trying to tell you here is this application,
51:43
this page here, you can create this using HTML. So, at this moment, the Pebble SDK requires you to host this HTML page on your own web server, on your own web server. So, what happens here is that when the user clicks on
52:04
or touches on this settings button, it will go to your web server that you specified in your code, pull up this HTML file, and in this case, you can do whatever you want. So, for example, you can allow the user to choose
52:20
which country you are from, which operating system are you using, and then when you click save, what will happen is this HTML page will send the result that you have selected here back to your Pebble mobile app. Your Pebble mobile app will send this information over to your Pebble watch.
52:42
So, this is what you can do using this concept known as configuration page. And continue on this example. Now, earlier on, remember, when I talk about Pebble apps and I mentioned about storage, I mentioned that you can store your data in key value pairs on the Pebble watch itself,
53:01
and it is limited to four kilobytes. Now, when you have too much information to store, you exit the four kilobyte limitation. The next method that you should use is to store your data on your JavaScript. So, using the JavaScript, you can store it locally on your Pebble mobile app.
53:20
So, that is another technique that you can use to store more information than what is allowed on your Pebble watch. Okay? So, this is the configuration page. Okay. So, we are almost done. Now, recently, because of the many devices out there,
53:40
because of the intense competition, so a lot of people are asking, is Pebble here to stay? So, we did go out of business with all the intense competition from the other manufacturers. So, here is some factors that I thought is important to the success of a platform.
54:04
So, if you look at Pebble itself, you look at common development platform. Now, it uses the C language. Now, I believe... Now, how many of you actually know C? Okay, it's about 99%.
54:21
So, this is common development platform, right? Everybody knows C. So, I don't know whether you want to take this or you want to uncheck this. But I think C is not too painful a language to learn. Now, you heard about this platform called Tizen by Samsung?
54:42
No? Never mind. Okay. Never mind. Now, does this platform allow you to integrate with your backend? Yes, it allows you to integrate with your iOS as well as your Android apps, and it also allows you to integrate with your backend using JavaScript.
55:01
So, it has got access to your backend services, your enterprise data, for example. Does it have a strong ecosystem? Now, at this moment, Pebble is pretty impressive in that it has got its own SDK, and the SDK is pretty stable, and they have their own app stores.
55:21
And your companion apps also are available either on iOS app store or on the Google Play store. So, in terms of ecosystem, I think they are pretty strong. Now, this is one part that might be a little bit challenging for Pebble in the long run. So, if you look at Android Wear,
55:41
the devices that is coming out from Google as well as its partners has got colored screens, has got touch screens, has got voice input. I think this is one area that is very challenging for Pebble. So, hopefully, they would have a next version of Pebble.
56:00
Hopefully, they call it Pebble Go that allows you to have colored screens, touch navigation, voice inputs, or whatever. So, this is one area that I think is a little bit limiting for Pebble. Fashionable device. Now, earlier on today in my Android Wear session,
56:22
I was asking, who actually wears a watch nowadays? How many of you actually wear a watch? And the rest, you don't wear watches anymore. Okay, so there must be a very strong push to encourage you to buy a watch. So, Pebble recognized this,
56:40
and they came up with the Pebble Steel. And this is the watch that looks really professional. So, if you are going for a dinner event or whatever, you probably would not want to wear the white Pebble. So, you probably want to wear the Pebble Steel to go to a function or whatever. So, there must be some important push, motivations to get people to buy the watch.
57:03
Cross-platform. At this moment, it supports iOS and Android. What other platforms are important? Now, at least in Norway, what are the dominant mobile platforms? Is it iOS, Android?
57:22
iOS? Oh, at least iOS and Android. So, they are available on these two platforms. So, it's pretty safe. Okay, so I think I'm almost done. Any question? Go ahead.
57:41
Right, so that's what they say. Yesterday, they announced that they have included support for iBeacons. And what they have mentioned is that they are able to detect whether your phone is near an iBeacon. So, I have not looked at a detailed documentation, but that's what they have promised. So, but I think it's going to be cool.
58:00
I think what they're going to do is they are able to let you write an application to detect whether the phone that you are attached to is it near an iBeacon. Okay? And there are some other suggestions on their forum. People are saying that since you have Bluetooth low energy,
58:21
are you able to expose the Bluetooth low energy APIs to us so that we can actually make this an iBeacon? So, as you travel, you can actually broadcast this. So, you can think of a number of really interesting applications that you can actually build. And I think the guys from Pepper says that that is a very interesting idea, but we're going to look at that.
58:43
Okay? So, any other questions? Good question. How good is the documentation? It's good. It's good. It's good.
59:00
Okay? It's better than Google. If you write Android apps, you know. Okay. That's all I can say. This is not recorded, right? So, anyway. Okay. So, if you've got no questions, thank you very much for coming. So, if you have any questions, you want to take this offline,
59:22
please feel free to come out and we can have a good chat. Okay? So, if not, have a nice day. Thank you very much.
Recommendations
Series of 22 media