You can find the web application here: Litra Glow Controller (ersan.io).
Ever since COVID-19 hit the world, I was forced to take a look at my room as well as its usability as a “home office”. My computer is set up right next to my window. As in, the windows are located to my right. There’s nothing wrong with that… except the shadow the outside light is casting on the left side of my face. It makes me appear shady (literally) during video conferences.
There are solutions for this, such as a “ring light” or imitations of them which caught my interest, but not enough for me to actually buy one. They were either too expensive for me, or too “impractical” as they had no software to control them, or both.
Further into the pandemic, Logitech decided to release their own version of lighting, called the “Logitech Litra Glow“. This one did pique my interest as it was cheap, has physical buttons, can be mounted onto a monitor and it has software controls. I also was using a few of Logitech products by then (keyboard, mouse, webcam). Enough reason for me to purchase the Litra Glow upon its release.
Logitech G Hub
The Litra Glow could be controlled using the Logitech G Hub; A unified piece of software that controls all sorts of Logitech products, such as their gaming keyboards, mice, webcams, and so on.
Although I am pretty satisfied with the Litra Glow, one thing that did bother me is, that as I moved away from products that used the Logitech G Hub, I was left with very bloated software. My G Hub installation’s remaining purpose was to control the Litra Glow, yet it used a lot of resources. The G Hub, back then, also wasn’t built to control the Litra Glow with ease. The only way was to bind certain actions (on/off, brightness adjust, etc.) to keyboard/mouse macros. Thus, I desired for something more lightweight and accessible to control the Litra Glow.
I decided to search the internet for software that allowed me to control the Litra Glow through a more simple GUI. After a brief search, I came across two GitHub projects: kharyam/litra-driver: Linux CLI and UI for operating Logitech Litra Glow (github.com) and timrogers/litra: A JavaScript library for programatically controlling your Logitech Litra Glow or Logitech Litra Beam light – including CLI tools for quick usage without writing code (github.com). These projects did reverse-engineering work to implement a solution to control the Litra Glow programmatically.
Update: It turns out that the “Logi Tune” also has capabilities to control the Litra Glow. I did not know this at the time of coding this application.
WebUSB
It made me wonder if it would be possible to control the Litra Glow using a web application. Nowadays, browsers are pretty capable, and it wouldn’t surprise me if there was a way to manipulate USB devices through the web. Sure enough, I found out that in some browsers, there is an experimental feature called “WebUSB“. Although this would work in theory, in practice it was more challenging. WebUSB couldn’t “claim” any USB devices that were already claimed by other software (such as the operating system’s USB driver). One way to circumvent this would be to use a tool called “zadig“, however, this would beat the “accessible” part of controlling the Litra Glow. However, my prototype with zadig did work. I could address and control the Litra Glow using WebUSB. This proved that my idea is possible, however, I needed a more accessible solution.
WebHID
When I further inspected the second GitHub repository’s implementation, I saw it mention “node-hid”. This gave me the idea of accessing “HID” devices rather than “USB” devices. After a bit of searching, I actually did come across a similar technology called the “WebHID“. It seems to be on a higher “level” compared to WebUSB. WebHID is designed to be used with “devices” in general rather than “USB”. This also includes things like Bluetooth devices. Using the GitHub repositories as inspiration, as well as WebHID’s HIDInputReportEvent, I made a list of commands and events that the Litra Glow made use of. I wrote a driver that sent commands to the Litra Glow. All that was left to do. was building a web application around this.
Creating the web application
For this application, I chose to use React, as it is on my to-learn list, as a stepping stone for Next.js. As for the styling, I actually went for Microsoft’s Fluent UI framework. Microsoft uses this for Microsoft Teams, for example, and I thought it would be nice to have an application similar in style.
One of the main challenges was to synchronize the state of Litra Glow with the front-end, when you pressed the physical buttons on the device. For that, I made use of a custom event dispatcher originating from the Litra Glow driver. The React control would then listen to this event, and upon triggering that event, the control would refresh the front-end with the device’s state.
I also made it so that this web application is a Progressive Web App installable, so that users don’t have to depend on the availability of my webserver.
Future expansion
Logitech also released the “Litra Beam” which is extremely similar to the Litra Glow in terms of functionality as well as HID protocol. I could add compatibility with the Litra Beam, to my application, when/if I get my hands on one of these.
Closing thoughts
I can finally use my Litra Glow during work meetings again. All I have to do is visit the web application or simply install it on my work laptop as a PWA. My colleagues don’t have to see my half-concealed face anymore. I imagine this would also be pretty handy for streamers or other remote workers, who don’t have Logitech G Hub installed.
Thanks to this little project, I managed to learn the essentials of React, such as certain hooks (useState, useEffect), as well as implementing a UI Framework (Microsoft Fluent UI). I also more or less learned about communication through USB and HID as well as some of its limitations. For example, WebUSB only allows unclaimed USB devices to be controlled. Both WebUSB and WebHID also allow discovery of devices only if it’s with a user interaction (such as a button press). It is not possible to automatically make the prompt pop up, for security reasons.
Now that I grasp the basics of React, I finally feel ready to enter the magical world of Vercel’s Next.js. First order of business would be to completely remake the ecosystem of some of my websites [ersan.io, this blog] as one unified personal portfolio website, using a headless CMS as well as server-side rendering.
If you own a Litra Glow, you can give my web application a try by visiting Litra Glow Controller (ersan.io).