PageRenderTime 43ms CodeModel.GetById 17ms RepoModel.GetById 1ms app.codeStats 0ms

/examples/addonsgallery/CanvasTab.py

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