Intégrer basthon - Images en Python
Pas de bibliothèque graphique
La version actuelle de ce site ne permet pas dans un IDE d'appeler les bibliothèques graphiques comme turtle, matplotlib etc.
⏳ Une évolution ultérieure de Pyodide le permettra sûrement.
Utiliser quand même des bibliothèques graphiques
Une façon de remédier à ce problème, est de ne pas utiliser l'IDE intégré, mais un "iframe" (souvent traduit par cadre en ligne)
⏳ Attention, l'affichage des images peut prendre quelques instants.
Pour l'utilisation en console Python, il faut cliquer sur l'icône lorsqu'elle clignote.
I. Méthode utilisant le lien de partage copié sur le site basthon⚓︎
Remarque
Cette méthode n'est pas pratique pour des url très longues. La méthode suivante (II. II. Méthode utilisant un fichier enregistré) est plus pertinante dans ces cas-là, mais nécessite d'avoir enregistré le fichier sur votre site.
Les codes Python avec appel de bilbliothèque graphique
-
Ecrire le code Python :
- Pour un simple éditeur Python : éditeur basthon
- Pour un notebook jupyter : notebook jupyter basthon
-
Récupérer le code sous forme d'url en cliquant sur l'icône "Partager" :
-
Incorporer l'url dans un "iframe" entre
src=
etwidth="..." height="..."
-
Personnaliser les valeurs de
width=
et deheight=
qui correspondent respectivement à la largeur et à la hauteur du cadre ("iframe")
Exemple de modèle de code
Exemple avec turtle
<div class="centre">
<iframe
src=
https://console.basthon.fr/?script=eJxLK8rPVSgpLSrJSVXIzC3ILypR0OLlyshMSYUIamjyciVnFiUDWYYGBkBOQWpeaQFIND2_JF_D1EAHLpySX56HohxDtS5pyg10THGpNdAxJkG9gY4uWDmSdohASn4e0IcAaadINQ
width="900" height="500"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
</div>
Exemple avec un notebook jupyter
<div class="centre">
<iframe
src=
https://notebook.basthon.fr/?ipynb=eJzFVMtu2zAQ_JUFc5EKpfUjvQjwP-TQnqrAYMlVTIRaEnw0NQx_T5Hv8I91GbuxHCBAmjaJTtwdamYwXHIjFFobRfttIwZMUsskRbvZNvf9ZVp7FK0YZLjR7pZEI6LLQZXelyB3vxxFyATRDN4ipGAkXVv8KLbNCZ1IIceEWrS8wEfkymkcE_fBDZBySMzIvC4k-NBRR70LYMAQBBbBal63HQF_3L-VQVezyaTedyz2qZrOSjlIQ9Y5X9UsgT9R5WQcLZXLlERL2dpGuJx8TiWDq0e-nxHD12SsifsckL2QKgIQdncqh2h-IHjeytFIhQG8zdEgAw9ZxVfJSmMPg0umr5RL2ADVcEjL9ECwWMD0T-MQ4Wm0Y3CccWGrT6FR2KVEGxFa-Avuo89PM3YK5zCtX6Le0dnKaNynUdUAZ8AHoaRaIVgJicPJyJuiR9TVpGZ832Nnnn_sqPDDAniQXmlYHu6MNn2_uwtI6X9Nwvi0p_88-C-Wnr2f9Pz9pC_eVvrpCR6b-vy2pp4ncNWcCNxgIH4xPKpSkRwKk1-nlaM5E2oTvZXr5QG4vAegIJavTJbXx-1iy_7oOz8Vg2Tli2OxHAy5INrZ9jff2FnB
width="900" height="900"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
</div>
Exemple avec matplotlib
<div class="centre">
<iframe
src=
https://console.basthon.fr/?script=eJxNi0sKxCAQRPeCd6ilBpFJ9nMYEwIR_DSjIfbto4TA7KpevfKR8q8inZEYriCRFP5h0VUKuQa_WuKRxk6hSiFFw7erNvhUyG27-hjMWgruuGGasAypu3b8VDNg_dfZoOnXKEe-lL4B49spiw
width="900" height="400"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
</div>
Exemple avec p5
Une fois l'image réalisée, vous pourrez déplacer la souris dessus et y déplacer des rectangles.
<div class="centre">
<iframe
src=
https://console.basthon.fr/?script=eJxLK8rPVSgwVcjMLcgvKlHQ4uXi5UpJTVMoTi0pLdDQtOLlUgCC5KLUxJJU58S8ssRiDRMDAx0FIKEJU5tSlFgOV5qWmZOjYWRqqgnhFqUml2jk5pcWp0boKIDpSB0FUwMQBusvKs3T0AQAfQUi4A
width="900" height="500"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
</div>
II. Méthode utilisant un fichier enregistré⚓︎
Exemple de modèle de code
Après avoir mis le fichier mon_fichier.py
dans le dossier scripts
de votre page
Exemple avec turtle
Exemple de modèle de code avec un notebook sur basthon
Après avoir mis le fichier mon_fichier.ipynb
dans le dossier scripts
de votre page
Exemple avec turtle
Ressources
Visiter : Galerie basthon