What is a Desktop Bridge?

A cross-platform application that will use and configure all the μFire devices in your browser.

Prerequisites

This project will use python to connect an Arduino to a webpage. To do this you’ll need:

How it all Works

We are going to program a microprocessor with a sketch that will talk to our computer through a serial port. The microprocessor will have all the μFire devices connected to it. The sketch will receive text-based commands and output JSON results. To do the sending and receiving, we’ll write a python script.

We ultimately want to interact with the devices through a GUI, so we will make a simple Vue-based webpage. To get the information from the serial port to the webpage, we will use WebSockets. This is originally based from this page.

The Microprocessor

The first thing we’ll do is get the sketch onto the microprocessor. Any will do as long as it’s Arduino compatible and has a serial port. You should have already cloned the repo from above. You’ll see it is a PlatformIO project. You can add it to your workspace if you have it installed. Otherwise, copy/paste the ./src/main.cpp file into your Arduino IDE. Choose whichever board you are using and upload it. That should be it.

The WebSockets Server

Now enter the ./server directory in a terminal. Type python3 server.py --port=5678 --serial=[serial], replacing [serial] with the actual serial port of your microprocessor. On my computer, I enter python3 server.py --port=5678 --serial=/dev/ttyUSB0. If you want, you can change the port (5678 in this example) to whatever you’d like. The server is now running.

The Webpage

From your browser, go to localhost:5678. You’ll see text begins to scroll in the terminal. It will automatically detect which devices are connected and show you a current measurement.

Contact us, newsletter, and store policies