Skip to content

M
MBetterc
Commit 3532e01a authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Fix overlay templates to work in both Qt and web environments 

- Add inline environment detection to all overlay templates
- Qt environment: Load Qt scripts (qwebchannel.js, overlay.js) synchronously
- Web environment: Load web adapter for postMessage bridge
- Update overlay-web-adapter.js to exit early in Qt environment
- Fixes issue where overlay templates didn't show data in web player
parent 626f6ddc
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 80 deletions
mbetterclient/qt_player/templates/default.html
View file @ 3532e01a
...@@ -3,13 +3,21 @@ ...@@ -3,13 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>MBetther system</title> <title>MBetther system</title>
<!-- Web adapter for browser compatibility - detects environment and loads appropriate scripts --> <!-- Environment detection and script loading -->
<script src="/js/overlay-web-adapter.js"></script>
<script> <script>
// Conditionally load Qt scripts only in Qt environment // Detect environment BEFORE loading any other scripts
if (window.loadQtScripts) { (function() {
window.loadQtScripts(); var isQtEnvironment = typeof qt !== 'undefined' && qt.webChannelTransport;
}
if (isQtEnvironment) {
// Qt environment - load Qt scripts synchronously
document.write('<script src="qrc:///qtwebchannel/qwebchannel.js"><\/script>');
document.write('<script src="overlay://overlay.js"><\/script>');
} else {
// Web environment - load web adapter
document.write('<script src="/js/overlay-web-adapter.js"><\/script>');
}
})();
</script> </script>
<style> <style>
* { * {
...@@ -468,13 +476,14 @@ ...@@ -468,13 +476,14 @@
<!-- <!--
IMPORTANT: When creating or editing custom templates, always maintain these script tags: IMPORTANT: When creating or editing custom templates, always maintain these script tags:
1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface) 1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface)
2. Qt scripts are loaded conditionally via window.loadQtScripts() in Qt environment only 2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment
These scripts enable communication between the Qt application and the overlay template. These scripts enable communication between the Qt application and the overlay template.
Without them, the template will not receive data updates or function properly. The web adapter detects the environment and sets up appropriate communication:
- In Qt: Loads Qt WebChannel scripts and uses native communication
- In Web: Sets up postMessage bridge to receive data from parent window
NOTE: When editing this template or creating new ones, never remove these script sources! NOTE: When editing this template, never remove these script sources!
The overlay:// custom scheme ensures JavaScript files work for both built-in and uploaded templates.
--> -->
</body> </body>
</html> </html>
mbetterclient/qt_player/templates/fixtures.html
View file @ 3532e01a
...@@ -3,14 +3,21 @@ ...@@ -3,14 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Fixtures Overlay</title> <title>Fixtures Overlay</title>
<!-- Web adapter for browser compatibility - detects environment and loads appropriate scripts --> <!-- Environment detection and script loading -->
<script src="/js/overlay-web-adapter.js"></script>
<script> <script>
// Conditionally load Qt scripts only in Qt environment // Detect environment BEFORE loading any other scripts
// In web browser, this does nothing (web adapter handles communication) (function() {
if (window.loadQtScripts) { var isQtEnvironment = typeof qt !== 'undefined' && qt.webChannelTransport;
window.loadQtScripts();
} if (isQtEnvironment) {
// Qt environment - load Qt scripts synchronously
document.write('<script src="qrc:///qtwebchannel/qwebchannel.js"><\/script>');
document.write('<script src="overlay://overlay.js"><\/script>');
} else {
// Web environment - load web adapter
document.write('<script src="/js/overlay-web-adapter.js"><\/script>');
}
})();
</script> </script>
<style> <style>
* { * {
...@@ -1287,5 +1294,17 @@ ...@@ -1287,5 +1294,17 @@
</script> </script>
<!--
IMPORTANT: When creating or editing custom templates, always maintain these script tags:
1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface)
2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment
These scripts enable communication between the Qt application and the overlay template.
The web adapter detects the environment and sets up appropriate communication:
- In Qt: Loads Qt WebChannel scripts and uses native communication
- In Web: Sets up postMessage bridge to receive data from parent window
NOTE: When editing this template, never remove these script sources!
-->
</body> </body>
</html> </html>
\ No newline at end of file
mbetterclient/qt_player/templates/match.html
View file @ 3532e01a
...@@ -3,13 +3,21 @@ ...@@ -3,13 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Match Overlay</title> <title>Match Overlay</title>
<!-- Web adapter for browser compatibility - must be loaded first --> <!-- Environment detection and script loading -->
<script src="/js/overlay-web-adapter.js"></script>
<script> <script>
// Conditionally load Qt scripts only in Qt environment // Detect environment BEFORE loading any other scripts
if (window.loadQtScripts) { (function() {
window.loadQtScripts(); var isQtEnvironment = typeof qt !== 'undefined' && qt.webChannelTransport;
}
if (isQtEnvironment) {
// Qt environment - load Qt scripts synchronously
document.write('<script src="qrc:///qtwebchannel/qwebchannel.js"><\/script>');
document.write('<script src="overlay://overlay.js"><\/script>');
} else {
// Web environment - load web adapter
document.write('<script src="/js/overlay-web-adapter.js"><\/script>');
}
})();
</script> </script>
<style> <style>
* { * {
...@@ -1400,12 +1408,13 @@ ...@@ -1400,12 +1408,13 @@
IMPORTANT: When creating or editing custom templates, always maintain these script tags: IMPORTANT: When creating or editing custom templates, always maintain these script tags:
1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface) 1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface)
2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment 2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment
These scripts enable communication between the Qt application and the overlay template. These scripts enable communication between the Qt application and the overlay template.
Without them, the template will not receive data updates or function properly. The web adapter detects the environment and sets up appropriate communication:
- In Qt: Loads Qt WebChannel scripts and uses native communication
NOTE: When editing this template or creating new ones, never remove these script sources! - In Web: Sets up postMessage bridge to receive data from parent window
The overlay:// custom scheme ensures JavaScript files work for both built-in and uploaded templates.
NOTE: When editing this template, never remove these script sources!
--> -->
</body> </body>
</html> </html>
\ No newline at end of file
mbetterclient/qt_player/templates/match_video.html
View file @ 3532e01a
...@@ -3,13 +3,21 @@ ...@@ -3,13 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Match Video Overlay</title> <title>Match Video Overlay</title>
<!-- Web adapter for browser compatibility - detects environment and loads appropriate scripts --> <!-- Environment detection and script loading -->
<script src="/js/overlay-web-adapter.js"></script>
<script> <script>
// Conditionally load Qt scripts only in Qt environment // Detect environment BEFORE loading any other scripts
if (window.loadQtScripts) { (function() {
window.loadQtScripts(); var isQtEnvironment = typeof qt !== 'undefined' && qt.webChannelTransport;
}
if (isQtEnvironment) {
// Qt environment - load Qt scripts synchronously
document.write('<script src="qrc:///qtwebchannel/qwebchannel.js"><\/script>');
document.write('<script src="overlay://overlay.js"><\/script>');
} else {
// Web environment - load web adapter
document.write('<script src="/js/overlay-web-adapter.js"><\/script>');
}
})();
</script> </script>
<style> <style>
* { * {
...@@ -677,13 +685,14 @@ ...@@ -677,13 +685,14 @@
<!-- <!--
IMPORTANT: When creating or editing custom templates, always maintain these script tags: IMPORTANT: When creating or editing custom templates, always maintain these script tags:
1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface) 1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface)
2. Qt scripts are loaded conditionally via window.loadQtScripts() in Qt environment only 2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment
These scripts enable communication between the Qt application and the overlay template. These scripts enable communication between the Qt application and the overlay template.
Without them, the template will not receive data updates or function properly. The web adapter detects the environment and sets up appropriate communication:
- In Qt: Loads Qt WebChannel scripts and uses native communication
- In Web: Sets up postMessage bridge to receive data from parent window
NOTE: When editing this template or creating new ones, never remove these script sources! NOTE: When editing this template, never remove these script sources!
The overlay:// custom scheme ensures JavaScript files work for both built-in and uploaded templates.
--> -->
</body> </body>
</html> </html>
\ No newline at end of file
mbetterclient/qt_player/templates/results.html
View file @ 3532e01a
...@@ -3,13 +3,21 @@ ...@@ -3,13 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Results Overlay</title> <title>Results Overlay</title>
<!-- Web adapter for browser compatibility - must be loaded first --> <!-- Environment detection and script loading -->
<script src="/js/overlay-web-adapter.js"></script>
<script> <script>
// Conditionally load Qt scripts only in Qt environment // Detect environment BEFORE loading any other scripts
if (window.loadQtScripts) { (function() {
window.loadQtScripts(); var isQtEnvironment = typeof qt !== 'undefined' && qt.webChannelTransport;
}
if (isQtEnvironment) {
// Qt environment - load Qt scripts synchronously
document.write('<script src="qrc:///qtwebchannel/qwebchannel.js"><\/script>');
document.write('<script src="overlay://overlay.js"><\/script>');
} else {
// Web environment - load web adapter
document.write('<script src="/js/overlay-web-adapter.js"><\/script>');
}
})();
</script> </script>
<style> <style>
* { * {
...@@ -1316,12 +1324,12 @@ ...@@ -1316,12 +1324,12 @@
1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface) 1. /js/overlay-web-adapter.js - Required for web browser compatibility (bridges postMessage to WebChannel interface)
2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment 2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment
This script enables communication between the Qt application and the overlay template. These scripts enable communication between the Qt application and the overlay template.
The results.html template uses inline WebChannel setup with client-initiated data fetching, The web adapter detects the environment and sets up appropriate communication:
similar to fixtures.html, and includes custom dataUpdated signal handling. - In Qt: Loads Qt WebChannel scripts and uses native communication
- In Web: Sets up postMessage bridge to receive data from parent window
NOTE: When editing this template, never remove the web adapter script source! NOTE: When editing this template, never remove these script sources!
The template implements its own WebChannel setup and data polling mechanism.
--> -->
</body> </body>
</html> </html>
mbetterclient/qt_player/templates/text.html
View file @ 3532e01a
...@@ -3,6 +3,22 @@ ...@@ -3,6 +3,22 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Text Message Overlay</title> <title>Text Message Overlay</title>
<!-- Environment detection and script loading -->
<script>
// Detect environment BEFORE loading any other scripts
(function() {
var isQtEnvironment = typeof qt !== 'undefined' && qt.webChannelTransport;
if (isQtEnvironment) {
// Qt environment - load Qt scripts synchronously
document.write('<script src="qrc:///qtwebchannel/qwebchannel.js"><\/script>');
document.write('<script src="overlay://overlay.js"><\/script>');
} else {
// Web environment - load web adapter
document.write('<script src="/js/overlay-web-adapter.js"><\/script>');
}
})();
</script>
<style> <style>
* { * {
margin: 0; margin: 0;
...@@ -463,17 +479,11 @@ ...@@ -463,17 +479,11 @@
2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment 2. Qt scripts are loaded conditionally via window.loadQtScripts() - only in Qt environment
These scripts enable communication between the Qt application and the overlay template. These scripts enable communication between the Qt application and the overlay template.
Without them, the template will not receive data updates or function properly. The web adapter detects the environment and sets up appropriate communication:
- In Qt: Loads Qt WebChannel scripts and uses native communication
- In Web: Sets up postMessage bridge to receive data from parent window
NOTE: When editing this template or creating new ones, never remove these script sources! NOTE: When editing this template, never remove these script sources!
The overlay:// custom scheme ensures JavaScript files work for both built-in and uploaded templates.
--> -->
<script src="/js/overlay-web-adapter.js"></script>
<script>
// Conditionally load Qt scripts only in Qt environment
if (window.loadQtScripts) {
window.loadQtScripts();
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
mbetterclient/web_dashboard/static/js/overlay-web-adapter.js
View file @ 3532e01a
...@@ -32,31 +32,14 @@ ...@@ -32,31 +32,14 @@
originalConsoleLog('[WebAdapter] Environment detected:', isQtEnvironment ? 'Qt WebChannel' : 'Web Browser'); originalConsoleLog('[WebAdapter] Environment detected:', isQtEnvironment ? 'Qt WebChannel' : 'Web Browser');
// Provide function to load Qt scripts dynamically (only works in Qt environment) // If in Qt environment, don't run the web adapter - Qt scripts are loaded by the template
window.loadQtScripts = function() {
if (!isQtEnvironment) {
originalConsoleLog('[WebAdapter] Not loading Qt scripts - not in Qt environment');
return false;
}
originalConsoleLog('[WebAdapter] Loading Qt scripts for Qt environment');
// Use document.write for synchronous loading in Qt environment
// This ensures scripts are loaded before template's inline scripts run
document.write('<script src="qrc:///qtwebchannel/qwebchannel.js"><\/script>');
document.write('<script src="overlay://overlay.js"><\/script>');
return true;
};
// If already in Qt environment, load Qt scripts synchronously and exit
if (isQtEnvironment) { if (isQtEnvironment) {
originalConsoleLog('[WebAdapter] Qt environment detected, loading Qt scripts synchronously'); originalConsoleLog('[WebAdapter] Qt environment detected, web adapter not needed');
// Load Qt scripts immediately using document.write for synchronous loading
window.loadQtScripts();
return; return;
} }
originalConsoleLog('[WebAdapter] Web environment detected, setting up postMessage bridge');
// Web environment - prevent Qt script loading errors // Web environment - prevent Qt script loading errors
// Create dummy QWebChannel for browsers (prevents errors from qrc:/// URLs) // Create dummy QWebChannel for browsers (prevents errors from qrc:/// URLs)
window.QWebChannel = function(transport, callback) { window.QWebChannel = function(transport, callback) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment