View  Edit  Attributes  History  Attach  Print  Search

ACCUEIL | ARDUINO > S'INSTALLER > DEBUTER > APPROFONDIR | PROCESSING | MECATRONIQUE | MATERIEL | OUTILS | TESTS | Plus...|
Python > Shell > ATELIERS Python + Qt > PyQt apps > PyQt+Arduino | Mes Robots | RepRap | Mes lib'Arduino | Mes shields Arduino | Mes distros | Les Mini-PC |
ATELIERS ARDUINO| VIDEOS | COMPRENDRE | REFERENCES | CODER | TECHNIQUE | GNU/LINUX | LIENS | Rien à voir |

Processing pour le Web avec Processing JS

Liens utiles

Pour comprendre

  • Il est possible d'embarquer ses programmes Processing dans une page web assez simplement grâce à Processing JS qui "traduit" le code Java d'un programme Processing en code Javascript exécutable côté client.
  • Le principe consiste à intégrer dans la page web un fichier javascript appelé processing.js et qui va traduire le code du programme processing .pde en javascript. Le graphique sera mis à l'intérieur d'un objet canva dans la page web.

Comment çà marche ?

Télécharger processing.js

  • Télécharger le fichier processing.js ici : http://processingjs.org/download
    • Soit la version complète (700ko environ)
    • soit une version réduite (min) (250 ko environ)

Créer un programme Processing

  • Créer un processing et l'enregistrer : on obtient un fichier .pde

Créer la page HTML embarquant le programme Processing

  • Créer un répertoire correspondant à la page HTML
  • Dans ce répertoire, mettre :
    • une copie du fichier processing.js
    • une copie du programme .pde
  • Ouvrir un éditeur de texte :
    • Copier le code suivant (les noms sont à adapter en fonction de fichiers utilisés) :

<script src="processing-1.0.0.js"></script>  
<canvas data-processing-sources="prog_point_rectangle.pde"></canvas>  
 
  • Enregistrer au format .html
  • On obtient le répertoire suivant :
  • A présent, il ne reste plus qu'à ouvrir la page HTML avec le navigateur pour obtenir le programme Processing dans la page.

Un outil d'exportation de Processing vers processing JS

Liens :

Descriptif

  • Cet utilitaire s'intègre dans le sketchbook de processing et permet d'exporter le programme Processing en cours depuis un simple menu en une page HTML opérationnel : dans un répertoire applet_JS on retrouve :
    • la page HTML intégrant le programme processing
    • + le fichier Processing.js
    • + le programme .js
    • + le programme .pde

Installation

  • https://github.com/fjenett/processingjstool/wiki/Getting-started
  • On télécharge le zip, on dézippe, on renomme comme indiqué
  • Ensuite, dans le sketchbook, on crée un répertoire "tools" et on copie dedans le répertoire obtenu ci-dessus
  • On ouvre Processing : le menu tools comporte une ligne export as Processing.js :
  • Il suffit à présent d'ouvrir un programme, de cliquer sur ce menu : on obtient un répertoire applet_JS qui contient la page HTML basique opérationnelle :
  • En ouvrant le fichier index.html, on obtient alors l'affichage de l'exécution du programme Processing dans le navigateur : cooool !!

Exemples

Limites

  • L'embarquement d'un fichier processing dans une page Web se limite aux fonctions graphiques. Les librairies importées ne semblent pas supportées.
  • Les ressources systèmes sont pas mal sollicitées si les calculs à réaliser sont importants

Avec Pmwiki

  • Installer EnableHtml
  • Déclarer 2 balises EnableHtml('canvas') et EnableHtml('script') dans config.php. mais déconseillé..
  • Mettre processing.js dans le répertoire /pub/processing_JS/ ou équivalent... mettre là aussi les fichiers .pde
  • copier les balises à l'endroit voulu dans la page en utilisant chemin entier
  • Normalement, çà fonctionne... (testé le 18/01/2011)

Conclusion

  • çà peut probablement être intéressant pour embarquer dans une page HTML un petit applet interactif, mais çà n'est pas aussi bien que d'utiliser le programme directement dans Processing.