{"id":303,"date":"2026-02-26T20:31:17","date_gmt":"2026-02-26T20:31:17","guid":{"rendered":"https:\/\/engineeringharmony.com\/?p=303"},"modified":"2026-02-26T20:42:47","modified_gmt":"2026-02-26T20:42:47","slug":"building-a-lighting-control-webpage-with-help-from-claude","status":"publish","type":"post","link":"https:\/\/engineeringharmony.com\/?p=303","title":{"rendered":"Building a lighting control webpage with help from Claude"},"content":{"rendered":"\n

I wanted to make a widget where you can drag the pointer around and change your lighting color. I am assuming a specific configuration of lights. In particular, I am using 10 DFX VersaPars,<\/a> all in a 6 channel<\/a> RGBWAU configuration. I use QLC+<\/a> version 4 as my lighting control software.<\/p>\n\n\n\n

I initially tried using ChatGPT and it really wasn’t working well. I learned some things from that process and tried again with Claude. Claude also had some bugs, but worked them out pretty easily. Ultimately, I learned that QLC’s native widget set doesn’t allow for a real-time draggable color widget. They have the ability to open up the color control, click, and then send. I wanted more of a draggable option. So I asked Claude and it helped me out.<\/p>\n\n\n\n

It helped me with a webpage that connects to QLC+ through WebSockets and gives me exactly the interaction that I imagined!<\/p>\n\n\n\n

The first step is to run QLC+ with WebSockets enabled with the following command:<\/p>\n\n\n\n

qlcplus.exe -w<\/code><\/pre>\n\n\n\n
Once that is up and running, you’ll want to add your fixtures through the standard QLC process.<\/p>\n\n\n\n
Once you have your fixtures in place, you’ll want to make sure that you’re in operate mode in QLC+. I didn’t realize that the WebSockets wouldn’t have any impact unless you push the play button in QLC+. <\/p>\n\n\n\n
Once you’re all setup there, you can open the file below in a web browser, and it will connect to QLC+ and you should be able to drag around and see the results in QLC’s DMX monitor for testing, and in your lights once you’re all hooked up!<\/p>\n\n\n\n
qlcplus-xypad<\/a>Download<\/a><\/div>\n\n\n\n
Here’s a preview of what you should see when you open the file in a web browser:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
The only thing that I don’t love about this setup is that there’s no easy way to separate out the UV so you can do exclusively black light effects. Fortunately that’s easily solved with QLC’s native virtual console capabilities.<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
I wanted to make a widget where you can drag the pointer around and change your lighting color. I am assuming a specific configuration of lights. In particular, I am using 10 DFX VersaPars, all in a 6 channel RGBWAU configuration. I use QLC+ version 4 as my lighting control software. I initially tried using […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9,11],"tags":[],"class_list":["post-303","post","type-post","status-publish","format-standard","hentry","category-documentation","category-projects"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=303"}],"version-history":[{"count":7,"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=\/wp\/v2\/posts\/303\/revisions\/316"}],"wp:attachment":[{"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engineeringharmony.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}