Ova phone home 👽

Vous venez de faire l’acquisition d’un robot Ova et il vous tarde de découvrir les talents de votre nouvelle compagne programmable ?

Dans ce tutoriel, nous allons voir ensemble comment la prendre en main pour pouvoir la démarrer, la programmer, et bien plus encore.

1. Démarrage

Pour démarrer Ova, tirez délicatement vers l’avant le slider en dessous de l’œil gauche d’Ova.

Elle se met alors à faire 2 notes de musiques (Do Sol) puis clignote à une certaine fréquence et d’une certaine couleur indiquant la tension de la batterie. Si la couleur est proche du rouge et qu’elle clignote à une fréquence élevée, cela signifie qu’elle a besoin d’être rechargée.

Après quoi, selon sa batterie, Ova démarre sa booting dance, puis son système d’exploitation se lance pendant qu’une animation HUE du rose au bleu se répète en boucle.

Puis, selon ses paramètres réseaux enregistrés (accessible dans la section Settings de son IDEAL), vous pourrez utiliser Ova selon différent cas d’usage parmi les suivants

2. Connexion au point d’accès wifi d’Ova

Le robot démarre le mode point d’accès (AP) une fois que la LED scintille en bleu. Dès lors, vous pouvez voir un nouveau SSID visible commençant par « ova ».

Sur Windows, cliquez sur l’icône wifi dans la barre des tâches en bas à droite, attendez quelques instants que le système scanne les points d’accès aux alentours. Si besoin, éteignez et redémarrez votre carte wifi. Vous devriez voir apparaitre votre Ova après quelques secondes.

🔍 Information
Si vous ne trouvez pas toujours pas ova après plus de 30 secondes, vérifiez bien que vous êtes bien déconnecté de tout point d’accès. Si vous ne trouvez pas l’icône wifi, vous n’avez peut-être pas de carte wifi sur votre ordinateur. Dans ce cas, vous pouvez vous procurez un dongle wifi 2.4Ghz dans le commerce, ou bien utiliser un ordinateur portable.

Pour se connecter, veuillez saisir le mot de passe par défaut (à changer à la première connexion dans la section Settings)

ovaladiva

Une fois connecté en wifi, Ova se met à chanter une petite mélodie de grave à aiguë (les 5 premières notes de la gamme Do majeur/ CM pour les puristes 😁). Notez qu’Ova maîtrise aussi sa gamme de l’aiguë au grave, ce qu’elle ne manquera pas de vous signaler en cas de déconnexion.

Ouvrez votre navigateur web préféré (de préférence Firefox, Chrome, ou Safari pour lesquels nous avons optimisé les fonctionnalités), puis tapez dans la barre d’adresse l’URL suivante, selon la version du firmware d’Ova (2.x.x par défaut depuis octobre 2023).

Sur ovaOS 2.x.x

http://192.168.71.1 (plus rapide)
ou
http://ova.local (plus long car nécessite une résolution DNS préalable)

Sur ovaOS 1.x.x

http://192.168.4.1

Après quelques instants (environ 10 secondes), le launcher d’IDEAL s’affiche et une animation de chargement d’Ova débute, indiquant la progression du téléchargement d’IDEAL. Le chargement devrait prendre moins de 1 minute selon la proximité du robot.

🔍 Information
La plupart des navigateurs mettent en veille les applications web qu’ils exécutent une fois qu’ils sont mis en arrière plan, ce qui peut entrainer une déconnexion du robot vous obligeant à recharger IDEAL. Pour éviter d’attendre à nouveau ce chargement, nous vous recommandons de conserver votre navigateur en premier plan pendant toute votre utilisation d’IDEAL.

Une fois le chargement terminé, vous devriez voir s’afficher le workspace (dossier de travail) initial d’IDEAL

🔍 Information
Il est possible comme sur la capture ci-dessus qu’aucun projet n’apparaissent dans Workspace si l’administrateur de votre Ova ne l’a pas souhaité. Si vous souhaitez charger les projets de prise en main d’Ova, récupérer le workspace .tar depuis notre site accessible à la page suivante.

🔍 Information
Il est possible que IDEAL s’affiche en mode sombre sur votre navigateur. Cela dépend du mode sélectionné dans votre système d’exploitation. Par sélectionner le thème clair ou sombre, rendez vous dans les paramètres de personnalisation des couleurs de votre OS.
Sous Windows 11 : dans Paramètres -> Personnalisation -> Couleurs -> Choisir votre mode

3. Vos premiers pas dans l’IDEAL d’Ova

L’environnement de développement (IDE) d’Ova est conçu pour fonctionner dans votre navigateur web, sans rien n’avoir à installer ni configurer sur votre ordinateur, et ce, sans nécessiter de connexion à Internet.

Il est IDEAL pour répondre aux problèmes fréquents que rencontrent les formateurs quand il leur est impossible d’installer les logiciels pédagogiques sur les ordinateurs de chaque apprenant soit

• par manque de temps
• ils sont protégés par des droits administrateurs non communiqués
• les versions des OS installés ne sont pas compatibles
• le(s) proxy(ies) de l’établissement empêche(nt) leur usage

Notre leitmotiv est d’en faire votre IDEAL, un IDE pour permettre apprentissage optimal de l’ALgorithmique par le jeu et la robotique, en s’adaptant à tous les contextes pédagogiques imaginables.

Barre de navigation

Toujours présente à gauche, la barre de navigation vous permet de savoir dans quelle partie du logiciel vous vous trouvez. Vous trouverez de haut en bas

Barre de status

Toujours présente en bas, la barre de status vous donne les informations suivantes de gauche à droite :

• la version d’IDEAL actuellement utilisée sur votre navigateur, ainsi que celle du firmware exécuté sur le robot
• les liens hypertextes vers les mentions légales ainsi que vers la page contact pour nous joindre en cas de problème avec le robot
• l’état du robot en temps réel : la taille de sa mémoire flash embarquée, la tension de sa batterie, la RAM consommée, la température interne de son processeur, ainsi que l’état de connexion sans fil.

🔍 Information
Les témoins d’état d’Ova vous donne de précieuses indications pour travailler dans les meilleures conditions. Veuillez à la garder la plus proche de votre ordinateur (témoin de connexion en vert avec 3 barres), dans une plage de température processeur entre 20°C et 60°C (témoin de température gris), et tension batterie > 10% et de mémoire flash < 90%.

⛔ Important
En dehors de cette plage de fonctionnement optimale, le robot risque de s’endommager de manière irréversible ! La garantie ne couvre pas les éventuels problèmes qui surviendraient après un tel usage. Plus d’informations dans nos conditions d’utilisation et mentions légales en cliquant ici.

Les grands projets d’Ova 🚀

Une fois les projets chargés, plusieurs cartes apparaissent

Les cartes en gris pointillé sont toujours présentes et vous permettent :

• de créer un nouveau projet
• de charger un workspace de projets dans une archive .tar depuis votre ordinateur, ou un ordinateur distant via son url http
• de sauvegarder les projets réalisés sur votre ordinateur et/ou pouvoir les transmettre sur d’autres ordinateurs

Pour pouvoir créer votre propre workspace et alterner les développement entre IDEAL et votre IDE préféré, voici les étapes à suivre

1. Créer un dossier workspaces comme racine de tous vos projets
2. Créer à l’intérieur du dossier workspaces racine 1 dossier par projet portant le nom du projet sans espaces ni caractères spéciaux.
3. Ajouter dans chaque dossier projet à côté de ses sources un fichier settings.json contenant a minima les informations précisées ci-après.
4. Privilégier des noms courts pour tous vos fichiers et sous dossiers, sans espaces ni caractères spéciaux
5. Utiliser votre outil de compression préféré pour archiver le dossier workspaces
   – graphique
   avec 7zip : clic droit sur dossier racine workspaces -> préciser « format de l’archive » tar, et « méthode de compression » POSIX
   – en ligne de commande dans le dossier contenant le dossier racine workspaces
   tar -cf workspace.tar workspaces
6. Cliquer sur Load project puis sélectionner votre archive dans l’explorateur de fichiers

Les cartes entourées en gris continue sont les projets chargés de votre workspace que vous pouvez

• Ouvrir pour édition dans la section Code en cliquant dessus (clic gauche souris)
• Placer en raccourci dans la barre de navigation en cliquant sur le bouton punaise📌
• Dupliquer en cliquant sur le bouton de copie
• Exécuter en mode debug dans la section Code en cliquant sur le bouton play ▶️
• Supprimer en cliquant sur le bouton corbeille 🗑️

⛔ Important
Une fois supprimé, le projet est définitivement supprimé d’IDEAL et sera impossible à récupérer en cas d’erreur. Prenez garde à bien sauvegarder le workspace en cliquant sur la carte en pointillé Save projects.

L’affichage et la gestion de chaque projet dans IDEAL est régit par son fichier settings.json qu’il contient. Pour toute modification avancée dans ce projet, ouvrez celui dans la section Code pour y apporter des modifications.

• Le nom du projet affiché dans la carte du workspace est la valeur associée à la clé name
• Le valeur de description est affichée en dessous de son nom
• Tous les projets taggés public (clé « private »: true) chargés dans votre workspace, sont accessibles à toute personne connectée sur le même réseau que votre Ova, et pourront être chargés dans IDEAL sur une autre machine. Par défaut tous les projets créés sont définis en privé.
• Si la valeur de la clé pinned est à true, un raccourci d’exécution du projet sera disponible dans la barre de navigation en dessous du séparateur horizontale. Utiliser la clé extension pour apparaître au dessus du séparateur.
• Si la valeur de la clé idealonly est à true, le projet ne sera pas sauvegardé dans l’archive au clic sur Save projects
• Si la valeur de la clé hidden est à true, le projet ne sera pas affiché dans la section Workspace
• Si votre projet dépend d’autre projets du workspace pour fonctionner, rajouter le nom de cette dépendance dans les valeurs à la clé dependencies
• La clé displayFileOnProjectOpened permet de préciser le fichier du projet qui sera chargé par défaut dans la section Code

🔍 Information
Les modifications du fichier settings.json d’un projet ne sont pas chargées à chaud par IDEAL. Pour que ces dernières prennent effet, sauvegarder le projet avec le bouton Save projects et recharger le en cliquant sur Load projects dans la section Workspace.

Code code codec 🐔

Envie de coder ? C’est parti !

Commençons par un projet existant pour se faire la main en cliquant sur la carte du projet ovatalks. La page suivante s’affiche.

L’écran se divise en plusieurs parties que nous allons rapidement parcourir ensemble de gauche à droite.

Le sélecteur de fichiers

A gauche de l’éditeur de code, il liste tous les fichiers du projets. Cliquez sur le fichier que vous souhaitez éditer. Une fois sélectionné, le contenu du fichier s’ouvre dans l’éditeur à droite dans lequel vous pourrez le modifier.

L’éditeur de fichier

L’éditeur embarqué vous permet de modifier le contenu des fichiers directement dans votre navigateur. Un témoin orange apparait à droite du fichier dans le sélecteur une fois modifié, indiquant que des modifications n’ont pas été sauvegardées. N’oubliez pas de régulièrement sauvegarder votre travail avec le raccourci CTRL+S.

⛔ Important
Par défaut, les modifications apportées sont enregistrées dans la mémoire du navigateur (et non sur le robot). Attention donc à ne pas fermer prématurément le navigateur ou l’onglet IDEAL, ou bien changer de page par un retour arrière, sous peine de perdre tout le travail effectué.

Une fois votre code écrit, cliquez sur le bouton play ▶️ en bas de l’éditeur pour démarrer l’exécution de votre projet dans l’iframe de droite.

La console

Une fois démarré, utilisez la console pour dialoguer avec votre programme en cours d’exécution. Pour bien utiliser cette console dans votre script.js, reportez vous à la librairie jsideal dans les dépendances du projet, et utiliser les fonctions Ideal.prompt et console.log.

Quand le programme vous pose une question, le champs input >_ en bas de la console se mettra à clignoter en orange. Vous pourrez donc écrire dans ce champs puis appuyer sur la touche entrée du clavier pour envoyer votre réponse. Suite à cela, le programme reprendra son exécution.

N’hésitez surtout pas à utiliser cette console pour déboguer votre programme et vérifier s’il fait tout ce que vous attendez de lui ! N’oubliez pas, en algorithmique, le problème se situe bien souvent entre la chaise et le clavier 🫵😁 !

L’iframe de rendu

Si vous avez l’âme d’un Picasso des temps modernes 🎨, vous serez ravi d’utiliser l’HTML et le CSS pour ajouter une interface graphique à votre script.js, grâce à cette iframe de rendu située à droite de l’écran.

Quand le bouton play est cliqué, votre navigateur exécutera en premier le fichier index.html. C’est « le point d’entrée » dans une application web.

Voyant ce fichier index.html dans votre projet, le navigateur chargera son contenu dans cette iframe de rendu. S’il trouve une balise script dans ce fichier html (ce qui est le cas par défaut), il exécutera dynamiquement son contenu. S’il trouve une balise style, il appliquera les style décrits en CSS sur la page index.html.

Connaissant cela, à votre pinceau Picasso !

Noté que vous pouvez cacher l’éditeur pour profiter en plein écran de votre œuvre d’art, en cliquant sur l’icône de rectangulaire en haut à droite de l’iframe. Cliquez à nouveau dessus pour le faire réapparaitre.

Les autres projets

N’hésitez pas à regarder et modifier les projets d’exemple pour découvrir tous les pouvoirs d’Ova

• sa led pour la faire briller comme un diamant (alias ovashines)
• son œil de cyborg pour voir tout ce qu’elle voit (alias ovasees)
• son corps d’athlète pour la faire bouger avec ses moteurs (alias ovamoves)
• sa voix de diva pour la faire chanter en boucle encore et encore (alias ovasings)
• ses capteurs de lumières sous son châssis pour la faire suivre des trajectoires lumineuses (alias ovasenses)

🚧 Work in progress
D’autres projets sont dans les cartons et vous seront partagés lors des prochaines mises à jour : pour utiliser sa boussole, son accéléromètre… Pour récupérer les derniers projets de prise en main, récupérer le workspace .tar depuis notre site accessible à la page suivante.

4. Libérer le potentiel d’Ova avec la section Settings

Vous souhaitez programmer plusieurs Ova avec un seul programme, pour relever un défi de programmation à plusieurs ou bien créer par vous même un jeu robotique ? Ou bien vous souhaiter administrer plusieurs Ova dans le cadre d’un cours ou d’un évènement robotique ?

Pour cela vous aurez besoin de modifier ses paramètres réseaux, accessibles dans la section Settings, pour lequel vous aurez besoin du mot de passe administrateur.

🔍 Information
Le mot de passe de la section Settings vous est envoyé sur votre adresse mail après l’achat du robot. Si vous êtes le propriétaire de l’Ova que vous utilisez et que vous ne l’avez pas reçu ou que vous l’avez égaré, contactez-nous en cliquant ici. Si vous n’êtes pas le propriétaire, contactez le responsable de cette Ova.

Une fois le mot de passe saisie, l’accès à cette section vous permettra de modifier les crédentials suivantes. Une fois les modifications effectuées, cliquez sur le bouton Save & Restart pour que ces dernières soient enregistrées et appliquées par Ova après son redémarrage. Seuls les champs modifiés seront enregistrés, ceux laissés vides ne seront pas enregistrés.

Access Point (AP Mode)

Ces champs vous permettront de modifier le nom du point d’accès wifi du robot, ainsi que le mot de passe pour se connecter.

Ova est accessible en wifi sous son nom de SSID commençant par ova, suivi de son adresse mac, suivi de la valeur entrée dans le champs Network SSID. Par défaut, ce champs est vide et le SSID affiché est « ovaXXXXXXXX » avec XXXXXXXX son adresse mac. Attention, ce champs ne doit pas dépasser 8 caractères ASCII.

🔍 Information
Le SSID du robot peut contenir des caractères unicodes comme des émoji. N’hésitez pas à bien vous en servir pour facilement distinguer chaque Ova parmi plusieurs !
Ex: entrer « ❤️red » affichera « ovaXXXXXXXX ❤️red » ce qui sera très utile pour l’utilisateur d’une ova rouge, qu’il soit daltonien ou non.

Vous pouvez également changer le mot de passe du point d’accès, qui doit contenir à minima 8 caractères avec au moins 1 chiffre et 1 caractère spécial.

⛔ Important
Quelque soit le mode de connexion de votre Ova (AP, STA et/ou MQTT), son point d’accès sera toujours visible. Une connexion en AP sera traitée prioritairement aux autres modes pour permettre une administration en cas de mauvais paramétrage réseau.

Wifi network (STA Mode)

Ces champs permettront de connecter votre Ova à n’importe quel point d’accès (comme une box, un répéteur wifi ou votre téléphone en partage de connexion), avec ou sans connexion Internet.

Assurez vous d’entrer les bon identifiants et mot de passe de votre point d’accès. Une fois les paramètres enregistrés, Ova tentera à chaque démarrage de se connecter au point d’accès demandé si elle le trouve à proximité.

Une fois connectée en STA (i.e. à la STAtion wifi enregistrée), Ova jouera la super (wo)man avec 4 notes qui devrait vous rappeler la bande son d’un héro aux supers pouvoirs extraterrestres 🦸, ou encore celle d’un voleur transformé en sultan suite à une rencontre géniale 🧞!

MQTT

Ce protocole ubiquiste dans le monde de l’IOT permettra de réaliser vos projets les plus fous et de connecter votre Ova avec d’autres robots de différentes espèces et ce, dans le monde entier !

Pour libérer tout le potentiel d’Ova, remplissez ces champs pour indiquer

• l’url du broker MQTT sur un LAN ou n’importe où dans le monde via Internet. L’url doit commencer par mqtt:// suivi de l’adresse IP de préférence (plus rapide), ou bien du nom de domaine du broker (plus long car nécessite des requêtes DNS supplémentaire pour la résolution du nom de domaine)
• son port. Par défaut il s’agit du port 1883
• Le username et password selon les ACL (Access Control List) définis par l’administrateur du broker

Administrator

Utiliser ces champs pour modifier le mot de passe requis pour accéder aux Settings.

⛔ Important
Si vous êtes propriétaire de votre Ova, pensez à modifier ce mot de passe directement après l’acquisition de votre Ova. Choisissez un mot de passe différent de celui du point d’accès AP, de manière à permettre à des utilisateurs non administrateurs de travailler avec votre Ova.

5. Programmez 1 ou plusieurs Ova dans votre IDE préféré

Vous souhaitez programmer Ova dans votre IDE préféré. Pour cela, 2 options s’offrent à vous

• le protocole en HTTP
• le protocole MQTT

Dans les 2 cas, vous devez

• récupérer les librairies d’Ova correspondant au langage que vous souhaitez utiliser (voir notre page dédiée pour les téléchargements)
• vous assurer que votre IDE est bien à jour et que toutes les dépendances des librairies soient bien installées et à jour (voir documentation et commentaires dans la librairie)
• vous assurer que votre ou vos Ova soient bien paramétrée(s) (voir section Settings)
• récupérer les credentials pour vous connectez sur le même réseau
  👉 nom et mot de passe du point d’accès Wifi
  👉 username et password de connexion au broker en MQTT
• récupérer les identifiants d’Ova selon le protocole choisi
  👉 adresse IP d’Ova en HTTP
  👉 ova+adresse mac d’ova en MQTT
• utiliser la méthode (constructeur OvaClientMqtt ou OvaClientHttp) correspondante au protocole utilisé pour joindre Ova, dans la librairie téléchargée, et entrez les paramètres d’Ova et credentials si besoin

🔍 Information
Par défaut, Ova est paramétrée pour se connecter au point d’accès suivant
🛜 SSID : ovawan
🔑 PWD : ovaladiva
Une fois connectée au point d’accès, elle se connecte au broker officiel de Jusdeliens et est accessible 👉dans l’arène RobotX en rentrant au login ‘ova+adress mac’.
Cela peut être utile pour visualiser sa caméra et l’état de ses capteurs à distance, mais aussi pour participer à des challenges robotiques dans le monde entier !

Vous voulez monter en compétences pour donner des supers pouvoirs à Ova ?

Chez Jusdeliens, nous avons la passion du code et de la pédagogie dans l’ADN. Nous travaillons avec des écoles et centres de formations pour donner aux apprenants désireux de parfaire leurs compétences, les meilleurs cours possibles avec des challenges épiques mélangeant jeux, stratégies, intelligences, et dépassement de soi !

Avec nous, vos jeux favoris deviennent réalité par l’algorithmique et la robotique : Pokemon n’est plus une fiction, c’est vous le maître et Ova votre pokébot !

N’hésitez pas à nous contacter si vous souhaitez nous retrouver pour le prochain concours de robot, et/ou en formation et/ou cours particuliers adaptés à vos besoins.

Si vous souhaitez comprendre davantage le web et les langages évoqués, voici quelques courtes vidéos que nous vous recommandons pour comprendre :

Ce qu’est le web et comment il permet d’accéder à des sites web
Le modèle client-serveur
Ce qu’il se passe quand vous tapez un url dans votre navigateur
Comment une page web est structurée en html
Comment une page web est mise en forme en css

Pour un apprentissage plus complet et pas à pas de ces langages, vous avez aussi les supers tutoriels gratuits d’Openclassroom

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3
https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript

Et après ?

Vous avez aimé ce tutoriel et vous en voulez d’autres ?

Faites le nous savoir en donnant vos avis et vos envies et nous nous empresserons de vous en rédigez d’autres 😉

Suivez le (jus de) lien(s) 👉 https://g.page/r/CQoJnRiyLqsqEB0/review

C’est fini pour ce tutoriel ! A vous de jouer maintenant 😉