Merge lp:~oliwee/openlp/transparentBackground into lp:openlp

[Oliver Wieland]

Added transparency behind main text to theme

new theme option 'Transparency' for setting the transparency of the background of the main text

new theme option 'Smooth transition' to choose if there should be a smoother transition to the transparent area

[Raoul Snyman (raoul-snyman)]

New features are only for 2.4. Let's park this until 2.2 is out the door.

Unmerged revisions

2514. By Oliver Wieland on 2015-02-22

Added transparency behind main text to theme
  new theme option 'Transparency' for setting the transparency of the background of the main text
  new theme option 'Smooth transition' to choose if there should be a smoother transition to the transparent area

=== modified file 'openlp/core/lib/htmlbuilder.py'
--- openlp/core/lib/htmlbuilder.py	2015-01-18 13:39:21 +0000
+++ openlp/core/lib/htmlbuilder.py	2015-02-22 20:49:19 +0000
@@ -585,7 +585,7 @@
         build_background_css(item, width),
         css_additions,
         build_footer_css(item, height),
-        build_lyrics_css(item),
+        build_lyrics_css(item, width),
         'true' if theme_data and theme_data.display_slide_transition and is_live else 'false',
         js_additions,
         bgimage_src,
@@ -641,7 +641,7 @@
     return background
 
 
-def build_lyrics_css(item):
+def build_lyrics_css(item, display_width):
     """
     Build the lyrics display css
 
@@ -669,8 +669,16 @@
     lyrics = ''
     lyricsmain = ''
     if theme_data and item.main:
-        lyricstable = 'left: %spx; top: %spx;' % (item.main.x(), item.main.y())
-        lyrics = build_lyrics_format_css(theme_data, item.main.width(), item.main.height())
+        lyricstable = 'left: 0px; padding-left: %spx; top: %spx; width: 100%%; ' % (item.main.x(), item.main.y())
+        transparency = 1 - (float(theme_data.display_background_transparency) / 100)
+        if theme_data.display_smooth_transparency:
+            lyricstable += 'background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%%, rgba(0,0,0,%s) 2%%, rgba(0,0,0,%s) 98%%,rgba(0,0,0,0) 100%%);'\
+                % (transparency, transparency)
+        else:
+            lyricstable += 'background: rgba(0,0,0,%s);' % (transparency)
+            
+
+        lyrics = build_lyrics_format_css(theme_data, item.main.width(), item.main.height(), display_width)
         lyricsmain += build_lyrics_outline_css(theme_data)
         if theme_data.font_main_shadow:
             lyricsmain += ' text-shadow: %s %spx %spx;' % \
@@ -693,7 +701,7 @@
     return ''
 
 
-def build_lyrics_format_css(theme_data, width, height):
+def build_lyrics_format_css(theme_data, width, height, display_width):
     """
     Build the css which controls the theme format. Also used by renderer for splitting verses
 
@@ -715,13 +723,16 @@
         padding_bottom = '0.5em'
     else:
         padding_bottom = '0'
+        
+    padding_right = display_width - width;
+    
     lyrics = '%s word-wrap: break-word; ' \
              'text-align: %s; vertical-align: %s; font-family: %s; ' \
              'font-size: %spt; color: %s; line-height: %d%%; margin: 0;' \
-             'padding: 0; padding-bottom: %s; padding-left: %spx; width: %spx; height: %spx; ' % \
+             'padding: 0; padding-bottom: %s; padding-left: %spx; padding-right: %spx; width: %spx; height: %spx; ' % \
         (justify, align, valign, theme_data.font_main_name, theme_data.font_main_size,
          theme_data.font_main_color, 100 + int(theme_data.font_main_line_adjustment), padding_bottom,
-         left_margin, width, height)
+         left_margin, padding_right, width, height)
     if theme_data.font_main_italics:
         lyrics += 'font-style:italic; '
     if theme_data.font_main_bold:

=== modified file 'openlp/core/lib/json/theme.json'
--- openlp/core/lib/json/theme.json	2013-10-18 18:10:47 +0000
+++ openlp/core/lib/json/theme.json	2015-02-22 20:49:19 +0000
@@ -11,7 +11,9 @@
     "display" :{
         "horizontal_align": 0,
         "slide_transition": false,
-        "vertical_align": 0
+        "vertical_align": 0,
+        "background_transparency": 100,
+        "smooth_transparency": 0
     },
     "font": {
         "footer": {

=== modified file 'openlp/core/lib/renderer.py'
--- openlp/core/lib/renderer.py	2015-01-18 13:39:21 +0000
+++ openlp/core/lib/renderer.py	2015-02-22 20:49:19 +0000
@@ -381,7 +381,7 @@
             </script><style>*{margin: 0; padding: 0; border: 0;}
             #main {position: absolute; top: 0px; %s %s}</style></head><body>
             <div id="main"></div></body></html>""" % \
-            (build_lyrics_format_css(theme_data, self.page_width, self.page_height),
+            (build_lyrics_format_css(theme_data, self.page_width, self.page_height, self.display.width()),
              build_lyrics_outline_css(theme_data))
         self.web.setHtml(html)
         self.empty_height = self.web_frame.contentsSize().height()

=== modified file 'openlp/core/lib/theme.py'
--- openlp/core/lib/theme.py	2015-01-18 13:39:21 +0000
+++ openlp/core/lib/theme.py	2015-02-22 20:49:19 +0000
@@ -318,7 +318,7 @@
         element.appendChild(value)
         background.appendChild(element)
 
-    def add_display(self, horizontal, vertical, transition):
+    def add_display(self, horizontal, vertical, transition, background_transparency, smooth_transparency):
         """
         Add a Display options.
 
@@ -343,6 +343,16 @@
         value = self.theme_xml.createTextNode(str(transition))
         element.appendChild(value)
         background.appendChild(element)
+        # Background Transparency
+        element = self.theme_xml.createElement('backgroundTransparency')
+        value = self.theme_xml.createTextNode(str(background_transparency))
+        element.appendChild(value)
+        background.appendChild(element)
+        # Smooth Transparency
+        element = self.theme_xml.createElement('smoothTransparency')
+        value = self.theme_xml.createTextNode(str(smooth_transparency))
+        element.appendChild(value)
+        background.appendChild(element)
 
     def child_element(self, element, tag, value):
         """
@@ -555,5 +565,7 @@
         self.add_display(
             self.display_horizontal_align,
             self.display_vertical_align,
-            self.display_slide_transition
+            self.display_slide_transition,
+            self.display_background_transparency,
+            self.display_smooth_transparency
         )

=== modified file 'openlp/core/ui/themeform.py'
--- openlp/core/ui/themeform.py	2015-01-18 13:39:21 +0000
+++ openlp/core/ui/themeform.py	2015-02-22 20:49:19 +0000
@@ -134,6 +134,8 @@
         self.background_page.registerField('horizontal', self.horizontal_combo_box)
         self.background_page.registerField('vertical', self.vertical_combo_box)
         self.background_page.registerField('slide_transition', self.transitions_check_box)
+        self.background_page.registerField('background_transparency', self.background_transparency_spin_box)
+        self.background_page.registerField('smooth_transparency', self.smooth_transparency_check_box)
         self.background_page.registerField('name', self.theme_name_edit)
 
     def calculate_lines(self):
@@ -366,6 +368,8 @@
         self.setField('horizontal', self.theme.display_horizontal_align)
         self.setField('vertical', self.theme.display_vertical_align)
         self.setField('slide_transition', self.theme.display_slide_transition)
+        self.setField('background_transparency', self.theme.display_background_transparency)
+        self.setField('smooth_transparency', self.theme.display_smooth_transparency)
 
     def set_preview_page_values(self):
         """
@@ -496,6 +500,8 @@
         self.theme.display_horizontal_align = self.horizontal_combo_box.currentIndex()
         self.theme.display_vertical_align = self.vertical_combo_box.currentIndex()
         self.theme.display_slide_transition = self.field('slide_transition')
+        self.theme.display_background_transparency = self.field('background_transparency')
+        self.theme.display_smooth_transparency = self.field('smooth_transparency')
 
     def accept(self):
         """

=== modified file 'openlp/core/ui/themewizard.py'
--- openlp/core/ui/themewizard.py	2015-01-18 13:39:21 +0000
+++ openlp/core/ui/themewizard.py	2015-02-22 20:49:19 +0000
@@ -261,6 +261,23 @@
         self.transitions_check_box.setObjectName('transitions_check_box')
         self.alignment_layout.addRow(self.transitions_label, self.transitions_check_box)
         self.alignment_layout.setItem(3, QtGui.QFormLayout.LabelRole, self.spacer)
+        self.transparency_layout = QtGui.QHBoxLayout()
+        self.transparency_layout.setObjectName('transparency_layout')
+        self.background_transparency_label = QtGui.QLabel(self.alignment_page)
+        self.background_transparency_label.setObjectName('background_transparency_label')
+        self.background_transparency_spin_box = QtGui.QSpinBox(self.alignment_page)
+        self.background_transparency_spin_box.setMaximum(100)
+        self.background_transparency_spin_box.setObjectName('background_transparency_spin_box')
+        self.transparency_layout.addWidget(self.background_transparency_spin_box)
+        self.transparency_layout.addSpacing(20)
+        self.smooth_transparency_label = QtGui.QLabel(self.alignment_page)
+        self.smooth_transparency_label.setObjectName('smooth_transparency_label')
+        self.transparency_layout.addWidget(self.smooth_transparency_label)
+        self.transparency_layout.addSpacing(20)
+        self.smooth_transparency_check_box = QtGui.QCheckBox(self.alignment_page)
+        self.smooth_transparency_check_box.setObjectName('smooth_transparency_check_box')
+        self.transparency_layout.addWidget(self.smooth_transparency_check_box)
+        self.alignment_layout.addRow(self.smooth_transparency_label, self.transparency_layout)
         theme_wizard.addPage(self.alignment_page)
         # Area Position Page
         self.area_position_page = QtGui.QWizardPage()
@@ -458,6 +475,9 @@
         self.horizontal_combo_box.setItemText(HorizontalType.Center, translate('OpenLP.ThemeWizard', 'Center'))
         self.horizontal_combo_box.setItemText(HorizontalType.Justify, translate('OpenLP.ThemeWizard', 'Justify'))
         self.transitions_label.setText(translate('OpenLP.ThemeWizard', 'Transitions:'))
+        self.background_transparency_label.setText(translate('OpenLP.ThemeWizard', 'Transparency:'))
+        self.background_transparency_spin_box.setSuffix(translate('OpenLP.ThemeWizard', '%'))
+        self.smooth_transparency_label.setText(translate('OpenLP.ThemeWizard', 'Smooth Transition:'))
         self.area_position_page.setTitle(translate('OpenLP.ThemeWizard', 'Output Area Locations'))
         self.area_position_page.setSubTitle(translate('OpenLP.ThemeWizard', 'Allows you to change and move the'
                                                       ' Main and Footer areas.'))

=== modified file 'tests/functional/openlp_core_lib/test_htmlbuilder.py'
--- tests/functional/openlp_core_lib/test_htmlbuilder.py	2014-07-24 21:57:16 +0000
+++ tests/functional/openlp_core_lib/test_htmlbuilder.py	2015-02-22 20:49:19 +0000
@@ -169,7 +169,24 @@
     z-index: 5;
     position: absolute;
     display: table;
-    left: 10px; top: 20px;
+    left: 0px; padding-left: 10px; top: 20px; width: 100%; background: rgba(0,0,0,0.5);
+}
+.lyricscell {
+    display: table-cell;
+    word-wrap: break-word;
+    -webkit-transition: opacity 0.4s ease;
+    lyrics_format_css
+}
+.lyricsmain {
+     text-shadow: #000000 5px 5px;
+}
+"""
+LYRICS_CSS_SMOOTH = """
+.lyricstable {
+    z-index: 5;
+    position: absolute;
+    display: table;
+    left: 0px; padding-left: 10px; top: 20px; width: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 2%, rgba(0,0,0,0.5) 98%,rgba(0,0,0,0) 100%);
 }
 .lyricscell {
     display: table-cell;
@@ -184,7 +201,7 @@
 LYRICS_OUTLINE_CSS = ' -webkit-text-stroke: 0.125em #000000; -webkit-text-fill-color: #FFFFFF; '
 LYRICS_FORMAT_CSS = ' word-wrap: break-word; text-align: justify; vertical-align: bottom; ' + \
     'font-family: Arial; font-size: 40pt; color: #FFFFFF; line-height: 108%; margin: 0;padding: 0; ' + \
-    'padding-bottom: 0.5em; padding-left: 2px; width: 1580px; height: 810px; font-style:italic; font-weight:bold; '
+    'padding-bottom: 0.5em; padding-left: 2px; padding-right: 340px; width: 1580px; height: 810px; font-style:italic; font-weight:bold; '
 FOOTER_CSS_BASE = """
     left: 10px;
     bottom: 0px;
@@ -275,13 +292,40 @@
             item.theme_data.font_main_shadow = True
             item.theme_data.font_main_shadow_color = '#000000'
             item.theme_data.font_main_shadow_size = 5
-
+            item.theme_data.display_background_transparency = 50
+            item.theme_data.display_smooth_transparency = 0
+            display_width = 1024
+            
             # WHEN: Create the css.
-            css = build_lyrics_css(item)
+            css = build_lyrics_css(item, display_width)
 
             # THEN: The css should be equal.
             self.assertEqual(LYRICS_CSS, css, 'The lyrics css should be equal.')
 
+    def build_lyrics_css_smooth_transparency_test(self):
+        """
+        Test the build_lyrics_css() function with smooth transparency enabled
+        """
+        # GIVEN: Mocked method and arguments.
+        with patch('openlp.core.lib.htmlbuilder.build_lyrics_format_css') as mocked_build_lyrics_format_css, \
+                patch('openlp.core.lib.htmlbuilder.build_lyrics_outline_css') as mocked_build_lyrics_outline_css:
+            mocked_build_lyrics_format_css.return_value = 'lyrics_format_css'
+            mocked_build_lyrics_outline_css.return_value = ''
+            item = MagicMock()
+            item.main = QtCore.QRect(10, 20, 10, 20)
+            item.theme_data.font_main_shadow = True
+            item.theme_data.font_main_shadow_color = '#000000'
+            item.theme_data.font_main_shadow_size = 5
+            item.theme_data.display_background_transparency = 50
+            item.theme_data.display_smooth_transparency = 1
+            display_width = 1024
+            
+            # WHEN: Create the css.
+            css = build_lyrics_css(item, display_width)
+
+            # THEN: The css should be equal.
+            self.assertEqual(LYRICS_CSS_SMOOTH, css, 'The lyrics css should be equal.')
+
     def build_lyrics_outline_css_test(self):
         """
         Test the build_lyrics_outline_css() function
@@ -315,9 +359,11 @@
         theme_data.font_main_line_adjustment = 8
         width = 1580
         height = 810
+        display_width = 1920
+        
 
         # WHEN: Get the css.
-        css = build_lyrics_format_css(theme_data, width, height)
+        css = build_lyrics_format_css(theme_data, width, height, display_width)
 
         # THEN: They should be equal.
         self.assertEqual(LYRICS_FORMAT_CSS, css, 'The lyrics format css should be equal.')

=== modified file 'tests/functional/openlp_core_lib/test_theme.py'
--- tests/functional/openlp_core_lib/test_theme.py	2015-01-18 13:39:21 +0000
+++ tests/functional/openlp_core_lib/test_theme.py	2015-02-22 20:49:19 +0000
@@ -61,4 +61,4 @@
         self.assertTrue(default_theme.font_footer_name == "Arial",
                         'The theme should have a font_footer_name of Arial')
         self.assertTrue(default_theme.font_main_bold is False, 'The theme should have a font_main_bold of false')
-        self.assertTrue(len(default_theme.__dict__) == 47, 'The theme should have 47 variables')
+        self.assertTrue(len(default_theme.__dict__) == 49, 'The theme should have 49 variables')