index.html 12.8 KB
   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
 261
 262
 263
 264
 265
 266
 267
 268
 269
 270
 271
 272
 273
 274
 275
 276
 277
 278
 279
 280
 281
 282
 283
 284
 285
 286
 287
 288
 289
 290
 291
 292
 293
 294
 295
 296
 297
 298
 299
 300
 301
 302
 303
 304
 305
 306
 307
 308
 309
 310
 311
 312
 313
 314
 315
 316
 317
 318
 319
 320
 321
 322
 323
 324
 325
 326
 327
 328
 329
 330
 331
 332
 333
 334
 335
 336
 337
 338
 339
 340
 341
 342
 343
 344
 345
 346
 347
 348
 349
 350
 351
 352
 353
 354
 355
 356
 357
 358
 359
 360
 361
 362
 363
 364
 365
 366
 367
 368
 369
 370
 371
 372
 373
 374
 375
 376
 377
 378
 379
 380
 381
 382
 383
 384
 385
 386
 387
 388
 389
 390
 391
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="last-modified" content="2016-11-02 22:36:13 +0100">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="search-domain" value="">
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/lesson.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon-UJM.ico" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title>Programmer en Python: Bibliothèque Graphique qtido</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a href=".." class="pull-left">
<img class="navbar-logo" src="../assets/img/UJM-logo.svg" alt="UJM logo" />
</a>

<a class="navbar-brand" href="../">Accueil</a>

</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">


<li><a href="../reference/">Réference</a></li>

<li class="dropdown">
<a href="../" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Épisodes <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="../01-introduction/">Introduction</a></li>
<li><a href="../02-terminal-et-bash/">Le Terminal et Bash</a></li>
<li><a href="../03-bash-et-chemins/">Arborescences de Fichier et Bash</a></li>
<li><a href="../04-python-intro/">Un Premier Programme</a></li>
<li><a href="../05-operations-arith/">Opérations sur des Nombres</a></li>
<li><a href="../06-variables-et-types/">Variables et Types</a></li>
<li><a href="../07-erreurs/">Apprendre par l'Erreur</a></li>
<li><a href="../08-fonction-et-aide/">Fonctions Prédéfinies et Aide</a></li>
<li><a href="../09-import-biblio/">Bibliothèques et Importation de Fonctions</a></li>
<li><a href="../10-biblio-qtido/">Bibliothèque Graphique qtido</a></li>
<li><a href="../11-input-conversion/">Entrées Utilisateur</a></li>
<li><a href="../12-condition-if/">Instructions Conditionnelles</a></li>
<li><a href="../13-conditions-else/">Instructions Conditionnelles (2)</a></li>
<li><a href="../14-boucle-while/">Boucles while (tant que)</a></li>
<li><a href="../15-listes-base/">Listes de Valeurs</a></li>
<li><a href="../16-listes-plus/">Listes de Valeurs (2)</a></li>
<li><a href="../17-boucle-for/">Boucles for</a></li>
<li><a href="../18-def-fonctions/">Définitions de fonctions</a></li>
</ul>
</li>

<li><a href="../installation/">Installation</a></li>

<li class="dropdown">
<a href="../" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extras <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="../about/">About</a></li>
<li><a href="../more-bashtips/">Astuces Bash</a></li>
<li><a href="../reference-qtido/">Référence qtido</a></li>
</ul>
</li>

<li><a href="../license/">Licence</a></li>
</ul>
<form class="navbar-form navbar-right" role="search" id="search" onsubmit="google_search(); return false;">
<div class="form-group">
<input type="text" id="google-search" placeholder="Search...">
</div>
</form>
</div>
</div>
</nav>





<div class="row">
<div class="col-md-1">
<h3>
<a href="../09-import-biblio/"><span class="glyphicon glyphicon-menu-left"></span></a>
</h3>
</div>
<div class="col-md-10">
<h3 class="maintitle"><a href="../">Programmer en Python</a></h3>
<h1 class="maintitle">Bibliothèque Graphique qtido</h1>
</div>
<div class="col-md-1">
<h3>
<a href="../11-input-conversion/"><span class="glyphicon glyphicon-menu-right"></span></a>
</h3>
</div>
</div>


<blockquote class="objectives">
<h2>Aperçu</h2>

<div class="row">
<div class="col-md-3">
<strong>Teaching:</strong> 0 min
<br/>
<strong>Exercises:</strong> 0 min
</div>
<div class="col-md-9">
<strong>Questions</strong>
<ul>
<li><p>Comment aller au delà de <code class="highlighter-rouge">print(…)</code> pour interagir avec l’utilisateur ?</p>
</li>
<li><p>Comment tracer des formes géométriques dans une fenêtre ?</p>
</li>
<li><p>Comment exporter un dessin dans un fichier jpeg ou png ?</p>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
<strong>Objectifs</strong>
<ul>
<li><p>Savoir installer et importer la bibliothèque qtido.</p>
</li>
<li><p>Découvrir les fonctions proposées par qtido.</p>
</li>
<li><p>Comprendre le système de coordonnées utilisées pour le tracer de dessins.</p>
</li>
</ul>
</div>
</div>
</blockquote>

<p>La bibliothèque <code class="highlighter-rouge">qtido</code> permet de tracer des dessins dans une fenêtre graphique.
Deux modes sont proposés : un mode « tortue » très simple avec seulement quelques instructions, et un mode « normal » proposant beaucoup plus de fonctionnalités.
Une partie dédiée donne <a href="../reference-qtido">une liste des fonctions de <code class="highlighter-rouge">qtido</code></a>.</p>

<h2 id="donner-des-ordres--une-tortue-pour-tracer">Donner des ordres à une tortue pour tracer</h2>

<p>On imagine une tortue qui porte un stylo et se déplace en traçant un trait sur son chemin.
Au départ la tortue est tournée vers la droite.
La tortue accepte de recevoir différents ordres pour avancer (d’un nombre de pixels), tourner (d’un angle en degrés) ou lever/baisser le stylo.</p>

<p>Voici un exemple, où la tortue trace un triangle équilatéral de coté 100 pixels.</p>
<div class="source highlighter-rouge"><pre class="highlight"><code>from qtido import *

f = creer(800, 600)
t = creer_tortue(f)

t.tortue_avance(100)
t.tortue_droite(120)
t.tortue_avance(100)
t.tortue_droite(120)
t.tortue_avance(100)
</code></pre>
</div>

<blockquote class="challenge">
<h2 id="et-un-triangle-rectangle-">Et un triangle rectangle ?</h2>
<p>Écrire un programme qui utilise la tortue pour tracer un triangle rectangle de cotés 30, 40, 50 pixels ?</p>

<p>Aide :
On peut utiliser Python pour s’aider à calculer la valeur du/des angles.
Les fonctions de la bibliothèque <code class="highlighter-rouge">math</code>, comme <code class="highlighter-rouge">acos</code> (arc cosinus en radians) et <code class="highlighter-rouge">degrees</code> (qui convertis des radians en degrés), peuvent être utiles pour calculer le ou les angles nécessaires.</p>

<blockquote class="solution">
<h2 id="solution">Solution</h2>
<div class="source highlighter-rouge"><pre class="highlight"><code>from qtido import *
import math

f = creer(800, 600)
t = creer_tortue(f)

t.tortue_avance(40)
t.tortue_droite(90)
t.tortue_avance(30)
a = 90 + math.degrees(math.acos(40 / 50))
t.tortue_droite(a)
t.tortue_avance(50)
</code></pre>
</div>
</blockquote>
</blockquote>

<h2 id="tracer-des-figures-gomtriques">Tracer des figures géométriques</h2>

<p>Les coordonnées pour toutes les opérations de tracé sont exprimées dans un repères en pixels.
Contrairement aux repères en mathématiques :</p>
<ul>
<li>le point 0,0 est le premier pixel en haut à gauche de la fenêtre,</li>
<li>les coordonnées Y augmente vers le bas.</li>
</ul>

<p>Ainsi le schéma suivant :</p>

<p><img src="../fig/qtido/rectangle.svg" alt="Repère qtido" /></p>

<p>illustre ce que fait le programme :</p>

<div class="source highlighter-rouge"><pre class="highlight"><code>from qtido import *

# créer une petite fenêtre de 32x13 pixels
f = creer(32, 13)

# changer la couleur de tracé en bleu
couleur(f, 0, 0, 1) # quantités de rouge, vert et bleu

# tracer un rectangle allant de 5,3 inclus à 15,6 exclus
rectangle(f, 5, 3, 15, 6)

# attendre 1 seconde pour voir le dessin avant que le programme ne se quitte
attendre_pendant(f, 1000)
</code></pre>
</div>

<blockquote class="challenge">
<h2 id="quel-programme-trace-la-figure-suivante-">Quel programme trace la figure suivante ?</h2>
<p>Écrire un pogramme qui génère la figure illustrée ci dessous.</p>

<p><img src="../fig/qtido/challenge-rectangles.svg" alt="Repère qtido" /></p>

<blockquote class="solution">
<h2 id="solution-1">Solution</h2>
<div class="source highlighter-rouge"><pre class="highlight"><code>from qtido import *
f = creer(32, 13)

couleur(f, 0, 0, 1)
rectangle(f, 5, 3, 15, 5)
couleur(f, 1, 0, 0)
rectangle(f, 5, 7, 15, 9)
rectangle(f, 17, 3, 19, 5)

attendre_pendant(f, 1000)
</code></pre>
</div>
</blockquote>
</blockquote>

<blockquote class="keypoints">
<h2>Points Clés</h2>
<ul>
<li><p>La bibliothèque <code class="highlighter-rouge">qtido</code> vous est fourni par vos enseignants.</p>
</li>
<li><p>La bibliothèque <code class="highlighter-rouge">qtido</code> permet entre autre de créer des fenêtres graphiques, d’y tracer des figures et du texte, d’y ajouter des boutons, et de gérer les événements clavier et souris.</p>
</li>
<li><p>Pour pouvoir utiliser la bibliothèque <code class="highlighter-rouge">qtido</code>, il faut avoir le fichier <code class="highlighter-rouge">qtido.py</code> à coté du programme qui l’utiliser.</p>
</li>
<li><p>Les coordonnées pour le tracer sont données en pixels, avec le point 0,0 en haut à gauche de la fenêtre.</p>
</li>
<li><p>La bibliothèque <code class="highlighter-rouge">qtido</code> a aussi un mode « tortue ».</p>
</li>
</ul>
</blockquote>


<hr/>
<footer>
<div class="row">
<div class="col-md-6" align="left">
<h4>
Copyright &copy; 2016
</h4>
</div>
<div class="col-md-6" align="right">
<h4>
<!--
<a href="/">Source</a>
/
<a href="/blob/gh-pages/CONTRIBUTING.md">Contributing</a>
/
-->
<a href="mailto:remi.emonet@INVERSE-fr.univ-st-etienne">Contact</a>
</h4>
</div>
</div>
</footer>

</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/lesson.js"></script>

<!-- clicky Cla -->
<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(100779706);
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//static.getclicky.com/js';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>


<!-- Histats.com START (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('http://s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
<!-- Histats.com END -->
</body>
</html>