Internet of Things (IoT)-focused development platform company Golioth is hoping to power your next project's user interface, with frontend engineer Rodrigo Chireia showcasing how your can connect "any stack you want" to the company's Golioth Web Console.
"To demonstrate," Chireia writes of the company's example project, "we built a web interface around the image of an Adafruit MagTag, a development board we use for our developer training program. It’s pretty cool to click a button on the the image and see the device in your hand react."
Key to the project is the Golioth Web Console, the interface to the company's IoT cloud platform. A simple firmware is loaded onto the Adafruit MagTag board, written in Golioth's Arduino software development kit (SDK) and designed to read and set data via LightDB — setting up the stage for the creation of a "digital twin," in which a virtual version of the board can be used to control the physical version and vice-versa.
"The front-end was bootstrapped using Vite’s react-ts template. I’m also using Mantine as a component library for this application," Chireia continues. "We're able to connect and listen to state changes using the WebSocket API. But we also want to display the current state, and be able to update the desired state from here.
"The data coming from the current state allows us to build a virtual replica of the MagTag on the UI. With some CSS magic we can display its text, LEDs, and light [sensor]. To set the desired state, we’re going to send some POST requests using our REST API, using the same API Keys that we input on the form."
The resulting digital twin allows for control of a range of the board's functions, including the RGB LEDs, text, and its buttons; the on-board light sensor is also used, automatically switching the web interface into a dark theme when the ambient light level is low. "Buttons don’t have an actual state, so here I just added some boxes on top of their positions on the MagTag image," Chireia explains.
"The device is also listening for changes on the desired state, so when the buzz state changes to true, the device will take action. In this case, the actual MagTag will emit a buzz, and then change the desired buzz state back to 0."
The full demo is available on the Golioth blog now.