Fixed shadows and added transitions

This commit is contained in:
Tim Bentley 2010-07-30 06:08:49 +01:00
parent ee7b50a770
commit b191f1391c
3 changed files with 112 additions and 55 deletions

View File

@ -45,38 +45,90 @@ HTMLSRC = u"""
</style> </style>
<script language="javascript"> <script language="javascript">
var t = null; var t = null;
var transition = %s;
function startfade(newtext){ function startfade(newtext){
var text1 = document.getElementById('lyrics'); var text1 = document.getElementById('lyricsmain');
var text2 = document.getElementById('lyrics2'); 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){ if(text2.style.opacity==''||parseFloat(text2.style.opacity) < 0.5){
text2.innerHTML = text1.innerHTML; text2.innerHTML = text1.innerHTML;
text2.style.opacity = text1.style.opacity; 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.style.opacity = 0;
text1.innerHTML = newtext; text1.innerHTML = newtext;
texto1.style.opacity = 0;
texto1.innerHTML = newtext;
texts1.style.opacity = 0;
texts1.innerHTML = newtext;
// temp:
texts2.style.opacity = 0;
// end temp
if(t!=null) if(t!=null)
clearTimeout(t); clearTimeout(t);
t = setTimeout('fade()', 50); t = setTimeout('fade()', 50);
} }
function fade(){ function fade(){
var text1 = document.getElementById('lyrics'); var text1 = document.getElementById('lyricsmain');
var text2 = document.getElementById('lyrics2'); var texto1 = document.getElementById('lyricsoutline');
if(parseFloat(text1.style.opacity) < 1) var texts1 = document.getElementById('lyricsshadow');
text1.style.opacity = parseFloat(text1.style.opacity) + 0.02; var text2 = document.getElementById('lyricsmain2');
if(parseFloat(text2.style.opacity) > 0) var texto2 = document.getElementById('lyricsoutline2');
text2.style.opacity = parseFloat(text2.style.opacity) - 0.02; 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;
//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;
//texts2.style.opacity = parseFloat(texts2.style.opacity) - 0.1;
}
if((parseFloat(text1.style.opacity) < 1)||(parseFloat(text2.style.opacity) > 0)) if((parseFloat(text1.style.opacity) < 1)||(parseFloat(text2.style.opacity) > 0))
t = setTimeout('fade()', 50); t = setTimeout('fade()', 50);
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
}
} }
</script> </script>
</head> </head>
<body> <body>
<table id="lyricsmaintable" class="lyricstable"> <table class="lyricstable lyricscommon">
<tr><td id="lyricsmain" class="lyrics"></td></tr> <tr><td id="lyricsmain" class="lyrics"></td></tr>
</table> </table>
<table id="lyricsoutlinetable" class="lyricstable"> <table class="lyricsoutlinetable lyricscommon">
<tr><td id="lyricsoutline" class="lyrics"></td></tr> <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> </table>
<div id="footer" class="footer"></div> <div id="footer" class="footer"></div>
<div id="alert"></div> <div id="alert"></div>
@ -100,6 +152,7 @@ def build_html(item, screen, alert):
""" """
width = screen[u'size'].width() width = screen[u'size'].width()
height = screen[u'size'].height() height = screen[u'size'].height()
theme = item.themedata
html = HTMLSRC % (build_video(width, height), html = HTMLSRC % (build_video(width, height),
build_image(width, height), build_image(width, height),
build_lyrics(item), build_lyrics(item),
@ -107,6 +160,7 @@ def build_html(item, screen, alert):
build_alert(width, alert), build_alert(width, alert),
build_image(width, height), build_image(width, height),
build_blank(width, height), build_blank(width, height),
"true" if theme and theme.display_slideTransition else "false",
build_image_src(item.bg_frame)) build_image_src(item.bg_frame))
print html print html
return html return html
@ -172,30 +226,36 @@ def build_lyrics(item):
Service Item containing theme and location information Service Item containing theme and location information
""" """
style = """ style = """
.lyricstable { %s } .lyricscommon { position: absolute; %s }
.lyricstable { z-index:4; %s }
.lyricsoutlinetable { z-index:3; %s }
.lyricsshadowtable { z-index:2; %s }
.lyrics { %s } .lyrics { %s }
#lyricsmain { %s } .lyricsoutline { %s }
#lyricsoutline { %s } .lyricsshadow { %s }
#lyricsmaintable { z-index:4; }
#lyricsoutlinetable { z-index:3; }
table {border=0; margin=0; padding=0; } table {border=0; margin=0; padding=0; }
""" """
theme = item.themedata theme = item.themedata
position = u'' lyricscommon = u''
outline = u'display: none;' lyricstable = u''
shadow = u'' outlinetable = u''
fontworks = u'' shadowtable = u''
lyrics = u'' lyrics = u''
lyricsmain = u'' outline = u'display: none;'
font = u'' shadow = u'display: none;'
text = u''
if theme: if theme:
position = u'position: absolute; left: %spx; top: %spx;' \ lyricscommon = u'width: %spx; height: %spx; ' \
' width: %spx; height: %spx; ' % \ u'font-family %s; font-size: %spx; color: %s; line-height: %d%%' % \
(item.main.x(), item.main.y(), item.main.width(), (item.main.width(), item.main.height(),
item.main.height()) theme.font_main_name, theme.font_main_proportion,
font = u' font-family %s; font-size: %spx;' % \ theme.font_main_color, 100 + int(theme.font_main_line_adjustment))
(theme.font_main_name, theme.font_main_proportion) 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'' align = u''
if theme.display_horizontalAlign == 2: if theme.display_horizontalAlign == 2:
align = u'text-align:center;' align = u'text-align:center;'
@ -209,18 +269,21 @@ def build_lyrics(item):
valign = u'vertical-align:middle;' valign = u'vertical-align:middle;'
else: else:
valign = u'vertical-align:top;' valign = u'vertical-align:top;'
line_height = u'line-height: %d%%' % (100 + int(theme.font_main_line_adjustment)) lyrics = u'%s %s' % (align, valign)
lyrics = u'%s %s %s %s' % (font, align, valign, line_height)
if theme.display_outline: if theme.display_outline:
outline = u'-webkit-text-stroke: %sem %s;' % \ outline = u'-webkit-text-stroke: %sem %s; ' % \
(float(theme.display_outline_size) / 16, (float(theme.display_outline_size) / 16,
theme.display_outline_color) theme.display_outline_color)
if theme.display_shadow: if theme.display_shadow:
shadow_size = str(float(theme.display_shadow_size) / 16) shadow = u'-webkit-text-stroke: %sem %s; ' % \
shadow = u'text-shadow: %sem %sem %s;' % \ (float(theme.display_outline_size) / 16,
(shadow_size, shadow_size, theme.display_shadow_color) theme.display_shadow_color)
lyricsmain = u'color:%s; %s' % (theme.font_main_color, shadow) else:
lyrics_html = style % (position, lyrics, lyricsmain, outline) if theme.display_shadow:
shadow = u'color: %s;' % (theme.display_shadow_color)
lyrics_html = style % (lyricscommon, lyricstable, outlinetable,
shadowtable, lyrics, outline, shadow)
print lyrics_html print lyrics_html
return lyrics_html return lyrics_html

View File

@ -155,15 +155,6 @@ class MainDisplay(DisplayWidget):
else: else:
self.primary = True self.primary = True
def next(self):
if self.currslide:
#self.frame.evaluateJavaScript("startfade('" + self.slide2 + "')")
self.frame.findFirstElement('td#lyrics').setInnerXml(self.slide2)
else:
#self.frame.evaluateJavaScript("startfade('" + self.slide1 + "')")
self.frame.findFirstElement('td#lyrics').setInnerXml(self.slide1)
self.currslide = not self.currslide
def text(self, slide): def text(self, slide):
""" """
Add the slide text from slideController Add the slide text from slideController
@ -173,8 +164,8 @@ class MainDisplay(DisplayWidget):
""" """
log.debug(u'text') log.debug(u'text')
print slide print slide
self.frame.findFirstElement('td#lyricsmain').setInnerXml(slide) self.frame.evaluateJavaScript("startfade('" +
self.frame.findFirstElement('td#lyricsoutline').setInnerXml(slide) slide.replace("\\", "\\\\").replace("\'", "\\\'") + "')")
return self.preview() return self.preview()
def alert(self): def alert(self):
@ -223,7 +214,7 @@ class MainDisplay(DisplayWidget):
"document.getElementById('image').style.visibility = 'hidden'") "document.getElementById('image').style.visibility = 'hidden'")
self.frame.evaluateJavaScript("document.getElementById('video').play()") self.frame.evaluateJavaScript("document.getElementById('video').play()")
if noSound: if noSound:
self.frame.evaluateJavaScript("document.getElementById('video').mute()") self.frame.evaluateJavaScript("document.getElementById('video').volume = 0")
def loaded(self): def loaded(self):
""" """
@ -268,6 +259,8 @@ class MainDisplay(DisplayWidget):
Store the images so they can be replaced when required Store the images so they can be replaced when required
""" """
log.debug(u'hideDisplay mode = %d', mode) log.debug(u'hideDisplay mode = %d', mode)
self.frame.evaluateJavaScript(
"document.getElementById('blank').style.visibility = 'visible'")
if mode == HideMode.Screen: if mode == HideMode.Screen:
self.setVisible(False) self.setVisible(False)
elif mode == HideMode.Blank: elif mode == HideMode.Blank:
@ -292,7 +285,8 @@ class MainDisplay(DisplayWidget):
Make the stored images None to release memory. Make the stored images None to release memory.
""" """
log.debug(u'showDisplay') log.debug(u'showDisplay')
self.frame.findFirstElement('img').setAttribute('src', u'') self.frame.evaluateJavaScript(
"document.getElementById('blank').style.visibility = 'hidden'")
if self.isHidden(): if self.isHidden():
self.setVisible(True) self.setVisible(True)
# Trigger actions when display is active again # Trigger actions when display is active again

View File

@ -115,7 +115,7 @@ class MediaMediaItem(MediaManagerItem):
'You must select a media file to replace the background with.')): 'You must select a media file to replace the background with.')):
item = self.listView.currentItem() item = self.listView.currentItem()
filename = unicode(item.data(QtCore.Qt.UserRole).toString()) filename = unicode(item.data(QtCore.Qt.UserRole).toString())
self.parent.liveController.display.video(filename) self.parent.liveController.display.video(filename, True)
self.resetButton.setVisible(True) self.resetButton.setVisible(True)
def generateSlideData(self, service_item, item=None): def generateSlideData(self, service_item, item=None):