Move backgrounds to css from images

This commit is contained in:
Tim Bentley 2010-09-04 08:48:58 +01:00
parent 6deac45c2c
commit e5b2ff9e06
3 changed files with 108 additions and 68 deletions

View File

@ -24,10 +24,13 @@
# Temple Place, Suite 330, Boston, MA 02111-1307 USA # # Temple Place, Suite 330, Boston, MA 02111-1307 USA #
############################################################################### ###############################################################################
import logging
from PyQt4 import QtWebKit from PyQt4 import QtWebKit
from openlp.core.lib import image_to_byte from openlp.core.lib import image_to_byte
log = logging.getLogger(__name__)
HTMLSRC = u""" HTMLSRC = u"""
<html> <html>
<head> <head>
@ -39,7 +42,7 @@ HTMLSRC = u"""
border: 0; border: 0;
} }
body { body {
background-color: black; %s;
} }
.size { .size {
position: absolute; position: absolute;
@ -192,7 +195,7 @@ body {
function show_text(newtext){ function show_text(newtext){
if(timer != null) if(timer != null)
clearTimeout(timer); clearTimeout(timer);
text_fade('lyricsmain', newtext); text_fade('lyricsmain', newtext);
text_fade('lyricsoutline', newtext); text_fade('lyricsoutline', newtext);
text_fade('lyricsshadow', newtext); text_fade('lyricsshadow', newtext);
if(text_opacity()==1) return; if(text_opacity()==1) return;
@ -233,7 +236,7 @@ body {
var text = document.getElementById('lyricsmain'); var text = document.getElementById('lyricsmain');
return getComputedStyle(text, '').opacity; return getComputedStyle(text, '').opacity;
} }
function show_text_complete(){ function show_text_complete(){
return (text_opacity()==1); return (text_opacity()==1);
} }
@ -265,6 +268,7 @@ def build_html(item, screen, alert, islive):
""" """
try: try:
webkitvers = float(QtWebKit.qWebKitVersion()) webkitvers = float(QtWebKit.qWebKitVersion())
log.debug(u'Webkit version = %s' % webkitvers)
except AttributeError: except AttributeError:
webkitvers = 0 webkitvers = 0
width = screen[u'size'].width() width = screen[u'size'].width()
@ -274,47 +278,80 @@ def build_html(item, screen, alert, islive):
image = u'data:image/png;base64,%s' % image_to_byte(item.bg_frame) image = u'data:image/png;base64,%s' % image_to_byte(item.bg_frame)
else: else:
image = u'' image = u''
html = HTMLSRC % (width, height, html = HTMLSRC % (build_background_css(item, width, height),
width, height,
build_alert_css(alert, width), build_alert_css(alert, width),
build_footer_css(item), build_footer_css(item),
build_lyrics_css(item, webkitvers), build_lyrics_css(item, webkitvers),
u'true' if theme and theme.display_slideTransition and islive \ u'true' if theme and theme.display_slideTransition and islive \
else u'false', else u'false',
image, image,
build_lyrics_html(item, webkitvers)) build_lyrics_html(item, webkitvers))
return html return html
def build_background_css(item, width, height):
"""
Build the background css
`item`
Service Item containing theme and location information
"""
width = int(width) / 2
theme = item.themedata
background = u'background-color: black'
if theme:
if theme.background_type == u'solid':
background = u'background-color: %s' % theme.background_color
else:
if theme.background_direction == u'horizontal':
background = \
u'background: -webkit-gradient(linear, left top, left bottom, ' \
'from(%s), to(%s))' % (theme.background_startColor,
theme.background_endColor)
elif theme.background_direction == u'vertical':
background = \
u'background: -webkit-gradient(linear, left top, right top,' \
'from(%s), to(%s))' % (theme.background_startColor,
theme.background_endColor)
else:
background = \
u'background: -webkit-gradient(radial, %s 50%%, 100, %s 50%%, %s,' \
'from(%s), to(%s))' % (width, width, width, theme.background_startColor,
theme.background_endColor)
return background
def build_lyrics_css(item, webkitvers): def build_lyrics_css(item, webkitvers):
""" """
Build the video display css Build the video display css
`item` `item`
Service Item containing theme and location information Service Item containing theme and location information
`webkitvers` `webkitvers`
The version of qtwebkit we're using The version of qtwebkit we're using
""" """
style = """ style = """
.lyricstable { .lyricstable {
z-index:4; z-index:4;
position: absolute; position: absolute;
display: table; display: table;
%s
}
.lyricscell {
display:table-cell;
word-wrap: break-word;
%s %s
} }
.lyricsmain { .lyricscell {
%s display:table-cell;
word-wrap: break-word;
%s
} }
.lyricsoutline { .lyricsmain {
%s %s
} }
.lyricsshadow { .lyricsoutline {
%s %s
}
.lyricsshadow {
%s
} }
""" """
theme = item.themedata theme = item.themedata
@ -341,23 +378,23 @@ def build_lyrics_css(item, webkitvers):
lyrics = u'width: %spx; height: %spx; text-align: %s; ' \ lyrics = u'width: %spx; height: %spx; text-align: %s; ' \
'vertical-align: %s; font-family: %s; font-size: %spt; ' \ 'vertical-align: %s; font-family: %s; font-size: %spt; ' \
'color: %s; line-height: %d%%;' % \ 'color: %s; line-height: %d%%;' % \
(item.main.width(), item.main.height(), align, valign, (item.main.width(), item.main.height(), align, valign,
theme.font_main_name, theme.font_main_proportion, theme.font_main_name, theme.font_main_proportion,
theme.font_main_color, 100 + int(theme.font_main_line_adjustment)) theme.font_main_color, 100 + int(theme.font_main_line_adjustment))
# For performance reasons we want to show as few DIV's as possible, # For performance reasons we want to show as few DIV's as possible,
# especially when animating/transitions. # especially when animating/transitions.
# However some bugs in older versions of qtwebkit mean we need to # However some bugs in older versions of qtwebkit mean we need to
# perform workarounds and add extra divs. Only do these when needed. # perform workarounds and add extra divs. Only do these when needed.
# #
# Before 533.3 the webkit-text-fill colour wasn't displayed, only the # Before 533.3 the webkit-text-fill colour wasn't displayed, only the
# stroke (outline) color. So put stroke layer underneath the main text. # stroke (outline) color. So put stroke layer underneath the main text.
# #
# Before 534.4 the webkit-text-stroke was sometimes out of alignment # Before 534.4 the webkit-text-stroke was sometimes out of alignment
# with the fill, or normal text. letter-spacing=1 is workaround # with the fill, or normal text. letter-spacing=1 is workaround
# https://bugs.webkit.org/show_bug.cgi?id=44403 # https://bugs.webkit.org/show_bug.cgi?id=44403
# #
# Before 534.4 the text-shadow didn't get displayed when # Before 534.4 the text-shadow didn't get displayed when
# webkit-text-stroke was used. So use an offset text layer underneath. # webkit-text-stroke was used. So use an offset text layer underneath.
# https://bugs.webkit.org/show_bug.cgi?id=19728 # https://bugs.webkit.org/show_bug.cgi?id=19728
if theme.display_outline: if theme.display_outline:
if webkitvers < 534.3: if webkitvers < 534.3:
@ -373,7 +410,7 @@ def build_lyrics_css(item, webkitvers):
u'-webkit-text-fill-color: %s; ' \ u'-webkit-text-fill-color: %s; ' \
u' padding-left: %spx; padding-top: %spx' % \ u' padding-left: %spx; padding-top: %spx' % \
(float(theme.display_outline_size) / 16, (float(theme.display_outline_size) / 16,
theme.display_shadow_color, theme.display_shadow_color, theme.display_shadow_color, theme.display_shadow_color,
theme.display_shadow_size, theme.display_shadow_size) theme.display_shadow_size, theme.display_shadow_size)
if theme.display_shadow and \ if theme.display_shadow and \
(not theme.display_outline or webkitvers >= 534.3): (not theme.display_outline or webkitvers >= 534.3):
@ -382,18 +419,18 @@ def build_lyrics_css(item, webkitvers):
theme.display_shadow_size) theme.display_shadow_size)
lyrics_css = style % (lyricstable, lyrics, lyricsmain, outline, shadow) lyrics_css = style % (lyricstable, lyrics, lyricsmain, outline, shadow)
return lyrics_css return lyrics_css
def build_lyrics_html(item, webkitvers): def build_lyrics_html(item, webkitvers):
""" """
Build the HTML required to show the lyrics Build the HTML required to show the lyrics
`item` `item`
Service Item containing theme and location information Service Item containing theme and location information
`webkitvers` `webkitvers`
The version of qtwebkit we're using The version of qtwebkit we're using
""" """
# Bugs in some versions of QtWebKit mean we sometimes need additional # Bugs in some versions of QtWebKit mean we sometimes need additional
# divs for outline and shadow, since the CSS doesn't work. # divs for outline and shadow, since the CSS doesn't work.
# To support vertical alignment middle and bottom, nested div's using # To support vertical alignment middle and bottom, nested div's using
# display:table/display:table-cell are required for each lyric block. # display:table/display:table-cell are required for each lyric block.
@ -411,7 +448,7 @@ def build_lyrics_html(item, webkitvers):
u'<div id="lyricsmain" style="opacity:1" ' \ u'<div id="lyricsmain" style="opacity:1" ' \
u'class="lyricscell lyricsmain"></div></div>' u'class="lyricscell lyricsmain"></div></div>'
return lyrics return lyrics
def build_footer_css(item): def build_footer_css(item):
""" """
Build the display of the item footer Build the display of the item footer

View File

@ -190,44 +190,47 @@ class Renderer(object):
self.bg_frame = QtGui.QImage(self.frame.width(), self.bg_frame = QtGui.QImage(self.frame.width(),
self.frame.height(), QtGui.QImage.Format_ARGB32_Premultiplied) self.frame.height(), QtGui.QImage.Format_ARGB32_Premultiplied)
log.debug(u'render background %s start', self._theme.background_type) log.debug(u'render background %s start', self._theme.background_type)
painter = QtGui.QPainter()
painter.begin(self.bg_frame)
if self._theme.background_type == u'solid': if self._theme.background_type == u'solid':
painter.fillRect(self.frame.rect(), self.bg_frame = None
QtGui.QColor(self._theme.background_color)) # painter.fillRect(self.frame.rect(),
# QtGui.QColor(self._theme.background_color))
elif self._theme.background_type == u'gradient': elif self._theme.background_type == u'gradient':
self.bg_frame = None
# gradient # gradient
gradient = None # gradient = None
if self._theme.background_direction == u'horizontal': # if self._theme.background_direction == u'horizontal':
w = int(self.frame.width()) / 2 # w = int(self.frame.width()) / 2
# vertical # # vertical
gradient = QtGui.QLinearGradient(w, 0, w, self.frame.height()) # gradient = QtGui.QLinearGradient(w, 0, w, self.frame.height())
elif self._theme.background_direction == u'vertical': # elif self._theme.background_direction == u'vertical':
h = int(self.frame.height()) / 2 # h = int(self.frame.height()) / 2
# Horizontal # # Horizontal
gradient = QtGui.QLinearGradient(0, h, self.frame.width(), h) # gradient = QtGui.QLinearGradient(0, h, self.frame.width(), h)
else: # else:
w = int(self.frame.width()) / 2 # w = int(self.frame.width()) / 2
h = int(self.frame.height()) / 2 # h = int(self.frame.height()) / 2
# Circular # # Circular
gradient = QtGui.QRadialGradient(w, h, w) # gradient = QtGui.QRadialGradient(w, h, w)
gradient.setColorAt(0, # gradient.setColorAt(0,
QtGui.QColor(self._theme.background_startColor)) # QtGui.QColor(self._theme.background_startColor))
gradient.setColorAt(1, # gradient.setColorAt(1,
QtGui.QColor(self._theme.background_endColor)) # QtGui.QColor(self._theme.background_endColor))
painter.setBrush(QtGui.QBrush(gradient)) # painter.setBrush(QtGui.QBrush(gradient))
rect_path = QtGui.QPainterPath() # rect_path = QtGui.QPainterPath()
max_x = self.frame.width() # max_x = self.frame.width()
max_y = self.frame.height() # max_y = self.frame.height()
rect_path.moveTo(0, 0) # rect_path.moveTo(0, 0)
rect_path.lineTo(0, max_y) # rect_path.lineTo(0, max_y)
rect_path.lineTo(max_x, max_y) # rect_path.lineTo(max_x, max_y)
rect_path.lineTo(max_x, 0) # rect_path.lineTo(max_x, 0)
rect_path.closeSubpath() # rect_path.closeSubpath()
painter.drawPath(rect_path) # painter.drawPath(rect_path)
# painter.end()
elif self._theme.background_type == u'image': elif self._theme.background_type == u'image':
# image # image
painter = QtGui.QPainter()
painter.begin(self.bg_frame)
painter.fillRect(self.frame.rect(), QtCore.Qt.black) painter.fillRect(self.frame.rect(), QtCore.Qt.black)
if self.bg_image: if self.bg_image:
painter.drawImage(0, 0, self.bg_image) painter.drawImage(0, 0, self.bg_image)
painter.end() painter.end()

View File

@ -138,7 +138,7 @@ class MainDisplay(DisplayWidget):
painter_image = QtGui.QPainter() painter_image = QtGui.QPainter()
painter_image.begin(self.black) painter_image.begin(self.black)
painter_image.fillRect(self.black.rect(), QtCore.Qt.black) painter_image.fillRect(self.black.rect(), QtCore.Qt.black)
#Build the initial frame. # Build the initial frame.
initialFrame = QtGui.QImage( initialFrame = QtGui.QImage(
self.screens.current[u'size'].width(), self.screens.current[u'size'].width(),
self.screens.current[u'size'].height(), self.screens.current[u'size'].height(),