diff --git a/openlp/core/lib/__init__.py b/openlp/core/lib/__init__.py
index b76179c2c..721b6ae23 100644
--- a/openlp/core/lib/__init__.py
+++ b/openlp/core/lib/__init__.py
@@ -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'', \
- u'end tag':u'{/r}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/r}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Black', u'start tag':u'{b}', \
- u'start html':u'', \
- u'end tag':u'{/b}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/b}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Blue', u'start tag':u'{bl}', \
- u'start html':u'', \
- u'end tag':u'{/bl}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/bl}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Yellow', u'start tag':u'{y}', \
- u'start html':u'', \
- u'end tag':u'{/y}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/y}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Green', u'start tag':u'{g}', \
- u'start html':u'', \
- u'end tag':u'{/g}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/g}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Pink', u'start tag':u'{pk}', \
- u'start html':u'', \
- u'end tag':u'{/pk}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/pk}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Orange', u'start tag':u'{o}', \
- u'start html':u'', \
- u'end tag':u'{/o}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/o}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Purple', u'start tag':u'{pp}', \
- u'start html':u'', \
- u'end tag':u'{/pp}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/pp}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'White', u'start tag':u'{w}', \
- u'start html':u'', \
- u'end tag':u'{/w}', u'end html':u'', \
+ u'start html':u'', \
+ u'end tag':u'{/w}', u'end html':u'', \
u'protected':False})
html_expands.append({u'desc':u'Superscript', u'start tag':u'{su}', \
u'start html':u'', \
diff --git a/openlp/core/lib/htmlbuilder.py b/openlp/core/lib/htmlbuilder.py
index 332d23844..d03b7f7cc 100644
--- a/openlp/core/lib/htmlbuilder.py
+++ b/openlp/core/lib/htmlbuilder.py
@@ -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);
}
-
-
-
-
-
-
-
-
+
+
+%s
-
-
-
+
+