Diy Web interface doesn't have feedback until connected thru qlc+ webserver

macledefa · Fri Mar 29, 2024 2:28 pm

Hi Everyone !

I try to design my own web interface using the websocket API.

I code in local, with the html, css and js files on my computer. I just have taken the virtualconsole.js and the websocket.js files from github.

Here is my problem : When I try my diy interface, I don't have feedback like faders position, buttons on or off UNTIL I connect to the QLC+ webserver (by searching 127.0.0.1:9999 in my browser).

I'm pretty sure It's a problem of "hanshake" or something like that, because the log does have a lot more WebAccess::slotHandleRequest when I connect to the webserver than when I launch my own interface ( I only get Websocket Handshake)

Does someone have an idea of how to fix that ?

Thank you !

Yestalgia · Fri Mar 29, 2024 10:35 pm

For any chance of getting help with this I suggest you post a github link so we can talke a look at the code at least.

Are you saying that your "DIY" interface can trigger scenes, but won't get feedback until you access the bundled QLC+ web interface from your browser?

Cheers

macledefa · Sat Mar 30, 2024 11:46 pm

Thank you for your reply.

Yestalgia wrote: ↑Fri Mar 29, 2024 10:35 pm Are you saying that your "DIY" interface can trigger scenes, but won't get feedback until you access the bundled QLC+ web interface from your browser?

Yes it's exactly that ! When I move the fader in my web interface , the slider in QLC+ move but when I move the slider in QLC+, the slider on the webpage doesn't move. Even for the buttons, when I press the button on the web interface the scene in QLC+ activate but I don't get the green border around my button.
All of this magically work when I acces the web interface generated by QLC+

I don't think Github is the right place to share this work , as it is a really sketchy prototype, but here you can see my html script :

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>DIY Web interface</title>
		<link type="text/css" rel="stylesheet" href="style.css"/>
		<script type="text/javascript" src="virtualconsole.js"></script>
		<script type="text/javascript" src="websocket.js"></script>
		<script type="text/javascript"></script>
	</head>
	<body>
		<div class="first">
			<div style="weidth: 100%; height: 100%; position: relative;">
			<input class="slider" type="range" id="5" oninput="slVchange(5);" ontouchmove="slVchange(5);" name="Slider 1" step="1" value="0" min="0" max="190" style="left: 6vw; top: 42vw;" required>
			<a class="vcbutton" id="10" href="javascript:void(0);" onmousedown="buttonPress(10);" onmouseup="buttonRelease(10);" style="left: 3.6vw; top: 43.5vw;">Button 1</a>			
			<input class="slider" type="range" id="6" oninput="slVchange(6);" ontouchmove="slVchange(6);" name="Slider 2" step="1" value="0" min="0" max="190" style="left: 12vw; top: 42vw;" required>
			<a class="vcbutton" id="11" href="javascript:void(0);" onmousedown="buttonPress(11);" onmouseup="buttonRelease(11);" style="left: 9.6vw; top: 43.5vw;">Button 2</a>
			<input class="slider" type="range" id="7" oninput="slVchange(7);" ontouchmove="slVchange(7);" name="Slider 3" step="1" value="0" min="0" max="190" style="left: 18vw; top: 42vw;" required>
			<a class="vcbutton" id="12" href="javascript:void(0);" onmousedown="buttonPress(12);" onmouseup="buttonRelease(12);" style="left: 15.6vw; top: 43.5vw;">Button 3</a>
			<input class="slider" type="range" id="8" oninput="slVchange(8);" ontouchmove="slVchange(8);" name="Slider 4" step="1" value="0" min="0" max="190" style="left: 24vw; top: 42vw;" required>
			<a class="vcbutton" id="13" href="javascript:void(0);" onmousedown="buttonPress(13);" onmouseup="buttonRelease(13);" style="left: 21.6vw; top: 43.5vw;">Button 4</a>
			<input class="slider" type="range" id="9" oninput="slVchange(9);" ontouchmove="slVchange(9);" name="Slider 5" step="1" value="0" min="0" max="190" style="left: 30vw; top: 42vw;" required>
			<a class="vcbutton" id="14" href="javascript:void(0);" onmousedown="buttonPress(14);" onmouseup="buttonRelease(14);" style="left: 27.6vw; top: 43.5vw;">Button 5</a>
			<input class="slider" type="range" id="0" oninput="slVchange(0);" ontouchmove="slVchange(0);" name="Slider 6" step="1" value="0" min="0" max="190" style="left: 36vw; top: 42vw;" required>
			<a class="vcbutton" id="1" href="javascript:void(0);" onmousedown="buttonPress(1);" onmouseup="buttonRelease(1);" style="left: 33.6vw; top: 43.5vw;">Button 6</a>
			</div>
		</div>
	</body>
</html>

For the javascript files, I've got them from the QLC+ github repo :
https://github.com/mcallegari/qlcplus/b ... bsocket.js
https://github.com/mcallegari/qlcplus/b ... console.js

I've just made a small change to l.26 of websocket.js, from " var url = "ws://" + window.location.host + "/qlcplusWS"; " to " var url = "ws://127.0.0.1:9999/qlcplusWS"; "

As you can see I'm fairly new to coding webpage, so I was very proud to get this little bit working but It's so frustrating that I need to open and close the QLC+ webserver for it to work and I'm not able with my little webpage knowledge to understand why !

spinne · Sun Mar 31, 2024 9:19 pm

Hi,
only with changing the WS-URL in the source, your not finished. You have to connect to that websocket.
What does your buttonPress(int) do? But the HTML alone is useles. Provide a full working code, that someone can reproduce it. Github or something

Holger

Yestalgia · Mon Apr 01, 2024 11:12 am

macledefa wrote: ↑Sat Mar 30, 2024 11:46 pm Thank you for your reply.

Yestalgia wrote: ↑Fri Mar 29, 2024 10:35 pm Are you saying that your "DIY" interface can trigger scenes, but won't get feedback until you access the bundled QLC+ web interface from your browser?
I don't think Github is the right place to share this work , as it is a really sketchy prototype, but here you can see my

...As you can see I'm fairly new to coding webpage, so I was very proud to get this little bit working but It's so frustrating that I need to open and close the QLC+ webserver for it to work and I'm not able with my little webpage knowledge to understand why !

GitHub is every sketchy prototypes best friend, it allows you to share the full project and collaborate with others.

Love that you're getting started with QLC+ and development in general.

Learn the absolute basics of Git and you'll be up and running on GitHub in no time.

Then we can help you better!

macledefa · Mon Apr 01, 2024 8:56 pm

Thank for the replies, I've made a github repository.

You can find it here : https://github.com/macledefa/Diy-QLC-We ... /tree/main

spinne wrote: ↑Sun Mar 31, 2024 9:19 pm What does your buttonPress(int) do?

In the virtualconsole.js file, I've found :

Code: Select all

function buttonPress(id) {
 websocket.send(id + "|255");
}

I might be wrong but I think i need to trigger the feedback from QLC+ in some way because my code is working fine once I open the webserver, I get the feedback and everything. Even If i'm just opening the webserver and closing it right after.

To remove as much code error from my webpage as possible, I tested the websocket connection with the "WebSocket Test Client" Chrome extension using these steps :
- I launch my QLC+ project using the --web Command-Line Parameters
- I connect to ws://127.0.0.1:9999/qlcplusWS using the "WebSocket Test Client" Chrome extension (it showed me "OPENED")
- I move a slider in the QLC+ app virtual console and get no Websocket message in the chrome extension
- I connect to the QLC+ Webserver by searching "127.0.0.1:9999" in the chrome browser
- I , directly after opening it, close the QLC+ webserver
- I move the slider in QLC+ app Virtual Console and get Websocket feedback message in the chrome extension

I may need to send a special request to QLC+ Webserver to enable Websocket feedback message ?

macledefa · Mon Apr 01, 2024 9:30 pm

I managed to get it working !

So I was searching thru the https://github.com/mcallegari/qlcplus/b ... n.cpp#L354 file, and at line 336 , I found :

Code: Select all

QHttpConnection *QHttpConnection::enableWebSocket(bool enable)
{
    m_isWebSocket = enable;
    m_pollTimer = new QTimer(this);
    m_pollTimer->setInterval(5000);

    connect(m_pollTimer, SIGNAL(timeout()),
            this, SLOT(slotWebSocketPollTimeout()));

    m_pollTimer->start();
    return this;
}

I don't fully understand this code ( it seems like it try to poll the websocketevery 5 seconds ? ) but this means (to me) that there is a "enable websocket" boolean that need to be true to have proper bidirectional websocket communication.

So, to trigger it, I simply send a HTTP GET request to the QLC+ server in my code and finally my DIY webinterface is working directly !

Thank you guys !