# Using the Bluefruit Dashboard with Web Bluetooth in Chrome ## Overview ![](https://cdn-learn.adafruit.com/assets/assets/000/090/187/medium800thumb/sensors_main_image.jpg?1586189439) Bluetooth LE (BLE) is a common way for mobile devices to connect to accessories, watches, and toys. Getting that same connectivity on the desktop has been really challenging - every platform does it differently and it's still not very stable. Luckily, there's now a cross-platform way to connect to BLE devices on any computer - Web Bluetooth lets you connect to BLE devices, right from your browser! In this guide we'll show how you can test BLE devices from Adafruit in the browser, streaming in sensor data, even controlling LEDs and buzzers using the Adafruit Bluefruit Dashboard page. It works by making a Bluetooth connection to a device, then it queries which services are available and creates interactivity panels in the dashboard for those services. The more services, the more panels. So the Circuit Playground Bluefruit will look different than the Adafruit CLUE because the CLUE has more sensors. The dashboard will then receive notifications from the Bluetooth device and update the data on screen at regular intervals. This guide will go over: - Installing the firmware - Preparing Chrome if you have Linux - Connecting to the dashboard and using it, and - Discuss taking the dashboard further To get started, all you will need are a Bluetooth board with sensors such as the **Circuit Playground Bluefruit** , **Adafruit CLUE** or **Feather Bluefruit Sense**. ## Parts ### Adafruit CLUE - nRF52840 Express with Bluetooth® LE [Adafruit CLUE - nRF52840 Express with Bluetooth® LE](https://www.adafruit.com/product/4500) Do you feel like you just don't have a CLUE? Well, we can help with that - get a CLUE here at Adafruit by picking up this sensor-packed development board. We wanted to build some projects that have a small screen and a lot of sensors. To make it compatible with existing projects, we made... In Stock [Buy Now](https://www.adafruit.com/product/4500) [Related Guides to the Product](https://learn.adafruit.com/products/4500/guides) ![Animated GIF showing CLUE board displaying data from the many on-board sensors.](https://cdn-shop.adafruit.com/product-videos/640x480/4500-04.jpg) ### Circuit Playground Bluefruit - Bluetooth® Low Energy [Circuit Playground Bluefruit - Bluetooth® Low Energy](https://www.adafruit.com/product/4333) **Circuit Playground Bluefruit** is our third board in the Circuit Playground series, another step towards a perfect introduction to electronics and programming. We've taken the popular Circuit Playground Express and made it even better! Now the main chip is an nRF52840... Out of Stock [Buy Now](https://www.adafruit.com/product/4333) [Related Guides to the Product](https://learn.adafruit.com/products/4333/guides) ![shot of a Black woman's neon-green manicured hand holding up a Circuit Playground Bluefruit glowing rainbow LEDs.](https://cdn-shop.adafruit.com/640x480/4333-11.jpg) ### Adafruit Feather nRF52840 Sense [Adafruit Feather nRF52840 Sense](https://www.adafruit.com/product/4516) The **Adafruit Feather Bluefruit Sense** takes our popular [Feather nRF52840 Express](https://www.adafruit.com/product/4062) and adds a smorgasbord of sensors to make a great wireless sensor platform. This Feather microcontroller comes with Bluetooth® Low Energy and... In Stock [Buy Now](https://www.adafruit.com/product/4516) [Related Guides to the Product](https://learn.adafruit.com/products/4516/guides) ![Angled shot of blue, rectangular, microcontroller.](https://cdn-shop.adafruit.com/640x480/4516-06.jpg) ### USB cable - USB A to Micro-B [USB cable - USB A to Micro-B](https://www.adafruit.com/product/592) This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller Approximately 3 feet / 1 meter long In Stock [Buy Now](https://www.adafruit.com/product/592) [Related Guides to the Product](https://learn.adafruit.com/products/592/guides) ![USB cable - USB A to Micro-B - 3 foot long](https://cdn-shop.adafruit.com/640x480/592-01.jpg) # Using the Bluefruit Dashboard with Web Bluetooth in Chrome ## Installing Firmware The firmware that runs on your Bluetooth board is the same firmware that is used with Bluefruit Playground. You may wish to download the latest version below. There have been some recent additions such as a quaternion service which allows you see a model that is rotated in real time by the orientation of your board. ## Download the Firmware The first step is to download the firmware that is appropriate for your board: [Download firmware for the Circuit Playground Bluefruit](https://cdn-learn.adafruit.com/assets/assets/000/088/902/original/Bluefruit_Playground__CPB.UF2?1583340048) [Download firmware for the Feather Sense](https://cdn-learn.adafruit.com/assets/assets/000/088/903/original/Bluefruit_Playground_Sense.UF2?1583340073) [Download firmware for the CLUE](https://cdn-learn.adafruit.com/assets/assets/000/088/904/original/Bluefruit_Playground_CLUE.UF2?1583340079) ## Installing the Firmware The file you downloaded is in the UF2 format, which makes installation very easy. The procedure to install it is as follows: 1. Connect a USB cable and put the power switch in the “on” position 2. Double-tap the reset button 3. **Wait for the boot drive to appear!** This will appear as a disk drive with **BOOT** in the name 4. Drag the UF2 file to the boot drive and wait for it to copy over 5. The board will automatically reboot ![sensors_Screen_Shot_2020-03-04_at_9.07.14_AM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/906/medium640/sensors_Screen_Shot_2020-03-04_at_9.07.14_AM.png?1583342024) ## Getting the Source Code If you would like to find the source code, you will first need to install the nRF52 Board Support Package. For more information, you can follow the **Arduino Support Setup** page in our [Introducing Adafruit CLUE guide](https://learn.adafruit.com/adafruit-clue/arduino-support-setup). Once you have the package installed, select the appropriate board. ![sensors_select_board.png](https://cdn-learn.adafruit.com/assets/assets/000/090/204/medium640/sensors_select_board.png?1586210475) Open the example available at **file→examples→Adafruit Bluefruit nRF52 Libraries→**** Peripheral→bluefruit\_playground** ![sensors_open_example.png](https://cdn-learn.adafruit.com/assets/assets/000/090/205/medium640/sensors_open_example.png?1586210536) # Using the Bluefruit Dashboard with Web Bluetooth in Chrome ## CircuitPython You can also use the Bluefruit Playground app and the Bluefruit Bluetooth Web Dashboard with CircuitPython. There are CircuitPython programs that do the same thing as the Arduino UF2s listed in this Guide. This firmware takes more effort to install, so we recommend the Standalone Firmware UF2 for folks who just want to get started! # Install CircuitPython and Libraries You'll need to install a version of CircuitPython and a number of libraries specific to your board. Danger: ## Install CircuitPython on Circuit Playground Bluefruit Download the latest version of CircuitPython from the link below. If you need detailed help, follow [these instructions](https://learn.adafruit.com/adafruit-circuit-playground-bluefruit/circuitpython). ![sensors_circuitplayground_bluefruit.jpg](https://cdn-learn.adafruit.com/assets/assets/000/091/146/medium640/sensors_circuitplayground_bluefruit.jpg?1589405418) [Download CircuitPython for Circuit Playground Bluefruit from circuitpython.org](https://circuitpython.org/board/circuitplayground_bluefruit/) ## Install CircuitPython on CLUE Download the latest version of CircuitPython for CLUE from the link below. If you need detailed help, follow [these instructions](https://learn.adafruit.com/adafruit-clue/circuitpython). ![sensors_clue_nrf52840_express.jpg](https://cdn-learn.adafruit.com/assets/assets/000/091/145/medium640/sensors_clue_nrf52840_express.jpg?1589405370) [Download CircuitPython for CLUE from circuitpython.org](https://circuitpython.org/board/clue_nrf52840_express/) ## Install CircuitPython on Feather Bluefruit Sense Download the latest version of CircuitPython for Feather Bluefruit Sense from the link below. If you need detailed help, follow [these instructions](https://learn.adafruit.com/adafruit-feather-sense/circuitpython-on-feather-sense). ![sensors_feather-bluefruit-sense.jpg](https://cdn-learn.adafruit.com/assets/assets/000/091/162/medium640/sensors_feather-bluefruit-sense.jpg?1589476850) [Download CircuitPython for Feather Bluefruit Sense](https://circuitpython.org/board/feather_bluefruit_sense/) # Install Libraries Now you'll need to get the libraries. First download the library bundle that matches your CircuitPython version from the link below. You'll be download a zip file. Unzip the file, find the **lib** folder, and open it. Then copy the libraries listed for your particular board to the **CIRCUITPY** drive, which will show up when CircuitPython is running. [Download the CircuitPython Library Bundle from circuitpython.org](https://circuitpython.org/libraries) ## Libraries for Circuit Playground Bluefruit Copy these folders and files from the **lib** folder in the bundle to the **lib** folder on **CIRCUITPY**. If you need detailed help, follow [these instructions](https://learn.adafruit.com/adafruit-clue/clue-circuitpython-libraries). You may already have many of these libraries if you are already using CircuitPython on the board, but make sure they are up to date, particularly the BLE-related libraries. - **adafruit\_ble** - **adafruit\_ble\_adafruit** (you may not have this already) - **adafruit\_circuitplayground** - **adafruit\_lis3dh.mpy** - **adafruit\_thermistor.mpy** - **neopixel.mpy**   ## Libraries for CLUE and Feather Bluefruit Sense These boards have the same sensors, so the libraries you need are the same. Copy these folders and files from the  **lib**  folder in the bundle to the  **lib**  folder on  **CIRCUITPY**. If you need detailed help, follow [these instructions](https://learn.adafruit.com/adafruit-circuit-playground-bluefruit). You may already have many of these libraries if you are already using CircuitPython on the board, but make sure they are up to date, particularly the BLE-related libraries. - **adafruit\_apds9960** - **adafruit\_ble** - **adafruit\_ble\_adafruit ** (you may not have this already) - **adafruit\_bmp280.mpy** - **adafruit\_bus\_device** - **adafruit\_clue.mpy** - **adafruit\_lis3mdl.mpy** - **adafruit\_lsm6ds.mpy** - **adafruit\_register** - **adafruit\_sht31d.mpy** - **neopixel.mpy** # Add code.py Finally, you'll add a **code.py** file that will talk to the Bluefruit Playground app. ## Circuit Playground Bluefruit code.py Download this file and copy it to **CIRCUITPY** , naming it **code.py.** https://github.com/adafruit/Adafruit_CircuitPython_BLE_Adafruit/blob/main/examples/ble_adafruit_circuitplayground_bluefruit.py ## CLUE code.py Download this file and copy it to  **CIRCUITPY** , naming it  **code.py.** https://github.com/adafruit/Adafruit_CircuitPython_BLE_Adafruit/blob/main/examples/ble_adafruit_clue.py ## Feather Bluefruit Sense code.py https://github.com/adafruit/Adafruit_CircuitPython_BLE_Adafruit/blob/main/examples/ble_adafruit_feather_bluefruit_sense.py # Using the Bluefruit Dashboard with Web Bluetooth in Chrome ## Preparing Chrome If you are using a recent version of Chrome with Windows or MacOS, you should be good to go. To use Chrome with Web Bluetooth on Linux will require a little more preparation. If you visit the dashboard at [https://adafruit.github.io/Adafruit\_WebBluetooth\_Dashboard/](https://adafruit.github.io/Adafruit_WebBluetooth_Dashboard/) and see a message stating that Web Bluetooth is not supported, this is how to fix it. ![](https://cdn-learn.adafruit.com/assets/assets/000/090/203/medium800/sensors_feature_not_enabled.jpg?1586195390) In the address bar for Chrome, type **chrome://flags** and press enter. This will take you to the internal Chrome flags settings. In the search box, type in **enable-experimental-web-platform-features** and you should see only one result. ![](https://cdn-learn.adafruit.com/assets/assets/000/088/946/medium800/sensors_chrome_flags_experimental.png?1583355336) Change **disabled** to **enabled** and click the **Relaunch** button. ![](https://cdn-learn.adafruit.com/assets/assets/000/088/947/medium800/sensors_chrome_flags_restart.png?1583355433) That's it! You should be ready to go. # Using the Bluefruit Dashboard with Web Bluetooth in Chrome ## Using the Dashboard The dashboard is a pure JavaScript application that starts by connecting to your board, then it queries which Bluetooth services are supported, and dynamically generates the dashboard to only show the services that are available. You can get to the dashboard by navigating in Chrome to [https://adafruit.github.io/Adafruit\_WebBluetooth\_Dashboard/](https://adafruit.github.io/Adafruit_WebBluetooth_Dashboard/) or clicking the button below. [Open the Web Bluetooth Dashboard](https://adafruit.github.io/Adafruit_WebBluetooth_Dashboard/) ![](https://cdn-learn.adafruit.com/assets/assets/000/090/188/medium800/sensors_disconnected.png?1586189866) ## Connecting Connecting to the dashboard is pretty simple. Just click on the button marked **Connect**. A dialog should come up showing you the various Bluetooth Connections that are available. ![](https://cdn-learn.adafruit.com/assets/assets/000/090/189/medium800/sensors_connect_button.png?1586189944) By default it will show only known boards. However, if you have a different board, you can uncheck **Show only known devices** and it will show you everything it detects. ![](https://cdn-learn.adafruit.com/assets/assets/000/088/922/medium800/sensors_Connections.png?1583350416) Once you are connected, you should several panels appear. The exact number depends on the board and firmware you are using. Try playing around with the board and see what happens. ![](https://cdn-learn.adafruit.com/assets/assets/000/090/190/medium800/sensors_connected.png?1586190048) ## Types of Panels There are several different kinds of panels and they are designed for different purposes. Some types of data can be displayed on different types of panels. For instance, sensor data could either be displayed with a text panel, which will show the latest values or it can be graphed with a graph panel. ### Text Panels Text panels are your basic panel which will show the data value as text. For each panel, a format field is applied so that it shows up in a more meaningful way. At this time, no text panels are being used. They are useful as a basis for testing new sensors. ![sensors_Text_Panel.jpg](https://cdn-learn.adafruit.com/assets/assets/000/090/198/medium640/sensors_Text_Panel.jpg?1586191922) ### Graph Panels Graph panels allow you to display the data as a graph. It can show either one data dataset as with the temperature or it can show multiple datasets such as with the accelerometer. The latest data will always show in the top half of the panel as indicated by the circles. ![sensors_Graph_Panel.jpg](https://cdn-learn.adafruit.com/assets/assets/000/090/197/medium640/sensors_Graph_Panel.jpg?1586191040) ### Color Panels Color panels are designed for changing the color of NeoPixel LEDs. They are less flexible than most of the other panels due to their need to be pretty specific. It's possible to have multiple color pickers that each change the same set of NeoPixels. ![sensors_Color_Panel.jpg](https://cdn-learn.adafruit.com/assets/assets/000/090/196/medium640/sensors_Color_Panel.jpg?1586190906) ### 3D Panels The 3D panel is meant for displaying the orientation of the board and is also pretty inflexible since there is only one quaternion service and this displays the data from there. ![sensors_3D_Panel.jpg](https://cdn-learn.adafruit.com/assets/assets/000/090/195/medium640/sensors_3D_Panel.jpg?1586190779) ### Custom Panels The custom panel is for unique panels that are primarily used by a single sensor that have controls that are unlike other panels. The battery and tone panels are custom panels because of it made more sense to go this route. ![sensors_Custom_Panel.jpg](https://cdn-learn.adafruit.com/assets/assets/000/090/192/medium640/sensors_Custom_Panel.jpg?1586190490) ## Available Panels There are over a dozen different panels currently available. These panels are: ### Battery This will display the battery percentage as both a graphic and text. The color of the battery will change depending on the charge level. ### Temperature This will display the current temperature in Celsius in a graph. ### Light This will display the current light level in a graph. ### Accelerometer This will display the X, Y, and Z axes in meters/second2 a graph. ### Gyroscope On older versions of the firmware, this will display the Gyroscope values X, Y, and Z axes in radians in a graph. ### Magnetometer On older versions of the firmware, this will display the Magnetometer values X, Y, and Z axes in micro-Teslas in a graph. ### Buttons This will display the current button or buttons as a graphical representation The number of buttons displayed depends on the type of board connected. ### Switch This will display the current switch position as a graphical representation if the current board has a switch. This is tied into the button service. ### Humidity This will display the relative humidity as a percentage in a graph. ### Barometric Pressure This will display the Barometric Pressure in hectoPascals. ### Tone Clicking the button in this panel will play a 440Hz tone for 1 second. ### NeoPixel This will give you a color picker and changing the color will change the color of the NeoPixel LED(s) on the board. On the Circuit Playground Bluefruit, it will light up the entire ring of NeoPixels. ### 3D Model This will display a bunny and changing the orientation of the board should change the orientation of the bunny. ## The Log At the bottom of the page is a log that will show you some of the device information including some of the services and characteristics that were found when the device connected as well as messages about connecting and disconnecting. ![](https://cdn-learn.adafruit.com/assets/assets/000/090/202/medium800/sensors_log.png?1586192834) There are a few other controls such as **AutoScroll** , which will automatically scroll the log, **Show Timestamp** , which will print a timestamp beside every line in the log, and a **Clear Text** button. The Clear Text button will clear any data that has transferred, but keep the connection open. The application is targeting 30 frames per second. It can actually run faster than this, but slowing it down gives the browser time enough to respond to notifications. ## Dark Mode Finally, let's not forget about Dark Mode. The dashboard supports a couple of different color themes, which are light and dark mode and you can alternate between them by checking and unchecking the Dark Mode checkbox. As you can tell by the screenshots in this guide, we like dark mode. # Using the Bluefruit Dashboard with Web Bluetooth in Chrome ## Taking it Further We recently moved the Web Bluetooth dashboard from a service called glitch over to GitHub pages. While not as easy to create a copy as glitch, you can fork the repository to your own GitHub account or submit Pull Requests to enhance the dashboard. ## Adding new boards In the code, you will find an object that defines the boards with a few different options. Adding a new board is pretty easy with just a few options such as the number of NeoPixels, the color order for NeoPixels and whether it has a switch. ## Adding new panels Adding new panels is similar to adding a new board, but there are a few more options. If you want to use one of the existing panel types, all you need to do is add a new entry to the panels and it should automatically appear, provided your board has a service and characteristic that matches what you define. ## Making it better If you do remix the dashboard and make it even better, please let us know. We would love to see what you've done with it and maybe we can even incorporate some of your improvements in our dashboard. ## Featured Products ### Adafruit CLUE - nRF52840 Express with Bluetooth® LE [Adafruit CLUE - nRF52840 Express with Bluetooth® LE](https://www.adafruit.com/product/4500) Do you feel like you just don't have a CLUE? Well, we can help with that - get a CLUE here at Adafruit by picking up this sensor-packed development board. We wanted to build some projects that have a small screen and a lot of sensors. To make it compatible with existing projects, we made... In Stock [Buy Now](https://www.adafruit.com/product/4500) [Related Guides to the Product](https://learn.adafruit.com/products/4500/guides) ### Circuit Playground Bluefruit - Bluetooth® Low Energy [Circuit Playground Bluefruit - Bluetooth® Low Energy](https://www.adafruit.com/product/4333) **Circuit Playground Bluefruit** is our third board in the Circuit Playground series, another step towards a perfect introduction to electronics and programming. We've taken the popular Circuit Playground Express and made it even better! Now the main chip is an nRF52840... Out of Stock [Buy Now](https://www.adafruit.com/product/4333) [Related Guides to the Product](https://learn.adafruit.com/products/4333/guides) ### Adafruit Feather nRF52840 Sense [Adafruit Feather nRF52840 Sense](https://www.adafruit.com/product/4516) The **Adafruit Feather Bluefruit Sense** takes our popular [Feather nRF52840 Express](https://www.adafruit.com/product/4062) and adds a smorgasbord of sensors to make a great wireless sensor platform. This Feather microcontroller comes with Bluetooth® Low Energy and... In Stock [Buy Now](https://www.adafruit.com/product/4516) [Related Guides to the Product](https://learn.adafruit.com/products/4516/guides) ### USB cable - USB A to Micro-B [USB cable - USB A to Micro-B](https://www.adafruit.com/product/592) This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller Approximately 3 feet / 1 meter long In Stock [Buy Now](https://www.adafruit.com/product/592) [Related Guides to the Product](https://learn.adafruit.com/products/592/guides) ## Related Guides - [Adafruit Circuit Playground Bluefruit](https://learn.adafruit.com/adafruit-circuit-playground-bluefruit.md) - [Introducing Adafruit CLUE](https://learn.adafruit.com/adafruit-clue.md) - [Adafruit Feather nRF52840 Sense](https://learn.adafruit.com/adafruit-feather-sense.md) - [Flapping Halloween Vampire Bat](https://learn.adafruit.com/flapping-halloween-vampire-bat.md) - [LED Bullwhip with Motion & Sound Reactivity](https://learn.adafruit.com/led-bullwhip.md) - [PyLeap BLE Controlled NeoPixels with CLUE](https://learn.adafruit.com/pyleap-ble-controlled-neopixels-with-clue.md) - [PyLeap Tone Piano for Circuit Playground Bluefruit](https://learn.adafruit.com/pyleap-tone-piano-for-cpb.md) - [BLE Beacon NeoPixels](https://learn.adafruit.com/ble-beacon-neopixels.md) - [Wirelessly Code your Bluetooth Device with CircuitPython](https://learn.adafruit.com/wirelessly-code-your-bluetooth-device-with-circuitpython.md) - [Bluetooth TV Zapper](https://learn.adafruit.com/bluetooth-tv-zapper.md) - [Wireless Image Transfer with Circuit Playground Bluefruit and TFT Gizmo](https://learn.adafruit.com/wireless-image-transfer-with-circuit-playground-bluetooth-and-tft-gizmo.md) - [CircuitPython BLE Heart Rate Zone Trainer Display](https://learn.adafruit.com/circuitpython-ble-heart-rate-monitor-gizmo.md) - [Glowing Bottle Castle and Capacitive Touch Piano](https://learn.adafruit.com/glowing-bottle-castle-and-capacitive-touch-piano.md) - [Snow Globe with Circuit Playground Bluefruit](https://learn.adafruit.com/snow-globe-bluefruit-cpb.md) - [Bluefruit LE Connect for iOS and Android](https://learn.adafruit.com/bluefruit-le-connect.md) - [¡Bienvenido a CircuitPython!](https://learn.adafruit.com/bienvenido-a-circuitpython-2.md) - [Bluefruit TFT Gizmo ANCS Notifier for iOS](https://learn.adafruit.com/ancs-gizmo.md) - [No-Solder PaperCraft Crystal Light Strand](https://learn.adafruit.com/no-solder-papercraft-crystal-light-strand.md)