Permalink
Browse files

svg test example by johan wouters

git-svn-id: https://pyjamas.svn.sourceforge.net/svnroot/pyjamas/trunk@1010 7a2bd370-bda8-463c-979e-2900ccfb811e
  • Loading branch information...
1 parent 775134d commit 4cd37b9d4cc15b26fa9a5e8a96b8a306392179fe lkcl committed Jul 25, 2009
View
7 examples/svgtest/build.sh
@@ -0,0 +1,7 @@
+#!/bin/sh
+# you will need to read the top level README, and run boostrap.py
+# and buildout in order to make pyjsbuild
+
+options="$*"
+#if [ -z $options ] ; then options="-O";fi
+../../bin/pyjsbuild --print-statements $options svg_test
View
6 examples/svgtest/public/floorplan.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" id="the_svg" >
+<g id="svg_transform_element" transform="">
+<circle id="thedot" cx="50" cy="50" r="10" fill="red" />
+<polygon id="triangle" points="2,20 22,20 12,40" fill="black" stroke="blue" stroke-width="1" />
+</g>
+</svg>
View
6 examples/svgtest/public/floorplan2.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" id="the_svg" >
+<g id="svg_transform_element" transform="">
+<circle id="thedot" cx="50" cy="50" r="10" fill="yellow" />
+<polygon id="triangle" points="2,20 22,20 12,40" fill="green" stroke="blue" stroke-width="1" />
+</g>
+</svg>
View
13 examples/svgtest/public/svg_test.html
@@ -0,0 +1,13 @@
+<html>
+<!-- auto-generated html - you should consider editing and
+adapting this to suit your requirements
+-->
+<head>
+<meta name="pygwt:module" content="svg_test">
+
+<title>PyJamas Auto-Generated HTML file svg_test</title>
+</head>
+<body bgcolor="white">
+<script language="javascript" src="bootstrap.js"></script>
+</body>
+</html>
View
116 examples/svgtest/svgWindow.py
@@ -0,0 +1,116 @@
+# Copyright (C) 2009 Johan Wouters
+
+from pyjamas import DOM
+from pyjamas.ui.FocusWidget import FocusWidget
+from pyjamas.ui.HTML import HTML
+from pyjamas.ui.RootPanel import RootPanel
+from pyjamas.ui.Frame import Frame
+
+
+class svgWindow(FocusWidget):
+ def __init__(self, className=None):
+ element = DOM.createIFrame()
+ FocusWidget.__init__(self,element)
+
+ self.floorplan_file = "floorplan.svg"
+
+
+ #DOM.setStyleAttribute(element, "position", "relative")
+ #DOM.setStyleAttribute(element, "overflow", "hidden")
+ #DOM.setStyleAttribute(element, "border", "1px")
+ #DOM.setStyleAttribute(element, "width", "100px")
+ #DOM.setStyleAttribute(element, "height", "100px")
+ #DOM.setStyleAttribute(element, "backgroundColor", "lightblue")
+
+ self.svg_area = element
+ self.rot_deg = 0.0
+ self.scale = 1.0
+ self.x_translate = 0.0
+ self.y_translate = 0.0
+
+ self.draw_elements()
+ self.svg_area.setAttribute("class", className)
+
+ def apply_transform(self):
+ rot_string = "rotate(%f)" % self.rot_deg
+ scale_string = "scale(%f)" % self.scale
+ translate_string = "translate(%f," % self.x_translate
+ translate_string+= "%f)" % self.y_translate
+
+ transform_string = rot_string
+ transform_string = transform_string + " " + scale_string
+ transform_string = transform_string + " " + translate_string
+
+ svg_g = self.svg_area.contentDocument.getElementById("svg_transform_element")
+ RootPanel().add(HTML("transform_string = %s" % transform_string))
+ transform = svg_g.getAttribute("transform")
+ svg_g.setAttribute("transform", transform_string)
+
+ def scale(self, scale):
+ self.scale = scale
+ self.apply_transform()
+
+ def rotate(self, degrees):
+ self.rot_deg = degrees
+ self.apply_transform()
+
+ def translate(self, x, y):
+ self.x_translate = x
+ self.y_translate = y
+ self.apply_transform()
+
+ def reset_transforms(self):
+ self.rot_deg = 0.0
+ self.scale = 1.0
+ self.x_translate = 0.0
+ self.y_translate = 0.0
+ self.apply_transform()
+
+ # Convenience functions
+ def zoom_in(self):
+ self.scale+=0.5
+ self.apply_transform()
+
+ def zoom_out(self):
+ self.scale-=0.5
+ self.apply_transform()
+
+ def rot_CW(self):
+ self.rot_deg+=30
+ self.apply_transform()
+
+ def rot_CCW(self):
+ self.rot_deg-=30
+ self.apply_transform()
+
+ def change_floorplan(self):
+ if self.floorplan_file == "floorplan.svg":
+ self.floorplan_file = "floorplan2.svg"
+ else:
+ self.floorplan_file = "floorplan.svg"
+
+ self.svg_area.setAttribute("src",self.floorplan_file)
+
+ def draw_elements(self):
+ # Some dummy stuff to get an SVG
+
+ svg_method = 2
+
+ if(svg_method == 0):
+ DOM.setInnerHTML(self.svg_area, '''
+ <object data="floorplan.svg" type="image/svg+xml width="100%" height="100%" />
+ ''')
+ elif(svg_method == 1):
+ DOM.setInnerHTML(self.svg_area, '''
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" id="the_svg" >
+ <g id="svg_transform_element" transform="">
+ <circle id="thedot" cx="50" cy="50" r="10" fill="red" />
+ <polygon id="triangle" points="2,20 22,20 12,40" fill="black" stroke="blue" stroke-width="1" />
+ </g>
+</svg>
+ ''')
+ elif(svg_method == 2):
+ self.svg_area.setAttribute("src",self.floorplan_file)
+
+
+ DOM.setAttribute(self.svg_area,"id","my_div_svg_area")
View
57 examples/svgtest/svg_test.py
@@ -0,0 +1,57 @@
+# Copyright (C) 2009 Johan Wouters
+
+import pyjd
+
+from svgWindow import svgWindow
+from pyjamas.ui.RootPanel import RootPanel
+from pyjamas.ui.HTML import HTML
+from pyjamas.ui.Button import Button
+from pyjamas.ui.HorizontalPanel import HorizontalPanel
+from pyjamas import Window
+
+
+class mainUI:
+ svg = None
+
+ def __init__(self):
+ svg = svgWindow(className="svg") # className for CSS
+ mainUI.svg = svg
+
+ RootPanel().add(svg)
+
+ panel = HorizontalPanel()
+ RootPanel().add(panel)
+
+ buttons = ["zoom in",
+ "zoom out",
+ "rotate CW",
+ "rotate CCW",
+ "reload",
+ "reset",
+ ]
+ for buttonName in buttons:
+ newButton = Button(buttonName, listener=self.clickListener)
+ panel.add(newButton)
+
+ RootPanel().add(HTML("Hello <b>World</b>"))
+
+ def clickListener(self, e):
+ button = e.getText()
+ if button=="zoom in":
+ mainUI.svg.zoom_in()
+ elif button=="zoom out":
+ mainUI.svg.zoom_out()
+ elif button=="rotate CW":
+ mainUI.svg.rot_CW()
+ elif button=="rotate CCW":
+ mainUI.svg.rot_CCW()
+ elif button=="reset":
+ mainUI.svg.reset_transforms()
+ elif button=="reload":
+ mainUI.svg.change_floorplan()
+
+if __name__ == "__main__":
+ pyjd.setup("./public/svg_test.html")
+ ui = mainUI()
+ pyjd.run()
+

0 comments on commit 4cd37b9

Please sign in to comment.