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 @@
<head>
<meta charset="utf-8">
<title>MBetther system</title>
<!-- Web adapter for browser compatibility - detects environment and loads appropriate scripts -->
<script src="/js/overlay-web-adapter.js"></script>
<!-- Environment detection and script loading -->
<script>
// Conditionally load Qt scripts only in Qt environment
if (window.loadQtScripts) {
window.loadQtScripts();
}
// 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>
* {
......@@ -468,13 +476,14 @@
<!--
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() 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.
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!
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>
</html>
mbetterclient/qt_player/templates/fixtures.html
View file @ 3532e01a
......@@ -3,14 +3,21 @@
<head>
<meta charset="utf-8">
<title>Fixtures Overlay</title>
<!-- Web adapter for browser compatibility - detects environment and loads appropriate scripts -->
<script src="/js/overlay-web-adapter.js"></script>
<!-- Environment detection and script loading -->
<script>
// Conditionally load Qt scripts only in Qt environment
// In web browser, this does nothing (web adapter handles communication)
if (window.loadQtScripts) {
window.loadQtScripts();
}
// 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>
* {
......@@ -1287,5 +1294,17 @@
</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>
</html>
\ No newline at end of file
mbetterclient/qt_player/templates/match.html
View file @ 3532e01a
......@@ -3,13 +3,21 @@
<head>
<meta charset="utf-8">
<title>Match Overlay</title>
<!-- Web adapter for browser compatibility - must be loaded first -->
<script src="/js/overlay-web-adapter.js"></script>
<!-- Environment detection and script loading -->
<script>
// Conditionally load Qt scripts only in Qt environment
if (window.loadQtScripts) {
window.loadQtScripts();
}
// 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>
* {
......@@ -1400,12 +1408,13 @@
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.
Without them, the template will not receive data updates or function properly.
NOTE: When editing this template or creating new ones, never remove these script sources!
The overlay:// custom scheme ensures JavaScript files work for both built-in and uploaded templates.
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>
</html>
\ No newline at end of file
mbetterclient/qt_player/templates/match_video.html
View file @ 3532e01a
......@@ -3,13 +3,21 @@
<head>
<meta charset="utf-8">
<title>Match Video Overlay</title>
<!-- Web adapter for browser compatibility - detects environment and loads appropriate scripts -->
<script src="/js/overlay-web-adapter.js"></script>
<!-- Environment detection and script loading -->
<script>
// Conditionally load Qt scripts only in Qt environment
if (window.loadQtScripts) {
window.loadQtScripts();
}
// 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>
* {
......@@ -677,13 +685,14 @@
<!--
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() 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.
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!
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>
</html>
\ No newline at end of file
mbetterclient/qt_player/templates/results.html
View file @ 3532e01a
......@@ -3,13 +3,21 @@
<head>
<meta charset="utf-8">
<title>Results Overlay</title>
<!-- Web adapter for browser compatibility - must be loaded first -->
<script src="/js/overlay-web-adapter.js"></script>
<!-- Environment detection and script loading -->
<script>
// Conditionally load Qt scripts only in Qt environment
if (window.loadQtScripts) {
window.loadQtScripts();
}
// 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>
* {
......@@ -1316,12 +1324,12 @@
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
This script enables communication between the Qt application and the overlay template.
The results.html template uses inline WebChannel setup with client-initiated data fetching,
similar to fixtures.html, and includes custom dataUpdated signal handling.
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 the web adapter script source!
The template implements its own WebChannel setup and data polling mechanism.
NOTE: When editing this template, never remove these script sources!
-->
</body>
</html>
mbetterclient/qt_player/templates/text.html
View file @ 3532e01a
......@@ -3,6 +3,22 @@
<head>
<meta charset="utf-8">
<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>
* {
margin: 0;
......@@ -463,17 +479,11 @@
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.
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!
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!
-->
<script src="/js/overlay-web-adapter.js"></script>
<script>
// Conditionally load Qt scripts only in Qt environment
if (window.loadQtScripts) {
window.loadQtScripts();
}
</script>
</body>
</html>
\ No newline at end of file
mbetterclient/web_dashboard/static/js/overlay-web-adapter.js
View file @ 3532e01a
......@@ -32,31 +32,14 @@
originalConsoleLog('[WebAdapter] Environment detected:', isQtEnvironment ? 'Qt WebChannel' : 'Web Browser');
// Provide function to load Qt scripts dynamically (only works in Qt environment)
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 in Qt environment, don't run the web adapter - Qt scripts are loaded by the template
if (isQtEnvironment) {
originalConsoleLog('[WebAdapter] Qt environment detected, loading Qt scripts synchronously');
// Load Qt scripts immediately using document.write for synchronous loading
window.loadQtScripts();
originalConsoleLog('[WebAdapter] Qt environment detected, web adapter not needed');
return;
}
originalConsoleLog('[WebAdapter] Web environment detected, setting up postMessage bridge');
// Web environment - prevent Qt script loading errors
// Create dummy QWebChannel for browsers (prevents errors from qrc:/// URLs)
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