PageRenderTime 43ms CodeModel.GetById 2ms app.highlight 37ms RepoModel.GetById 1ms app.codeStats 0ms

/examples/addonsgallery/CanvasTab.py

http://pyjamas.googlecode.com/
Python | 241 lines | 196 code | 41 blank | 4 comment | 18 complexity | ae1977ece85294b77fc655543306c063 MD5 | raw file
  1from Sink import Sink, SinkInfo
  2from ui import Image, HTML, VerticalPanel, HorizontalPanel
  3from Canvas import Canvas, CanvasImage, ImageLoadListener
  4from Timer import Timer
  5import math
  6
  7class CanvasTab(Sink):
  8    def __init__(self):
  9        colour_grid = ColourGridCanvas()
 10        rotated = RotatedCanvas()       
 11        spheres = SpheresCanvas()
 12        pattern = PatternCanvas()
 13        spiro = SpiroCanvas()
 14        self.solar = SolarCanvas()
 15        
 16        row0 = HorizontalPanel()
 17        row0.setSpacing(8)
 18        row0.add(colour_grid)
 19        row0.add(rotated)
 20        row0.add(spheres)
 21        row0.add(pattern)
 22        
 23        row1 = HorizontalPanel()
 24        row1.setSpacing(8)
 25        row1.add(self.solar)
 26        row1.add(spiro)
 27
 28        panel = VerticalPanel()
 29        panel.add(row0)
 30        panel.add(row1)
 31
 32        self.setWidget(panel)
 33
 34    def onShow(self):
 35        self.solar.isActive = True
 36        self.solar.onTimer()
 37    
 38    def onHide(self):
 39        self.solar.isActive = False
 40
 41
 42def init():
 43    text=r"<b>Canvas vector drawing component</b><p>Gives python access to the browser's native canvas tag (<a href=\"http://excanvas.sourceforge.net\">Explorer Canvas</a> in IE)"
 44    text+=r"<p>Originally by Alexei Sokolov at <a href=\"http://gwt.components.googlepages.com\">gwt.components.googlepages.com</a>"
 45    text+=r"<br>Samples ported from the <a href=\"http://developer.mozilla.org/en/docs/Canvas_tutorial\">Mozilla canvas tutorial</a>" 
 46    
 47    return SinkInfo("Canvas", text, CanvasTab)
 48
 49
 50class ColourGridCanvas(Canvas):
 51    def __init__(self):
 52        Canvas.__init__(self, 150, 150)
 53        self.draw()
 54        
 55    def draw(self):
 56        for i in range(0, 6):
 57            for j in range(0, 6):
 58                self.context.fillStyle = 'rgb(' + math.floor(255-42.5*i) + ',' + math.floor(255-42.5*j) + ',0)'
 59                self.context.fillRect(j*25,i*25,25,25)
 60
 61
 62class RotatedCanvas(Canvas):
 63    def __init__(self):
 64        Canvas.__init__(self, 150, 150)
 65        self.context.translate(75,75)
 66        self.draw()
 67        
 68    def draw(self):
 69        # Loop through rings (from inside to out)
 70        for i in range(1,6):
 71            self.context.save()
 72            self.context.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'
 73        
 74            # draw individual dots
 75            for j in range(0,i*6): 
 76                self.context.rotate(math.pi*2/(i*6))
 77                self.context.beginPath()
 78                self.context.arc(0,i*12.5,5,0,math.pi*2,True)
 79                self.context.fill()
 80        
 81            self.context.restore()
 82
 83
 84class SpheresCanvas(Canvas):
 85    def __init__(self):
 86        Canvas.__init__(self, 150, 150)
 87        self.draw()
 88        
 89    def draw(self):
 90        # create gradients
 91        radgrad = self.context.createRadialGradient(45,45,10,52,50,30)
 92        radgrad.addColorStop(0, '#A7D30C')
 93        radgrad.addColorStop(0.9, '#019F62')
 94        radgrad.addColorStop(1, 'rgba(1,159,98,0)')
 95  
 96        radgrad2 = self.context.createRadialGradient(105,105,20,112,120,50)
 97        radgrad2.addColorStop(0, '#FF5F98')
 98        radgrad2.addColorStop(0.75, '#FF0188')
 99        radgrad2.addColorStop(1, 'rgba(255,1,136,0)')
100
101        radgrad3 = self.context.createRadialGradient(95,15,15,102,20,40)
102        radgrad3.addColorStop(0, '#00C9FF')
103        radgrad3.addColorStop(0.8, '#00B5E2')
104        radgrad3.addColorStop(1, 'rgba(0,201,255,0)')
105
106        radgrad4 = self.context.createRadialGradient(0,150,50,0,140,90)
107        radgrad4.addColorStop(0, '#F4F201')
108        radgrad4.addColorStop(0.8, '#E4C700')
109        radgrad4.addColorStop(1, 'rgba(228,199,0,0)')
110 
111        # draw shapes
112        self.context.fillStyle = radgrad4
113        self.context.fillRect(0,0,150,150)
114        self.context.fillStyle = radgrad3
115        self.context.fillRect(0,0,150,150)
116        self.context.fillStyle = radgrad2
117        self.context.fillRect(0,0,150,150)
118        self.context.fillStyle = radgrad
119        self.context.fillRect(0,0,150,150)
120
121
122class PatternCanvas(Canvas):
123    def __init__(self):
124        Canvas.__init__(self, 150, 150)
125        self.img = CanvasImage('images/wallpaper.png', self)
126
127    def onLoad(self, sender):
128        if sender==self.img:
129            self.draw()
130    
131    def onError(self):
132        pass
133
134    def draw(self):
135        ptrn = self.context.createPattern(self.img, 'repeat')
136        self.context.fillStyle = ptrn
137        self.context.fillRect(0,0,200,200)
138
139
140class SpiroCanvas(Canvas):
141    def __init__(self):
142        Canvas.__init__(self, 300, 300)
143        self.draw()     
144
145    def draw(self):
146        self.context.fillRect(0,0,300,300)
147        for i in range(0, 3):
148            for j in range(0, 3):
149                self.context.save()
150                self.context.strokeStyle = "#9CFF00"
151                self.context.translate(50+j*100,50+i*100)
152                self.drawSpirograph(20*(j+2)/(j+1),-8*(i+3)/(i+1),10)
153                self.context.restore()
154
155    def drawSpirograph(self, R, r, O):
156        x1 = R-O
157        y1 = 0
158        i  = 1
159        self.context.beginPath()
160        self.context.moveTo(x1,y1)
161        while x2 != R-O and y2 != 0:
162            if i>20000:
163                break
164            x2 = (R+r)*math.cos(i*math.pi/72) - (r+O)*math.cos(((R+r)/r)*(i*math.pi/72))
165            y2 = (R+r)*math.sin(i*math.pi/72) - (r+O)*math.sin(((R+r)/r)*(i*math.pi/72))
166            self.context.lineTo(x2,y2)
167            x1 = x2
168            y1 = y2
169            i+=1
170        self.context.stroke()
171
172
173class SolarCanvas(Canvas):
174    def __init__(self):
175        Canvas.__init__(self, 300, 300)     
176        self.sun = CanvasImage('images/sun.png')
177        self.moon = CanvasImage('images/moon.png')
178        self.earth = CanvasImage('images/earth.png')
179        
180        self.loader = ImageLoadListener()
181        self.loader.add(self.sun)
182        self.loader.add(self.moon)
183        self.loader.add(self.earth) 
184        
185        self.isActive = True
186        self.onTimer()
187
188    def onTimer(self):
189        if not self.isActive:
190            return
191        
192        Timer(100, self)
193        self.draw()
194
195    def getTimeSeconds(self):
196        JS("""
197        var x = new Date();
198        return x.getSeconds();
199        """)
200
201    def getTimeMilliseconds(self):
202        JS("""
203        var x = new Date();
204        return x.getMilliseconds();
205        """)
206
207    def draw(self):
208        if not self.loader.isLoaded():
209            return
210        
211        self.context.globalCompositeOperation = 'destination-over'
212
213        # clear canvas
214        self.context.clearRect(0,0,300,300) 
215        
216        self.context.save()
217        self.context.fillStyle = 'rgba(0,0,0,0.4)'
218        self.context.strokeStyle = 'rgba(0,153,255,0.4)'
219        self.context.translate(150,150)
220        
221        # Earth
222        self.context.rotate( ((2*math.pi)/60)*self.getTimeSeconds() + ((2*math.pi)/60000)*self.getTimeMilliseconds() )
223        self.context.translate(105,0)
224        self.context.fillRect(0,-12,50,24) # Shadow
225        self.context.drawImage(self.earth,-12,-12)
226        
227        # Moon
228        self.context.save()
229        self.context.rotate( ((2*math.pi)/6)*self.getTimeSeconds() + ((2*math.pi)/6000)*self.getTimeMilliseconds() )
230        self.context.translate(0,28.5)
231        self.context.drawImage(self.moon,-3.5,-3.5)
232        self.context.restore()
233        
234        self.context.restore()
235        
236        self.context.beginPath()
237        self.context.arc(150,150,105,0,math.pi*2,False) # Earth orbit
238        self.context.stroke()
239        
240        self.context.drawImage(self.sun,0,0)
241