Streaming Artemis DK Sensor Data to Web App

The added functionality of BLE in the Artemis Development Kit means it can be connected to a local web application! We explore this by streaming the on-board sensor data to a local host.

Favorited Favorite 1

One of the aspects I was most excited about from the new SparkFun Artemis Development Kit is its expanded functionality of BLE. With Bluetooth, the scope of my projects are opened up to the entire world instead of just my local one, and with a plethora of sensors on board, this module is just begging to stream real time data to the world wide web! So that’s just what we did.

The first piece is using the ArduinoBLE library to listen for peripherals to connect the Dev Kit.

alt text

With the Artemis line, we just have to compile the Arduino firmware written, drop the .bin file into the Artemis USB itself, and from there we can run the program. If you open the serial monitor, it should say “starting accelerometer…Artemis Dev Kit BLE Sensor Updater.”

alt text

We can start the web app using yarn, which will load the local host, and display the web app we’ve built using React.

alt text

The web page will need to be specifically connected to the Artemis board and once it is, it will immediately load up real-time sensor data from the module by utilizing a JavaScript visualization library called Nivo.

alt text

The firmware from Arduino reads the real time values for the x, y and z axes from the on-board accelerometer, as well as the LED values. The values for the LED jump so drastically because the LED is either on or off (1 or 0).

alt text

The Arduino firmware can be altered to read in the real-time values for the camera and microphone as well, if you wanted to display autoexposure or frequency data on the visualization. You would need to change the driver code for each respective sensor to read that specific device register.

Nivo is an incredibly robust visualization library, so you can start filtering noise or customizing visualizations easily once you start streaming data. This is really just a starting point in displaying all of the data from the on-board sensors - you can develop the firmware and application to visualize whatever sensor you might need, and design it however you like with CSS and JavaScript. Another avenue for improving the web app would be to push the application to the cloud and host it on a public server.

So whether you want to alter the design aesthetic, read in values from the camera and microphone, push to the cloud, or incorporate machine learning, the Artemis Dev Kit and this project are great starting points to connect to the world wide web with Bluetooth.

The entire project source code is available on GitHub so you can get started right now!

mortaza-marsh on GitHub

Happy sensor streaming, and happy hacking with the Artemis Dev Kit!

Comments 4 comments

  • tbitson / about 4 years ago / 1

    For those of us a little weak with our node skills, in the is says * run yarn install in the root to install required packages Does this mean 'npm install yarn' ? I'm struggling to get the required packages installed. Any help would be appreciated!

    • asassy / about 4 years ago / 1

      Hi there! I'm hoping this resource should help:

      yarn install installs all the dependencies listed within package.json. So first, make sure that yarn is installed on your specific operating system (, and then run yarn install in the directory to install all of the packages for this project.

      If this still doesn't directly answer your question, don't hesitate to comment again!

  • Member #134773 / about 4 years ago / 1

    Thanks for posting! Let me preface my comments by saying they're meant as "constructive criticism"...

    • For those of us who are just getting started with BLE, it could prove instructive to at least read through your (entire) "firmware" source code -- where can we find it?
    • "yarn"? Do I need to have my knitting needles handy? (I have a hunch it's some sort of software that I've never heard of, despite having about a half-century of experience with computers)
    • "React"? Isn't that what's being shown on the evening news, with some folks suggesting "riot" is a more accurate term? (Again, I have a hunch that it actually refers to some bit of software that I've never heard of... I only got my Software Engineering degree 40 years ago...)

    It also looks like you have some sort of "source code" for the tools on the "user end"... I've often times found it instructive to read through someone else's code when getting started on these things...

    • Liquid Soulder / about 4 years ago / 1

      Hi there - glad you asked! I've added a link to the source code repo at the bottom of the article. I'll paste it in this response too, so it is easy to get to. You can view all the source code there and follow the getting started instructions to try it out yourself

Related Posts

Recent Posts

Why L-Band?


All Tags