forked from openlp/openlp
Fix {} colour substitutions and problems displaying first slide
bzr-revno: 1006
This commit is contained in:
Jonathan Corwin
commit
1275fdb35a
@ -39,40 +39,40 @@ log = logging.getLogger(__name__)
|
||||
html_expands = []
|
||||
|
||||
html_expands.append({u'desc':u'Red', u'start tag':u'{r}', \
|
||||
u'start html':u'<font color=red>', \
|
||||
u'end tag':u'{/r}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:red">', \
|
||||
u'end tag':u'{/r}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Black', u'start tag':u'{b}', \
|
||||
u'start html':u'<font color=black>', \
|
||||
u'end tag':u'{/b}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:black">', \
|
||||
u'end tag':u'{/b}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Blue', u'start tag':u'{bl}', \
|
||||
u'start html':u'<font color=blue>', \
|
||||
u'end tag':u'{/bl}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:blue">', \
|
||||
u'end tag':u'{/bl}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Yellow', u'start tag':u'{y}', \
|
||||
u'start html':u'<font color=yellow>', \
|
||||
u'end tag':u'{/y}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:yellow">', \
|
||||
u'end tag':u'{/y}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Green', u'start tag':u'{g}', \
|
||||
u'start html':u'<font color=green>', \
|
||||
u'end tag':u'{/g}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:green">', \
|
||||
u'end tag':u'{/g}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Pink', u'start tag':u'{pk}', \
|
||||
u'start html':u'<font color=#CC33CC>', \
|
||||
u'end tag':u'{/pk}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:#CC33CC">', \
|
||||
u'end tag':u'{/pk}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Orange', u'start tag':u'{o}', \
|
||||
u'start html':u'<font color=#CC0033>', \
|
||||
u'end tag':u'{/o}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:#CC0033">', \
|
||||
u'end tag':u'{/o}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Purple', u'start tag':u'{pp}', \
|
||||
u'start html':u'<font color=#9900FF>', \
|
||||
u'end tag':u'{/pp}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:#9900FF">', \
|
||||
u'end tag':u'{/pp}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'White', u'start tag':u'{w}', \
|
||||
u'start html':u'<font color=white>', \
|
||||
u'end tag':u'{/w}', u'end html':u'</font>', \
|
||||
u'start html':u'<span style="-webkit-text-fill-color:white">', \
|
||||
u'end tag':u'{/w}', u'end html':u'</span>', \
|
||||
u'protected':False})
|
||||
html_expands.append({u'desc':u'Superscript', u'start tag':u'{su}', \
|
||||
u'start html':u'<sup>', \
|
||||
|
||||
@ -24,6 +24,8 @@
|
||||
# Temple Place, Suite 330, Boston, MA 02111-1307 USA #
|
||||
###############################################################################
|
||||
|
||||
from PyQt4 import QtWebKit
|
||||
|
||||
from openlp.core.lib import image_to_byte
|
||||
|
||||
HTMLSRC = u"""
|
||||
@ -39,7 +41,7 @@ HTMLSRC = u"""
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
.dim {
|
||||
.size {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
@ -51,6 +53,9 @@ body {
|
||||
background-color: black;
|
||||
display: none;
|
||||
}
|
||||
#image {
|
||||
z-index:1;
|
||||
}
|
||||
#video {
|
||||
z-index:2;
|
||||
}
|
||||
@ -136,8 +141,12 @@ body {
|
||||
}
|
||||
document.getElementById('black').style.display = black;
|
||||
document.getElementById('lyricsmain').style.visibility = lyrics;
|
||||
document.getElementById('lyricsoutline').style.visibility = lyrics;
|
||||
document.getElementById('lyricsshadow').style.visibility = lyrics;
|
||||
outline = document.getElementById('lyricsoutline')
|
||||
if(outline!=null)
|
||||
outline.style.visibility = lyrics;
|
||||
shadow = document.getElementById('lyricsshadow')
|
||||
if(shadow!=null)
|
||||
shadow.style.visibility = lyrics;
|
||||
document.getElementById('footer').style.visibility = lyrics;
|
||||
var vid = document.getElementById('video');
|
||||
if(vid.src != ''){
|
||||
@ -156,7 +165,7 @@ body {
|
||||
return 0;
|
||||
}
|
||||
if(position == ''){
|
||||
position = window.getComputedStyle(text, '').verticalAlign;
|
||||
position = getComputedStyle(text, '').verticalAlign;
|
||||
}
|
||||
switch(position)
|
||||
{
|
||||
@ -181,111 +190,62 @@ body {
|
||||
}
|
||||
|
||||
function show_text(newtext){
|
||||
var text1 = document.getElementById('lyricsmain');
|
||||
var texto1 = document.getElementById('lyricsoutline');
|
||||
var texts1 = document.getElementById('lyricsshadow');
|
||||
if(!transition){
|
||||
text1.innerHTML = newtext;
|
||||
texto1.innerHTML = newtext;
|
||||
texts1.innerHTML = newtext;
|
||||
return;
|
||||
}
|
||||
var text2 = document.getElementById('lyricsmain2');
|
||||
var texto2 = document.getElementById('lyricsoutline2');
|
||||
var texts2 = document.getElementById('lyricsshadow2');
|
||||
if((text2.style.opacity == '')||(parseFloat(text2.style.opacity) < 0.5))
|
||||
{
|
||||
text2.innerHTML = text1.innerHTML;
|
||||
text2.style.opacity = text1.style.opacity;
|
||||
texto2.innerHTML = text1.innerHTML;
|
||||
texto2.style.opacity = text1.style.opacity;
|
||||
texts2.innerHTML = text1.innerHTML;
|
||||
texts2.style.opacity = text1.style.opacity;
|
||||
}
|
||||
text1.style.opacity = 0;
|
||||
text1.innerHTML = newtext;
|
||||
texto1.style.opacity = 0;
|
||||
texto1.innerHTML = newtext;
|
||||
texts1.style.opacity = 0;
|
||||
texts1.innerHTML = newtext;
|
||||
// For performance reasons, we'll not animate the shadow for now
|
||||
texts2.style.opacity = 0;
|
||||
if(timer != null)
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout('text_fade()', 50);
|
||||
text_fade('lyricsmain', newtext);
|
||||
text_fade('lyricsoutline', newtext);
|
||||
text_fade('lyricsshadow', newtext);
|
||||
if(text_opacity()==1) return;
|
||||
timer = setTimeout(function(){
|
||||
show_text(newtext);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function text_fade(){
|
||||
var text1 = document.getElementById('lyricsmain');
|
||||
var texto1 = document.getElementById('lyricsoutline');
|
||||
var texts1 = document.getElementById('lyricsshadow');
|
||||
var text2 = document.getElementById('lyricsmain2');
|
||||
var texto2 = document.getElementById('lyricsoutline2');
|
||||
var texts2 = document.getElementById('lyricsshadow2');
|
||||
if(parseFloat(text1.style.opacity) < 1){
|
||||
text1.style.opacity = parseFloat(text1.style.opacity) + 0.1;
|
||||
texto1.style.opacity = parseFloat(texto1.style.opacity) + 0.1;
|
||||
// Don't animate shadow (performance)
|
||||
//texts1.style.opacity = parseFloat(texts1.style.opacity) + 0.1;
|
||||
function text_fade(id, newtext){
|
||||
/*
|
||||
Using -webkit-transition: opacity 1s linear; would have been preferred
|
||||
but it isn't currently quick enough when animating multiple layers of
|
||||
large areas of large text. Therefore do it manually as best we can.
|
||||
Hopefully in the future we can revisit and do more interesting
|
||||
transitions using -webkit-transition and -webkit-transform.
|
||||
However we need to ensure interrupted transitions (quickly change 2
|
||||
slides) still looks pretty and is zippy.
|
||||
*/
|
||||
var text = document.getElementById(id);
|
||||
if(text==null) return;
|
||||
if(!transition){
|
||||
text.innerHTML = newtext;
|
||||
return;
|
||||
}
|
||||
if(parseFloat(text2.style.opacity) > 0){
|
||||
text2.style.opacity = parseFloat(text2.style.opacity) - 0.1;
|
||||
texto2.style.opacity = parseFloat(texto2.style.opacity) - 0.1;
|
||||
// Don't animate shadow (performance)
|
||||
//texts2.style.opacity = parseFloat(texts2.style.opacity) - 0.1;
|
||||
}
|
||||
if((parseFloat(text1.style.opacity) < 1) ||
|
||||
(parseFloat(text2.style.opacity) > 0)){
|
||||
t = setTimeout('text_fade()', 50);
|
||||
if(newtext==text.innerHTML){
|
||||
text.style.opacity = parseFloat(text.style.opacity) + 0.3;
|
||||
if(text.style.opacity>0.7)
|
||||
text.style.opacity = 1;
|
||||
} else {
|
||||
text1.style.opacity = 1;
|
||||
texto1.style.opacity = 1;
|
||||
texts1.style.opacity = 1;
|
||||
text2.style.opacity = 0;
|
||||
texto2.style.opacity = 0;
|
||||
texts2.style.opacity = 0;
|
||||
text.style.opacity = parseFloat(text.style.opacity) - 0.3;
|
||||
if(text.style.opacity<=0.1){
|
||||
text.innerHTML = newtext;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function text_opacity(){
|
||||
var text = document.getElementById('lyricsmain');
|
||||
return getComputedStyle(text, '').opacity;
|
||||
}
|
||||
|
||||
function show_text_complete(){
|
||||
return (document.getElementById('lyricsmain').style.opacity == 1);
|
||||
return (text_opacity()==1);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
Using tables, rather than div's to make use of the vertical-align style that
|
||||
doesn't work on div's. This avoids the need to do positioning manually which
|
||||
could get messy when changing verses esp. with transitions
|
||||
|
||||
Would prefer to use a single table and make use of -webkit-text-fill-color
|
||||
-webkit-text-stroke and text-shadow styles, but they have problems working/
|
||||
co-operating in qwebkit. https://bugs.webkit.org/show_bug.cgi?id=43187
|
||||
Therefore one table for text, one for outline and one for shadow.
|
||||
-->
|
||||
<table class="lyricstable lyricscommon">
|
||||
<tr><td id="lyricsmain" class="lyrics"></td></tr>
|
||||
</table>
|
||||
<table class="lyricsoutlinetable lyricscommon">
|
||||
<tr><td id="lyricsoutline" class="lyricsoutline lyrics"></td></tr>
|
||||
</table>
|
||||
<table class="lyricsshadowtable lyricscommon">
|
||||
<tr><td id="lyricsshadow" class="lyricsshadow lyrics"></td></tr>
|
||||
</table>
|
||||
<table class="lyricstable lyricscommon">
|
||||
<tr><td id="lyricsmain2" class="lyrics"></td></tr>
|
||||
</table>
|
||||
<table class="lyricsoutlinetable lyricscommon">
|
||||
<tr><td id="lyricsoutline2" class="lyricsoutline lyrics"></td></tr>
|
||||
</table>
|
||||
<table class="lyricsshadowtable lyricscommon">
|
||||
<tr><td id="lyricsshadow2" class="lyricsshadow lyrics"></td></tr>
|
||||
</table>
|
||||
<div id="alert" style="visibility:hidden;"></div>
|
||||
<img id="image" class="size" src="%s" />
|
||||
<video id="video" class="size"></video>
|
||||
%s
|
||||
<div id="footer" class="footer"></div>
|
||||
<video class="dim" id="video"></video>
|
||||
<div class="dim" id="black"></div>
|
||||
<img class="dim" id="image" src="%s" />
|
||||
<div id="black" class="size"></div>
|
||||
<div id="alert" style="visibility:hidden;"></div>
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
@ -300,7 +260,13 @@ def build_html(item, screen, alert, islive):
|
||||
Current display information
|
||||
`alert`
|
||||
Alert display display information
|
||||
`islive`
|
||||
Item is going live, rather than preview/theme building
|
||||
"""
|
||||
try:
|
||||
webkitvers = float(QtWebKit.qWebKitVersion())
|
||||
except AttributeError:
|
||||
webkitvers = 0
|
||||
width = screen[u'size'].width()
|
||||
height = screen[u'size'].height()
|
||||
theme = item.themedata
|
||||
@ -309,83 +275,144 @@ def build_html(item, screen, alert, islive):
|
||||
else:
|
||||
image = u''
|
||||
html = HTMLSRC % (width, height,
|
||||
build_alert(alert, width),
|
||||
build_footer(item),
|
||||
build_lyrics(item),
|
||||
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_lyrics(item):
|
||||
def build_lyrics_css(item, webkitvers):
|
||||
"""
|
||||
Build the video display div
|
||||
Build the video display css
|
||||
|
||||
`item`
|
||||
Service Item containing theme and location information
|
||||
|
||||
`webkitvers`
|
||||
The version of qtwebkit we're using
|
||||
|
||||
"""
|
||||
style = """
|
||||
.lyricscommon { position: absolute; %s }
|
||||
.lyricstable { z-index:4; %s }
|
||||
.lyricsoutlinetable { z-index:3; %s }
|
||||
.lyricsshadowtable { z-index:2; %s }
|
||||
.lyrics { %s }
|
||||
.lyricsoutline { %s }
|
||||
.lyricsshadow { %s }
|
||||
.lyricstable {
|
||||
z-index:4;
|
||||
position: absolute;
|
||||
display: table;
|
||||
%s
|
||||
}
|
||||
.lyricscell {
|
||||
display:table-cell;
|
||||
word-wrap: break-word;
|
||||
%s
|
||||
}
|
||||
.lyricsmain {
|
||||
%s
|
||||
}
|
||||
.lyricsoutline {
|
||||
%s
|
||||
}
|
||||
.lyricsshadow {
|
||||
%s
|
||||
}
|
||||
"""
|
||||
theme = item.themedata
|
||||
lyricscommon = u''
|
||||
lyricstable = u''
|
||||
outlinetable = u''
|
||||
shadowtable = u''
|
||||
lyrics = u''
|
||||
outline = u'display: none;'
|
||||
shadow = u'display: none;'
|
||||
lyricsmain = u''
|
||||
outline = u''
|
||||
shadow = u''
|
||||
if theme:
|
||||
lyricscommon = u'width: %spx; height: %spx; word-wrap: break-word; ' \
|
||||
u'font-family: %s; font-size: %spt; color: %s; line-height: %d%%;' \
|
||||
% (item.main.width(), item.main.height(), theme.font_main_name,
|
||||
theme.font_main_proportion, theme.font_main_color,
|
||||
100 + int(theme.font_main_line_adjustment))
|
||||
lyricstable = u'left: %spx; top: %spx;' % \
|
||||
(item.main.x(), item.main.y())
|
||||
outlinetable = u'left: %spx; top: %spx;' % \
|
||||
(item.main.x(), item.main.y())
|
||||
shadowtable = u'left: %spx; top: %spx;' % \
|
||||
(item.main.x() + float(theme.display_shadow_size),
|
||||
item.main.y() + float(theme.display_shadow_size))
|
||||
align = u''
|
||||
if theme.display_horizontalAlign == 2:
|
||||
align = u'text-align:center;'
|
||||
align = u'center'
|
||||
elif theme.display_horizontalAlign == 1:
|
||||
align = u'text-align:right;'
|
||||
align = u'right'
|
||||
else:
|
||||
align = u'text-align:left;'
|
||||
align = u'left'
|
||||
if theme.display_verticalAlign == 2:
|
||||
valign = u'vertical-align:bottom;'
|
||||
valign = u'bottom'
|
||||
elif theme.display_verticalAlign == 1:
|
||||
valign = u'vertical-align:middle;'
|
||||
valign = u'middle'
|
||||
else:
|
||||
valign = u'vertical-align:top;'
|
||||
lyrics = u'%s %s' % (align, valign)
|
||||
valign = u'top'
|
||||
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,
|
||||
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
|
||||
# perform workarounds and add extra divs. Only do these when needed.
|
||||
#
|
||||
# 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
|
||||
# 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.
|
||||
# https://bugs.webkit.org/show_bug.cgi?id=19728
|
||||
if theme.display_outline:
|
||||
lyricscommon += u' letter-spacing: 1px;'
|
||||
outline = u'-webkit-text-stroke: %sem %s; ' % \
|
||||
if webkitvers < 534.3:
|
||||
lyrics += u' letter-spacing: 1px;'
|
||||
outline = u' -webkit-text-stroke: %sem %s; ' \
|
||||
'-webkit-text-fill-color: %s; ' % \
|
||||
(float(theme.display_outline_size) / 16,
|
||||
theme.display_outline_color)
|
||||
if theme.display_shadow:
|
||||
theme.display_outline_color, theme.font_main_color)
|
||||
if webkitvers >= 533.3:
|
||||
lyricsmain += outline
|
||||
if theme.display_shadow and webkitvers < 534.3:
|
||||
shadow = u'-webkit-text-stroke: %sem %s; ' \
|
||||
u'-webkit-text-fill-color: %s; ' % \
|
||||
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)
|
||||
else:
|
||||
if theme.display_shadow:
|
||||
shadow = u'color: %s;' % (theme.display_shadow_color)
|
||||
lyrics_html = style % (lyricscommon, lyricstable, outlinetable,
|
||||
shadowtable, lyrics, outline, shadow)
|
||||
return lyrics_html
|
||||
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):
|
||||
lyricsmain += u' text-shadow: %s %spx %spx;' % \
|
||||
(theme.display_shadow_color, theme.display_shadow_size,
|
||||
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
|
||||
|
||||
def build_footer(item):
|
||||
`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
|
||||
# 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.
|
||||
lyrics = u''
|
||||
theme = item.themedata
|
||||
if webkitvers < 534.4 and theme and theme.display_outline:
|
||||
lyrics += u'<div class="lyricstable">' \
|
||||
u'<div id="lyricsshadow" style="opacity:1" ' \
|
||||
u'class="lyricscell lyricsshadow"></div></div>'
|
||||
if webkitvers < 533.3:
|
||||
lyrics += u'<div class="lyricstable">' \
|
||||
u'<div id="lyricsoutline" style="opacity:1" ' \
|
||||
u'class="lyricscell lyricsoutline"></div></div>'
|
||||
lyrics += u'<div class="lyricstable">' \
|
||||
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
|
||||
|
||||
@ -416,7 +443,7 @@ def build_footer(item):
|
||||
theme.font_footer_proportion, theme.font_footer_color, align)
|
||||
return lyrics_html
|
||||
|
||||
def build_alert(alertTab, width):
|
||||
def build_alert_css(alertTab, width):
|
||||
"""
|
||||
Build the display of the footer
|
||||
|
||||
@ -424,7 +451,7 @@ def build_alert(alertTab, width):
|
||||
Details from the Alert tab for fonts etc
|
||||
"""
|
||||
style = """
|
||||
width: %s;
|
||||
width: %spx;
|
||||
vertical-align: %s;
|
||||
font-family: %s;
|
||||
font-size: %spt;
|
||||
|
||||
@ -115,8 +115,11 @@ class MainDisplay(DisplayWidget):
|
||||
self.screen = self.screens.current
|
||||
self.setVisible(False)
|
||||
self.setGeometry(self.screen[u'size'])
|
||||
self.webView = QtWebKit.QWebView(self)
|
||||
self.webView.setGeometry(0, 0, self.screen[u'size'].width(), \
|
||||
self.scene = QtGui.QGraphicsScene()
|
||||
self.setScene(self.scene)
|
||||
self.webView = QtWebKit.QGraphicsWebView()
|
||||
self.scene.addItem(self.webView)
|
||||
self.webView.resize(self.screen[u'size'].width(), \
|
||||
self.screen[u'size'].height())
|
||||
self.page = self.webView.page()
|
||||
self.frame = self.page.mainFrame()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user