This project uses a web page using the Web Bluetooth API to control an Adafruit Circuit Playground Bluefruit LE (Low Energy). The web page logic described in this project can be easily adapted to other Bluetooth LE applications and eliminates the need to create custom mobile applications for different platforms. If desired, you can also directly bolt the Circuit Playground Bluefruit to a Circuit Playground Express making it possible to both increase your processing power and the number of ports you can control.

Step 1: Load Software Into Circuit Playground Bluefruit

After attaching your Circuit Playground Bluefruit to your laptop (PC or Macbook) with a USB to micro USB data sync cable, double-click the reset button on the board to activate the Bluefruit board's bootloader. Your board should show a ring of green lights and you should be able to see a CPLAYBTBOOT drive on your laptop. Consult the Adafruit website if you aren't able to get this working. Now, load the RTBobbleCPX.hex code from Reach and Teach into your Bluefruit board by dragging the attached file into the CPLAYBTBOOT drive. Pretty quickly, your board should have a blinking red LED which means that the board is waiting for a Bluetooth connection.

What does RTBobbleCPX do? This code installs a Bluetooth BLE UART model into the Bluefruit device that essentially makes the device look like a Bluetooth serial terminal that responds to special one letter commands issued by the web interface code. This instructable will get you up to speed in many of the features of this code. My next instructable will go into greater detail into the full functionality of RTBobbleCPX.

RTBobbleCPX.hex
Download

Step 2: Web Page Code

The web page code you will need to communicate with the Circuit Playground Bluefruit can be found at https://www.reachandteach.com/test52.html . You are welcome to directly use that link. You are also free to copy and paste the code onto your own server or as a local file on your laptop. Note that if you want to put the code on your own server, it must be delivered as a secure https file, otherwise it will not work. The web page uses the Web Bluetooth API described at https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API.

Step 3: Pick the Right Browser

If using this web page on an Android mobile device, you need to access this page using a Chrome browser.

If using this web page on an iPhone or iPad, you will need to use a browser that is capable of running the Web Bluetooth API. Unfortunately, IOS versions of Safari, Firefox, Chrome, and Opera do not currently support this API. The Bluefy browser which can be downloaded for free in the Apple Store works great.

If using this web page on a Windows machine with a Bluetooth 4.0 interface, you need to use a Chrome browser.

Hopefully other browsers will work in the near future, but for now, these are the ones to use.

Step 4: Make the Connection

Loading https://www.reachandteach.com/test52.html in the correct browser will bring up a screen that looks like the screenshot shown. At this point, make sure that your Circuit Playground Bluefruit has power. Click on the Connect button on the web page and you will see potential devices to connect to. Select the device labeled RTBobbleCPX. The red LED on the Bluefruit will stop blinking when the connection is made. Try clicking on the R, O, Y, G, B, V buttons. This should cause a ring of LEDs on the Bluefruit to display the colors Red, Orange, Yellow, Green, Blue, and Violet. You are successfully controlling the Bluefruit with your mobile device over Bluetooth!

As you click on various buttons (except the CONNECT and DISCONNECT buttons), the command being executed will appear in the EXECUTE COMMAND field. You can also directly type commands into this field and click the EXECUTE COMMAND button. The CLEAR button will clear this field.

Step 5: Pad and Sensor Functions

The RTBobbleCPX software pre-assigns various functions to the various pads of the Circuit Playground Bluefruit. The assignments are as follows:

Pad 1: Servo data output. Controlled by servo angle buttons and Wag button.

Pad 2: Analog voltage input (0 to 3.3V). Read using the Read Sensor button (with sensor input = 0)

Pad 3: Capacitive input. Read using the Read Sensor button (with sensor input = 3)

Pad 4: Digital output. Controlled with ON, OFF, and Zap buttons

Pad 5: Digital output. Controlled by ← Reverse Arrow (LOW) and → Forward Arrow (HIGH)

Pad 6: Digital output. Controlled by ← Reverse Arrow (HIGH) and → Forward Arrow (LOW)

Temperature sensor: Read using the Read Sensor button (with sensor input = 1). Fahrenheit x 10, so 653 is 65.3F

Light sensor: Read using the Read Sensor button (with sensor input = 2)

Push Buttons A and B: Read using the Read Sensor button (with sensor input = 4)

Tilt sensor: Read using the Read Sensor button (with sensor input = 5)

The sensor input can be selected by using the "X" command in the Execute Command field. 0 X will select sensor input 0; 1 X will select sensor input 1; 2 X will select sensor input 2; etc.

Step 6: Attaching and Controlling a Servo

To control a hobby servo, first attach it to the Circuit Playground Bluefruit as follows:

Connect the Orange or Red servo wire to the Vout pad of the Circuit Playground Bluefruit
Connect the Brown or Black servo wire to any Ground (GND) pad of the Circuit Playground Bluefruit
Connect the Yellow or White servo wire to pad A1 of the Circuit Playground Bluefruit

You can now control the servo angle with the 0, 45, 90, 135, 180, and Wag buttons. Wag creates a repeated loop that moves the servo between 0 degrees and 90 degrees every 3.5 seconds. You can cancel the Wag function by clicking on the Disable Trigger button. You will notice that servo buttons cause "s" commands to be executed. You can also use the "s" command to invoke other servo angle settings. For example, the command line "120 s" will cause the servo to move to 120 degrees. You can also control a continuous rotation servo with the "s" command.

You will notice that the Wag button invokes the command sequence: 0 s ( 90 s ) 3500 *

This is what causes the looping between 0 and 90 degrees with a 3500 msec (3.5 seconds) delay. Try other versions of this command line to change the angles and/or change the delay.

Step 7: Attaching and Controlling a Motor

A L293D chip provides an easy way to control a motor (actually you can control two motors with the chip). All you need to do is connect up control signals for enabling the motor and the direction you wish it to turn. Finally, wire in the motor, power and ground, and you are set to go.

First connect the Circuit Playground Bluefruit's Vout, Ground (GND), A4, A5, and A6 as shown in the photo. Connect the motor to the two motor pins on the L293D.

You should now be able to use the ON/OFF buttons to turn the motor ON and OFF. The Forward (→) and Reverse (←) arrow buttons will control the direction of the motor. ZAP will turn the motor ON for 750 ms and then turn the motor OFF.

Step 8: Connecting a Solid State Relay (SSR)

A LCA710 Solid State Relay is a very useful chip for computer controlling a low power circuit. It essentially can be used to replace a switch in any circuit. Simply attach Pad 4 of the Circuit Playground Bluefruit to pin 1 of the LCA710 through a 1K resistor. Attach pin 2 of the LCA710 to any Ground (GND) pad of the Circuit Playground Bluefruit. Finally, replace the switch of your circuit with connections to pin 4 and pin 6 of the LCA710.

You can now use the ON/OFF button in the web interface to turn your circuit ON/OFF. Using your phone to turn a circuit ON and OFF couldn't be easier!

Step 9: Have Fun Playing With the LED Color Lights

You have probably noticed that clicking on the various color buttons (R, O, Y...) causes an N command to be invoked. So, the "R (red)" button invokes the command line: "0 49 500 N". The syntax for this command is "startLED stopLED color N". But there are only 10 LEDs on the Circuit Playground Bluefruit, so why the 49? That's because this web page was designed to work with other Adafruit bluetooth devices and can support a strand of up to 50 LEDs (0 to 49). For the Circuit Playground Bluefruit, you could have used the command "0 9 500 N" and it would have worked just fine.

The color number (500 for the R button) is a 3 digit number where each digit (0 to 9) represents the relative amount of Red, Green, and Blue to mix in creating the LED colors.

Here are some color number recipes for various colors but you should feel free to mix your own color combinations:

700 Red
710 Orange
730 Yellow
070 Green
055 Cyan
007 Blue
405 Violet
723 Pink
555 White

It's also not necessary for all the LEDs to be the same color. The following command line will create a pattern of Red, White, and Blue where the first LEDs (0,1,2) will be red, the next 4 LEDs (3,4,5,6) will be white, and the last three LEDs (7,8,9) will be blue:

0 2 700 N 3 6 555 N 7 9 007 N

Step 10: Bolt on a Circuit Playground Express to Do More

Bolt on a Circuit Playground Express to the Circuit Playground Bluefruit in order to add capabilities, more sensors, ports, and processing power. Simply use 6 M3 12mm standoffs and screws to bolt the two products together. The bolts should connect Vout, A4, A5, A6, and a couple of the Ground(GND) pads as shown. The ON/OFF buttons of the web interface control the logic levels of A4. The Reverse (←) and Forward Arrow buttons control the logic levels of A5 and A6. All you need to do is have your Circuit Playground Express test the logic levels of A4, A5, and A6 and take whatever action you want using CircuitPython, Makecode, or C++. Your Circuit Playground Express application has just become a Bluetooth controlled application with very little additional coding.

Step 11: More to Come...

Thanks for checking out this instructable. This was intended to get you started and to be a basic introduction in using the RTBobbleCPX software and the Circuit Playground Bluefruit. Stay tuned for my next instructable that goes into more detail about some advanced features including working with sensors (both the ones built in and other ones you may wish to add). We'll also give you some additional project ideas that I think you'll want to try out. You can find preliminary documentation for RTBobbleCPX in the attached file below. Please let me know what you think of this instructable and also let me know what you build with this!