Web Based Virtual Interface

[Hockeyman271]

Hello all!

I have been creeping around these forums for a long time, LOVE this software. I am an Electrical / Software Engineer and have been working on building integrated PCBs to work with QLC in order to control just about any kind of RGB LED (EDIT: over WiFi) allowing someone with no software or electrical experience what so ever to easy set up large complex systems.

One of the largest obstacles in my way right now is the web based virtual inference, although for me is AMAZING, I would like to create a beautiful VI.. or pay someone to do so due to time restraints. Something your grandparent could pick up and figure out after a few clicks, which im sure most of you know is one of the hardest parts of development. Clean, Small, Easy.

Could anyone at least point me in the right direction where i could get started? Im not looking to re-develop anything core to QLC (As mcallegari is killing it already) Instead i only want to tweak the web based user interface.

One more wrench for the equation, I need this system with the new re-designed interface to run on the pi version of QLC.

I have already donated to get QLC for the pi as i have been using it for quite some time now. I also downloaded the source code from github. EDIT: I was hoping this would be some kind of simple html coding to pretty up the buttons, layout, ect... although my attempts so far prove that there is a lot more that needs modified.

mcallegari, I really wish I could talk more to you more directly because im assuming you will be able to give the best advice and I have lots of questions.

ANYWAY.... I am very close to releasing my custom QLC PCBs for the people, this is the last large obstacle in my way so ANY help will so greatly appreciated!!

Thanks guys!
Jesse.

[mcallegari]

Moved to the development area.

I don't normally do private conversations with users, so please shoot your questions here.
And as you figured out already, the current web interface is a mix of static+dynamic html/js code, so not everything can be changed "from the outside".
It can indeed be improved to be totally customizable, but it would require a lot of effort and time that I don't have at the moment.

Can you please share a mockup of your idea of restyle of the web interface ?

[Hockeyman271]

Absolutely I can only imagine how busy you must be, most of the people i know working in Tech fields, including myself, are always buried up to the neck in work!

Here is a snap shot of my current Web interface, i have highlighted the areas i will be talking about in the red boxes and gave them numbers for reference.

• 1: First of all I would like to get rid of this bar entirely, or at least have the option to do so for each build. possibly instead reduce it to one of the little gear symbols in the top right corner or allow re positioning of the gear symbol to hide wherever on the page. When handing this system to the end user these buttons up here can cause a lot of confusion and make it very easy for them to mess something up if they dont know what they are looking at.

• 2: These buttons here activate RGB matrix functions. A drop down list here would be ideal, be able to hide all of these buttons in it. Also I would like to be able to set background GIFs in order to simulate moving patterns on the button itself, or at least allow for background images of buttons in the web based interface. as i know this is possible when accessing QLC directly, not the web interface. Simple "Next" and "Previous" buttons to change patterns would be nice too.

• 3: I would really love to see a color wheel instead of individual buttons for each color, as this takes up lots of room on the page, a wheel contains many more colors combinations, and the color wheel is becoming an industry standard for controllers like this, for mobile use anyway. A drop down list here would also be useful.

OR

• 4: Along side the brightness I would like to see a "Speed" slider as well, a slider that controlled the steps or speed or the current playing function. I would also like to be able to adjust everything about the look of the sliders, the color, background image, slider bar size, shape, and color, ect...

• 5: This box appears to be around nothing but another black box but this is actually the timer function. This would be a huge benefit if you could modify the start and stop times from the web interface. Allowing people to use this software to run lights around the house, turning certain sections on and off throughout the day or setting sleep times to shut off all the lights at night.

• 6: Here i have highlighted the tops of the frames. I dont like this bulky bar up top. It would be nice to have the option to turn this on and off as well, to save space on the page, as well as keep people from accidentally minimizing their frame and thinking they broke the software. Also it would be nice to be able to control the colors, size, ect...

• 7: At the bottom here is a bank of buttons i created in order to shut on and off the individual lights at different locations. This could be a drop down list but instead i would almost like something that looks a bit better than just a drop down list for this section. maybe some kind of image with buttons overlayed that dont look like buttons, still working on this portion (open to ideas!)

• 8: This is not one of the highlighted boxes in the picture above, I would also like the ability to change the colors being used in functions. For example have a bank of blank buttons, say 4 buttons. you select each buttons and set a color for it. those colors are then used in the pattern thats being displayed. Below is an app i made in order to control WS2811-12Bs over BT, its got a few examples of the features i was talking about above, including the 4 button color picker i just described. This is an old abandoned version of the software so please excuse the plane layout.

Alright well I think thats all i can think of right now... Looking forward to your responses!

Thanks,
Jesse.

[mcallegari]

Hi Jesse, I appreciate your efforts to contribute to improve the current web interface, but in general reading your comments I felt like there is a lack of knowledge about QLC+ and the current status of the web interface, which is declared here: http://www.qlcplus.org/docs/webinterface.html (see Known limitations)

Most of the things you said would be solved by completing the web interface feature set, so basically implementing the missing things.
Now, going through items one by one:

1- While I like the idea, I would ask you to elaborate it. Right now there is a "top space" dedicated to quick actions. Placing a configuration icon on a corner would indeed save space that could be used by pages but it could also overlap onto something that needs to be accessed/clicked (think of a virtual console button that ends up being unusable because of the configuration icon)
Allowing to drag the icon around sounds like a messy idea and I wouldn't walk that way

2- In QLC+ a "drop down list" for buttons doesn't exist. Creating one for the VC would be simply inconsistent with what you see in the "native" virtual console. Since you talked about RGB Matrix, the proper widget you should use is the Animation widget, which at the moment is not implemented in the web interface
As for animated GIFs on buttons, that could indeed be implemented with not so much effort.

3- Again, this could be solved by implementing the Click & Go feature on VC sliders.
There's plenty of JavaScript color pickers that can be dragged into the web interface (Example 1, Example 2) and I'll tell you more: QLC+ 5 is making large use of Javascript code to draw custom widgets on Canvas items. The QML Canvas I'm using has feature parity with the HTML5 Canvas, so basically I have already written the code for color pickers. It would be just a matter of hooking it to the web interface, but again, lack of time and prioritizing tasks

4- Most likely here you're missing the Speed Dial widget, which ATM is not implemented in web.
As for customizing the sliders look, you have access to the virtual console CSS (virtualconsole.css) and you can make all the changes you want. Here's the relevant code

5- ATM the Clock widget is not implemented as well

6- Frames headers can be disabled in QLC+. See the configuration page documentation (Appearance tab -> Show header)
If hiding headers in QLC+ is not handled in web, then it needs to be fixed

7- Again, drop down lists for buttons doesn't exist in QLC+. I guess you've taken this idea from some Android app, but the QLC+ web interface is not an app. It wants to be the exact representation of what you see in the desktop Virtual Console

8- See #3

[lasch43]

Have you seen http://nexusosc.com/?
This might be a bit off topic because its not really about modifying the qlc code but more of a workaround, at least for a few of the things that was addressed. If you use nexus osc with some fullscreen capable browser you can get a really clean interface. But off course more work than just open the autogenerated webinterface straight from qlc.

[enbyted2]

As I said many times already in my company we're using QLC+ (especially web interface) quite heavily and I would love to help build it.

I would be willing to rebuild the webaccess code to be much more flexible and readable (I hate this webaccess.cpp having 1200+ lines of mixed C++/HTML code ).

I would see it like so (in order of refactoring operations):

1. Each VC component gets it's own WebAccess (WA) counterpart
- Each WA component is responsible for handling it's api and HTML generation
2. Modularize "tabs" (like simple desk, configurations and such), so they all follow the same convention, they derrive from a common parent allowing WebAccess class to be very generic.
3. Introduce a runtime template system that would allow users to completely recreate webaccess interface (al least the layout) without recompiling QLC+
4. Implement not-yet-implemented components
5. Allow for multiple themes and changing them at runtime - if feasible

It's a ton of work and before I get to work I would love there to be a discussion between people that actually use WebAccess about what features are missing/needing redesign and all this stuff that might affect design choices.
I would also like @mcallegari to give some thoughts about this. It would be terrible to get into situation where I've put a fair amount of work into this only to learn that it won't be merged because of some design choice.

For me it would be great learning experience as I haven't have much opportunities to work with Qt library.

BTW. I'll have a PR in a few days that will allow for basic auth and changing webaccess port.

[mcallegari]

What is the problem of the current web interface ?
Even if some stuff is missing, it works, and I think that is what counts the most.
I'm sorry if the code you've seen doesn't meet your beauty standards. Maybe you write better code than me.

Keep in mind that webaccess is a library, so it cannot invade other classes in the UI or engine libraries.

That said, as usual, I do the math on the subject:
- How many users use the web interface ?
- How many of them are missing widgets ?
- How many need the possibility to change the layout ? (of what I don't know...)
- How many need the possibility to apply a theme to the pages ?
- How many would like to change the code because they don't like it ?

Please do the math yourself too and then you'll get what is my priority on this subject.
Or if you prefer, put those questions on the same plate with "How many users use USB MIDI devices on Windows 10?" and you'll draw your conclusions.
Not just because I don't like the subject, but because I have the whole picture of the project and things like QLC+ 5 or fixing functional issues are much more important at the moment than reworking something that already works.

This is my opinion. Sooner or later I will review the web interface as well, but surely not in a near future.

[enbyted2]

What is the problem of the current web interface ?
Even if some stuff is missing, it works, and I think that is what counts the most.

There is no problem with current web interface it's just that it's lacking some features and I would like to implement them. But I would rather do it in modular way that could be easily improved and/or appended later by other people.

I'm sorry if the code you've seen doesn't meet your beauty standards. Maybe you write better code than me.

I'm sorry, I think you've misunderstood me. It's not about beauty standards by any means.
I'm just stating that I'm a frequent user of this particular feature of QLC+ and I've been changing it in many different ways for my own needs. I see a lot of room for improvement and am willing to dedicate my time into this feature.

I'm also stating that current structure of webaccess library is making it difficult to expand in future and I'm proposing a refactoring of it to make room for things that users of this feature don't see yet and/or see but know that it would be difficult to implement currenty.

Keep in mind that webaccess is a library, so it cannot invade other classes in the UI or engine libraries.

Yes, I'm 100% aware of that and am not proposing things that would clutter other parts of QLC+.

I would be going for this effect in the end:
- Each WA component has a separate class, so It would be easy to add new stuff and/or change existing stuff if something in VC is changed
- All of VC Widgets implemented in WA

I'll work on it anyway, because it would help in my usecases and I'll open a PR with this when there is something to show and test. Then you'll decide if you want change like this merged into QLC+.

BTW. When I'm creating a new file and attaching this licence header at the top should I leave your name - since QLC+ is software that you've authored - or my name - since it's a file that I've originally authored?
I've never dealt with this licencing thing