Skip to content
This repository
Browse code

add raphael examples from juergen schackmann

  • Loading branch information...
commit 642156e9d6a426304a5fbf9c2dfad2bd0ab22a69 1 parent 68d15c1
Luke Leighton authored
0  examples/raphael/build.sh 100755 → 100644
File mode changed
168 examples/raphael/events.py
... ... @@ -0,0 +1,168 @@
  1 +""" test.py
  2 +
  3 + Simple testing framework for the raphael wrapper.
  4 +"""
  5 +
  6 +import pyjd
  7 +from pyjamas.ui.RootPanel import RootPanel
  8 +from pyjamas.ui.TabPanel import TabPanel
  9 +from pyjamas.ui.SimplePanel import SimplePanel
  10 +from pyjamas.ui.VerticalPanel import VerticalPanel
  11 +from pyjamas.ui.Label import Label
  12 +from pyjamas.ui.HTML import HTML
  13 +from pyjamas.ui import HasAlignment
  14 +from pyjamas import DOM
  15 +from pyjamas import log
  16 +from pyjamas.raphael.raphael import Raphael
  17 +
  18 +class Events(VerticalPanel):
  19 + def __init__(self,width=600,height=300):
  20 + VerticalPanel.__init__(self)
  21 + self.elements=[]
  22 + self.desc=[]
  23 +
  24 + self.canvas = Raphael(width, height)
  25 + self.canvas.addListener('mouseup',self.onCanvasMouseup)
  26 + self.canvas.addListener('mousemove',self.onCanvasMousemove)
  27 + self.canvas.addListener('dblclick',self.onCanvasDblClick)
  28 + self.canvas.addListener('contextmenu',self.onCanvasContextmenu)
  29 + self.canvas.addListener('mousedown',self.onCanvasMousedown)
  30 +
  31 + self.add(self.canvas)
  32 + self.status=Label('Execute any events on the canvas!')
  33 + self.add(self.status)
  34 +
  35 + def set_status(self,status):
  36 + self.status.setText(status)
  37 +
  38 + def draw(self):
  39 +
  40 + circle1=self.canvas.circle(50,50,25)
  41 + circle1.setAttr('fill','#000')
  42 + circle1.setAttrs({'cursor':'move','opacity':0.6})
  43 + circle1.addListener('mouseup',self.onElementMouseup)
  44 + circle1.addListener('mousemove',self.onElementMousemove)
  45 + circle1.addListener('dblclick',self.onElementDblClick)
  46 + circle1.addListener('contextmenu',self.onElementContextmenu)
  47 + circle1.addListener('mousedown',self.onElementMousedown)
  48 + self.elements.append(circle1)
  49 + self.desc.append('Circle 1')
  50 +
  51 + circle2=self.canvas.circle(100,100,25)
  52 + circle2.setAttr('fill','#000')
  53 + circle2.setAttrs({'cursor':'move','opacity':0.6})
  54 + circle2.addListener('mouseup',self.onElementMouseup)
  55 + circle2.addListener('mousemove',self.onElementMousemove)
  56 + circle2.addListener('dblclick',self.onElementDblClick)
  57 + circle2.addListener('contextmenu',self.onElementContextmenu)
  58 + circle2.addListener('mousedown',self.onElementMousedown)
  59 + self.elements.append(circle2)
  60 + self.desc.append('Circle 2')
  61 +
  62 + rect1=self.canvas.rect(200,100,30,30)
  63 + rect1.setAttr('fill','#000')
  64 + rect1.addListener('mouseup',self.onElementMouseup)
  65 + rect1.addListener('mousemove',self.onElementMousemove)
  66 + rect1.addListener('dblclick',self.onElementDblClick)
  67 + rect1.addListener('contextmenu',self.onElementContextmenu)
  68 + rect1.addListener('mousedown',self.onElementMousedown)
  69 + self.elements.append(rect1)
  70 + self.desc.append('Rectangle 1')
  71 +
  72 + rect2=self.canvas.rect(200,150,30,30)
  73 + rect2.setAttr('fill','#000')
  74 + rect2.addListener('mouseup',self.onElementMouseup)
  75 + rect2.addListener('mousemove',self.onElementMousemove)
  76 + rect2.addListener('dblclick',self.onElementDblClick)
  77 + rect2.addListener('contextmenu',self.onElementContextmenu)
  78 + rect2.addListener('mousedown',self.onElementMousedown)
  79 + self.elements.append(rect2)
  80 + self.desc.append('Rectangle 2')
  81 +
  82 + connection=self.canvas.connection(rect1,rect2)
  83 + connection.addListener('mouseup',self.onElementMouseup)
  84 + connection.addListener('mousemove',self.onElementMousemove)
  85 + connection.addListener('dblclick',self.onElementDblClick)
  86 + connection.addListener('contextmenu',self.onElementContextmenu)
  87 + connection.addListener('mousedown',self.onElementMousedown)
  88 + self.elements.append(connection)
  89 + self.desc.append('Connection')
  90 +
  91 + ellipse=self.canvas.ellipse(200,200,25,40)
  92 + text=self.canvas.text(200,200,'ABC')
  93 + set=self.canvas.set()
  94 + set.add(ellipse)
  95 + set.add(text)
  96 + set.addListener('mousemove',self.onElementMousemove)
  97 + self.elements.append(set)
  98 + self.desc.append('Set')
  99 +
  100 + def onCanvasMousedown(self,sender,event):
  101 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  102 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  103 + self.set_status('Mousedown on Canvas at '+str(x)+', '+str(y))
  104 +
  105 + def onCanvasMouseup(self,obj,event):
  106 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  107 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  108 + self.set_status('Mousemove on Canvas at '+str(x)+', '+str(y))
  109 +
  110 + def onCanvasMousemove(self,sender,event):
  111 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  112 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  113 + self.set_status('Mousemove on Canvas at '+str(x)+', '+str(y))
  114 +
  115 + def onCanvasDblClick(self,sender,event):
  116 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  117 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  118 + self.set_status('Doubleclick on Canvas at '+str(x)+', '+str(y))
  119 +
  120 + def onCanvasContextmenu(self, sender,event):
  121 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  122 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  123 + self.set_status('Contextmenue on Canvas at '+str(x)+', '+str(y))
  124 + DOM.eventPreventDefault(event)
  125 +
  126 + def onElementMousedown(self,sender,event):
  127 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  128 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  129 + s = self.desc[self.elements.index(sender)]
  130 + self.set_status('Mousedown on Element '+s+' at '+str(x)+', '+str(y))
  131 + DOM.eventCancelBubble(event,True)
  132 +
  133 + def onElementMouseup(self,sender,event):
  134 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  135 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  136 + s = self.desc[self.elements.index(sender)]
  137 + self.set_status('Mouseup on Element '+s+' at '+str(x)+', '+str(y))
  138 + DOM.eventCancelBubble(event,True)
  139 +
  140 + def onElementMousemove(self,sender,event):
  141 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  142 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  143 + s = self.desc[self.elements.index(sender)]
  144 + self.set_status('Mousemove on Element '+s+' at '+str(x)+', '+str(y))
  145 + DOM.eventCancelBubble(event,True)
  146 +
  147 + def onElementDblClick(self,sender,event):
  148 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  149 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  150 + s = self.desc[self.elements.index(sender)]
  151 + self.set_status('Doubleclick on Element '+s+' at '+str(x)+', '+str(y))
  152 + DOM.eventCancelBubble(event,True)
  153 +
  154 + def onElementContextmenu(self, sender,event):
  155 + x = DOM.eventGetClientX(event) - DOM.getAbsoluteLeft(self.canvas.getElement())
  156 + y = DOM.eventGetClientY(event) - DOM.getAbsoluteTop(self.canvas.getElement())
  157 + s = self.desc[self.elements.index(sender)]
  158 + self.set_status('Contextmenue on Element '+s+' at '+str(x)+', '+str(y))
  159 + DOM.eventCancelBubble(event,True)
  160 + DOM.eventPreventDefault(event)
  161 +
  162 +if __name__ == "__main__":
  163 + pyjd.setup("./media/events.html")
  164 + events=Events()
  165 + RootPanel().add(events)
  166 + events.draw()
  167 + pyjd.run()
  168 +
74 examples/raphael/graffle.py
... ... @@ -0,0 +1,74 @@
  1 +
  2 +import pyjd
  3 +from pyjamas.ui.RootPanel import RootPanel
  4 +from pyjamas.ui.TabPanel import TabPanel
  5 +from pyjamas.ui.SimplePanel import SimplePanel
  6 +from pyjamas.ui.HorizontalPanel import HorizontalPanel
  7 +from pyjamas.ui.Label import Label
  8 +from pyjamas.ui.HTML import HTML
  9 +from pyjamas.ui import HasAlignment
  10 +from pyjamas import DOM
  11 +from pyjamas import log
  12 +from pyjamas.raphael.raphael import Raphael,DOCK_CONNECTION
  13 +
  14 +
  15 +class SimpleGraffle(SimplePanel):
  16 + def __init__(self,width=600,height=300):
  17 + SimplePanel.__init__(self)
  18 + self.canvas = Raphael(width,height)
  19 + self.add(self.canvas)
  20 + def draw(self):
  21 + self.circle1=self.canvas.circle(50,50,25)
  22 + self.circle1.setAttr('fill','#000')
  23 + self.circle1.setAttrs({'cursor':'move','opacity':0.6})
  24 + self.circle1.drag(self._move_circle,start,up)
  25 +
  26 + self.circle2=self.canvas.circle(150,100,25)
  27 + self.circle2.setAttr('fill','#000')
  28 + self.circle2.setAttrs({'cursor':'move','opacity':0.6})
  29 + self.circle2.drag(self._move_circle,start,up)
  30 +
  31 + line={'stroke':'#fff','stroke-width':3}
  32 + bg={'stroke': '#000', 'stroke-width':5}
  33 + self.connection_circle=self.canvas.connection(self.circle1,self.circle2,line=line,bg=bg,cp1=DOCK_CONNECTION.EAST,cp2=DOCK_CONNECTION.WEST)
  34 +
  35 + self.rect1=self.canvas.rect(200,100,30,30)
  36 + self.rect1.setAttr('fill','#000')
  37 + self.rect1.drag(self._move_rect,start,up)
  38 +
  39 + self.rect2=self.canvas.rect(200,150,30,30)
  40 + self.rect2.setAttr('fill','#000')
  41 + self.rect2.drag(self._move_rect,start,up)
  42 +
  43 + line={'stroke':'#fff','stroke-width':3}
  44 + bg={'stroke': '#000', 'stroke-width':5}
  45 + self.connection_rect=self.canvas.connection(self.rect1,self.rect2,line=line,bg=bg)
  46 +
  47 + def _move_rect(self,obj,dx,dy,x,y):
  48 + obj.translate(dx-obj.dx,dy-obj.dy)
  49 + obj.dx=dx
  50 + obj.dy=dy
  51 + self.connection_rect.draw()
  52 +
  53 + def _move_circle(self,obj,dx,dy,x,y):
  54 + obj.translate(dx-obj.dx,dy-obj.dy)
  55 + obj.dx=dx
  56 + obj.dy=dy
  57 + self.connection_circle.draw()
  58 +
  59 +
  60 +
  61 +def start(obj,x,y):
  62 + obj.dx=0
  63 + obj.dy=0
  64 +
  65 +def up(obj):
  66 + pass
  67 +
  68 +if __name__ == "__main__":
  69 + pyjd.setup("./media/graffle.html")
  70 + graffle=SimpleGraffle()
  71 + RootPanel().add(graffle)
  72 + graffle.draw()
  73 + pyjd.run()
  74 +
12 examples/raphael/public/events.html
... ... @@ -0,0 +1,12 @@
  1 +<html>
  2 + <head>
  3 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 + <meta name="pygwt:module" content="events">
  5 + <link rel='stylesheet' href='events.css'>
  6 + <script type="text/javascript" src="raphael.js"></script>
  7 + <title>Raphael Showcase - Events</title>
  8 + </head>
  9 + <body bgcolor="white">
  10 + <script language="javascript" src="bootstrap.js"></script>
  11 + </body>
  12 +</html>
12 examples/raphael/public/graffle.html
... ... @@ -0,0 +1,12 @@
  1 +<html>
  2 + <head>
  3 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 + <meta name="pygwt:module" content="graffle">
  5 + <link rel='stylesheet' href='graffle.css'>
  6 + <script type="text/javascript" src="raphael.js"></script>
  7 + <title>Raphael Showcase - Graffle</title>
  8 + </head>
  9 + <body bgcolor="white">
  10 + <script language="javascript" src="bootstrap.js"></script>
  11 + </body>
  12 +</html>
2,594 examples/raphael/public/raphael.js
3 additions, 2,591 deletions not shown
12 examples/raphael/public/raphael_showcase.html
... ... @@ -0,0 +1,12 @@
  1 +<html>
  2 + <head>
  3 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 + <meta name="pygwt:module" content="raphael_showcase">
  5 + <link rel='stylesheet' href='raphael_showcase.css'>
  6 + <script type="text/javascript" src="raphael.js"></script>
  7 + <title>Raphael Showcase</title>
  8 + </head>
  9 + <body bgcolor="white">
  10 + <script language="javascript" src="bootstrap.js"></script>
  11 + </body>
  12 +</html>
12 examples/raphael/public/spinner.html
... ... @@ -0,0 +1,12 @@
  1 +<html>
  2 + <head>
  3 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 + <meta name="pygwt:module" content="spinner">
  5 + <link rel='stylesheet' href='spinner.css'>
  6 + <script type="text/javascript" src="raphael.js"></script>
  7 + <title>Raphael Showcase - Spinner</title>
  8 + </head>
  9 + <body bgcolor="white">
  10 + <script language="javascript" src="bootstrap.js"></script>
  11 + </body>
  12 +</html>
683 examples/raphael/raphael.py
... ... @@ -1,683 +0,0 @@
1   -""" raphael.py
2   -
3   - This Python module is a Pyjamas wrapper around the Raphael SVG graphics
4   - library.
5   -
6   - The Raphael wrapper was written by Erik Westra (ewestra at gmail dot com).
7   -"""
8   -
9   -from pyjamas.ui.Widget import Widget
10   -from pyjamas import DOM
11   -from pyjamas import Window
12   -from __pyjamas__ import JS
13   -
14   -#############################################################################
15   -
16   -class Raphael(Widget):
17   - """ A Pyjamas wrapper around the Raphael canvas object.
18   - """
19   - def __init__(self, width, height):
20   - """ Standard initialiser.
21   -
22   - 'width' and 'height' are the dimensions to use for the canvas, in
23   - pixels.
24   - """
25   - Widget.__init__(self)
26   -
27   - element = DOM.createDiv()
28   - self.setElement(element)
29   - self.setPixelSize(width, height)
30   - JS("""
31   - this._canvas = $wnd.Raphael(@{{element}}, @{{width}}, @{{height}});
32   - """)
33   -
34   -
35   - def getCanvas(self):
36   - """ Return our Raphael canvas object.
37   -
38   - This can be used to directly access any Raphael functionality which
39   - has not been implemented by this wrapper module. You'll probably
40   - never need to use it, but it's here just in case.
41   - """
42   - return self._canvas
43   -
44   -
45   - def setSize(self, width, height):
46   - """ Change the dimensions of the canvas.
47   - """
48   - JS("""
49   - this._canvas.setSize(@{{width}}, @{{height}});
50   - """)
51   -
52   -
53   - def getColor(self, brightness=None):
54   - """ Return the next colour to use in the spectrum.
55   - """
56   - JS("""
57   - @{{colour}} = this._canvas.getColor();
58   - """)
59   - return colour
60   -
61   -
62   - def resetColor(self):
63   - """ Reset getColor() so that it will start from the beginning.
64   - """
65   - JS("""
66   - this._canvas.getColor().reset();
67   - """)
68   -
69   -
70   - def circle(self, x, y, radius):
71   - """ Create and return a circle element.
72   -
73   - The circle will be centred around (x,y), and will have the given
74   - radius.
75   -
76   - We return a RaphaelElement object representing the circle.
77   - """
78   - JS("""
79   - this._element = this._canvas.circle(@{{x}}, @{{y}}, @{{radius}});
80   - """)
81   - return RaphaelElement(self._element)
82   -
83   -
84   - def rect(self, x, y, width, height, cornerRadius=0):
85   - """ Create and return a rectangle element.
86   -
87   - The rectangle will have its top-left corner at (x,y), and have the
88   - given width and height. If 'cornerRadius' is specified, the
89   - rectangle will have rounded corners with the given radius.
90   -
91   - We return a RaphaelElement object representing the rectangle.
92   - """
93   - JS("""
94   - this._element = this._canvas.rect(@{{x}}, @{{y}}, @{{width}}, @{{height}},
95   - @{{cornerRadius}});
96   - """)
97   - return RaphaelElement(self._element)
98   -
99   -
100   - def ellipse(self, x, y, xRadius, yRadius):
101   - """ Create and return an ellipse element.
102   -
103   - The ellipse will be centred around (x,y), and will have the given
104   - horizontal and vertical radius.
105   -
106   - We return a RaphaelElement object representing the ellipse.
107   - """
108   - JS("""
109   - this._element = this._canvas.ellipse(@{{x}}, @{{y}}, @{{xRadius}}, @{{yRadius}});
110   - """)
111   - return RaphaelElement(self._element)
112   -
113   -
114   - def image(self, src, x, y, width, height):
115   - """ Create and return an image element.
116   -
117   - The image will use 'src' as the URI to read the image data from.
118   - The top-left corner of the image will be at (x,y), and the image
119   - element will have the given width and height.
120   -
121   - We return a RaphaelElement object representing the image.
122   - """
123   - JS("""
124   - this._element = this._canvas.image(@{{src}}, @{{x}}, @{{y}}, @{{width}}, @{{height}});
125   - """)
126   - return RaphaelElement(self._element)
127   -
128   -
129   - def set(self):
130   - """ Create and return a set element.
131   -
132   - This can be used to group elements together and operate on these
133   - elements as a unit.
134   -
135   - We return a RaphaelSetElement representing the set.
136   - """
137   - JS("""
138   - @{{self}}._element = this._canvas.set();
139   - """)
140   - return RaphaelSetElement(self._element)
141   -
142   -
143   - def text(self, x, y, text):
144   - """ Create and return a text element.
145   -
146   - The element will be placed at (x,y), and will display the given
147   - text. Note that you can embed newline ("\n") characters into the
148   - text to force line breaks.
149   -
150   - We return a RaphaelElement representing the text.
151   - """
152   - JS("""
153   - this._element = this._canvas.text(@{{x}}, @{{y}}, @{{text}});
154   - """)
155   - return RaphaelElement(self._element)
156   -
157   -
158   - def path(self, attrs=None, data=None):
159   - """ Create and return a path object.
160   -
161   - If 'attrs' is defined, it should be a dictionary mapping attribute
162   - names to values for the new path object. If 'data' is not None, it
163   - should be a string containing the path data, in SVG path string
164   - format.
165   -
166   - We return a RaphaelPathElement representing the path.
167   - """
168   - if data != None:
169   - JS("""
170   - this._element = this._canvas.path({});
171   - """)
172   - else:
173   - JS("""
174   - this._element = this._canvas.path({}, @{{data}});
175   - """)
176   -
177   - if attrs != None:
178   - for attr in attrs.keys():
179   - value = attrs[attr]
180   - JS("""
181   - this._element.attr(@{{attr}}, @{{value}});
182   - """)
183   -
184   - return RaphaelPathElement(self._element)
185   -
186   -#############################################################################
187   -
188   -class RaphaelElement:
189   - """ Wrapper object for a Raphael element.
190   -
191   - Note that these objects are created by the appropriate methods within
192   - the Raphael object; you should never need to initialise one of these
193   - objects yourself.
194   - """
195   - def __init__(self, raphaelElement):
196   - """ Standard initialiser.
197   -
198   - 'raphaelElement' is the raphael element that we are wrapping.
199   - """
200   - self._element = raphaelElement
201   - self._listeners = {'click' : [],
202   - 'mousedown' : [],
203   - 'mouseup' : [],
204   - 'mousemove' : [],
205   - 'mouseenter' : [],
206   - 'mouseleave' : []}
207   -
208   - onClick = getattr(self, "_onClick")
209   - onMouseDown = getattr(self, "_onMouseDown")
210   - onMouseUp = getattr(self, "_onMouseUp")
211   - onMouseMove = getattr(self, "_onMouseMove")
212   - onMouseEnter = getattr(self, "_onMouseEnter")
213   - onMouseLeave = getattr(self, "_onMouseLeave")
214   -
215   - JS("""
216   - this._element.node.onclick = @{{onClick}};
217   - this._element.node.onmousedown = @{{onMouseDown}};
218   - this._element.node.onmouseup = @{{onMouseUp}};
219   - this._element.node.onmousemove = @{{onMouseMove}};
220   - this._element.node.onmouseenter = @{{onMouseEnter}};
221   - this._element.node.onmouseleave = @{{onMouseLeave}};
222   - """)
223   -
224   -
225   - def addListener(self, type, listener):
226   - """ Add a listener function to this element.
227   -
228   - The parameters are as follows:
229   -
230   - 'type'
231   -
232   - The type of event to listen out for. One of:
233   -
234   - "click"
235   - "mousedown"
236   - "mouseup"
237   - "mousemove"
238   - "mouseenter"
239   - "mouseleave"
240   -
241   - 'listener'
242   -
243   - A Python callable object which accepts two parameters: the
244   - RaphaelElement object that was clicked on, and the event
245   - object.
246   -
247   - The given listener function will be called whenever an event of the
248   - given type occurs.
249   - """
250   - self._listeners[type].append(listener)
251   -
252   -
253   - def removeListener(self, type, listener):
254   - """ Remove a previously-defined listener function.
255   - """
256   - self._listeners[type].remove(listener)
257   -
258   -
259   - def getElement(self):
260   - """ Return the DOM element we are wrapping.
261   - """
262   - return self._element
263   -
264   -
265   - def remove(self):
266   - """ Remove this element from the canvas.
267   -
268   - You can't use the element after you call this method.
269   - """
270   - JS("""
271   - this._element.remove();
272   - """)
273   -
274   -
275   - def hide(self):
276   - """ Make this element invisible.
277   - """
278   - JS("""
279   - this._element.hide();
280   - """)
281   -
282   -
283   - def show(self):
284   - """ Make this element visible.
285   - """
286   - JS("""
287   - this._element.show();
288   - """)
289   -
290   -
291   - def rotate(self, angle, cx, cy=None):
292   - """ Rotate the element by the given angle.
293   -
294   - This can be called in two different ways:
295   -
296   - element.rotate(angle, isAbsolute)
297   -
298   - where 'angle' is the angle to rotate the element by, in
299   - degrees, and 'isAbsolute' specifies it the angle is relative
300   - to the previous position (False) or if it is the absolute
301   - angle to rotate the element by (True).
302   -
303   - or:
304   -
305   - element.rotate(angle, cx, cy):
306   -
307   - where 'angle' is the angle to rotate the element by, in
308   - degrees, and 'cx' and 'cy' define the origin around which
309   - to rotate the element.
310   - """
311   - if cy == None:
312   - isAbsolute = cx
313   - JS("""
314   - this._element.rotate(@{{angle}}, @{{isAbsolute}});
315   - """)
316   - else:
317   - JS("""
318   - this._element.rotate(@{{angle}}, @{{cx}}, @{{cy}});
319   - """)
320   -
321   -
322   - def translate(self, dx, dy):
323   - """ Move the element around the canvas by the given number of pixels.
324   - """
325   - JS("""
326   - this._element.translate(@{{dx}}, @{{dy}});
327   - """)
328   -
329   -
330   - def scale(self, xtimes, ytimes):
331   - """ Resize the element by the given horizontal and vertical multiplier.
332   - """
333   - JS("""
334   - this._element.scale(@{{xtimes}}, @{{ytimes}});
335   - """)
336   -
337   -
338   - def setAttr(self, attr, value):
339   - """ Set the value of a single attribute for this element.
340   -
341   - The following attributes are currently supported:
342   -
343   - cx number
344   - cy number
345   - fill colour
346   - fill-opacity number
347   - font string
348   - font-family string
349   - font-size number
350   - font-weight string
351   - gradient object|string
352   - "‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›"
353   - height number
354   - opacity number
355   - path pathString
356   - r number
357   - rotation number
358   - rx number
359   - ry number
360   - scale CSV
361   - src string (URL)
362   - stroke colour
363   - stroke-dasharray string ['-', '.', '-.', '-..', '. ', '- ',
364   - '--', '- .', '--.', '--..']
365   - stroke-linecap string ['butt', 'square', 'round', 'miter']
366   - stroke-linejoin string ['butt', 'square', 'round', 'miter']
367   - stroke-miterlimit number
368   - stroke-opacity number
369   - stroke-width number
370   - translation CSV
371   - width number
372   - x number
373   - y number
374   -
375   - Please refer to the SVG specification for an explanation of these
376   - attributes and how to use them.
377   - """
378   - JS("""
379   - this._element.attr(@{{attr}}, @{{value}});
380   - """)
381   -
382   -
383   - def setAttrs(self, attrs):
384   - """ Set the value of multiple attributes at once.
385   -
386   - 'attrs' should be a dictionary mapping attribute names to values.
387   -
388   - The available attributes are listed in the description of the
389   - setAttr() method, above.
390   - """
391   - for attr,value in attrs.items():
392   - JS("""
393   - this._element.attr(@{{attr}}, @{{value}});
394   - """)
395   -
396   -
397   - def getAttr(self, attr):
398   - """ Return the current value for the given attribute.
399   - """
400   - JS("""
401   - var value = this._element.attr(@{{attr}});
402   - """)
403   - return value
404   -
405   -
406   - def animate(self, attrs, duration):
407   - """ Linearly change one or more attributes over a given timeframe.
408   -
409   - 'attrs' should be a dictionary mapping attribute names to values,
410   - and 'duration' should be how long to run the animation for (in
411   - milliseconds).
412   -
413   - Only the following attributes can be animated:
414   -
415   - cx number
416   - cy number
417   - fill colour
418   - fill-opacity number
419   - font-size number
420   - height number
421   - opacity number
422   - path pathString
423   - r number
424   - rotation number
425   - rx number
426   - ry number
427   - scale CSV
428   - stroke colour
429   - stroke-opacity number
430   - stroke-width number
431   - translation CSV
432   - width number
433   - x number
434   - y number
435   -
436   - Note that the use of a callback function is not yet supported
437   - within the Raphael wrapper, even though Raphael itself supports it.
438   - """
439   - JS("""
440   - var jsAttrs = {};
441   - """)
442   - for attr,value in attrs.items():
443   - JS("""
444   - @{{!jsAttrs}}[@{{attr}}] = @{{value}};
445   - """)
446   -
447   - JS("""
448   - this._element.animate(@{{!jsAttrs}}, @{{duration}});
449   - """)
450   -
451   -
452   - def getBBox(self):
453   - """ Return the bounding box for this element.
454   -
455   - We return a dictionary with 'x', 'y', 'width' and 'height'
456   - elements.
457   - """
458   - x = y = width = height = 0 #declared
459   - JS("""
460   - var bounds = this._element.getBBox();
461   - @{{x}} = bounds.x;
462   - @{{y}} = bounds.y;
463   - @{{width}} = bounds.width;
464   - @{{height}} = bounds.height;
465   - """)
466   - return {'x' : x,
467   - 'y' : y,
468   - 'width' : width,
469   - 'height' : height}
470   -
471   -
472   - def toFront(self):
473   - """ Move the element in front of all other elements on the canvas.
474   - """
475   - JS("""
476   - this._element.toFront();
477   - """)
478   -
479   -
480   - def toBack(self):
481   - """ Move the element behind all the other elements on the canvas.
482   - """
483   - JS("""
484   - this._element.toBack();
485   - """)
486   -
487   -
488   - def insertBefore(self, element):
489   - """ Move this element so that it appears in front of the given element.
490   -
491   - 'element' should be a RaphaelElement object.
492   - """
493   - otherElement = element.getElement()
494   - JS("""
495   - this._element.insertBefore(@{{otherElement}});
496   - """)
497   -
498   -
499   - def insertAfter(self, element):
500   - """ Move this element so that it appears behind the given element.
501   - """
502   - otherElement = element.getElement()
503   - JS("""
504   - this._element.insertAfter(@{{otherElement}});
505   - """)
506   -
507   - # =====================
508   - # == PRIVATE METHODS ==
509   - # =====================
510   -
511   - def _onClick(self, event):
512   - """ Respond to a mouse-click event.
513   - """
514   - listeners = self._listeners['click']
515   - for listener in listeners:
516   - listener(self, event)
517   -
518   -
519   - def _onMouseDown(self, event):
520   - """ Respond to a mouse-down event.
521   - """
522   - listeners = self._listeners['mousedown']
523   - for listener in listeners:
524   - listener(self, event)
525   -
526   -
527   - def _onMouseUp(self, event):
528   - """ Respond to a mouse-up event.
529   - """
530   - listeners = self._listeners['mouseup']
531   - for listener in listeners:
532   - listener(self, event)
533   -
534   -
535   - def _onMouseMove(self, event):
536   - """ Respond to a mouse-move event.
537   - """
538   - listeners = self._listeners['mousemove']
539   - for listener in listeners:
540   - listener(self, event)
541   -
542   -
543   - def _onMouseEnter(self, event):
544   - """ Respond to a mouse-enter event.
545   - """
546   - listeners = self._listeners['mouseenter']
547   - for listener in listeners:
548   - listener(self, event)
549   -
550   -
551   - def _onMouseLeave(self, event):
552   - """ Respond to a mouse-leave event.
553   - """
554   - listeners = self._listeners['mouseleave']
555   - for listener in listeners:
556   - listener(self, event)
557   -
558   -#############################################################################
559   -
560   -class RaphaelSetElement(RaphaelElement):
561   - """ A RaphaelElement that represents a set of elements.
562   - """
563   - def add(self, element):
564   - """ Add an element to this set.
565   - """
566   - otherElement = element.getElement()
567   - JS("""
568   - this._element.push(@{{otherElement}});
569   - """)
570   -
571   -#############################################################################
572   -
573   -class RaphaelPathElement(RaphaelElement):
574   - """ A RaphaelElement that represents a path.
575   -
576   - Note that the RaphaelPathElement object is returned by each of the
577   - methods defined in this calss, allowing method calls to be chained
578   - together.
579   - """
580   - def absolutely(self):
581   - """ Tell the path to treat all subsequent units as absolute ones.
582   -
583   - Coordinates are absolute by default.
584   - """
585   - JS("""
586   - this._element.absolutely();
587   - """)
588   - return self
589   -
590   -
591   - def relatively(self):
592   - """ Tell the path to treat all subsequent units as relative ones.
593   -
594   - Coordinates are absolute by default.
595   - """
596   - JS("""
597   - this._element.relatively();
598   - """)
599   - return self
600   -
601   -
602   - def moveTo(self, x, y):
603   - """ Move the drawing point to the given coordinates.
604   - """
605   - JS("""
606   - this._element.moveTo(@{{x}}, @{{y}});
607   - """)
608   - return self
609   -
610   -
611   - def lineTo(self, x, y):
612   - """ Draw a straight line to the given coordinates.
613   - """
614   - JS("""
615   - this._element.lineTo(@{{x}}, @{{y}});
616   - """)
617   - return self
618   -
619   -
620   - def cplineTo(self, x, y, width=None):
621   - """ Draw a curved line to the given coordinates.
622   -
623   - 'x' and 'y' define the ending coordinates, and 'width' defines how
624   - much of a curve to give to the line. The line will have horizontal
625   - anchors at the start and finish points.
626   - """
627   - if width != None:
628   - JS("""
629   - this._element.cplineTo(@{{x}}, @{{y}}, @{{width}});
630   - """)
631   - else:
632   - JS("""
633   - this._element.cplineTo(@{{x}}, @{{y}});
634   - """)
635   - return self
636   -
637   -
638   - def curveTo(self, x1, y1, x2, y2, x3, y3):
639   - """ Draw a bicubic curve to the given coordinates.
640   - """
641   - JS("""
642   - this._element.curveTo(@{{x1}}, @{{y1}}, @{{x}}, @{{y2}}, @{{x3}}, @{{y3}});
643   - """)
644   - return self
645   -
646   -
647   - def qcurveTo(self, x1, y1, x2, y2):
648   - """ Draw a quadratic curve to the given coordinates.
649   - """
650   - JS("""
651   - this._element.qcurveTo(@{{x1}}, @{{y1}}, @{{x2}}, @{{y2}});
652   - """)
653   - return self
654   -
655   -
656   - def addRoundedCorner(self, radius, direction):
657   - """ Draw a quarter of a circle from the current drawing point.
658   -
659   - 'radius' should be the radius of the circle, and 'direction' should
660   - be one of the following strings:
661   -
662   - "lu" Left up.
663   - "ld" Left down.
664   - "ru" Right up.
665   - "rd" Right down.
666   - "ur" Up right.
667   - "ul" Up left.
668   - "dr" Down right.
669   - "dl" Down left.
670   - """
671   - JS("""
672   - this._element.addRoundedCorner(@{{radius}}, @{{direction}});
673   - """)
674   - return self
675   -
676   -
677   - def andClose(self):
678   - """ Close the path being drawn.
679   - """
680   - JS("""
681   - this._element.andClose();
682   - """)
683   - return self
93 examples/raphael/raphael_showcase.py
... ... @@ -0,0 +1,93 @@
  1 +""" test.py
  2 +
  3 + Simple testing framework for the raphael wrapper.
  4 +"""
  5 +
  6 +import pyjd
  7 +from pyjamas.ui.RootPanel import RootPanel
  8 +from pyjamas.ui.TabPanel import TabPanel
  9 +from pyjamas.ui.SimplePanel import SimplePanel
  10 +from pyjamas.ui.DockPanel import DockPanel
  11 +from pyjamas.ui.Label import Label
  12 +from pyjamas.ui.HTML import HTML
  13 +from pyjamas.ui import HasAlignment
  14 +from pyjamas import DOM
  15 +from pyjamas import log
  16 +from pyjamas.raphael.raphael import Raphael
  17 +
  18 +from graffle import Graffle
  19 +from events import Events
  20 +from spinner import Spinner
  21 +
  22 +
  23 +class TabContainer(DockPanel):
  24 + def __init__(self):
  25 + DockPanel.__init__(self,
  26 + #BorderWidth=1,Padding=8,
  27 + HorizontalAlignment=HasAlignment.ALIGN_CENTER,
  28 + VerticalAlignment=HasAlignment.ALIGN_MIDDLE)
  29 +
  30 +class TabRaphaelContainer(TabContainer):
  31 + def __init__(self):
  32 + TabContainer.__init__(self)
  33 + self.status=Label()
  34 + self.add(self.status,DockPanel.SOUTH)
  35 +
  36 + def set_raphael(self,raphael):
  37 + self.raphael=raphael
  38 + self.add(self.raphael,DockPanel.CENTER)
  39 + #panel.setCellHeight(center, "200px")
  40 + #panel.setCellWidth(center, "400px")
  41 +
  42 + def set_headline(self,headline):
  43 + if hasattr(self,'html'):
  44 + self.html.setHTML(headline)
  45 + #self.html.setText(headline)
  46 + else:
  47 + self.html=HTML(headline)
  48 + self.add(self.html,DockPanel.NORTH)
  49 +
  50 + def set_status(self,status):
  51 + self.status.setText(status)
  52 +
  53 +
  54 +class ShowCaseApp(object):
  55 +
  56 + def onModuleLoad(self):
  57 + self.tabs = TabPanel()
  58 + tab_overview=TabContainer()
  59 + self.tabs.add(tab_overview, 'Overview')
  60 +
  61 + self.tab_events=TabRaphaelContainer()
  62 + self.tab_events.set_headline('Events Example')
  63 + self.tab_events.set_raphael(Events(width=600,height=300))
  64 + self.tab_events.set_status('Execute events on Raphael Elemnts')
  65 + self.tabs.add(self.tab_simple, 'Events')
  66 +
  67 + tab_graffle=TabRaphaelContainer()
  68 + tab_graffle.set_headline('This is a simple example of the Raphael Graffle')
  69 + tab_graffle.set_raphael(Graffle(width=600,height=300))
  70 + self.tabs.add(tab_sgraffle, 'Graffle')
  71 +
  72 + tab_spinner=TabRaphaelContainer()
  73 + tab_spinner.set_headline('This Raphael Spinner Example')
  74 + tab_spinner.set_raphael(Spinner(width=600,height=300))
  75 + self.tabs.add(tab_sgraffle, 'Spinner')
  76 +
  77 + self.tabs.selectTab(0)
  78 + self.tabs.setWidth("100%")
  79 + self.tabs.setHeight("100%")
  80 + RootPanel().add(self.tabs)
  81 +
  82 + def draw(self):
  83 + self.tab_simple.raphael.draw()
  84 +
  85 +
  86 +if __name__ == "__main__":
  87 + pyjd.setup("./media/raphael_showcase.html")
  88 + app=ShowCaseApp()
  89 + app.onModuleLoad()
  90 + app.draw()
  91 + app.rect1.getBBox()
  92 + pyjd.run()
  93 +
75 examples/raphael/spinner.py
... ... @@ -0,0 +1,75 @@
  1 +""" test.py
  2 +
  3 + Simple testing framework for the raphael wrapper.
  4 +"""
  5 +from pyjamas.ui.HTML import HTML
  6 +from pyjamas.ui.RootPanel import RootPanel
  7 +from pyjamas.ui.SimplePanel import SimplePanel
  8 +
  9 +import math
  10 +from pyjamas.Timer import Timer
  11 +from pyjamas import Window
  12 +
  13 +from pyjamas.raphael.raphael import Raphael
  14 +from pyjamas import log
  15 +import pyjd
  16 +
  17 +#############################################################################
  18 +
  19 +class Spinner(SimplePanel):
  20 + """ Our testing panel.
  21 + """
  22 + def __init__(self):
  23 + """ Standard initialiser.
  24 + """
  25 + SimplePanel.__init__(self)
  26 +
  27 + # Taken from the "spinner" Raphael demo:
  28 + self.width = 15
  29 + self.r1 = 35
  30 + self.r2 = 60
  31 + self.cx = self.r2 + self.width
  32 + self.cy = self.r2 + self.width
  33 + self.numSectors = 12
  34 + self.canvas = Raphael(self.r2*2 + self.width*2, self.r2*2 + self.width*2)
  35 + self.sectors = []
  36 + self.opacity = []
  37 + self.add(self.canvas)
  38 +
  39 + def draw(self):
  40 + colour = "#000000"
  41 + beta = 2 * math.pi / self.numSectors
  42 +
  43 + pathParams = {'stroke' : colour,
  44 + 'stroke-width' : self.width,
  45 + 'stroke-linecap' : "round"}
  46 +
  47 + for i in range(self.numSectors):
  48 + alpha = beta * i - math.pi/2
  49 + cos = math.cos(alpha)
  50 + sin = math.sin(alpha)
  51 + data=','.join(['M',str(self.cx + self.r1 * cos),str(self.cy + self.r1 * sin),'L',str(self.cx + self.r2 * cos),str(self.cy + self.r2 * sin)])
  52 + path = self.canvas.path(data=data,attrs=pathParams)
  53 + self.opacity.append(1.0 * i / self.numSectors )
  54 + self.sectors.append(path)
  55 +
  56 + period = 1000/self.numSectors
  57 + self._timer = Timer(notify=self)
  58 + self._timer.scheduleRepeating(period)
  59 +
  60 + def onTimer(self, timerID):
  61 + """ Respond to our timer firing.
  62 + """
  63 + self.opacity.insert(0, self.opacity.pop())
  64 + for i in range(self.numSectors):
  65 + self.sectors[i].setAttr("opacity", self.opacity[i])
  66 +
  67 +#############################################################################
  68 +
  69 +if __name__ == "__main__":
  70 + pyjd.setup("./media/spinner.html")
  71 + spinner=Spinner()
  72 + RootPanel().add(spinner)
  73 + spinner.draw()
  74 + pyjd.run()
  75 +
3  examples/raphael/test.py
@@ -10,7 +10,7 @@
10 10 from pyjamas.Timer import Timer
11 11 from pyjamas import Window
12 12
13   -from raphael import Raphael
  13 +from pyjamas.raphael.raphael import Raphael
14 14
15 15
16 16 #############################################################################
@@ -71,3 +71,4 @@ def onTimer(self, timer):
71 71 if __name__ == "__main__":
72 72 panel = TestPanel()
73 73 RootPanel().add(panel)
  74 +

0 comments on commit 642156e

Please sign in to comment.
Something went wrong with that request. Please try again.