Introducing… ng-beacons!. Some weeks ago, I was looking to…

Some weeks ago, I was looking to manufacture a PCB (electronic circuit board) to help out with a project for my friend’s company, hirez.io, and as I was choosing the options for the board, it struck me: white color on a red background…that’s just like the angular logo!

This, along with some of my other recent projects, got me thinking about angular and the Internet of Things. If you’ve been following my other posts, you know that I love exploring all the cool things you can do with connected hardware, beacons, and all other sorts of fun, crazy things, and I was thinking about ways to get the rest of the angular development community as excited about what you can do with “connected angular,” and I thought that perhaps by modeling a beacon after the angular logo, our community will feel more “at home” with it.

Thus, the ng-beacon was born:

ng-beacon: a Bluetooth Low Energy (BLE) device that can act as a Physical Web Beacon or as an iBeacon, and can be interacted with via Web Bluetooth.

I wanted to keep the first prototype super simple, so it includes just the basics: a programmable BLE chip (nRF51822), a replaceable CR2032 battery, and a small switch (so you can easily turn it off when you are not interested in broadcasting). I also included a space for an optional Temperature/Humidity sensor.

How does angular fit in?

For me angular is not just a JavaScript framework — it’s about a community. I have a lot of friends from the angular community, and I’ve had the privilege of meeting a lot of brilliant developers going to and presenting at workshops and conferences about the technology.

As I mentioned earlier, the goal of the ng-beacon project is to bring the community closer to the world of smart/connected hardware, and to expose them to the possibilities and opportunities of integrating it with the Web. We are planning to create demo apps for the ng-beacon with angular, using the awesome angular-web-bluetooth library developed by Wassim Chegham. This means that as an angular developer, you will be able to connect to the beacon, configure it and read the sensors directly from your angular apps.

Where it goes from there, well, that’s up to the community to decide!

As for the beacon itself, the current iteration of the code is written in C, and you program it using Arduino — which I realize isn’t super “angular.” That said, the default firmware should suffice for most angular users, as it will allow configuring it as either Physical Web Beacon with a URL of your choice, as an iBeacon (with configurable UUID / Major / Minor parameters), and read the on-board temperature/humidity sensor (if available).

I have already started to explore using JavaScript to program the beacon itself instead of C. Ideally, you will be able to program it wirelessly, and upload new code from a web interface over the air, using Web Bluetooth, giving you an end-to-end solution all JavaScript. I hope this will make it even more appealing for our angular fellows. I am looking into the Espruino project as a solution for that, and so far, it seems really promising. I will publish another post when there is something working to show.

Update: the beacon is now programmable with JavaScript, and there is also a follow-up post about it!

So what can you do with it?

By default, the beacon is programmed to broadcast a Physical Web URL. We plan to make the beacon configurable, so you can connect to it using Web Bluetooth, and change the broadcast parameters — or perhaps you want to use it as a tracker beacon instead? Or maybe you want to read the temperature/humidity and set up an IFTTT to control how open or closed your futuristic windows are? Or maybe you want to do something as simple as change the broadcast interval/power to conserve battery?

We plan to build a demo app with angular and Web Bluetooth that will enable you to do all the above (okay, so maybe not the window thing… but we will be able to demo reading the temperature/humidity :).

Another cool use case that goes along with some of the Smart Bulb projects I’ve done recently, is that you could use the beacon chip to connect to other BLE devices around it and control them; there’s no technical reason why you couldn’t, for example, use the beacon to control a smart bulb in your home! I don’t foresee this as an “officially supported” feature of the firmware, but where there’s a will… ;)

Ok, great! Sign me up: where do I get one?

So far, I have only built a number of hand-assembled hardware prototypes (10 units so far):

I’ll say this: my soldering skills have improved immensely after this project!

If you are attending ngVikings or ng-conf, you can find me there with the prototypes. I plan to give them away to some people who can build awesome stuff with them, so if you have a cool idea, the time to see it through, patience, and the skills to work with a prototype hardware, you can share your ideas and why you should get one in a comment below, or fill the form linked in the end of this post — I can’t wait to see what you come up with!

Down the road, if there’s enough interest from the community, we may launch a Kickstarter campaign for ng-beacon, so everyone will be able to support the project and get one. Otherwise — you can build one for yourself!

ng-beacons ready for adventure!

DIY ng-beacon

The entire hardware and software for the beacon is open source. If you wish, you can build your own ng-beacon — though, you will need pretty good soldering skills, especially for the temperature sensor. I’ve made a Bill of Materials with everything you need to get in order to create your own ng-beacon, which also includes the AliExpress link to each of the components.

You can find the files you need to print the circuit board (PCB) inside the hardware directory of the project. I got my PCBs printed at PCBWay for $20 per 10 pieces…though shipping was a whole other fiasco that I’ll spare you here. If you need help with ordering the boards through PCBWay, just leave a comment below and I will send you instructions.

All told, all the components needed to build a single ng-beacon cost me around $6.5–7, but I don’t know how helpful this price will be, as it’s all dependent on the quantity you’re ordering in, where you’re shipping it to, and so on. Still: the goal is for this to be a relatively inexpensive project.

Reprogramming the Beacon

Reprogramming the beacon requires some external hardware — though this still shouldn’t be very expensive. There nRF51822 chip that powers the beacon uses the ARM architecture (the same CPU architecture that powers your phone / Raspberry Pi), and there is a standard way to debug and program ARM CPUs. It is called J-Link programmer, and I got mine here for under $10. If you have a Raspberry Pi, you can also use it as a programmer, these is a great tutorial for that by Adafruit.

The first step would be to connect your J-Link programmer to the beacon. You would need to connect four wires: 3.3V, DIO, CLK, and GND (Ground). Your programmer may have additional connections, but to reprogram the chip we use in ng-beacon, you only these four wires.

You will find the connections at the bottom part of the beacon, and you can see them labeled in the diagram below. The square pin is 3.3V— make sure you don’t connect it the other way around, otherwise, it can damage your beacon!

Keep in mind the connections… you don’t want to fry your beacon!

There are various ways to write nRF51822 code, but I am currently using Arduino, which I found the easiest way to accomplish the task. Simply grab the latest version of the Arduino Software, then follow the instructions here to add the nRF51 board.

Once you’re all set with the physical connections and the Arduino software, go then the Arduino Library manager (Sketch menu → Include Library → Manage Libraries…), and install the BLEPeripheral library. Both the board support and library are developed by SandeepMistry, who does a great service to the BLE community by creating and maintaining all these great open source projects.

Finally, set up your Arduino IDE as follows:

• Board: Generic nRF5182
• Chip — 16kB RAM, 256 kB flash (xxaa)
• Clock: RC Oscillator
• Softdevice: S130

Arduino Settings for Programming the ng-beacon

And voila — you are ready to upload new code to your ng-beacon!

Here are a few quick examples of what you can do with the beacon:

Example 1 — Physical Web (Eddystone Beacon)

The following code will constantly broadcast a Physical Web URL using the Eddystone protocol (which we’ve explored more in-depth in another post):

#include <EddystoneBeacon.h>EddystoneBeacon beacon;void setup() {
  beacon.begin(-12, "https://medium.com/@urish");
}void loop() {
  beacon.loop();
}

The code is super simple — you just specify the transmission power (-12 dBm in this example, which corresponds to about 15–20 meters of range) and the URL that you want to broadcast.

Example 2 —Simple iBeacon

The following code will broadcast an iBeacon:

#include <iBeacon.h>iBeacon beacon;#define UUID "56373971-a172-42a9-84d6-4c03ab2584e5"
#define MAJOR 10000
#define MINOR 1
#define POWER -50void setup() {
  beacon.begin(UUID, MAJOR, MINOR, POWER);
}void loop() {
  beacon.loop();
}

You learn about the various beacon parameters on the iBeacon Wikipedia Page.

Now, for some fun!

I do love fun, and the ng-beacon has already given me some great initial use cases. For example, I programmed purple eye to scan for the beacon and dance when it is coming closer:

We could also use the ng-beacon as our beacon of choice for the luggage project I talked about in my last post:

Beacons, angular, traveling… the good things in life.

And finally, someone on Twitter has already thought up a use for the temperature/humidity sensor:

Future Plans and a Call for help

As mentioned above, I — along with a few friends helping me get this project off the ground — plan to develop a demo showcasing some basic use cases for ng-beacon, but I’m also extremely interested in what you want to do with it!

I’d like to make an official call for your feedback, which is definitely needed. Which sensors would you like to see included in ng-beacon? What kinds of starter-capabilities would be helpful to have already baked-in? To that end, I created a short survey to gather some feedback:

Please take a moment to fill our survey tell us what you would like to see for ng-beacon!

There are also some other areas where we would love some community help: documentation, developing the control app, and developing the firmware for the beacon. We have a Slack channel where we discuss the ng-beacon — if you want to help, simply ping me on Twitter and you will get an invitation.