Having fun with HTML5, Script/Python & SVG
As a fan of SVG since 2000, it is great to seeing SVG make it big again in HTML5 and Internet Explorer 9.
For my Pycon-Australia keynote on the weekend, I decided to mashup Python & SVG. You know, it is one of those thing you think of in the shower, then take 2 days to implement.
Using the Mix labs Gestalt code, the new Internet Explorer 9.0 Platform Preview 3 and sheer determination, it all worked.
MACROPOINT was born. Many presenters are using the 4chan "MACRO" text style: Impact typeface, white text with black stroke.
The for MACROPOINT is simple. It defines a python list containing a tuple of macrotext and images.
There is a python forward/backward script attached to the buttons. This loops over the python list. Using python, the text and image are changed in the embedded SVG element. I found that using SetAttributeNS worked best from Javascript; so using the Silverlight (hosting the DLR & python) bridge I called Javascript in the window (setsvgimage). There is a simple css that styles the SVG text.
Numberwang and wangernum are homages to a great recurring sketch in the UK comedy show, That Mitchell and Webb Look: numberwang.
Code Snippet
<!DOCTYPE html>
<html lang="en"xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>MACROPOINT</title>
<link rel="stylesheet" type="text/css" href="svg-stylesheet.css" />
<script src="https://gestalt.ironpython.net/dlr-latest.js" type="text/javascript"></script>
<script type="text/javascript" id="setsvgimage">
function setsvgimage(newimage)
{
imgns = document.getElementById("imagehere");
imgns.removeAttribute('xlink:href'); // removeAttributeNS doesnt work on Chrome?
imgns.setAttributeNS("https://www.w3.org/1999/xlink", "xlink:href", newimage);
}
</script>
</head>
<body>
<script type="text/python">
import System
global numberwang, wangernum
presentation = document.presentation
imageholder = document.imagehere
macrotext = document.macrotext
slidenumber = document.slidenumber
ssi = window.setsvgimage
sst = window.setsvgtext
numberwang = 1 #current slide pointer
presentation = []
presentation.append({'macro': '1969', 'imgurl' : 'presentation/1969kitteh.jpg'})
wangernum = len(presentation) # maximum slides
def change_slide(slideno):
intslide = slideno - 1 #decrement by 1 to get index into list
slidenumber.innerHTML = str(slideno)
macrotext.innerHTML = str(presentation[intslide]['macro'])
ssi.InvokeSelf(Array[object]([str(presentation[intslide]['imgurl'])])) #changes the image in the SVG <image> element, but in a different namespace, via Javascript bridge & SetPropertyNS
def OnClickNext(s,e):
global numberwang, wangernum
numberwang = numberwang + 1
if numberwang > wangernum:
numberwang = 1
change_slide(numberwang)
def OnClickPrevious(s,e):
global numberwang, wangernum
numberwang = numberwang - 1
if numberwang == 0:
numberwang = wangernum
change_slide(numberwang)
document.next.AttachEvent('onclick', System.EventHandler [System.Windows.Browser.HtmlEventArgs](OnClickNext))
document.previous.AttachEvent('onclick', System.EventHandler [System.Windows.Browser.HtmlEventArgs](OnClickPrevious))
change_slide(1) #switch to initial slide
</script>
<div class="controls">
<input id="previous" type="button" value="< Previous" accesskey="Q" />
<input id="debug" type="button" value="+" />
<input id="next" type="button" value="Next >" accesskey="W" />
</div>
<svg id="macropoint" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
<image id="imagehere" xlink:href="https://visitmix.com/labs/gestalt/img/img_mac_pc.png" x="0" y="0" width="1000" height="620"/>
<rect x="925" y="0" width="75" height="70" rx="5" ry="5"></rect>
<text id="slidenumber" x="940" y="60" width="75" height="70" class="slideno"></text>
<rect x="0" y="510" width="1000" height="100" rx="5" ry="5"></rect>
<text id="macrotext" x="10" y="590" class="macro"></text>
</svg>
</body>
</html>