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 #
###############################################################################
import logging
from PyQt4 import QtWebKit
from openlp.core.lib import image_to_byte
log = logging.getLogger(__name__)
HTMLSRC = u"""
<html>
<head>
@ -39,7 +42,7 @@ HTMLSRC = u"""
border: 0;
}
body {
background-color: black;
%s;
}
.size {
position: absolute;
@ -192,7 +195,7 @@ body {
function show_text(newtext){
if(timer != null)
clearTimeout(timer);
text_fade('lyricsmain', newtext);
text_fade('lyricsmain', newtext);
text_fade('lyricsoutline', newtext);
text_fade('lyricsshadow', newtext);
if(text_opacity()==1) return;
@ -233,7 +236,7 @@ body {
var text = document.getElementById('lyricsmain');
return getComputedStyle(text, '').opacity;
}
function show_text_complete(){
return (text_opacity()==1);
}
@ -265,6 +268,7 @@ def build_html(item, screen, alert, islive):
"""
try:
webkitvers = float(QtWebKit.qWebKitVersion())
log.debug(u'Webkit version = %s' % webkitvers)
except AttributeError:
webkitvers = 0
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)
else:
image = u''
html = HTMLSRC % (width, height,
html = HTMLSRC % (build_background_css(item, width, height),
width, height,
build_alert_css(alert, width),
build_footer_css(item),
build_lyrics_css(item, webkitvers),
u'true' if theme and theme.display_slideTransition and islive \
else u'false',
image,
image,
build_lyrics_html(item, webkitvers))
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):
"""
Build the video display css
`item`
Service Item containing theme and location information
`webkitvers`
The version of qtwebkit we're using
"""
style = """
.lyricstable {
z-index:4;
position: absolute;
display: table;
%s
}
.lyricscell {
display:table-cell;
word-wrap: break-word;
.lyricstable {
z-index:4;
position: absolute;
display: table;
%s
}
.lyricsmain {
%s
.lyricscell {
display:table-cell;
word-wrap: break-word;
%s
}
.lyricsoutline {
%s
.lyricsmain {
%s
}
.lyricsshadow {
%s
.lyricsoutline {
%s
}
.lyricsshadow {
%s
}
"""
theme = item.themedata
@ -341,23 +378,23 @@ def build_lyrics_css(item, webkitvers):
lyrics = u'width: %spx; height: %spx; text-align: %s; ' \
'vertical-align: %s; font-family: %s; font-size: %spt; ' \
'color: %s; line-height: %d%%;' % \
(item.main.width(), item.main.height(), align, valign,
theme.font_main_name, theme.font_main_proportion,
(item.main.width(), item.main.height(), align, valign,
theme.font_main_name, theme.font_main_proportion,
theme.font_main_color, 100 + int(theme.font_main_line_adjustment))
# For performance reasons we want to show as few DIV's as possible,
# especially when animating/transitions.
# However some bugs in older versions of qtwebkit mean we need to
# especially when animating/transitions.
# However some bugs in older versions of qtwebkit mean we need to
# 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.
#
# 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
# https://bugs.webkit.org/show_bug.cgi?id=44403
#
# Before 534.4 the text-shadow didn't get displayed when
# webkit-text-stroke was used. So use an offset text layer underneath.
# Before 534.4 the text-shadow didn't get displayed when
# webkit-text-stroke was used. So use an offset text layer underneath.
# https://bugs.webkit.org/show_bug.cgi?id=19728
if theme.display_outline:
if webkitvers < 534.3:
@ -373,7 +410,7 @@ def build_lyrics_css(item, webkitvers):
u'-webkit-text-fill-color: %s; ' \
u' padding-left: %spx; padding-top: %spx' % \
(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)
if theme.display_shadow and \
(not theme.display_outline or webkitvers >= 534.3):
@ -382,18 +419,18 @@ def build_lyrics_css(item, webkitvers):
theme.display_shadow_size)
lyrics_css = style % (lyricstable, lyrics, lyricsmain, outline, shadow)
return lyrics_css
def build_lyrics_html(item, webkitvers):
"""
Build the HTML required to show the lyrics
`item`
Service Item containing theme and location information
`webkitvers`
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.
# To support vertical alignment middle and bottom, nested div's using
# 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'class="lyricscell lyricsmain"></div></div>'
return lyrics
def build_footer_css(item):
"""
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.frame.height(), QtGui.QImage.Format_ARGB32_Premultiplied)
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':
painter.fillRect(self.frame.rect(),
QtGui.QColor(self._theme.background_color))
self.bg_frame = None
# painter.fillRect(self.frame.rect(),
# QtGui.QColor(self._theme.background_color))
elif self._theme.background_type == u'gradient':
self.bg_frame = None
# gradient
gradient = None
if self._theme.background_direction == u'horizontal':
w = int(self.frame.width()) / 2
# vertical
gradient = QtGui.QLinearGradient(w, 0, w, self.frame.height())
elif self._theme.background_direction == u'vertical':
h = int(self.frame.height()) / 2
# Horizontal
gradient = QtGui.QLinearGradient(0, h, self.frame.width(), h)
else:
w = int(self.frame.width()) / 2
h = int(self.frame.height()) / 2
# Circular
gradient = QtGui.QRadialGradient(w, h, w)
gradient.setColorAt(0,
QtGui.QColor(self._theme.background_startColor))
gradient.setColorAt(1,
QtGui.QColor(self._theme.background_endColor))
painter.setBrush(QtGui.QBrush(gradient))
rect_path = QtGui.QPainterPath()
max_x = self.frame.width()
max_y = self.frame.height()
rect_path.moveTo(0, 0)
rect_path.lineTo(0, max_y)
rect_path.lineTo(max_x, max_y)
rect_path.lineTo(max_x, 0)
rect_path.closeSubpath()
painter.drawPath(rect_path)
# gradient = None
# if self._theme.background_direction == u'horizontal':
# w = int(self.frame.width()) / 2
# # vertical
# gradient = QtGui.QLinearGradient(w, 0, w, self.frame.height())
# elif self._theme.background_direction == u'vertical':
# h = int(self.frame.height()) / 2
# # Horizontal
# gradient = QtGui.QLinearGradient(0, h, self.frame.width(), h)
# else:
# w = int(self.frame.width()) / 2
# h = int(self.frame.height()) / 2
# # Circular
# gradient = QtGui.QRadialGradient(w, h, w)
# gradient.setColorAt(0,
# QtGui.QColor(self._theme.background_startColor))
# gradient.setColorAt(1,
# QtGui.QColor(self._theme.background_endColor))
# painter.setBrush(QtGui.QBrush(gradient))
# rect_path = QtGui.QPainterPath()
# max_x = self.frame.width()
# max_y = self.frame.height()
# rect_path.moveTo(0, 0)
# rect_path.lineTo(0, max_y)
# rect_path.lineTo(max_x, max_y)
# rect_path.lineTo(max_x, 0)
# rect_path.closeSubpath()
# painter.drawPath(rect_path)
# painter.end()
elif self._theme.background_type == u'image':
# image
painter = QtGui.QPainter()
painter.begin(self.bg_frame)
painter.fillRect(self.frame.rect(), QtCore.Qt.black)
if 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.begin(self.black)
painter_image.fillRect(self.black.rect(), QtCore.Qt.black)
#Build the initial frame.
# Build the initial frame.
initialFrame = QtGui.QImage(
self.screens.current[u'size'].width(),
self.screens.current[u'size'].height(),