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
  1. <!DOCTYPE html>
  2.   <html lang="en"xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>MACROPOINT</title>
  5. <link rel="stylesheet" type="text/css" href="svg-stylesheet.css" />
  6. <script src="http://gestalt.ironpython.net/dlr-latest.js" type="text/javascript"></script>
  7. <script type="text/javascript" id="setsvgimage">
  8. function setsvgimage(newimage)
  9. {
  10.   imgns = document.getElementById("imagehere");
  11.   imgns.removeAttribute('xlink:href'); // removeAttributeNS doesnt work on Chrome?
  12.   imgns.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", newimage);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <script type="text/python">
  18. import System
  19. global numberwang, wangernum
  20.  
  21. presentation = document.presentation  
  22. imageholder = document.imagehere
  23. macrotext = document.macrotext
  24. slidenumber = document.slidenumber
  25. ssi = window.setsvgimage
  26. sst = window.setsvgtext
  27. numberwang = 1 #current slide pointer
  28.  
  29. presentation = []
  30. presentation.append({'macro': '1969', 'imgurl' : 'presentation/1969kitteh.jpg'})
  31.  
  32.  
  33. wangernum = len(presentation) # maximum slides
  34.  
  35. def change_slide(slideno):
  36.   intslide = slideno - 1 #decrement by 1 to get index into list
  37.   slidenumber.innerHTML = str(slideno)
  38.   macrotext.innerHTML = str(presentation[intslide]['macro'])
  39.   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
  40.   
  41. def OnClickNext(s,e):
  42.   global numberwang, wangernum
  43.   numberwang = numberwang + 1
  44.   if numberwang > wangernum:
  45.     numberwang = 1
  46.   change_slide(numberwang)
  47.     
  48. def OnClickPrevious(s,e):
  49.   global numberwang, wangernum
  50.   numberwang = numberwang - 1
  51.   if numberwang == 0:
  52.     numberwang = wangernum
  53.   change_slide(numberwang)
  54. document.next.AttachEvent('onclick', System.EventHandler [System.Windows.Browser.HtmlEventArgs](OnClickNext))
  55. document.previous.AttachEvent('onclick', System.EventHandler [System.Windows.Browser.HtmlEventArgs](OnClickPrevious))
  56.  
  57. change_slide(1) #switch to initial slide
  58.  
  59. </script>
  60. <div class="controls">
  61.     <input id="previous" type="button" value="< Previous" accesskey="Q" />
  62.     <input id="debug" type="button" value="+" />
  63.     <input id="next" type="button" value="Next >" accesskey="W" />
  64. </div>
  65.  
  66. <svg id="macropoint" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  67.     <image id="imagehere" xlink:href="http://visitmix.com/labs/gestalt/img/img_mac_pc.png" x="0" y="0" width="1000" height="620"/>
  68.     <rect x="925" y="0" width="75" height="70" rx="5" ry="5"></rect>
  69.     <text id="slidenumber" x="940" y="60" width="75" height="70" class="slideno"></text>
  70.     <rect x="0" y="510" width="1000" height="100" rx="5" ry="5"></rect>
  71.     <text id="macrotext" x="10" y="590" class="macro"></text>
  72. </svg>
  73. </body>
  74. </html>