Guide utilisateur Semmlabs

Table des matières Chapitre - Titre de l'animation... 4 Chapitre 2 - Saisie de la dimension des images... 6 Chapitre 3 - Dimensions de l'animation finale... 9 Chapitre 4 - Sélection des images... Chapitre 5 - Variables... 6 Chapitre 6 - Couleur de contour de zones... 33 Chapitre 7 - Zones... 35 Chapitre 8 - Associations automatique des images avec les zones et les variables... 40 Chapitre 9 - Enregistrement et exportation... 44 Chapitre 0 - Exportation de l'animation... 46 Chapitre - Lancement de l'animation... 48 Chapitre 2 - Comment ranger les images avant de les introduire dans Semmlabs... 54 3

Guide utilisateur Semmlabs Titre de l'animation Titre de l'animation Chapitre Saisie du titre de l'animation Cliquer sur Titre pour afficher la fenêtre de saisie à droite 2 Entrer le titre de l'animation 4

Titre de l'animation Guide utilisateur Semmlabs par exemple: Force de Laplace 5

Guide utilisateur Semmlabs Saisie de la dimension des images Saisie de la dimension des images Chapitre 2 Ouvrir le dossier dans lequel vous avez rangé vos images préalablement ordonnées: ouvrir le dossier dans lequel se trouve les images préalablement ordonnées. consulter la rubrique "ordonner les images" avant d'introduire celles-ci dans SemmlabsEditor 2 cliquer sur n'importe quelle image pour accéder à ses dimensions. 6

Saisie de la dimension des images Guide utilisateur Semmlabs 3 noter les dimensions de l'image (sur un postit ou un notepad ou...) par exemple ici : largeur 3265 hauteur 3302 pixels Entrer les dimensions de l'image Cliquer sur DimensionImage pour ouvrir la fenêtre de droite correspondante 2 7

Guide utilisateur Semmlabs Saisie de la dimension des images Entrer la largeur et la hauteur des images Vous pouvez ajuster les valeurs grâce aux flèches: vers le haut pour augmenter la valeur vers le bas pour diminuer la valeur par exemple: largeur= 3265 hauteur=3302 8

Dimensions de l'animation finale Guide utilisateur Semmlabs Dimensions de l'animation finale Chapitre 3 Choisir les dimensions de l'animation finale telle qu'elle apparaîtra dans le navigateur Cliquer sur le champ DimensionScene pour afficher la fenêtre correspondante à droite 2 Entrer la valeur de la largeur (et la hauteur s'ajustera en fonction de la valeur entrée) ou entrer la valeur de la hauteur (et la largeur s'ajustera en fonction de la valeur entrée) 9

Guide utilisateur Semmlabs Dimensions de l'animation finale par exemple: on a entré Largeur = 800 et la Hauteur s'est ajustée à 809 compte-tenu des dimensions des images source. 0

Sélection des images Guide utilisateur Semmlabs Sélection des images Chapitre 4 Sélectionner le répertoire où sont stockées les images qui feront partie de l'animation Cliquer sur le champ Images pour afficher la fenêtre correspondante à droite 2 Cliquer sur Ajouter des images pour ouvrir le répertoire où sont stockées les images.

Guide utilisateur Semmlabs Sélection des images Sélectionner les images qui feront partie de l'animation Sélectionner le répertoire où sont stockées les images 2

Sélection des images Guide utilisateur Semmlabs 2 Sélectionner les images ordonnées situées dans le répertoire contenant les images. Vérifier le nombre d'images sélectionnées 3

Guide utilisateur Semmlabs Sélection des images Développer le répertoire images en cliquant sur + devant Images Refermer le répertoire Images en cliquant sur - devant Images Vous pouvez afficher chacune des images sélectionnées ainsi que leur chemin 4

Sélection des images Guide utilisateur Semmlabs Cliquer sur un nom d'image pour l'afficher dans la fenêtre de droite par exemple: I m a g e 8 l a p l a c e 0 0 7. j p g chemin:html5_02_06_205/laplace_semmlabs_travaillées/laplace007.jpg Vous pouvez ainsi faire défiler chaque image pour vérifier qu'elles sont toutes rangées dans le bon ordre! 5

Guide utilisateur Semmlabs Variables Variables Chapitre 5 Introduction des variables régissant l'animation Cliquer sur le champ Variables pour afficher la fenêtre correspondante à droite 2 Cliquer sur Ajouter une variable pour ajouter une variable 6

Variables Guide utilisateur Semmlabs La variable Variable a été ajoutée à la liste des variables Dans la rubrique Variables apparaît le nombre de variables créées: ici : variable créée pour l'instant et le nom de cette variable... ici : Variable qui pour l'instant n'a pas de nom. Sans nom apparaît à coté de Variable ainsi que [Non défini] que nous définirons un peu plus loin... et que nous allons renseigner en cliquant sur Variable pour la définir dans la fenêtre de droite 7

Guide utilisateur Semmlabs Variables Propriétés de la variable Cliquer sur le champ: Variable pour définir les propriétés et les valeurs de la Variable dans la fenêtre de droite 2 Choisir le nom de la variable 3 Cochez la case si c'est une variable d'environnement 8

Variables Guide utilisateur Semmlabs La variable est dite d' " environnement" lorsqu'elle induit un changement de l'image de fond par un changement majeur de l'un des paramètres. Par exemple: ici le sens du courant (par inversion des branchements sur l'alimentation) sera considérée comme variable d'environnement puisque selon le sens du courant il correspondra à tel ou tel lot d'images. Dans l'étude du point critique de SF6, la variation de la pression en fonction du volume de SF6 est conditionné par la température dans laquelle baigne l'éprouvette (température régulée par une circulation d'eau à température réglable par un bain thermostatique. L'ensemble des relevés de pression et volume est fonction d'un paramètre extérieur qui est la température. Ajouter une valeur 9

Guide utilisateur Semmlabs Variables Variable s'est vu attribué son titre et sa qualité par exemple ici: sens du courant et variable qualifiée d'environnement 2 il faut maintenant donner des valeurs à la variable: Variable. Si le nombre de valeurs est faible on peut les ajouter valeur après valeur en cliquant sur Ajouter une valeur par exemple: le sens du courant a 2 valeurs: sens positif sens négatif cliquer sur Ajouter une valeur Développer une variable 20

Variables Guide utilisateur Semmlabs développer Variable en cliquant sur le + situé devant Variable Donner une valeur à la variable 2

Guide utilisateur Semmlabs Variables Valeur est apparu sous Variable. Cliquer sur Valeur pour ouvrir la fenêtre de droite permettant de renseigner le champ Nom 2 Renseigner le champ Nom qui peut être de type numérique ou alpha numérique. par exemple ici: sens positif Donner une seconde valeur à la variable 22

Variables Guide utilisateur Semmlabs Cliquer sur Variable pour ajouter une nouvelle valeur: Valeur2 Renseigner cette valeur 23

Guide utilisateur Semmlabs Variables Cliquer sur Valeur2 pour définir sa valeur par exemple ici : sens négatif Ajouter une autre variable 24

Variables Guide utilisateur Semmlabs Cliquer à nouveau sur Variables pour ajouter une nouvelle variable: Variable2 Définir la variable 25

Guide utilisateur Semmlabs Variables Renseigner le champ: Nom de la variable Variable2 ici: intensité du courant 2 l'intensité du courant n'est pas une variable d'environnement: ne pas cocher la case correspondante En effet l'intensité du courant sera ajustée par l'expérimentateur en tournant le bouton: réglage de l'intensité de l'alimentation continue 26

Variables Guide utilisateur Semmlabs 3 le nombre de valeurs à affecter à la variable intensité du courant est important! Aussi nous allons ajouter ces valeurs en utilisant le bouton Ajouter des valeurs Commençons tout d'abord par repérer entre quelle et quelle valeur varie l'intensité du courant et éventuellement quel est le pas de variation: l'intensité varie de 0 à 3 A par pas de 50 ma dans le sens positif et de 0 à 3 A par pas de 50 ma dans le sens négatif ce qui nous conduit à introduire 22 valeurs qui correspondent bien aux 22 images Ajouter des valeurs 27

Guide utilisateur Semmlabs Variables Vous pouvez indiquer l'unité de votre variable dans le champ Titre de la valeur ici des ma ce champ n'est pas obligatoire le Titre de la valeur peut être placé avant ou après [v] 2 Indiquer la première valeur que prend la variable intensité du courant ici: 0 ma 3 Indiquer le pas d'incrémentation de la variable ici 50 ma Vous ne pouvez ajouter une série de valeurs que si elles sont séparées par un pas constant 4 Indiquer le nombre d'incrémentations ici 6 valeurs pour le sens positif du courant 28

Variables Guide utilisateur Semmlabs 5 Vous pouvez prévisualiser les valeurs de la variable dans cette fenêtre avant de les ajouter à votre variable 6 Terminer en cliquant sur le bouton Ajouter des valeurs Visualiser les valeurs ou Supprimer les valeurs 29

Guide utilisateur Semmlabs Variables les valeurs entrées apparaissent en développant Variable2 par un clic sur le + situé devant Variable2 2 Si vous vous êtes trompés dans l'introduction des valeurs, vous pouvez suuprimer toutes les valeurs entrées en cliquant sur Supprimer toutes les valeurs Ajouter d'autres valeurs 30

Variables Guide utilisateur Semmlabs Ajouter d'autres valeurs si nécessaire en cliquant sur Ajouter des valeurs ajouter ici 6 valeurs de 0 à 3 A par pas de 50 ma pour le sens négatif du courant Il est impératif que le nombre de valeurs correspondent au nombre d'images sinon les Associations ne pourront pas se faire. Nous avons ici rentrer 2 fois 6 valeurs ce qui correspond bien à 22 images Valeur de la variable par défaut 3

Guide utilisateur Semmlabs Variables Il rest à déterminer la valeur par défaut de la variable, valeur par laquelle commencera l'animation des images ici nous choisissons 0 ma il est indispensable de renseigner ce champ car la compilation de l'animation ne fonctionnera pas 32

Couleur de contour de zones Guide utilisateur Semmlabs Couleur de contour de zones Chapitre 6 Couleur Parfois le contour des zones n'apparaît pas correctement sur l'image de fond dont on ne maîtrise pas les couleurs. En cliquant sur CouleurZones vous allez pouvoir choisir la couleur de contour des zones. 2 33

Guide utilisateur Semmlabs Couleur de contour de zones Vous pouvez rentrer les composantes RVB de la couleur et la visualiser immédiatement à droite. 3 Vous pouvez en cliquant sur Sélectionner une couleur choisir la couleur dans la palette proposée en dessous ou en entrant les composantes RVB de la couleur. 34

Zones Guide utilisateur Semmlabs Zones Chapitre 7 Nous allons décrire les zones actives de type translation ou rotation et les zones réactives Création de zones déployer la rubrique Zones en cliquant sur le + devant Zones il apparaît une zone: Zone0 qui correspond à l'image de fond et que nous ne pouvons pas modifier 2 35

Guide utilisateur Semmlabs Zones Cliquer sur Ajouter une zone pour créer une nouvelle zone Définition d'une zone Une nouvelle zone: Zone est apparue sous la rubrique Zones en plus de l'image de fond. Cliquer sur Zone pour faire apparaître ses propriétés dans la fenêtre de droite. 2 Entrer le nom de la zone ici: bouton intensité 36

Zones Guide utilisateur Semmlabs 3 Choisir le type de zone: active ou réactive? La zone est dite active lorsque le déplacement du curseur souris sur cette zone engendrera une action dans l'animation (rotation d'un bouton, déplacement d'un curseur). La zone est dite réactive lorsqu'elle voit son affichage évoluer en fonction des actions menées sur les zones réactives (affichage d'un multimètre, de l'écran d'un oscilloscope, etc...) ici nous cochons intensité Zone active car le curseur souris va devoir agir sur la rotation du bouton 4 Choisir si la zone est zoomable ou non? Si nous choisissons de rendre zoomable cette zone nous aurons la possibilité d'afficher cette zone dans une fenêtre auxiliaire et de l'agrandir de façon plus ou moins importante tout en consernat l'action sur cette zone à l'aide de la souris. Rendre une zone zoomable est particulièrement intéressant lorsque l'on veut agir sur des zones de l'image assez petites ou pour rendre plus accessible la lecture des données de la manipulation. ici nous avons choisi de rendre le bouton intensité zoomable. choisir le zoom initial (qui par défaut est à ) pour déterminer à quel grandissement apparaîtra la zone à l'appel du zoom 5 Choisir le Type de zone: horizontal : correspond à un mouvement de translation horizontal (curseur horizontal par exemple) vertical : correspond à un mouvement de translation vertical (curseur vertical par exemple) rotation : correspond à un mouvement de rotation (bouton de réglage d'une tension ou d'un 37

Guide utilisateur Semmlabs Zones courant sur une alimentation par exemple) nous avons choisi ici: rotation puisqu'il s'agit de faire tourner le bouton de réglage de l'intensité du courant circulant dans le montage. 6 La plupart du temps le bouton se résume en une couronne circulaire ayant une certaine largeur nous la fixons ici à 30 pixels mais nous pourrons la modifier lorsque nous placerons l'élément sur l'image 7 Définir le sens de rotation du bouton: horaire ou anti horaire 8 Définir le pas de rotation en degrés ici nous avons choisi 0 si le pas est trop petit ( ) le fait de déplacer la souris sur la zone active provoquera un changement trop rapide des images correspondante si le pas est trop grand (20 et plus) il faudra davantage déplacer le curseur souris pour obtenir la rotation (du bouton par exemple) une valeur correcte semble être 0 dans la plupart des cas 9 Définir la Variable associée à la zone correspondante la Variable associée est celle qui varie lorsqu'on manoeuvre la zone active 38

Zones Guide utilisateur Semmlabs ici la Variable associée est la Variable2: intensité du courant puisque c'est l'intensité du courant que l'on va faire varier en tournant le bouton de réglage de l'alimentation continue. 0 Indiquer quelles sont les dépendances, c'est à dire de quelles variables dépendent le changement d'affichage de l'image lorsqu'on agit sur la zone active ici on sélectionnera: Variable et Variable2 (en shiftant avec la touche clavier: flèche vers le haut) car l'image de la zone réactive est sélectionnée suivant le sens du courant et la valeur de l'intensité. Définir la zone correspondante sur l'image de fond en cliquant sur: Définir la zone graphiquement 39

Guide utilisateur Semmlabs Associations automatique des images avec les zones et les variables Chapitre 8 Associations automatique des images avec les zones et les variables Associations automatique Cliquer sur Associations pour faire apparaître la fenêtre de droite 2 Cliquer sur le bouton Ajouter les associations automatiquement pour associer automatiquement les 40

Associations automatique des images avec les zones et les variables Guide utilisateur Semmlabs images aux zones et aux variables Visualisation des associations S'il n'y a pas eu d'erreurs (apparition d'un message signalant que le nombre d'images ne correspond pas aux associations possibles) le npmbre d'associations apparaît à coté d'associations. ici 22 associations qui correspondent bien aux 22 images 2 Cliquer sur une association pour observer dans la fenêtre de droite l'association sélectionnée. 4

Guide utilisateur Semmlabs Associations automatique des images avec les zones et les variables ici l'image: IMG_00.JPG est associée: à la Valeur c'est à dire sens positif de la Variable (sens du courant) à la Valeur8 c'est à dire 350 ma de la Variable2 (intensité du courant) Supprimer les associations Un message d'informations vous indique qu'il y a le bon nombre d'associations 2 Le nombre d'associations est affiché à la suite d'associations 42

Associations automatique des images avec les zones et les variables Guide utilisateur Semmlabs 3 Si'il y a un message d'erreur vous avez la possibilité de corriger en effaçant les associations en cliquant sur : Supprimer toutes les associations. 43

Guide utilisateur Semmlabs Enregistrement et exportation Enregistrement et exportation Chapitre 9 Sauvegarde ou ouverture d'un fichier.semmlabs Cliquer sur Enregistrer sous la première fois que vous sauvegarder le fichier de réglages de SemmlabsEditor. Choisir le répertoire de sauvegarde dans lequel se trouvera également l'animation exportée et compilée. 2 44

Enregistrement et exportation Guide utilisateur Semmlabs Si vous avez déjà sauvegardé votre fichier et que vous avez fait des modifications vous pourrez faire une nouvelle sauvegarde en cliquant sur Enregistrer ce qui remplcera l'ancienne suvegarde par la nouvelle. 3 Vous pouvez également ouvrir à nouveau un fichier déjà sauvegardé avec l'extension.semmlabs en cliquant sur Ouvrir 4 Vous pouvez également quitter le fichier que vous venez de travailler pour en créer un autre en cliquant sur Nouveau 45

Guide utilisateur Semmlabs Exportation de l'animation Exportation de l'animation Chapitre 0 Exportation de l'animation Cliquer sur Exporter 2 Un curseur indique un état d'avancement de l'exportation de l'animation Lorsque l'animation est créée la barre d'avancement disparaît. 46

Exportation de l'animation Guide utilisateur Semmlabs Parfois la barre d'avancement se bloque mais ce n'est pas pour autant que l'exportation de l'aniamation ne se fait pas: attendre que la fenêtre redevienne normal. 47

Guide utilisateur Semmlabs Lancement de l'animation Lancement de l'animation Chapitre Ouverture du dossier Ouvrir le dossier contenant sous dossier où sont rangés les fichiers générés par SemmlabsEditor 2 Ouvrir le dossier contenant les data (xxxx_semmlabsdata ici : laplace_semmlabsdata Lancement de l'animation dans le navigateur 48

Lancement de l'animation Guide utilisateur Semmlabs Ouvrir le répertoire player situé dans le répertoire xxx_semmlabsdata 2 Ouvrir le fichier SemmlabsPlayer.html dans votre navigateur favori. Repérage des zones actives 49

Guide utilisateur Semmlabs Lancement de l'animation En cochant Visibles sous l'onglet Zones actives on fait apparaître les zones actives et réactives de l'animation. La zone active est repérable par le fait que le curseur souris qui a la forme d'une flèche devient une main dès qu'une action est possible sur l'image. La première zone active correspond à la manipulation du bouton réglage de l'intensité sur l'alimentation continue 2 La deuxième zone est une zone réactive qui affiche l'intensité du courant dans le circuit 50

Lancement de l'animation Guide utilisateur Semmlabs 3 La 3ème zone est une zone réactive et correspond à l'affichage du déplacement de l'élément conducteur en fonction de l'intensité choisie. Gestion des zooms 5

Guide utilisateur Semmlabs Lancement de l'animation En développant l'onglet Zooms, nous pouvons afficher en plus de l'image principale: un zoom du bouton intensité un zoom du rapporteur un zoom de l'affichage de l'alimentation continue Les fenêtres correspondantes s'affichent en dessous de l'image principale et ne sont donc pas forcément visibles à l'écran: utiliser l'ascenseur pour les visualiser et les repositionner. 2 En cliquant sur l'icone Loupe nous faisons apparaître dans la fenêtre 2 autre icones Loupe en + ou en - qui permettent de zoomer plus ou moins fort sur l'image 3 En cliquant sur Loupe + on augmente le zoom 4 En cliquant sur Loupe - on diminue le zoom 5 Les flèches: gauche, droite et bas, haut nous permettent de naviguer dans l'image et de centrer le zoom sur la partie intéressante Les zones actives zoomées peuvent être manipulées avec le curseur souris à condition de dévalider la loupe au préalable. 52

Lancement de l'animation Guide utilisateur Semmlabs Gestion de la variable d'environnement En cliquant sur l'onglet Environnement et en cochant la variable sens du courant qui est une variable d'environnement on fait apparaître la fenêtre correspondante 2 Dans cette fenêtre on peut choisir le sens du courant en cliquant sur sens positif ou sens négatif 53

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs Chapitre 2 Comment ranger les images avant de les introduire dans Semmlabs Avant d'introduire les images dans Semmlabs, il faut réfléchir à l'ordre dans lequel elles sont rangées. Nous allons expliciter ce rangement à l'aide de plusieurs exemples: Le premier exemple est l'animation concernant la force de Laplace: v 54

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs Nous choisirons ici la variable sens du courant qui selon sa valeur entraînera un jeu d'images ou l'autre. 55

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs la variable Sens du courant peut prendre 2 valeurs: sens positif 2 et sens négatif 56

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs Nous allons associé à cette valeur 6 valeurs qui permettront de faire varier l'intensité du courant entre 0 et 3A par pas de 50 ma. 57

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs Nous y associerons les 6 images correspondantes de Image00 à Image06. 58

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs Nous referons de même pour l'autre sens du courant 59

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs Il est important que le nombre d'images soit rigoureusement identique pour les 2 sens du courant 60

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs Les images seront alors rangées dans un dossier suivant l'ordre déterminé précédemment: de l'image00 à l'image22 avant d'être importées dans SemmLabs. Le deuxième exemple est l'animation concernant lune boîte de résistances à décades 6

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs v Nous devons d'abord définir la variable "de poids le plus fort" Ici ce sera la variable correspondant aux valeurs des résistances de 0 à 0 kohms réglable par le bouton xk de la boîte à décades, qui constitueront les valeurs de la ère variable 62

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs Cette première variable: x000 prendra valeurs de 0 à 0 63

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs Associé à chaque valeur de la variable x000, on introduira la 2 ème variable x00 64

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs La variable x00 prendra valeurs de 0 à 0 65

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs Associé à chaque valeur de la variable x00, on introduira la 3 ème variable x0 66

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs La variable x0 prendra valeurs de 0 à 0 et on associera à chaque valeur de la variable x0 une 4ème variable x 67

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs Associé à chaque valeur de la variable x0, on introduira la 4 ème variable x qui prendra valeurs comprises entre 0 et 0 68

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs On associera alors pour chaque valeur de la variable de poids le plus faible les images correspondantes de 0 à 20 images, soient 2 images 69

Guide utilisateur Semmlabs Comment ranger les images avant de les introduire dans Semmlabs et pour l'ensemble des combinaisons des 4 variables: xxx=33 images 70

Comment ranger les images avant de les introduire dans Semmlabs Guide utilisateur Semmlabs dans notre exemple nous avons fait varier les variables: x000 de 0 à x00 de 0 à 0 x0 de 0 à 0 x de 0 à 0 le nombre total d'images est alors 2662 et nous devrons alors ranger les images dans un dossier suivant cet ordre: Image000 jusqu'à Image 266 7