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
  20. global numberwang, wangernum
  21.  
  22. presentation = document.presentation  
  23. imageholder = document.imagehere
  24. macrotext = document.macrotext
  25. slidenumber = document.slidenumber
  26. ssi = window.setsvgimage
  27. sst = window.setsvgtext
  28. numberwang = 1 #current slide pointer
  29.  
  30. presentation = []
  31. presentation.append({'macro': '1969', 'imgurl' : 'presentation/1969kitteh.jpg'})
  32.  
  33.  
  34. wangernum = len(presentation) # maximum slides
  35.  
  36. def change_slide(slideno):
  37.   intslide = slideno - 1 #decrement by 1 to get index into list
  38.   slidenumber.innerHTML = str(slideno)
  39.   macrotext.innerHTML = str(presentation[intslide]['macro'])
  40.   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
  41.   
  42. def OnClickNext(s,e):
  43.   global numberwang, wangernum
  44.   numberwang = numberwang + 1
  45.   if numberwang > wangernum:
  46.     numberwang = 1
  47.   change_slide(numberwang)
  48.     
  49. def OnClickPrevious(s,e):
  50.   global numberwang, wangernum
  51.   numberwang = numberwang - 1
  52.   if numberwang == 0:
  53.     numberwang = wangernum
  54.   change_slide(numberwang)
  56. document.next.AttachEvent('onclick', System.EventHandler [System.Windows.Browser.HtmlEventArgs](OnClickNext))
  57. document.previous.AttachEvent('onclick', System.EventHandler [System.Windows.Browser.HtmlEventArgs](OnClickPrevious))
  58.  
  59. change_slide(1) #switch to initial slide
  60.  
  61. </script>
  62. <div class="controls">
  63.     <input id="previous" type="button" value="< Previous" accesskey="Q" />
  64.     <input id="debug" type="button" value="+" />
  65.     <input id="next" type="button" value="Next >" accesskey="W" />
  66. </div>
  67.  
  68. <svg id="macropoint" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  69.     <image id="imagehere" xlink:href="http://visitmix.com/labs/gestalt/img/img_mac_pc.png" x="0" y="0" width="1000" height="620"/>
  70.     <rect x="925" y="0" width="75" height="70" rx="5" ry="5"></rect>
  71.     <text id="slidenumber" x="940" y="60" width="75" height="70" class="slideno"></text>
  72.     <rect x="0" y="510" width="1000" height="100" rx="5" ry="5"></rect>
  73.     <text id="macrotext" x="10" y="590" class="macro"></text>
  74. </svg>
  75. </body>
  76. </html>