-
Notifications
You must be signed in to change notification settings - Fork 514
/
index.html
260 lines (207 loc) · 9.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Brython">
<meta name="keywords" content="Python,Brython">
<meta name="author" content="Pierre Quentel">
<title>Brython</title>
<link rel="icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src="/src/brython.js"></script>
<script type="text/javascript" src="/src/brython_stdlib.js"></script>
<link rel="stylesheet" href="/brython.css">
<script src="/assets/header.brython.js"></script>
<script type="text/python">
"""Load header and text according to the language."""
from browser import document, html
import header
# Get the language specified in the query string (lang=...) and in the browser
# settings.
qs_lang, language = header.show()
# Adapt content to selected language
document["content"].html = document[f"content_{language}"].html
if qs_lang:
document[f"c_{qs_lang}"].href += f"?lang={qs_lang}"
</script>
<script type="text/python">
"""Code for the clock"""
import time
import math
from browser import document
import browser.timer
content = document["content"]
sin, cos = math.sin, math.cos
width, height = 250, 250 # canvas dimensions
ray = 100 # clock ray
background = "SteelBlue"
digits = "#fff"
border = "blue"
def needle(angle, r1, r2):
"""Draw a needle at specified angle in specified color.
r1 and r2 are percentages of clock ray.
"""
x1 = width / 2 - ray * cos(angle) * r1
y1 = height / 2 - ray * sin(angle) * r1
x2 = width / 2 + ray * cos(angle) * r2
y2 = height / 2 + ray * sin(angle) * r2
ctx.beginPath()
ctx.strokeStyle = "#fff"
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.stroke()
def set_clock():
# erase clock
ctx.beginPath()
ctx.fillStyle = background
ctx.arc(width / 2, height / 2, ray * 0.89, 0, 2 * math.pi)
ctx.fill()
# redraw hours
show_hours()
# print day
now_time = time.time()
now = time.localtime(now_time)
microsecs = now_time - int(now_time)
day = now.tm_mday
ctx.font = "bold 14px Arial"
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillStyle = "#000"
ctx.fillText(day, width * 0.7, height * 0.5)
# draw needles for hour, minute, seconds
ctx.lineWidth = 2
hour = now.tm_hour % 12 + now.tm_min / 60
angle = hour * 2 * math.pi / 12 - math.pi / 2
needle(angle, 0.05, 0.45)
minute = now.tm_min
angle = minute * 2 *math.pi / 60 - math.pi / 2
needle(angle, 0.05, 0.7)
ctx.lineWidth = 1
second = now.tm_sec + microsecs
angle = second * 2 * math.pi / 60 - math.pi / 2
needle(angle, 0.05, 0.8)
def show_hours():
ctx.beginPath()
ctx.arc(width / 2, height / 2, ray * 0.05, 0, 2 * math.pi)
ctx.fillStyle = digits
ctx.fill()
for i in range(1, 13):
angle = i * math.pi / 6 - math.pi / 2
x3 = width / 2 + ray * cos(angle) * 0.82
y3 = height / 2 + ray * sin(angle) * 0.82
ctx.font = "18px Arial"
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillText(i, x3, y3)
# cell for day
ctx.fillStyle = "#fff"
ctx.fillRect(width * 0.65, height * 0.47, width * 0.1, height * 0.06)
canvas = content.select_one(".clock")
# draw clock border
if hasattr(canvas, 'getContext'):
ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.arc(width / 2, height / 2, ray, 0, 2 * math.pi)
ctx.fillStyle = background
ctx.fill()
browser.timer.set_interval(set_clock, 100)
show_hours()
else:
content.select_one('.navig_zone').html = "canvas is not supported"
</script>
</head>
<body onload="brython(1)">
<noscript>Please enable Javascript to view this page correctly.</noscript>
<div id="banner_row">
<span class="logo"><a href="/index.html">brython</a></span>
</div>
<div id="content"></div>
<div id="content_en" style="height:1px;visibility:hidden">
<table style="width:85%;margin-left:10%">
<tr>
<td>
<H2>A Python 3 implementation for client-side web programming</H2>
</td>
</tr>
</table>
<table style="width:85%;margin-left:10%">
<tr>
<td style="width:65%;font-size:16px;">
Without a doubt, you've seen a clock like this in demos of HTML5
<p>
However, right click and view the source of this page...
<p>It is not Javascript code! Instead, you will find Python code in a script of type "text/python".
<p>Brython is designed to replace Javascript as the scripting language for the Web. As such, it is a Python 3 implementation (you can take it for a test drive through a web <a href="console.html" id="c_en">console</a>), adapted to the HTML5 environment, that is to say with an interface to the DOM objects and events.
<p><a href="speed_results.html">Speed of execution</a> is similar to CPython for most operations.
<p>The <a href="gallery/gallery_en.html">gallery</a> highlights a few of the possibilities, from creating simple document elements to drag and drop and 3D navigation. A <a href="https://github.com/brython-dev/brython/wiki/Brython%20in%20the%20wild">wiki</a> lists some applications using Brython.
<!-- <p><a href="http://pyschool.net">pyschool.net</a> provides a web-based environment for teachers in Python classes. -->
<p>You can also take a look at <a href="https://github.com/brython-dev/brython/wiki/Brython-videos-and-talks">presentations</a> made in various conferences.</td>
<td style="padding-left:5%;">
<canvas width="250" height="250" class="clock">
<i>sorry, Brython can't make the demo work on your browser ; <br>check if Javascript is turned on</i>
<br><div class="navig_zone"></div>
</canvas>
</td>
</tr>
</table>
</div>
<div id="content_fr" style="height:1px;visibility:hidden">
<table style="width:80%;margin-left:10%">
<tr>
<td>
<H2>Une implémentation de Python 3 pour la programmation web côté client</H2>
</td>
</tr>
</table>
<table style="width:80%;margin-left:10%">
<tr>
<td style="width:60%;font-size:16px;">
Des horloges comme celle-ci, vous en avez sans doute déjà vu dans des démos d'HTML5
<p>
Maintenant, regardez le code source de cette page...
<p>Vous ne verrez pas une ligne de Javascript, mais à la place, du code Python dans un script de type "text/python".
<p>Brython a pour objectif de remplacer Javascript comme langage de script des pages Web. Il s'agit donc d'une implémentation de Python 3 (que vous pouvez tester sur la <a href="console.html" id="c_fr">console</a>), adaptée à l'environnement HTML5, c'est-à-dire dotée d'une interface avec les objets et les événements DOM.
<p>La <a href="speed_results.html">vitesse d'exécution</a> est comparable à celle de CPython pour la plupart des opérations.
<p>Une <a href="gallery/gallery_fr.html">galerie</a> présente quelques démos de ce qu'il est possible de faire, depuis la création d'éléments simples jusqu'au glisser-déposer ou la navigation 3D. Un <a href="https://github.com/brython-dev/brython/wiki/Brython%20in%20the%20wild">wiki</a> répertorie quelques applications utilisant Brython.
<!-- <p><a href="http://pyschool.net">pyschool.net</a> fournit un environnement web pour l'enseignement de Python. -->
<p>Vous pouvez également consulter <a href="https://github.com/brython-dev/brython/wiki/Brython-videos-and-talks">plusieurs présentations de Brython</a> dans diverses conférences.
</td>
<td style="padding-left:5%;">
<canvas width="250" height="250" class="clock">
<i>désolé, Brython n'arrive pas à faire fonctionner la démo sur votre navigateur ;<br>vérifiez que Javascript est activé</i>
<br><div class="navig_zone"></div>
</canvas>
</td>
</tr>
</table>
</div>
<div id="content_es" style="height:1px;visibility:hidden">
<table style="width:80%;margin-left:10%;">
<tr>
<td>
<H2>Una implementación de Python para la programación web del lado del cliente</H2>
</td>
</tr>
</table>
<table style="width:80%;margin-left:10%">
<tr>
<td style="width:60%;font-size:16px;">
Muy cierto que has visto relojes de este tipo en demos de HTML5.
<p>
Pero, mira el código fuente de esta página...
<p>No hay lineas de Javascript, es puro código Python dentro de un script de tipo "text/python".
<p>Brython es diseñado para remplazar a JavaScript como lenguaje de scripting para páginas web. Por lo tanto, es una implementación de Python 3 (que se puede probar en la <a href="console.html" id="c_es">consola</a>), adaptada a un entorno HTML5, es decir, con una interfaz con los objetos y eventos DOM.
<p>Una <a href="gallery/gallery_es.html">galería</a> presenta algunas maquetas de lo que se puede hacer, de la creación de elementos, a ejemplos de arrastrar y soltar a navegación 3D.
<p>Una <a href="https://github.com/brython-dev/brython/wiki/Brython%20in%20the%20wild">wiki</a> que muestra un listado de algunas aplicaciones que funcionan usando Brython.
<p>Además, le puedes echar un vistazo a<a href="https://github.com/brython-dev/brython/wiki/Brython-videos-and-talks"> estas presentaciones</a> mostradas en varias conferencias.
</td>
<td style="padding-left:5%;">
<canvas width="250" height="250" class="clock">
<i>El navegador no soporta HTML5 canvas<br>o el Javascript es apagado</i>
<br><div class="navig_zone"></div>
</canvas>
</td>
</table>
</div>
</body>
</html>