Jonathans changes

This commit is contained in:
Jonathan Corwin 2010-08-20 20:06:42 +01:00 committed by Tim Bentley
commit 1e0d68016f
2 changed files with 178 additions and 208 deletions

View File

@ -33,33 +33,60 @@ HTMLSRC = u"""
<style>
*{
margin: 0;
padding:0
padding: 0;
border: 0;
}
body {
background-color: black;
}
.dim {
position: absolute;
left: 0px;
top: 0px;
width: %spx;
height: %spx;
}
#black {
z-index:8;
background-color: black;
display: none;
}
#video {
z-index:2;
}
#alert {
position: absolute;
left: 0px;
top: 0px;
z-index:10;
%s
}
#footer {
position: absolute;
z-index:5;
%s
}
/* lyric css */
%s
%s
%s
%s
%s
%s
%s
</style>
<script language="javascript">
var t = null;
var timer = null;
var transition = %s;
function video(state, path, volume, loop){
function show_video(state, path, volume, loop){
var vid = document.getElementById('video');
if(path!=null)
if(path != null)
vid.src = path;
if(loop!=null){
if(loop != null){
if(loop)
vid.loop = 'loop';
else
vid.loop = '';
}
if(volume != null){
vid.volume = volume;
}
switch(state){
case 'play':
vid.play();
@ -76,22 +103,20 @@ body {
case 'close':
vid.pause();
vid.style.display = 'none';
vid.setAttribute('src', '');
vid.src = '';
break;
if(volume!=null)
vid.volume = volume;
}
}
function setImage(src){
function show_image(src){
var img = document.getElementById('image');
img.src = src;
if(src=='')
if(src == '')
img.style.display = 'none';
else
img.style.display = 'block';
}
function blankState(state){
function show_blank(state){
var black = 'none';
var lyrics = '';
var pause = false;
@ -122,36 +147,39 @@ body {
}
}
function displayAlert(alerttext, shrink){
function show_alert(alerttext, position){
var text = document.getElementById('alert');
text.innerHTML = alerttext;
if(alerttext=='') {
if(alerttext == '') {
text.style.visibility = 'hidden';
return 0;
}
if(shrink){
text.style.top = '0px';
if(position == ''){
position = window.getComputedStyle(text, '').verticalAlign;
}
else
switch(position)
{
switch(window.getComputedStyle(text, '').verticalAlign)
{
case 'top':
text.style.top = '0px';
break;
case 'middle':
text.style.top = ((window.innerHeight - text.clientHeight) / 2) + 'px';
break;
case 'bottom':
text.style.top = (window.innerHeight - text.clientHeight) + 'px';
break;
}
case 'top':
text.style.top = '0px';
break;
case 'middle':
text.style.top = ((window.innerHeight - text.clientHeight) / 2)
+ 'px';
break;
case 'bottom':
text.style.top = (window.innerHeight - text.clientHeight)
+ 'px';
break;
}
text.style.visibility = 'visible';
return text.clientHeight;
}
function startfade(newtext){
function show_footer(text){
document.getElementById('footer').innerHTML(text);
}
function show_text(newtext){
var text1 = document.getElementById('lyricsmain');
var texto1 = document.getElementById('lyricsoutline');
var texts1 = document.getElementById('lyricsshadow');
@ -164,7 +192,8 @@ body {
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){
if((text2.style.opacity == '')||(parseFloat(text2.style.opacity) < 0.5))
{
text2.innerHTML = text1.innerHTML;
text2.style.opacity = text1.style.opacity;
texto2.innerHTML = text1.innerHTML;
@ -178,15 +207,14 @@ body {
texto1.innerHTML = newtext;
texts1.style.opacity = 0;
texts1.innerHTML = newtext;
// temp:
// For performance reasons, we'll not animate the shadow for now
texts2.style.opacity = 0;
// end temp
if(t!=null)
clearTimeout(t);
t = setTimeout('fade()', 50);
if(timer != null)
clearTimeout(timer);
timer = setTimeout('text_fade()', 50);
}
function fade(){
function text_fade(){
var text1 = document.getElementById('lyricsmain');
var texto1 = document.getElementById('lyricsoutline');
var texts1 = document.getElementById('lyricsshadow');
@ -196,16 +224,19 @@ body {
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;
}
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('fade()', 50);
else{
if((parseFloat(text1.style.opacity) < 1) ||
(parseFloat(text2.style.opacity) > 0)){
t = setTimeout('text_fade()', 50);
} else {
text1.style.opacity = 1;
texto1.style.opacity = 1;
texts1.style.opacity = 1;
@ -215,12 +246,22 @@ body {
}
}
function fadeFinished(){
return (document.getElementById('lyricsmain').style.opacity==1);
function show_text_complete(){
return (document.getElementById('lyricsmain').style.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>
@ -239,18 +280,11 @@ body {
<table class="lyricsshadowtable lyricscommon">
<tr><td id="lyricsshadow2" class="lyricsshadow lyrics"></td></tr>
</table>
<!--
<table class="alerttable">
<tr><td class="alertcell">
<div class="alert" id="alertmain"></div>
</td></tr>
</table>
-->
<div id="alert" style="visibility:hidden;"></div>
<div id="footer" class="footer"></div>
<video id="video"></video>
<div id="black"></div>
%s
<video class="dim" id="video"></video>
<div class="dim" id="black"></div>
<img class="dim" id="image" src="%s" />
</body>
</html>
"""
@ -269,79 +303,17 @@ def build_html(item, screen, alert):
width = screen[u'size'].width()
height = screen[u'size'].height()
theme = item.themedata
html = HTMLSRC % (build_video(width, height),
build_image(width, height),
build_lyrics(item),
build_footer(item),
build_alert(width, height, alert),
build_image(width, height),
build_black(width, height),
"true" if theme and
theme.display_slideTransition else "false",
build_image_src(item.bg_frame))
return html
def build_video(width, height):
"""
Build the video display div
`width`
Screen width
`height`
Screen height
"""
video = """
#video { position: absolute; left: 0px; top: 0px;
width: %spx; height: %spx; z-index:2; }
"""
return video % (width, height)
def build_black(width, height):
"""
Build the black display div
`width`
Screen width
`height`
Screen height
"""
black = """
#black { position: absolute; left: 0px; top: 0px;
width: %spx; height: %spx; z-index:8;
background-color: black; display: none;
}
"""
return black % (width, height)
def build_image(width, height):
"""
Build the image display div
`width`
Screen width
`height`
Screen height
"""
image = """
#image { position: absolute; left: 0px; top: 0px;
width: %spx; height: %spx; z-index:1;
}
"""
return image % (width, height)
def build_image_src(image):
"""
Build display for the backgroung image
`image`
Image to be displayed
"""
if image:
return '<img id="image" src="data:image/png;base64,%s" />' % \
image_to_byte(image)
if item.bg_frame:
image = u'data:image/png;base64,%s' % image_to_byte(item.bg_frame)
else:
return '<img id="image" />'
image = u''
html = HTMLSRC % (width, height,
build_alert(alert, width),
build_footer(item),
build_lyrics(item),
u'true' if theme and theme.display_slideTransition else u'false',
image)
return html
def build_lyrics(item):
"""
@ -358,7 +330,6 @@ def build_lyrics(item):
.lyrics { %s }
.lyricsoutline { %s }
.lyricsshadow { %s }
table {border=0; margin=0; padding=0; }
"""
theme = item.themedata
lyricscommon = u''
@ -408,7 +379,6 @@ def build_lyrics(item):
shadow = u'color: %s;' % (theme.display_shadow_color)
lyrics_html = style % (lyricscommon, lyricstable, outlinetable,
shadowtable, lyrics, outline, shadow)
print lyrics_html
return lyrics_html
def build_footer(item):
@ -418,64 +388,54 @@ def build_footer(item):
`item`
Service Item to be processed.
"""
lyrics = """
#footer {position: absolute; %s z-index:5; %s; %s }
style = """
left: %spx;
top: %spx;
width: %spx;
height: %spx;
font-family: %s;
font-size: %spx;
color: %s;
align: %s;
"""
theme = item.themedata
lyrics_html = u''
position = u''
font = u''
text = u''
if theme:
position = u' left: %spx; top: %spx; width: %spx; height: %spx; ' % \
(item.footer.x(), item.footer.y(), item.footer.width(),
item.footer.height())
font = u' font-family %s; font-size: %spx;' % \
(theme.font_footer_name, theme.font_footer_proportion)
align = u''
if theme.display_horizontalAlign == 2:
align = u'align:center;'
elif theme.display_horizontalAlign == 1:
align = u'align:right;'
text = u'color:%s; %s ' % (theme.font_footer_color, align)
lyrics_html = lyrics % (position, font, text)
if not theme:
return u''
if theme.display_horizontalAlign == 2:
align = u'center'
elif theme.display_horizontalAlign == 1:
align = u'right'
else:
align = u'left'
lyrics_html = style % (item.footer.x(), item.footer.y(),
item.footer.width(), item.footer.height(), theme.font_footer_name,
theme.font_footer_proportion, theme.font_footer_color, align)
return lyrics_html
def build_alert(width, height, alertTab):
def build_alert(alertTab, width):
"""
Build the display of the footer
`width`
Screen Width
`height`
Screen height
`alertTab`
Details from the Alert tab for fonts etc
"""
style = """
.alerttable { position: absolute; z-index:10; left 0px; top 0px; %s }
.alertcell { %s }
.alert { %s }
"""
style2 = """
#alert {position: absolute; z-index:10; left 0px; top 0px; width: %spx; %s %s}
width: %s;
vertical-align: %s;
font-family %s;
font-size: %spx;
color: %s;
background-color: %s;
"""
alerttable = u''
alertcell = u''
alert = u''
if alertTab:
if alertTab.location == 2:
alertcell = u'vertical-align:bottom;'
elif alertTab.location == 1:
alertcell = u'vertical-align:middle;'
else:
alertcell = u'vertical-align:top;'
alerttable = u'width: %spx; height: %spx; ' % (width, height)
alert = u'font-family %s; font-size: %spx; color: %s; ' \
u'background-color: %s' % \
(alertTab.font_face, alertTab.font_size, alertTab.font_color,
alertTab.bg_color)
#alert_html = style % (alerttable, alertcell, alert)
alert_html = style2 % (width, alertcell, alert)
print alert_html
return alert_html
if not alertTab:
return u''
align = u''
if alertTab.location == 2:
align = u'bottom'
elif alertTab.location == 1:
align = u'middle'
else:
align = u'top'
alert = style % (width, align, alertTab.font_face, alertTab.font_size,
alertTab.font_color, alertTab.bg_color)
return alert

View File

@ -113,7 +113,7 @@ class MainDisplay(DisplayWidget):
self.page = self.webView.page()
self.frame = self.page.mainFrame()
QtCore.QObject.connect(self.webView,
QtCore.SIGNAL(u'loadFinished(bool)'), self.loaded)
QtCore.SIGNAL(u'loadFinished(bool)'), self.isLoaded)
self.frame.setScrollBarPolicy(QtCore.Qt.Vertical,
QtCore.Qt.ScrollBarAlwaysOff)
self.frame.setScrollBarPolicy(QtCore.Qt.Horizontal,
@ -162,11 +162,11 @@ class MainDisplay(DisplayWidget):
The slide text to be displayed
"""
log.debug(u'text')
self.frame.evaluateJavaScript("startfade('" +
slide.replace("\\", "\\\\").replace("\'", "\\\'") + "')")
self.frame.evaluateJavaScript(u'show_text("%s")' % \
slide.replace(u'\\', u'\\\\').replace(u'\"', u'\\\"'))
return self.preview()
def alert(self, text, shrink=False):
def alert(self, text):
"""
Add the alert text
@ -174,15 +174,22 @@ class MainDisplay(DisplayWidget):
The slide text to be displayed
"""
log.debug(u'alert')
js = "displayAlert('" + \
text.replace("\\", "\\\\").replace("\'", "\\\'") + "', %s)" % \
('true' if shrink else 'false')
if self.height() != self.screen[u'size'].height() \
or not self.isVisible():
shrink = True
else:
shrink = False
js = u'show_alert("%s", "%s")' % (
text.replace(u'\\', u'\\\\').replace(u'\"', u'\\\"'),
u'top' if shrink else u'')
height = self.frame.evaluateJavaScript(js)
if shrink:
if text:
self.resize(self.width(), int(height.toString()))
self.setVisible(True)
else:
self.setGeometry(self.screen[u'size'])
self.setVisible(False)
def image(self, image):
"""
@ -203,10 +210,10 @@ class MainDisplay(DisplayWidget):
Display an image, as is.
"""
if image:
js = "setImage('" + \
u'data:image/png;base64,%s' % image_to_byte(image) + "');"
js = u'show_image("data:image/png;base64,%s");' % \
image_to_byte(image)
else:
js = "setImage('');"
js = u'show_image("");'
self.frame.evaluateJavaScript(js)
def resetImage(self):
@ -222,35 +229,35 @@ class MainDisplay(DisplayWidget):
Used after Video plugin has changed the background
"""
log.debug(u'resetVideo')
self.frame.evaluateJavaScript('video("close");')
self.frame.evaluateJavaScript(u'show_video("close");')
def videoPlay(self):
"""
Responds to the request to play a loaded video
"""
log.debug(u'videoPlay')
self.frame.evaluateJavaScript('video("play");')
self.frame.evaluateJavaScript(u'show_video("play");')
def videoPause(self):
"""
Responds to the request to pause a loaded video
"""
log.debug(u'videoPause')
self.frame.evaluateJavaScript('video("pause");')
self.frame.evaluateJavaScript(u'show_video("pause");')
def videoStop(self):
"""
Responds to the request to stop a loaded video
"""
log.debug(u'videoStop')
self.frame.evaluateJavaScript('video("stop");')
self.frame.evaluateJavaScript(u'show_video("stop");')
def videoVolume(self, volume):
"""
Changes the volume of a running video
"""
log.debug(u'videoVolume %d' % volume)
self.frame.evaluateJavaScript('video(null,null,%s);' %
self.frame.evaluateJavaScript(u'show_video(null, null, %s);' %
str(float(volume)/float(10)))
def video(self, videoPath, volume):
@ -259,13 +266,12 @@ class MainDisplay(DisplayWidget):
"""
log.debug(u'video')
self.loaded = True
js = 'video("play","%s",%s,true);' % \
(videoPath.replace("\\", "\\\\"), str(float(volume)/float(10)))
js = u'show_video("play", "%s", %s, true);' % \
(videoPath.replace(u'\\', u'\\\\'), str(float(volume)/float(10)))
self.frame.evaluateJavaScript(js)
print js
return self.preview()
def loaded(self):
def isLoaded(self):
"""
Called by webView event to show display is fully loaded
"""
@ -280,7 +286,7 @@ class MainDisplay(DisplayWidget):
# Wait for the fade to finish before geting the preview.
# Important otherwise preview will have incorrect text if at all !
if self.serviceItem.themedata.display_slideTransition:
while self.frame.evaluateJavaScript("fadeFinished()").toString() == u'false':
while self.frame.evaluateJavaScript(u'show_text_complete()').toString() == u'false':
Receiver.send_message(u'openlp_process_events')
# Wait for the webview to update before geting the preview.
# Important otherwise first preview will miss the background !
@ -295,7 +301,7 @@ class MainDisplay(DisplayWidget):
painter.end()
# save preview for debugging
if log.isEnabledFor(logging.DEBUG):
preview.save("temp.png", "png")
preview.save(u'temp.png', u'png')
return preview
def buildHtml(self, serviceItem):
@ -310,7 +316,13 @@ class MainDisplay(DisplayWidget):
html = build_html(self.serviceItem, self.screen, self.parent.alertTab)
self.webView.setHtml(html)
if serviceItem.footer and serviceItem.foot_text:
self.frame.findFirstElement('div#footer').setInnerXml(serviceItem.foot_text)
self.footer(serviceItem.foot_text)
def footer(self, text):
log.debug(u'footer')
js = "show_footer('" + \
text.replace("\\", "\\\\").replace("\'", "\\\'") + "')"
self.frame.evaluateJavaScript(js)
def hideDisplay(self, mode=HideMode.Screen):
"""
@ -318,15 +330,13 @@ class MainDisplay(DisplayWidget):
Store the images so they can be replaced when required
"""
log.debug(u'hideDisplay mode = %d', mode)
self.frame.evaluateJavaScript(
"document.getElementById('blank').style.visibility = 'visible'")
if mode == HideMode.Screen:
self.frame.evaluateJavaScript('blankState("desktop");')
self.frame.evaluateJavaScript(u'show_blank("desktop");')
self.setVisible(False)
elif mode == HideMode.Blank or self.initialFrame:
self.frame.evaluateJavaScript('blankState("black");')
self.frame.evaluateJavaScript(u'show_blank("black");')
else:
self.frame.evaluateJavaScript('blankState("theme");')
self.frame.evaluateJavaScript(u'show_blank("theme");')
if mode != HideMode.Screen and self.isHidden():
self.setVisible(True)
@ -337,7 +347,7 @@ class MainDisplay(DisplayWidget):
Make the stored images None to release memory.
"""
log.debug(u'showDisplay')
self.frame.evaluateJavaScript('blankState("show");')
self.frame.evaluateJavaScript('show_blank("show");')
if self.isHidden():
self.setVisible(True)
# Trigger actions when display is active again