Bluetooth is a technology that you might use every day; This could be wireless headphones, game controllers or heart rate monitors, which all use Bluetooth. Until recently, I imagined technology like this required implementation of low level drives in C, but oh'boy, was I wrong! Thanks to Web Bluetooth, it is now possible to communicate with Bluetooth peripherals through the browser with JavaScript!


We will explore how we can create a web app using React, TypeScript and Web Bluetooth to control our favourite smart lights to make our home ready for Christmas 🎅



Disclaimer: Web Bluetooth is unfortunately still an experimental feature, primarily only available in Google Chrome for Desktop and Android. Check out the browser overview to figure out if your favourite browser is currently supporting Web Bluetooth.

Getting started

Web Bluetooth is an interface for communication between the browser and Bluetooth Low Energy (BLE) peripherals. The primary concepts of Bluetooth Low Energy are:

Devices and servers: The actual device you want to communicate with, and their server. (E.g. a smart bulb, heart rate monitor or a speaker)

Services: The device's feature interface (E.g. a smart bulb's battery interface, or its light interface)

Characteristics: The service's specific value (E.g. a smart bulb's light toggle, light strength or light color)

To connect to a device with Web Bluetooth, you have to use the function navigator.bluetooth.requestDevice. This will prompt a popup in your browser, displaying all the possible Bluetooth devices nearby. Note that we have to provide a filter of some sort, either by filtering by name (E.g. "Hue") or service provides (the service's UUID - A list of publicly allocated UUIDs can be found here.) Web Bluetooth has implemented some common services that can be provided as strings, which automatically will be translated to the corresponding UUID by Web Bluetooth - an example is "heart_rate".

Since we will try to connect to a smart bulb, which have no shorthands implemented in Web Bluetooth, we will have to use its UUID. But how do you find a service's UUID? Well, that really depends on the manufacturer; some will publicly announce its Bluetooth interfaces' UUIDs, while others won't. A great way of discovering Bluetooth devices, their services and their characteristics is an app called nRF Connect, available on iOS, Android and Desktop. We won't go too far in to the details on how to use this app; the main idea is to run a scan to find nearby devices and look at the services and characteristics the devices provide.

Turning the light on and off

There are multiple filters to use; services, namePrefix and name is only a subset. Best practice is to filter based on services, which will means that you can filter devices that actively announce that they are providing the service you are intending to use. Unfortunately, my smart lights did not announce the service they were providing, meaning that we have to filter based on their namePrefix. Our goal is to control a Philips Hue smart light, so we'll search for devices with names starting with "Hue". Since we are filtering by namePrefix, we also have to provide our intended service to the optionalServices field of the request object. If we only filter by namePrefix, we will get an error specifying that we have to either provide a service or optionalService.

Once we have connected to the server, we can start communicating with the different characteristics. The primary characteristics of a Hue bulb are:

Philips Hue Light On/Off Toggle ("932c32bd-0002-47a2-835a-a8d455b859dd")

Philips Hue Light Brightness Level ("932c32bd-0003-47a2-835a-a8d455b859dd")

Philips Hue Light Color ("932c32bd-0005-47a2-835a-a8d455b859dd")

We will start by connecting to the Toggle characteristic.

Our next challenge is to be able to read and send data from and to the characteristics. The format the characteristic/device expects, once again depend on the manufacturer. Luckily the On/Off Toggle-characteristic is primitive, and only expects either a 0 (light off) or 1 (light on). Note that the data is read and written as a DataBuffer, which can be handled in different ways. Fortunately in this case, we only have to worry about a single byte.


This snippet will read the state of the toggleCharacteristic, which will return a DataBuffer with a single Uint8 value which is either 0 or 1, indicating whether the light is on or off. We will then write the opposite value back to the characteristic to be able to toggle the light. Remember that the writeValue function only accepts DataBuffers, which we can provide using a Uint8Array.


Great! We can now turn our smart light on and off! 💡

Changing the color of the light

One of the coolest features of smart light might be the flexible RGB lighting - so let's have a look at how we can change the color of the light!


We have earlier discovered the characteristic named Philips Hue Light Color ("932c32bd-0005-47a2-835a-a8d455b859dd"), which we now will connect to the same way we connected to the On/Off Toggle-characteristic.


Once again the required format of the data depends on the manufacturer, but in this case, the characteristic expects four bytes; 0x01 as a header followed by the value of red, blue and green (yes, in that order). We can therefore create these functions:


We would assume that these functions would work - unfortunately, only setBlueLight is valid. This is once again due to the manufacturer and its specifications. The format of our three color bytes have some weird specifics; the total sum of the three values can be a maximum of 255 (0xFF), which is one full byte, and for some reason the characteristic does not like it when one value is full and the others are zero. To create a workaround for this our functions would look like this:

And voila! We can now set the color of our smart light!


Using Web Bluetooth with React

It is time to make everything we have made usable within our React app! A great way of enabling global access to functionality like this is to create a hook and a Context. We will start by creating the hook.

Initialize a react project, for example with create-react-app



Since we are using TypeScript, we'll have to install the types related to the web-bluetooth API.



Let's combine what we have learned so far in a hook named useSmartLight.ts

We have skipped some null-checks to make the code easier to read, but this is handled in the source code, which can be found here. We have now created a hook which enables us to connect to a smart light, see if it is connected and to toggle it on and off!



We can now use our hook to control the smart light!

Let's add color control! We have to extend our hook with the color functions we defined earlier.



Let's create some buttons and test our new functions!

We can now toggle and change the color of our light!

Now what?

Now that we have gotten a basic understanding of how we can control our smart light, we can extend our functionality interface by implementing e.g. dimming or functionality to change the color based on a standard color hex string (#RRGGBB). An other improvement can be to create a SmartLightContextProvider, which will ensure us that our device is easily available through our app. These changes will not be covered in this article, but we have created a demo page that you can have a look at, with the source code being available here.



Have fun experimenting with Bluetooth devices! 👋

Communication with Bluetooth devices using React and TypeScript

Lyst til å spille nintendo, supernintendo, sega mega drive, eller lot ikke foreldrene dine deg få nintendo 64 eller gameboy color? Ikke noe stress, lag din egen spillkonsoll for under 1000kr, som du kan spille på din moderne tv med hdmi! 

Her er hvordan å bygge en retropie emulator på 10 enkle steg! 

RetroPie - HowTo!

Julen nærmer seg, familie og venner samles inne for god mat og hygge. Julen har i mange år for meg vært forbundet med å spille gamle spill med venner og familie. Kanskje du vil lære barn, nevøer eller nieser om hvordan spilling var før fortnite og microtransaksjoner?
Om dette er Mario på nintendo, pokemon (rød seff..) på gameboy color eller Mariocart på Nintendo64 vet jeg ikke, men gøy er alle uansett! Et moderne problem er at de gamle konsollene ikke er kompatible med de nye store flate tv-ene vi har. Scart eller en koaksialkobling, er ute i kulden nå, og dersom du får hacket det til, så skalerer ikke bilde, slik at alt ser ut som en blob! Super Mario 3 blir som å se 5 pixler løpe og hoppe på noen andre pixler. Det er utrolig synd, for få ting får meg til å le så godt som å gruse kompiser i Mario Kart 64! Jeg irriterte meg litt rundt dette for et par år siden da vi skulle ha “guttas julebord”, og vi skulle ha turnering på storskjerm. Jeg googlet litt rundt, og oppdaget da en fantastisk løsning: RetroPie!




Hva er RetroPie?

RetroPie er en raspberry pi med et eget operativsystem som er skreddersydd for å emulere gamle spillkonsoller. Hva er en emulator? Jo en emulator er et program som kan kjøre et annet program eller operativsystem enn det som maskinvaren opprinnelig brukes. Dvs, du kan bruke en rasberry pi til å kjøre operativsystemet som fantes på Sega Mega Drive! Totalt støttes ca 50 spillkonsoller som emulatorer for rasberry pi, alt fra nintendo, atari, sega, playstation 1, gameboy, supernintendo og gameboy advance m.m.
Les mer om RetroPie her

Okey, hva trenger du, hvor mye koster det og hva må du gjøre?

Du kan kjøpe en pakke og få RetroPie’en nesten helt ferdig out of the box, men hey, det er ikke noe kult. Du vil bygge den selv, lære litt, og kanskje spare noen gryn? 

pff chill fam, i gotchu!



Dette trenger du


Raspberry Pi kit, (helst 3 eller nyere) - Link - Koster 602,-
Kontroll du kan kjøpe en slik - Link - Koster 422,- *
Et Micro-SD kort - Link - Koster 281,-
Kjøleribber - Link - 99,-

* du kan bruke en kontroll du har fra før til
xbox, playstation eller switch etc. Kablet  (USB) eller trådløs


Du kan få komponentene rimeligere, og kjøp gjerne en nyere rasberry pi (4 feks). Du kan også kjøpe en egen boks/kabinett til den, og du kan bruke en lader/strømforsyning du har liggende.




Dette gjør du

1. Koble Micro-SD kortet du skal ha i rasberry pien til maskinen du sitter på, og last ned Rasberry Pi operativsystemet ved å velge hvilket operativsystem du sitter på her

2. Installer programmet på maskinen din


3. Start programmet, og følg disse stegene 

1. 

2. 

3. 


4. Velg Storage og finn minnekortet du skal bruke i rasberry pien

5. Nå er alt klart til å klikke på write 




Nå kan du koblet ut ditt MicroSD-kort og plugge det i Rasberry Pien din. Start den opp, koble den til en skjerm med hdmi koblingen og du vil se denne skjermen
4. Du ser nå (forhåpentligvis) at du må koble til en kontroller og sette den opp. Bare følg trinnene på skjermen og trykk på de tilsvarende knappene på din kontroll. 

5. Når du har gjort dette, vil du forhåpentligvis få opp denne skjermen 

9. Finn spill: Det du må laste ned nå kalles Roms. Du kan laste ned ROMS (spill), til alle 50 konsoller fra hvor du vil, her er google din venn. Men du kan feks starte ved å gjøre et enkelt google-søk ;) En del spill er litt eldre og har mistet sin copyright, men ikke alle.

Last ned ROM-en og dra den inn på på riktig konsoll-mappe på lagringsenheten, feks Super Mario 64 inn på Nintendo64 konsoll-mappen. Koble så ut lagringsenheten og og koble den til rasberry pien igjen.




10. Trykk start, og restart raspberry pien, og Nintendo 64 med spillet, spillene du har lagt til vil dukke opp. Bruk din valgte kontroll til å velge spill og start spillet.




Håper det var en god start, mange videoer finnes om dette på YouTube om du ønsker ytterligere hjelp. Håper du får spilt og kost deg, God Jul - Tom

PS
Om du vil leke med forskjellige bruksområder til din retropie, kan du for eksempel bygge deg din egen arkademaskin. Lenke til laserkutterinstruksjoner for å lage en selv her Link

Dette er min portable retropie, bygget med powerbanken som vi fikk i julegave for et par år siden, sammen med en 7" touch skjerm fra ebay. Finn din egen vri, og kos deg. 






Link til video

12-Dec

Today's posts

Communication with Bluetooth devices using React and TypeScript

How to: RetroPie!

Sign up for our newsletter

Join in the holiday cheer and count down to Christmas with us!