1. Préparer et téléverser le code Arduino

1. Choisissez ou créez un programme Arduino :
• Utilisez les programmes proposés sur le site (section Documentation ou Exemples).
• Pour un programme personnalisé, suivez les instructions disponibles sur la page Documentation.
2. Ouvrez l'IDE Arduino et chargez le fichier .ino correspondant.
3. Connectez la carte Arduino à votre ordinateur via USB et téléversez le code.

2. Télécharger la bibliothèque Web-Sciences

1. Rendez-vous sur le site officiel web-sciences.fr.
2. Pour une utilisation avec Jupyter, téléchargez uniquement la bibliothèque web_sciences.py.
3. Pour une utilisation avec un tableur ou un IDE python, téléchargez également le programme python insere_code.py ainsi que le fichier web_sciences_complet.html

3. Écrire le code JavaScript pour la communication

Le code JavaScript doit être complété en cinq étapes :

a) Choisir le mode de fonctionnement

Définissez le mode :

mode = "temporel"; // ou "point" ou "commande"

b) Définir les commandes à envoyer

Spécifiez les commandes à envoyer à la carte Arduino ainsi que le texte à afficher sur le bouton que l'utilisateur va cliquer:

commandes = [{texte_bouton:"Charge", arduino:"charge"},
             {texte_bouton:"Décharge", arduino:"decharge"}];

Chaque élément du tableau commandesdu type {texte_bouton:"...", arduino:"..."}va créer un bouton qui permet d'envoyer une commande à Arduino.

c) Spécifier les séries renvoyées

Définissez les séries renvoyées par la carte avec leurs unités:

series = [{grandeur: "Uc", unite: "V"}, {grandeur: "E", unite: "V"}];

d) Configurer le graphique

Définissez les axes :

axes = [{grandeur: "t", unite: "ms"}, {grandeur: "U", unite: "V"}];

e) Choisir un titre

Choisissez, si nécessaire, un titre pour le graphique

titre_graphe = "Circuit RC";

f) Eventuellement modifier quelques variables

• Par défaut, le programme utilise 3 chiffres significatifs. Modifiez, si nécessaire, la variable precision

  precision = 5;

• La variable tableur est un boolean qui formatte la Copie presse papier au format tableur. Elle est intialisée à false par defaut.

  tableur = true;

• La variable stop_possible est un boolean qui ajoute un bouton permettant de stopper les mesures dans le cas de mesures temporelles longues. Elle est intialisée à false par defaut.

  stop_possible = true;

• La variable car_par_ligne est un entier qui permet de modifier le nombre de caractères par lignes utilisés chiffres significatifs utilisés dans la Copie presse papier python. Elle est intialisée à 70 par defaut.

  car_par_ligne = 85;

g) Rassembler le code

Placez tout le code JavaScript dans une variable python de type str:

my_init = '''
mode = "temporel";
commandes = [{texte_bouton:"Charge", arduino:"charge"},
             {texte_bouton:"Décharge", arduino:"decharge"}];
series = [{grandeur: "Uc", unite: "V"}, {grandeur: "E", unite: "V"}];
axes = [{grandeur: "t", unite: "ms"}, {grandeur: "U", unite: "V"}];
titre_graphe = "Circuit RC";
'''

II. Utilisation avec Jupyter

Copiez le fichier web_sciences.py dans le même dossier que votre notebook.

Intégrez le code précédent dans une cellule Jupyter :

from web_sciences import WebSciences

my_init = '''
mode = "temporel";
commandes = [{texte_bouton:"Charge", arduino:"charge"},
             {texte_bouton:"Décharge", arduino:"decharge"}];
series = [{grandeur: "Uc", unite: "V"}, {grandeur: "E", unite: "V"}];
titre_graphe = "Circuit RC";
axes = [{grandeur: "t", unite: "ms"}, {grandeur: "U", unite: "V"}];
'''

interface = WebSciences(my_init)
interface.affiche()

Après exécution de la cellule Jupyter, on obtient quelque chose qui ressemble à ceci :

Après avoir cliqué sur le bouton Connexion et connecté la carte Arduino, les boutons s'activent et le graphe apparaît éventuellement :

III. Utilisation avec un tableur ou un IDE python

1. Préparation des fichiers nécessaires

Au préalable, téléchargez les deux fichiers suivants :

• web_sciences_complet.html : Contient le modèle HTML de base.
• insere_code.py : Script Python pour intégrer votre code JavaScript dans un fichier HTML.

2. Copier le code JavaScript dans le fichier Python

1. Récupération du code JavaScript :

   Utilisez le code préparé précédemment, qui configure les variables mode, commandes, series, axes, titre_graphe et éventuellement précision.

2. Modification du fichier insere_code.py :

   Collez le code JavaScript dans la section prévue, par exemple :

   # code javascrit à insérer
   
   my_init = '''
   mode = "temporel";
   commandes = [{texte_bouton:"Charge", arduino:"charge"}, {texte_bouton:"Décharge", arduino:"decharge"}];
   series = [{grandeur: "Uc", unite: "V"}, {grandeur: "E", unite: "V"}];
   axes = [{grandeur: "t", unite: "ms"}, {grandeur: "U", unite: "V"}];
   titre_graphe = "Circuit RC";
   '''

3. Définir le fichier de sortie HTML :

   Ajoutez le nom du fichier HTML généré dans insere_code.py :

   # nom du fichier html de sortie
   nom_sortie = "circuit_rc.html"

3. Générer le fichier HTML

1. Exécuter le script Python :

   Exécutez le programme insere_code.py depuis l'environnement python ou ouvrez un terminal et lancez la commande :

   python insere_code.py

2. Résultat :

   Un fichier HTML sera généré avec le nom défini dans la variable nom_sortie.

4. Exécuter le fichier HTML dans un navigateur

1. Ouvrir le fichier :

   Double-cliquez sur le fichier HTML pour l’ouvrir dans un navigateur compatible avec l'API Web Serial(par exemple Chrome).

2. Interface obtenue :

   Elle sera identique à celle générée dans un notebook Jupyter.

   

   Après avoir cliqué sur le bouton Connexion et connecté la carte Arduino, les boutons s'activent et le graphe apparaît éventuellement :

   

5. Utiliser la sortie avec un tableur

1. Activer le mode tableur :

   Ajoutez ou modifiez la variable suivante dans le code JavaScript avant de générer le fichier HTML :

   tableur = true;

2. Résultat :

   Les données copiées dans le presse-papiers seront formatées pour être collées dans un tableur.

Conclusion

Ce mode d’emploi vous permet d'utiliser la bibliothèque Web-Sciences avec un tableur ou un environnement Python. Partagez le fichier HTML généré avec vos élèves pour une utilisation simple et autonome.

Liens

• La bibliothèque Web Sciences pour Jupyter: web_sciences.py.
• Le fichier web_sciences_complet.html qui contient le modèle HTML de base web_sciences_complet.html.
• Le fichier insere_code.pypour créer un fichier html utilisable avec un tableur ou un IDE python insere_code.py.