"""
Module for HTML slideshows.
It uses the templating library 'Templet'.
The slideshow base class HTMLSlideShow does not display anything, but can
be used to derive custom slideshows like in BiMDP.
The JavaScript slideshow code in this module was originally inspired by a
slideshow script found at
http://javascript.internet.com/miscellaneous/image-slideshow.html
(which in turn seems to be based on something from http://www.ricocheting.com)
"""
import random
import tempfile
import os
import webbrowser
import warnings
import templet
# basic default style for MDP generated HTML files
BASIC_STYLE = '''
html, body {
font-family: sans-serif;
text-align: center;
}
h1, h2, h3, h4 {
color: #003399;
}
par.explanation {
color: #003399;
font-size: small;
}
table.flow {
margin-left: auto;
margin-right: auto;
}
'''
# load CSS from style file
_css_filename = os.path.join(os.path.split(__file__)[0], "slideshow.css")
_css_file = open(_css_filename, 'r')
SLIDESHOW_STYLE = _css_file.read()
_css_file.close()
class HTMLSlideShow(templet.Template):
"""Abstract slideshow base class.
It does not display anything, but can be adapted by overriding
some of the templating attributes. See ImageHTMLSlideShow for an example.
"""
def __init__(self, title=None, delay=100, delay_delta=20,
loop=True, slideshow_id=None, shortcuts=True, **kwargs):
"""Return the complete HTML code for the slideshow.
title -- Optional slideshow title (for defualt None not title is shown).
delay - Delay between slides in ms (default 100).
delay_delta - Step size for increasing or decreasing the delay.
loop -- If True continue with first slide when the last slide is
reached during the automatic slideshow (default is False).
slideshow_id -- String with the id used for the JS closure, and this
is also the id of the div with the slideshow (so it can be used
by CSS) and it is used as a prefix for the HTML elements.
If the value is None (default) then a random id is used.
shortcuts -- Bind keyboard shortcuts to this slideshow (default is
True). Note that keyboard shortcuts only work for a single
slideshow per page.
"""
# translate boolean variable into JS format
if loop:
loop = "true"
else:
loop = "false"
if slideshow_id is None:
slideshow_id = self._get_random_id()
self.slideshow_id = slideshow_id
kwargs.update(vars())
del kwargs["self"]
super(HTMLSlideShow, self).__init__(**kwargs)
def _get_random_id(self):
"""Factory method for random slideshow id."""
return "slideshow%d" % random.randint(10000, 99999)
template = r'''
<script language="JavaScript">
<!-- Begin
// use closure to create object, the slideshow_id is the only global variable
var $slideshow_id = function () {
var that = {};
var current_slide = 0; // current slide index
var show_delay = $delay; // delay in milliseconds
var loop_slideshow = $loop; // loop in auto mode
// shortcuts to form elements, initialized in onLoad
var slideform;
var slideselect;
$<js_controls_template>
$<js_loadslide_template>
$<js_update_template>
$<js_onload_template>
that.onSelectorChange = function () {
current_slide = slideselect.selectedIndex;
that.updateSlide();
}
that.next = function () {
if (slideselect[current_slide+1]) {
current_slide += 1;
that.updateSlide();
}
else {
that.first();
}
}
that.previous = function () {
if (current_slide-1 >= 0) {
current_slide -= 1;
that.updateSlide();
}
else {
that.last();
}
}
that.first = function () {
current_slide = 0;
that.updateSlide();
}
that.last = function () {
current_slide = slideselect.length-1;
that.updateSlide();
}
// start or stop the slideshow
that.startstop = function (text) {
if (text === "Start") {
slideform.startbutton.value = "Stop";
if (!loop_slideshow &&
(current_slide === slideselect.length-1)) {
// restart slideshow
current_slide = -1; // is directly increased by showAuto
}
that.showAuto();
} else {
slideform.startbutton.value = "Start";
}
}
// continuously show the slideshow
that.showAuto = function () {
if (slideform.startbutton.value == "Stop") {
if (current_slide == slideselect.length-1) {
if (loop_slideshow) {
current_slide = 0;
that.updateSlide();
} else {
slideform.startbutton.value = "Start";
}
} else {
current_slide = current_slide+1;
that.updateSlide();
}
window.setTimeout("$slideshow_id.showAuto()", show_delay);
}
}
// end of closure, return created object
return that;
}();
${{
if shortcuts:
self.js_keyboard_shortcuts_template(vars())
}}
// End -->
</script>
<div class="slideshow" id="$slideshow_id">
$<html_top_template>
<form name=${slideshow_id}_slideform>
<table class="slideshow">
${{
if title:
self.write('<tr><td><b> %s </b></td></tr>' % title)
}}
$<html_box_template>
<tr><td>
<select name="${slideshow_id}_slideselect"
onChange="$slideshow_id.onSelectorChange();">
<option value="${filenames[0]}" selected>${filenames[0]}
${{
for filename in filenames[1:]:
self.write('<option value="%s">%s\n' % (filename, filename))
}}
</select>
</td></tr>
<tr><td>
$<html_buttons_template>
</td></tr>
$<html_controls_template>
</table>
</form>
$<html_bottom_template>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
$slideshow_id.onLoad();
// End -->
</script>
'''
js_controls_template = r'''
// step size for in- or decreasing the delay
var delay_delta = $delay_delta;
that.slower = function () {
show_delay += delay_delta;
slideform.${slideshow_id}_delaytext.value = show_delay.toString();
}
that.faster = function (text) {
show_delay -= delay_delta;
if (show_delay < 0) {
show_delay = 0;
}
slideform.${slideshow_id}_delaytext.value = show_delay.toString();
}
that.changeDelay = function () {
var new_delay = parseInt(slideform.${slideshow_id}_delaytext.value, 10);
if (new_delay < 0) {
new_delay = 0;
}
show_delay = new_delay;
slideform.${slideshow_id}_delaytext.value = new_delay.toString();
}
'''
js_update_template = r'''
that.updateSlide = function () {
slideselect.selectedIndex = current_slide;
that.loadSlide();
}
'''
# overwrite this to implement the actual slide change
js_loadslide_template = r'''
that.loadSlide = function () {
}
'''
js_onload_template = r'''
that.onLoad = function () {
slideform = document.${slideshow_id}_slideform;
slideselect = slideform.${slideshow_id}_slideselect;
current_slide = slideselect.selectedIndex;
that.updateSlide();
slideform.${slideshow_id}_delaytext.value = show_delay.toString();
}
'''
# define keyboard shortcuts,
# note that these are also mentionend in the button hover-text
js_keyboard_shortcuts_template = r'''
document.onkeydown = function(e) {
if (!e.ctrlKey) { // control key must be pressed
return;
}
else if (e.which == 37) { // left key
document.getElementById("${slideshow_id}_prevButton").click();
}
else if(e.which == 39) { // right key
document.getElementById("${slideshow_id}_nextButton").click();
}
else if(e.which == 38) { // up key
document.getElementById("${slideshow_id}_firstButton").click();
}
else if(e.which == 40) { // down key
document.getElementById("${slideshow_id}_lastButton").click();
}
else if(e.which == 45) { // insert key
document.getElementById("${slideshow_id}_startButton").click();
}
}
'''
html_buttons_template = r'''
<input type=button onClick="$slideshow_id.first();"
value="|<<" title="First" id="${slideshow_id}_firstButton">
<input type=button onClick="$slideshow_id.previous();"
value="<" title="Previous (Ctrl+Left)" id="${slideshow_id}_prevButton">
<input type=button name="startbutton"
onClick="$slideshow_id.startstop(this.value);"
value="Start" title="Autoplay (Ctrl+Insert)"
id="${slideshow_id}_startButton">
<input type=button onClick="$slideshow_id.next();" value=">"
title="Next (Ctrl+Right)"
id="${slideshow_id}_nextButton">
<input type=button onClick="$slideshow_id.last();" value=">>|" title="Last"
id="${slideshow_id}_lastButton">
'''
html_controls_template = r'''
${{
if delay is not None:
self.write('<tr><td>\n')
self.html_delay_template(vars())
self.write('</td></tr>\n')
}}
'''
html_delay_template = r'''
delay: <input type="text" name="${slideshow_id}_delaytext"
onChange="$slideshow_id.changeDelay();" value="0" size="4"> ms
<input type=button onClick="$slideshow_id.faster();" value="-" title="Faster">
<input type=button onClick="$slideshow_id.slower();" value="+" title="Slower">
'''
html_top_template = r'''
'''
html_box_template = r'''
'''
html_bottom_template = r'''
'''
class SectionHTMLSlideShow(HTMLSlideShow):
"""Astract slideshow with additional support for section markers."""
def __init__(self, section_ids, slideshow_id=None, **kwargs):
"""Return the complete HTML code for the slideshow.
section_ids -- List with the section id for each slide index. The id
can be a string or a number.
For additional keyword arguments see the super class.
"""
# we need the slideshow_id for the section names
if slideshow_id is None:
slideshow_id = self._get_random_id()
kwargs.update(vars())
# check if there is more than one section slideshow_id,
# otherwise some controls must be disabled to prevent infinite loop
only_one_section = "false"
first_section_id = section_ids[0]
for section_id in section_ids:
if section_id != first_section_id:
break
else:
only_one_section = "true"
kwargs["only_one_section"] = only_one_section
# translate section_id_list into JavaScript list
section_ids = [str(section_id) for section_id in section_ids]
js_section_ids = "".join([' "%s_section_id_%s",\n' %
(slideshow_id, section_id)
for section_id in section_ids])
js_section_ids = "\n" + js_section_ids[:-2]
kwargs["js_section_ids"] = js_section_ids
del kwargs["self"]
super(SectionHTMLSlideShow, self).__init__(**kwargs)
js_update_template = r'''
// maps slide index to section slideshow_id
var section_ids = new Array($js_section_ids);
// currently highlighted section slideshow_id
var current_section_id = section_ids[0];
that.updateSlide = function () {
document.getElementById(current_section_id).className =
"inactive_section";
current_section_id = section_ids[current_slide]
document.getElementById(current_section_id).className =
"active_section";
slideselect.selectedIndex = current_slide;
that.loadSlide();
}
// use this function when a section is selected,
// e.g. onClick="setSlide(42)"
that.setSlide = function (index) {
current_slide = index;
that.updateSlide();
}
that.previousSection = function () {
if ($only_one_section) {
return;
}
while (current_section_id === section_ids[current_slide]) {
if (current_slide > 0) {
current_slide -= 1;
} else {
current_slide = slideselect.length-1;
}
}
var new_section_id = section_ids[current_slide];
// now go to start of this section
while (new_section_id === section_ids[current_slide]) {
current_slide -= 1;
if (current_slide < 0) {
break;
}
}
current_slide += 1;
that.updateSlide();
}
that.nextSection = function () {
if ($only_one_section) {
return;
}
while (current_section_id === section_ids[current_slide]) {
if (current_slide+1 < slideselect.length) {
current_slide += 1;
} else {
current_slide = 0;
}
}
that.updateSlide();
}
$<js_loadslide_template>
'''
# define keyboard shortcuts,
# note that these are also mentionend in the button hover-text
js_keyboard_shortcuts_template = r'''
document.onkeydown = function(e) {
if (!e.ctrlKey) { // control key must be pressed
return;
}
else if (e.which === 37) { // left key
document.getElementById("${slideshow_id}_prevButton").click();
}
else if(e.which === 39) { // right key
document.getElementById("${slideshow_id}_nextButton").click();
}
else if(e.which === 38) { // up key
document.getElementById("${slideshow_id}_prevSectionButton").click();
}
else if(e.which === 40) { // down key
document.getElementById("${slideshow_id}_nextSectionButton").click();
}
else if(e.which === 45) { // insert key
document.getElementById("${slideshow_id}_startButton").click();
}
}
'''
html_buttons_template = r'''
<input type=button onClick="$slideshow_id.first();"
value="|<<" title="First" id="${slideshow_id}_firstButton">
<input type=button onClick="$slideshow_id.previousSection();" value="|<"
title="Previous Section (Ctrl+Up)" id="${slideshow_id}_prevSectionButton">
<input type=button onClick="$slideshow_id.previous();"
value="<" title="Previous (Ctrl+Left)" id="${slideshow_id}_prevButton">
<input type=button name="startbutton"
onClick="$slideshow_id.startstop(this.value);"
value="Start" title="Autoplay (Ctrl+Insert)"
id="${slideshow_id}_startButton">
<input type=button onClick="$slideshow_id.next();" value=">"
title="Next (Ctrl+Right)"
id="${slideshow_id}_nextButton">
<input type=button onClick="$slideshow_id.nextSection();" value=">|"
title="Next Section (Ctrl+Down)" id="${slideshow_id}_nextSectionButton">
<input type=button onClick="$slideshow_id.last();" value=">>|" title="Last"
id="${slideshow_id}_lastButton">
'''
html_controls_template = r'''
${{super(SectionHTMLSlideShow, self).html_controls_template(vars())}}
<tr><td>
<div id="${slideshow_id}_sections_panel"
style="margin-left:auto; margin-right: auto;">
${{
last_section_id = None
link = ''
for index, section_id in enumerate(section_ids):
if section_id != last_section_id:
if index > 0:
self.write(link + ' | ')
last_section_id = section_id
link = ('<span class="inactive_section" ' +
'id="%s_section_id_%s" ' % (slideshow_id, section_id) +
'onClick="%s.setSlide(%d);">%s</span>' %
(slideshow_id, index, section_id))
self.write(link + '\n')
}}
</div>
</td></tr>
'''
# Use nearest neighbour resampling in Firefox 3.6+ and IE.
# TODO: Implement electric shock for people who actually use IE.
# Webkit (Chrome, Safari) does not support this yet,
# see http://code.google.com/p/chromium/issues/detail?id=1502
IMAGE_SLIDESHOW_STYLE = SLIDESHOW_STYLE + '''
img.slideshow {
image-rendering: -moz-crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
'''
class ImageHTMLSlideShow(HTMLSlideShow):
"""Slideshow for images.
This also serves as an example for implementing a slideshow based on
HTMLSlideShow.
"""
def __init__(self, filenames, image_size,
magnification=1, mag_control=True, **kwargs):
"""Return the complete HTML code for a slideshow of the given images.
filenames -- sequence of strings, containing the path for each image
image_size -- Tuple (x,y) with the original image size, or enter
a different size to force scaling.
magnification -- Magnification factor for images (default 1). This
factor is applied on top of the provided image size.
mag_control -- Set to True (default) to display a magnification control
element.
For additional keyword arguments see the super class.
"""
if len(filenames) == 0:
raise Exception("Empty list was given.")
kwargs.update(vars())
# translate image size to width and heigh to be used in the templates
del kwargs["image_size"]
kwargs["width"] = image_size[0]
kwargs["height"] = image_size[1]
del kwargs["self"]
super(ImageHTMLSlideShow, self).__init__(**kwargs)
js_controls_template = r'''
${{super(ImageHTMLSlideShow, self).js_controls_template(vars())}}
var magnification = $magnification; // image magnification
var original_width = $width; // original image width
var original_height = $height; // original image height
that.smaller = function () {
magnification = magnification / 2;
slideform.${slideshow_id}_magtext.value = magnification.toString();
that.resizeImage();
}
that.larger = function (text) {
magnification = magnification * 2;
slideform.${slideshow_id}_magtext.value = magnification.toString();
that.resizeImage();
}
that.changeMag = function () {
magnification = parseFloat(slideform.${slideshow_id}_magtext.value);
that.resizeImage();
}
$<js_controls_resize_template>
'''
js_controls_resize_template = r'''
that.resizeImage = function () {
document.images.${slideshow_id}_image_display.width =
parseInt(magnification * original_width, 10);
document.images.${slideshow_id}_image_display.height =
parseInt(magnification * original_height, 10);
}
'''
js_loadslide_template = r'''
that.loadSlide = function () {
document.images.${slideshow_id}_image_display.src =
slideselect[current_slide].value;
}
'''
js_onload_template = r'''
that.onLoad = function () {
slideform = document.${slideshow_id}_slideform;
slideselect = slideform.${slideshow_id}_slideselect;
current_slide = slideselect.selectedIndex;
that.updateSlide();
${{
if delay is not None:
self.write('slideform.%s_delaytext.value = ' % slideshow_id +
'show_delay.toString();\n')
}}
${{
if mag_control:
self.write('slideform.%s_magtext.value = ' % slideshow_id +
'magnification.toString();\n')
}}
that.resizeImage();
}
'''
html_box_template = r'''
<tr>
<td style="padding: 20 20 20 20">
<img class="slideshow" src="" name="${slideshow_id}_image_display"
width="$width" height="$height">
</td>
</tr>
'''
html_controls_template = r'''
${{
if mag_control or (delay is not None):
self.write('<tr><td align=center>\n')
if mag_control:
self.html_mag_template(vars())
if delay is not None:
self.write('<br>\n')
if delay is not None:
self.html_delay_template(vars())
self.write('</td></tr>\n')
}}
'''
html_mag_template = r'''
magnification: <input type="text" name="${slideshow_id}_magtext"
onChange="$slideshow_id.changeMag();" value="0" size="2">
<input type=button onClick="$slideshow_id.smaller();" value="-" title="Smaller">
<input type=button onClick="$slideshow_id.larger();" value="+" title="Larger">
'''
class SectionImageHTMLSlideShow(SectionHTMLSlideShow, ImageHTMLSlideShow):
"""Image slideshow with section markers."""
def __init__(self, filenames, section_ids, image_size, **kwargs):
"""Return the HTML code for a sectioned slideshow of the given images.
For keyword arguments see the super classes.
"""
if len(section_ids) != len(filenames):
err = ("The number of section slideshow_id entries does not match "
"the number of slides / filenames.")
raise Exception(err)
kwargs.update(vars())
del kwargs["self"]
super(SectionImageHTMLSlideShow, self).__init__(**kwargs)
js_controls_resize_template = r'''
that.resizeImage = function () {
document.images.${slideshow_id}_image_display.width =
parseInt(magnification * original_width, 10);
document.images.${slideshow_id}_image_display.height =
parseInt(magnification * original_height, 10);
// make sure that section ids are nicely line wrapped
var section_panel_width = 250;
if (magnification * original_height > section_panel_width) {
section_panel_width = magnification * original_width;
}
document.getElementById("${slideshow_id}_sections_panel").style.width =
parseInt(section_panel_width, 10) + "px";
}
'''
### helper functions ###
# TODO: extract image size automatically,
# but this introduces an optional dependency on PIL
def image_slideshow(filenames, image_size, title=None, section_ids=None,
delay=100, delay_delta=20, loop=True, slideshow_id=None,
magnification=1, mag_control=True, shortcuts=True):
"""Return a string with the JS and HTML code for an image slideshow.
Note that the CSS code for the slideshow is not included, so you should
add SLIDESHOW_STYLE or a custom style to your CSS code.
filenames -- Sequence of the image filenames.
image_size -- Tuple (x,y) with the original image size, or enter
a different size to force scaling.
title -- Optional slideshow title (for default None not title is shown).
section_ids -- List with the section id for each slide index. The id
can be a string or a number. Default value None disables the
section feature.
For additional keyword arguments see the ImageHTMLSlideShow class.
"""
if section_ids:
slideshow = SectionImageHTMLSlideShow(**vars())
else:
slideshow = ImageHTMLSlideShow(**vars())
return str(slideshow)
def show_image_slideshow(filenames, image_size, filename=None, title=None,
section_ids=None, delay=100, delay_delta=20,
loop=True, slideshow_id=None,
magnification=1, mag_control=True, open_browser=True):
"""Write the slideshow into a HTML file, open it in the browser and
return the file name.
filenames -- Sequence of the image filenames.
image_size -- Tuple (x,y) with the original image size, or enter
a different size to force scaling.
filename -- Filename for the HTML file to be created. If None
a temporary file is created.
title -- Optional slideshow title (for default None not title is shown).
section_ids -- List with the section id for each slide index. The id
can be a string or a number. Default value None disables the
section feature.
open_browser -- If True (default value) then the slideshow file is
automatically opened in a webbrowser. One can also use string value
with the browser name (for webbrowser.get) to request a specific
browser.
For additional keyword arguments see the ImageHTMLSlideShow class.
"""
if filename is None:
fd, filename = tempfile.mkstemp(suffix=".html", prefix="MDP_")
html_file = os.fdopen(fd, 'w')
else:
html_file = open(filename, 'w')
html_file.write('<html>\n<head>\n<title>%s</title>\n' % title)
html_file.write('<style type="text/css" media="screen">')
html_file.write(BASIC_STYLE)
html_file.write(IMAGE_SLIDESHOW_STYLE)
html_file.write('</style>\n</head>\n<body>\n')
kwargs = vars()
del kwargs['filename']
del kwargs['open_browser']
del kwargs['html_file']
html_file.write(image_slideshow(**kwargs))
html_file.write('</body>\n</html>')
html_file.close()
if open_browser:
if isinstance(open_browser, str):
try:
custom_browser = webbrowser.get(open_browser)
custom_browser.open(os.path.abspath(filename))
except webbrowser.Error:
err = ("Could not open browser '%s', using default." %
open_browser)
warnings.warn(err)
webbrowser.open(os.path.abspath(filename))
else:
webbrowser.open(os.path.abspath(filename))
return filename
|