diff --git a/openlp/core/display/html/checkerboard.png b/openlp/core/display/html/checkerboard.png
index 52b51242f..9523e5908 100644
Binary files a/openlp/core/display/html/checkerboard.png and b/openlp/core/display/html/checkerboard.png differ
diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css
index 518594686..cd9787bda 100644
--- a/openlp/core/display/html/display.css
+++ b/openlp/core/display/html/display.css
@@ -13,10 +13,15 @@
}
body {
- background: transparent !important;
+ background: transparent;
color: rgb(255, 255, 255) !important;
}
+body.checkerboard {
+ background: url('checkerboard.png');
+ background-size: 100%;
+}
+
sup {
vertical-align: super !important;
font-size: smaller !important;
diff --git a/openlp/core/display/html/display.html b/openlp/core/display/html/display.html
index 4a5870bb0..7cff9a910 100644
--- a/openlp/core/display/html/display.html
+++ b/openlp/core/display/html/display.html
@@ -13,7 +13,6 @@
diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 609ccab62..c89afdd36 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -385,16 +385,16 @@ var Display = {
/**
* Start up reveal and do any other initialisation
*/
- init: function (doTransitions=false, doItemtransitions=false) {
- var globalBackground = $("#global-background")[0];
- globalBackground.style.cssText = "";
- globalBackground.style.setProperty("background", "black");
+ init: function (isDisplay=false, doItemtransitions=false) {
+ if (!isDisplay) {
+ document.body.classList.add('checkerboard');
+ }
Display._slidesContainer = $(".slides")[0];
Display._footerContainer = $(".footer")[0];
Display._backgroundsContainer = $(".backgrounds")[0];
- Display._doTransitions = doTransitions;
+ Display._doTransitions = isDisplay;
Reveal.initialize(Display._revealConfig);
- Display.setItemTransition(doItemtransitions && doTransitions);
+ Display.setItemTransition(doItemtransitions && isDisplay);
displayWatcher.setInitialised(true);
},
/**
@@ -1038,12 +1038,9 @@ var Display = {
// Set the background
var backgroundContent = "";
var backgroundHtml = "";
- var globalBackground = $("#global-background")[0];
- globalBackground.style.setProperty("background", "black");
switch (Display._theme.background_type) {
case BackgroundType.Transparent:
backgroundContent = "transparent";
- globalBackground.style.setProperty("background", "transparent");
break;
case BackgroundType.Solid:
backgroundContent = Display._theme.background_color;
diff --git a/openlp/core/display/window.py b/openlp/core/display/window.py
index a4abf500a..ace759a7c 100644
--- a/openlp/core/display/window.py
+++ b/openlp/core/display/window.py
@@ -248,8 +248,8 @@ class DisplayWindow(QtWidgets.QWidget, RegistryProperties, LogMixin):
"""
js_is_display = str(self.is_display).lower()
item_transitions = str(self.settings.value('themes/item transitions')).lower()
- self.run_javascript('Display.init({do_transitions}, {do_item_transitions});'
- .format(do_transitions=js_is_display, do_item_transitions=item_transitions))
+ self.run_javascript('Display.init({is_display}, {do_item_transitions});'
+ .format(is_display=js_is_display, do_item_transitions=item_transitions))
wait_for(lambda: self._is_initialised)
if self.scale != 1:
self.set_scale(self.scale)
@@ -404,10 +404,6 @@ class DisplayWindow(QtWidgets.QWidget, RegistryProperties, LogMixin):
theme_copy.background_end_color = '#590909'
theme_copy.background_main_color = '#090909'
theme_copy.background_footer_color = '#090909'
- # If background is transparent and this is not a display, inject checkerboard background image instead
- elif theme.background_type == 'transparent':
- theme_copy.background_type = 'image'
- theme_copy.background_filename = self.checkerboard_path
exported_theme = theme_copy.export_theme(is_js=True)
self.run_javascript('Display.setTheme({theme});'.format(theme=exported_theme), is_sync=is_sync)
diff --git a/tests/functional/openlp_core/display/test_window.py b/tests/functional/openlp_core/display/test_window.py
index 2f059cb96..fcd52c60f 100644
--- a/tests/functional/openlp_core/display/test_window.py
+++ b/tests/functional/openlp_core/display/test_window.py
@@ -32,6 +32,8 @@ from PyQt5 import QtCore
sys.modules['PyQt5.QtWebEngineWidgets'] = MagicMock()
from openlp.core.display.window import DisplayWindow
+from openlp.core.common.enum import ServiceItemType
+from openlp.core.lib.theme import Theme
from openlp.core.ui import HideMode
@@ -174,6 +176,89 @@ def test_run_javascript_sync_no_wait(mock_time, mocked_webengine, mocked_addWidg
mock_time.sleep.assert_not_called()
+@patch('PyQt5.QtWidgets.QVBoxLayout')
+@patch('openlp.core.display.webengine.WebEngineView')
+def test_set_theme_is_display_video(mocked_webengine, mocked_addWidget, mock_settings):
+ """
+ Test the set_theme function
+ """
+ # GIVEN: A display window and a video theme
+ display_window = DisplayWindow()
+ display_window.is_display = True
+ display_window.run_javascript = MagicMock()
+ theme = Theme()
+ theme.background_type = 'video'
+ result_theme = Theme()
+ result_theme.background_type = 'transparent'
+ result_theme = result_theme.export_theme(is_js=True)
+
+ # WHEN: The set theme function is called
+ display_window.set_theme(theme, is_sync=False, service_item_type=ServiceItemType.Text)
+
+ # THEN: The final theme should be transparent
+ display_window.run_javascript.assert_called_once_with('Display.setTheme({theme});'.format(theme=result_theme),
+ is_sync=False)
+
+
+@patch('PyQt5.QtWidgets.QVBoxLayout')
+@patch('openlp.core.display.webengine.WebEngineView')
+def test_set_theme_not_display_video(mocked_webengine, mocked_addWidget, mock_settings):
+ """
+ Test the set_theme function
+ """
+ # GIVEN: A display window and a video theme
+ display_window = DisplayWindow()
+ display_window.is_display = False
+ display_window.run_javascript = MagicMock()
+ theme = Theme()
+ theme.background_type = 'video'
+ theme.background_border_color = 'border_colour'
+ result_theme = Theme()
+ result_theme.background_type = 'solid'
+ result_theme.background_border_color = 'border_colour'
+ result_theme.background_start_color = 'border_colour'
+ result_theme.background_end_color = 'border_colour'
+ result_theme.background_main_color = 'border_colour'
+ result_theme.background_footer_color = 'border_colour'
+ result_theme.background_color = 'border_colour'
+ result_theme = result_theme.export_theme(is_js=True)
+
+ # WHEN: The set theme function is called
+ display_window.set_theme(theme, is_sync=False, service_item_type=False)
+
+ # THEN: The final theme should use 'border_colour' for it's colour values
+ display_window.run_javascript.assert_called_once_with('Display.setTheme({theme});'.format(theme=result_theme),
+ is_sync=False)
+
+
+@patch('PyQt5.QtWidgets.QVBoxLayout')
+@patch('openlp.core.display.webengine.WebEngineView')
+def test_set_theme_not_display_live(mocked_webengine, mocked_addWidget, mock_settings):
+ """
+ Test the set_theme function
+ """
+ # GIVEN: A display window and a video theme
+ display_window = DisplayWindow()
+ display_window.is_display = False
+ display_window.run_javascript = MagicMock()
+ theme = Theme()
+ theme.background_type = 'live'
+ result_theme = Theme()
+ result_theme.background_type = 'solid'
+ result_theme.background_start_color = '#590909'
+ result_theme.background_end_color = '#590909'
+ result_theme.background_main_color = '#090909'
+ result_theme.background_footer_color = '#090909'
+ result_theme = result_theme.export_theme(is_js=True)
+
+ # WHEN: The set theme function is called
+ display_window.set_theme(theme, is_sync=False, service_item_type=False)
+
+ # THEN: The final theme should use the preset colour values
+ display_window.run_javascript.assert_called_once_with('Display.setTheme({theme});'.format(theme=result_theme),
+ is_sync=False)
+
+
@patch('PyQt5.QtWidgets.QVBoxLayout')
@patch('openlp.core.display.webengine.WebEngineView')
@patch('openlp.core.common.registry.Registry.execute')
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index acaf180b9..06695d867 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -109,11 +109,26 @@ describe("The Display object", function () {
it("should initialise Reveal when init is called", function () {
spyOn(Reveal, "initialize");
document.body.innerHTML = "";
- _createDiv({"id": "global-background"});
Display.init();
expect(Reveal.initialize).toHaveBeenCalled();
});
+ it("should have checkerboard class when init is called when not display", function () {
+ spyOn(Reveal, "initialize");
+ document.body.innerHTML = "";
+ document.body.classList = "";
+ Display.init(false);
+ expect(document.body.classList.contains('checkerboard')).toEqual(true);
+ });
+
+ it("should not have checkerboard class when init is called when is a display", function () {
+ spyOn(Reveal, "initialize");
+ document.body.innerHTML = "";
+ document.body.classList = "";
+ Display.init(true);
+ expect(document.body.classList.contains('checkerboard')).toEqual(false);
+ });
+
it("should have a reinit() method", function () {
expect(Display.reinit).toBeDefined();
});
@@ -164,7 +179,6 @@ describe("Transitions", function () {
document.body.innerHTML = "";
_createDiv({"class": "slides"});
_createDiv({"class": "footer"});
- _createDiv({"id": "global-background"});
Display._slides = {};
});
afterEach(function() {
@@ -563,7 +577,6 @@ describe("Display.setTextSlides", function () {
var footer_container = _createDiv({"class": "footer"});
Display._slidesContainer = slides_container;
Display._footerContainer = footer_container;
- _createDiv({"id": "global-background"});
Display._slides = {};
});
@@ -734,7 +747,6 @@ describe("Display.setImageSlides", function () {
var footer_container = _createDiv({"class": "footer"});
Display._slidesContainer = slides_container;
Display._footerContainer = footer_container;
- _createDiv({"id": "global-background"});
Display._slides = {};
});
@@ -762,7 +774,6 @@ describe("Display.setVideo", function () {
document.body.innerHTML = "";
var slides_container = _createDiv({"class": "slides"});
Display._slidesContainer = slides_container;
- _createDiv({"id": "global-background"});
Display._slides = {};
});