{"id":2797,"date":"2024-12-20T22:59:58","date_gmt":"2024-12-21T03:59:58","guid":{"rendered":"https:\/\/techministry.blog\/?p=2797"},"modified":"2024-12-20T22:59:58","modified_gmt":"2024-12-21T03:59:58","slug":"streamlining-electron-app-development-with-ai-building-a-virtual-stream-deck-for-bitfocus-companion-using-the-satellite-api","status":"publish","type":"post","link":"https:\/\/techministry.blog\/?p=2797","title":{"rendered":"Streamlining Electron App Development with AI: Building a Virtual Stream Deck for Bitfocus Companion using the Satellite API"},"content":{"rendered":"\n

On the side from my full time job in ministry, I do coding-work-for-hire<\/a>. It’s one of the ways I provide for my family. I’ve had opportunities to create custom dashboard panels, modules for Bitfocus companion, and lots of other bespoke solutions for whatever people need. (Hit me up<\/a> if you ever need anything!)<\/p>\n\n\n\n

One of the tools in my tool belt that I use regularly when coding is Github Copilot<\/a>. It’s $10 a month and saves me so much time. Never heard of it?<\/p>\n\n\n\n

\n

GitHub Copilot is an AI-powered coding assistant developed by GitHub and OpenAI, designed to help developers write code faster and more efficiently. Integrated directly into popular code editors like Visual Studio Code, Copilot suggests code snippets, functions, and even entire blocks of code in real time as you type, based on the context of your project. It supports multiple programming languages and leverages a vast amount of open-source code to provide relevant suggestions, making it a valuable tool for both beginners and experienced developers looking to speed up their workflow, reduce errors, and explore new coding approaches.<\/p>\n<\/blockquote>\n\n\n\n

It seriously saves me a lot of time by providing suggestions and workflows that I may never have thought of, while not necessarily doing things that I would not have done. After using it for a year and a half, I have it trained well on the ways I like to code.<\/p>\n\n\n\n

Recently, I also signed up for OpenAI’s ChatGPT<\/a> Plus plan. It’s $20 a month. I may not keep subscribing long term, but I’m trying it out. It gives me access to GPT 4o and DALL-E and all of their other tools. I used it to help me decipher a protocol for some paid work I was doing and it helped me save time. These tools are not at a point where I can just hand it the whole job and get a perfect response – but guiding it through the process in steps? I can get helpful responses that way.<\/p>\n\n\n\n

After I was done with my protocol project, I simply asked ChatGPT, “give me a boilerplate typescript Electron app using my example”. I’ve shared several<\/a> of<\/a> my<\/a> electron<\/a> apps<\/a> before. It’s my preferred method for cross platform apps (meaning they can run on MacOS, Windows, and Linux desktops). I wanted to see if I could guide ChatGPT through the process of giving me a new template to help take some projects further and implement standards and practices that I might not be aware of.<\/p>\n\n\n\n

One particular project I’ve wanted to work on for awhile now is something I’m calling ScreenDeck. <\/em>It’s essentially a screen based stream deck for Bitfocus Companion that uses the built in Satellite API to create virtual surfaces.<\/p>\n\n\n

\n
\"\"
Every good project needs a logo, right?<\/figcaption><\/figure>\n<\/div>\n\n\n

I know the browser based emulator exists, but I wanted something that ran a little more “native looking” on the OS and could always sit on top of other windows so it’s immediately accessible.<\/p>\n\n\n\n

I had started on it over a year ago, but the small nuances and things to code just felt overwhelming to implement in my “spare time”. However, together with my AI tools, I was able to quickly craft a new boilerplate template and apply it to the ScreenDeck project I had started a long time ago, and come up with a working solution in just a few days. It was a lot of back and forth with the chat, prompting it to craft more and more refined responses.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Like many of my other projects, I’m releasing ScreenDeck open source with the hopes that it will help the community – especially churches.<\/p>\n\n\n\n

\n
\n
\n
\n
\"\"
Here’s a simple 4 button, 1 per row, deck.<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
The settings allow you to configure how it looks, how many buttons, whether it’s always on top, etc. You can even change the bitmap size to create HUGE buttons!<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Here’s a standard “Stream Deck XL” layout.<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Some of the context menu options.<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Because it uses the Satellite API in Companion, it shows up as a physical surface in Companion!<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Because Companion sees it as a surface, this means you can do anything with it that you’d do to any physical surface.<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

You can download it here: http:\/\/github.com\/josephdadams\/screendeck<\/a><\/p>\n\n\n\n

It’s available for MacOS, Windows, and Linux desktops!<\/p>\n\n\n\n

Here’s a video showing it in action!<\/p>\n\n\n\n

\n