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

  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>