Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 300 lines (236 sloc) 9.195 kb
8207326 remove sinklist from addonsgallery
Luke Leighton authored
1 from pyjamas.ui.Sink import Sink, SinkInfo
0838279 keesbos Added CanvasTab.py, which is Canvas2DTab.py, but uses the
keesbos authored
2 from pyjamas.ui.Image import Image
3 from pyjamas.ui.HTML import HTML
4 from pyjamas.ui.VerticalPanel import VerticalPanel
5 from pyjamas.ui.HorizontalPanel import HorizontalPanel
6 from pyjamas.ui.RootPanel import RootPanel
7 from pyjamas.Canvas.GWTCanvas import GWTCanvas
8 from pyjamas.Canvas.ImageLoader import loadImages
9 from pyjamas.Canvas.Color import Color
10 from pyjamas.Timer import Timer
11 from math import floor, cos, sin
12 import time
13
14 class CanvasTab(Sink):
15 def __init__(self):
16 Sink.__init__(self)
17 colour_grid = ColourGridCanvas()
18 rotated = RotatedCanvas()
19 spheres = SpheresCanvas()
20 #pattern = PatternCanvas()
21 spiro = SpiroCanvas()
22 self.solar = SolarCanvas()
23
24 row0 = HorizontalPanel()
25 row0.setSpacing(8)
26 row0.add(colour_grid)
27 row0.add(rotated)
28 row0.add(spheres)
29 #row0.add(pattern)
30
31 row1 = HorizontalPanel()
32 row1.setSpacing(8)
33 row1.add(self.solar)
34 row1.add(spiro)
35
36 panel = VerticalPanel()
37 panel.add(row0)
38 panel.add(row1)
39
40 self.setWidget(panel)
41
42 def onShow(self):
43 self.solar.isActive = True
44 self.solar.onTimer()
45
46 def onHide(self):
47 self.solar.isActive = False
48
49
50 def init():
51 text="""
52 <b>Canvas vector drawing component: Canvas2D</b>
53 <p>Gives python access to the browser's native canvas tag.
54
55 <p>There are two canvas drawing libraries: Canvas2D (oldest) and Canvas
56 (preferred). Both work in modern browsers (that support canvas). For IE
57 the canvas functionality is emulated in javascript. This leads to
58 lower performance in IE and missing/broken functionality.
59
60 <p>Originally by Alexei Sokolov at <a href=\"http://gwt.components.googlepages.com\">gwt.components.googlepages.com</a>"
61 <br>Samples ported from the <a href=\"http://developer.mozilla.org/en/docs/Canvas_tutorial\">Mozilla canvas tutorial</a>"
62 <br>Samples ported from the <a href=\"http://developer.mozilla.org/en/docs/Canvas_tutorial\">Mozilla canvas tutorial</a>
63 """
64
65 return SinkInfo("Canvas", text, CanvasTab)
66
67
68 class ColourGridCanvas(GWTCanvas):
69 def __init__(self):
70 GWTCanvas.__init__(self, 150, 150, 150, 150)
71 self.draw()
72 self.addMouseListener(self)
73 self.addKeyboardListener(self)
74
75 def draw(self):
76 for i in range(0, 6):
77 for j in range(0, 6):
78 self.setFillStyle(Color(
79 'rgb(%d,%d,0)' % (floor(255-42.5*i), floor(255-42.5*j))
80 ))
81 self.fillRect(j*25,i*25,25,25)
82
83 def onMouseDown(self, sender, x, y):
84 pass
85
86 def onMouseEnter(self, sender):
87 RootPanel().add(HTML("mouseenter: setting focus (keyboard input accepted)"))
88 self.setFocus(True)
89
90 def onMouseLeave(self, sender):
91 RootPanel().add(HTML("mouseleave: clearing focus (keyboard input not accepted)"))
92 self.setFocus(False)
93
94 def onMouseMove(self, sender, x, y):
95 RootPanel().add(HTML("move: x %d " % x + "y %d" % y))
96
97 def onMouseUp(self, sender, x, y):
98 pass
99
100 def onKeyUp(self, sender, keyCode, modifiers):
101 RootPanel().add(HTML("keyup: %s" % keyCode))
102
103 def onKeyDown(self, sender, keyCode, modifiers):
104 RootPanel().add(HTML("keydown: %s" % keyCode))
105
106 def onClick(self, sender):
107 RootPanel().add(HTML("click"))
108
109 def onKeyPress(self, sender, keyCode, modifiers):
110 RootPanel().add(HTML("keypressed: %s" % keyCode))
111
112
113 class RotatedCanvas(GWTCanvas):
114 def __init__(self):
115 GWTCanvas.__init__(self, 150, 150, 150, 150)
116 self.translate(75,75)
117 self.draw()
118
119 def draw(self):
120 pi = 3.14159265358979323
121 # Loop through rings (from inside to out)
122 for i in range(1,6):
123 self.saveContext()
124 self.setFillStyle(Color('rgb(%d,%d,255)'%((51*i), (255-51*i))))
125
126 # draw individual dots
127 for j in range(0,i*6):
128 self.rotate(pi*2/(i*6))
129 self.beginPath()
130 self.arc(0,i*12.5,5,0,pi*2,True)
131 self.fill()
132
133 self.restoreContext()
134
135
136 class SpheresCanvas(GWTCanvas):
137 def __init__(self):
138 GWTCanvas.__init__(self, 150, 150, 150, 150)
139 self.draw()
140
141 def draw(self):
142 # create gradients
143 radgrad = self.createRadialGradient(45,45,10,52,50,30)
144 radgrad.addColorStop(0, Color('#A7D30C'))
145 radgrad.addColorStop(0.9, Color('#019F62'))
146 radgrad.addColorStop(1, Color('rgba(1,159,98,0)'))
147
148 radgrad2 = self.createRadialGradient(105,105,20,112,120,50)
149 radgrad2.addColorStop(0, Color('#FF5F98'))
150 radgrad2.addColorStop(0.75, Color('#FF0188'))
151 radgrad2.addColorStop(1, Color('rgba(255,1,136,0)'))
152
153 radgrad3 = self.createRadialGradient(95,15,15,102,20,40)
154 radgrad3.addColorStop(0, Color('#00C9FF'))
155 radgrad3.addColorStop(0.8, Color('#00B5E2'))
156 radgrad3.addColorStop(1, Color('rgba(0,201,255,0)'))
157
158 radgrad4 = self.createRadialGradient(0,150,50,0,140,90)
159 radgrad4.addColorStop(0, Color('#F4F201'))
160 radgrad4.addColorStop(0.8, Color('#E4C700'))
161 radgrad4.addColorStop(1, Color('rgba(228,199,0,0)'))
162
163 # draw shapes
164 self.setFillStyle(radgrad4)
165 self.fillRect(0,0,150,150)
166 self.setFillStyle(radgrad3)
167 self.fillRect(0,0,150,150)
168 self.setFillStyle(radgrad2)
169 self.fillRect(0,0,150,150)
170 self.setFillStyle(radgrad)
171 self.fillRect(0,0,150,150)
172
173
174 class PatternCanvas(GWTCanvas):
175 def __init__(self):
176 GWTCanvas.__init__(self, 150, 150, 150, 150)
177 loadImages(['images/wallpaper.png'], self)
178
179 def onImagesLoaded(self, imagesHandles):
180 self.img = imagesHandles[0]
181 self.draw()
182
183 def onError(self):
184 pass
185
186 def draw(self):
187 # in GWTCanvas createPattern is not defined
188 ptrn = self.createPattern(self.img, 'repeat')
189 self.setFillStyle(ptrn)
190 self.fillRect(0,0,200,200)
191
192
193 class SpiroCanvas(GWTCanvas):
194 def __init__(self):
195 GWTCanvas.__init__(self, 300, 300, 300, 300)
196 self.draw()
197
198 def draw(self):
199 self.saveContext()
200 self.fillRect(0,0,300,300)
201 for i in range(0, 3):
202 for j in range(0, 3):
203 self.setStrokeStyle(Color("#9CFF00"))
204 self.saveContext()
205 self.translate(50+j*100,50+i*100)
206 self.drawSpirograph(20*(j+2)/(j+1),-8*(i+3)/(i+1),10)
207 self.restoreContext()
208 self.restoreContext()
209
210 def drawSpirograph(self, R, r, O):
211 pi = 3.14159265358979323
212 x1 = R-O
213 y1 = 0
214 x2 = -1
215 y2 = -1
216 i = 1
217 self.beginPath()
218 self.moveTo(x1,y1)
219 while x2 != R-O and y2 != 0:
220 if i>20000:
221 break
222 x2 = (R+r)*cos(i*pi/72) - (r+O)*cos(((R+r)/r)*(i*pi/72))
223 y2 = (R+r)*sin(i*pi/72) - (r+O)*sin(((R+r)/r)*(i*pi/72))
224 self.lineTo(x2,y2)
225 x1 = x2
226 y1 = y2
227 i+=1
228 self.stroke()
229
230
231 class SolarCanvas(GWTCanvas):
232 def __init__(self):
233 GWTCanvas.__init__(self, 300, 300, 300, 300)
234 loadImages(
235 [
236 'images/sun.png',
237 'images/moon.png',
238 'images/earth.png',
239 ],
240 self,
241 )
242
243 self.isActive = True
244 self.onTimer()
245
246 def onImagesLoaded(self, imagesHandles):
247 self.sun = imagesHandles[0]
248 self.moon = imagesHandles[1]
249 self.earth = imagesHandles[2]
250
251 def onTimer(self, t=None):
252 if not self.isActive:
253 return
254
255 Timer(100, self)
256 self.draw()
257
258 def getTimeSeconds(self):
259 return time.time() % 60
260
261 def getTimeMilliseconds(self):
262 return (time.time() * 1000.0) % 1.0
263
264 def draw(self):
265 pi = 3.14159265358979323
266 if not getattr(self, 'earth', None):
267 return
268
269 self.setGlobalCompositeOperation('destination-over')
270
271 # clear canvas
272 self.clear()
273
274 self.saveContext()
275 self.setFillStyle(Color('rgba(0,0,0,0.4)'))
276 self.setStrokeStyle(Color('rgba(0,153,255,0.4)'))
277 self.translate(150,150)
278
279 # Earth
280 self.rotate( ((2*pi)/60)*self.getTimeSeconds() + ((2*pi)/60000)*self.getTimeMilliseconds() )
281 self.translate(105,0)
282 self.fillRect(0,-12,50,24) # Shadow
283 self.drawImage(self.earth.getElement() ,-12,-12)
284
285 # Moon
286 self.saveContext()
287 self.rotate( ((2*pi)/6)*self.getTimeSeconds() + ((2*pi)/6000)*self.getTimeMilliseconds() )
288 self.translate(0,28.5)
289 self.drawImage(self.moon.getElement(),-3.5,-3.5)
290 self.restoreContext()
291
292 self.restoreContext()
293
294 self.beginPath()
295 self.arc(150,150,105,0,pi*2,False) # Earth orbit
296 self.stroke()
297
298 self.drawImage(self.sun.getElement(),0,0)
299
Something went wrong with that request. Please try again.