EXEMPLE 1 : Horloge-météo et cadre multimédia interactif.

Grace à Magneto Studio, vous pouvez obtenir votre application connectée en fonctionnement autonome sur votre carte embarquée en quelques secondes. Il vous suffit de simplement ouvrir le projet intégré de ce l’exemple et de lever le mode draft pour la voir s’exécuter immédiatement.

L’objectif de ce tutoriel est de décrire étape par étape la mise en oeuvre des éléments multimédias qui composent l’application pour lui donner vie en interaction avec le monde physique qui l’entoure (système, utilisateur).

Avant de débuter, veuillez-vous référer, si ce n’est pas encore fait, aux différents tutoriels du Centre d’Aide qui détaillent chaque opération décrite ci-après.

Préparation

Les ressources nécessaires à la réalisation de l’application sont intégrées au projet. Vous y trouverez :

• 1. (maquette) Control-Panel.svg
  2. (dossier) External code
  3. (image) Infos-Panel.png
  4. (dossier) Photos
     1. (image) Infos-Panel.png
     2. (image) Photo1.jpg
  5. (maquette) Time-Meteo-Dial.svg

Vous pouvez choisir deux photos ou images que vous souhaiteriez voir affichées dans votre cadre, au lieu des photos fournies par défaut.

Attention : Étant donné que nous parlons ici d’embarqué, il est important de comprendre que l’espace de stockage et la puissance informatique des systèmes embarqués sont faibles en comparaison aux ordinateurs de bureau. C’est pourquoi, utiliser des images de la taille de votre écran est un bon reflex. Cependant Magneto Studio vous permet d’utiliser des images jusqu’à 2048×2048 sans nuire à votre expérience utilisateur.

Optimisation : Avec un logiciel adapté (exemple : l’application Aperçu de macOS), redimensionnez vos images à la taille de l’écran que vous allez utiliser pour faire le tutoriel.

Vous trouverez l’ensemble des ingrédients à préparer avant de suivre la recette de Magneto Studio, ainsi que la vidéo intégrale de l’exemple ici.

 

L’application étape par étape

Les zones décrites dans la suite de ce tutoriel sont décrites ici.

1. Créer un nouveau projet (File > New ou command + N).
2. Décocher le « Draft Mode » dans la zone de connectivités (zone 5).
3. Si besoin, choisissez la taille de votre écran (en pixels) dans la zone de propriétés (zone 3).

Attention : Si votre Raspberry Pi est déjà raccordée à un écran et connectée à Magneto Studio, la taille de l’écran sera automatiquement mise à jour.

1. Créer un espace visuel de travail en cliquant sur le bouton « Artboard » dans la barre d’outils (zone 4).
2. Étendre l’Artboard sur toute la taille de l’écran :
   • Cliquer et maintenir le clic en haut à gauche de l’écran et relâcher en bas à droite de l’écran.
3. Importer vos deux photos (une par une) en les glissant dans l’Artboard.
4. Ajuster la taille de vos photos (si besoin) en sélectionnant un des coins et en maintenant le clic.
5. Replacer les à l’aide de la souris (pour plus de précision utiliser la zone de propriétés, zone 3) :
   • Placer votre première image en x = 0 et y = 0.
   • Placer votre deuxième image en x = 800 et y = 0.
6. Sélectionner votre première image (celle en position 0).
7. Créer une animation en cliquant sur le bouton « Animation » dans la barre d’outils (zone 4).
8. Déplacer votre image de façon à créer automatiquement la première étape :
   • Repositionner l’image en x = -800 et y = 0.
   • Double cliquer sur votre deuxième image dans l’arbre des objets (zone 1) pour l’ajouter à l’animation.
   • Repositionner l’image en x = 0 et y = 0.
   • Cliquer sur le bouton « ok » (dans l’onglet en bas de la zone de travail, zone 2).
9. Importer la maquette Time-Meteo-Dial.svg intégrée aux assets du projet en la glissant dans l’Artboard.
10. Replacer la maquette SVG en x = 0 et y = 0.
11. Double-cliquer sur la flèche de droite pour en faire un objet.

Information : Quand vous importer un fichier SVG il apparait comme un objet. Pour créer d’autres objets faisant partie du SVG, il vous suffit de double cliquer sur les éléments souhaités.

1. Procéder de même avec la flèche de gauche.
2. Sélectionner la flèche de droite.
3. Ajouter une action en cliquant sur le bouton « Action » dans la barre d’outils (zone 4) :
   • Dans la zone de propriétés (zone 3), sélectionner l’action « Press« .
   • Au même endroit, sélectionner l’animation « Anim1« .
   • Toujours au même endroit, sélectionner l’étape 1.
4. Répéter les étapes 13. et 14. cette fois ci avec la flèche de gauche :
   • Les paramètres d’action restent les mêmes sauf pour l’étape, sélectionner l’étape 0.
5. Importer Infos-Panel.png en le glissant déposant dans votre Artboard.
6. Déplacer l’image en x = 105 et y = 80.
7. Sélectionner l’image.
8. Créer une animation en cliquant sur le bouton « Animation » dans la barre d’outils (zone 4).
9. Déplacer votre image de façon à créer automatiquement la première étape :
   • Repositionner l’image en x = 105 et y = 480.
   • Cliquer sur le bouton « ok » (dans l’onglet en bas de la zone de travail, zone 2)
10. Double cliquer sur l’icône d’information (en bas à droite).
11. Sélectionner l’icône.
12. Ajouter une action en cliquant sur le bouton « Action » dans la barre d’outils (zone 4) :
    • Dans la zone de propriétés (zone 3), sélectionner l’action « Press« .
    • Au même endroit, sélectionner l’animation « Anim2« .
    • Toujours au même endroit, sélectionner l’étape 0.
13. Sélectionner l’image d’information (Infos-Panel.png).
14. Ajouter une action en cliquant sur le bouton « Action » dans la barre d’outils (zone 4) :
    • Dans la zone de propriétés (zone 3), sélectionner l’action « Press« .
    • Au même endroit, sélectionner l’animation « Anim2« .
    • Toujours au même endroit, sélectionner l’étape 1.
15. Importer Control-Panel.svg en le glissant déposant dans votre Artboard.
16. Déplacer la maquette importée en x = 240 et y = 15.
17. Sélectionner la maquette.
18. Créer une animation en cliquant sur le bouton « Animation » dans la barre d’outils (zone 4).
19. Déplacer votre image de façon à créer automatiquement la première étape :
    • Repositionner l’image en x = 240 et y = -150.
    • Cliquer sur le bouton « ok » (dans l’onglet en bas de la zone de travail, zone 2)
20. Double cliquer sur l’icône de luminosité (en haut à gauche).
21. Sélectionner l’icône.
22. Ajouter une action en cliquant sur le bouton « Action » dans la barre d’outils (zone 4) :
    • Dans la zone de propriétés (zone 3), sélectionner l’action « Press« .
    • Au même endroit, sélectionner l’animation « Anim3« .
    • Toujours au même endroit, sélectionner l’étape 0.
23. Double cliquer sur le bouton « Close » de la maquette précédemment importée.
24. Sélectionner le bouton.
25. Ajouter une action en cliquant sur le bouton « Action » dans la barre d’outils (zone 4) :
    • Dans la zone de propriétés (zone 3), sélectionner l’action « Press« .
    • Au même endroit, sélectionner l’animation « Anim3« .
    • Toujours au même endroit, sélectionner l’étape 1.
26. Double-cliquer sur l’heure (en bas à gauche).
27. Sélectionner le texte de l’heure.
28. Rendre le texte éditable en cochant la case « Editable » dans la zone de propriétés (zone 3).
29. Aller dans l’onglet « Workspace » (zone 1).
30. Créer une variable système en cliquant sur le bouton « SysEvent » dans la barre d’outils (zone 4) :
    • Choisir l’évènement « Clock« .
    • Renommer la variable en « Clock« .
    • Laisser une période de 1000 millisecondes.
    • Remplacer le format par « %H:%M« .
    • Choisissez votre fuseau horaire.
    • Cliquer sur « Save« .
31. Ouvrir l’éditeur de projet en cliquant sur le bouton « Editor » dans la barre d’outils (zone 4).
32. Rechercher le texte de l’heure dans l’éditeur.
33. Remplacer la ligne  » text : “16 :51“  » par  » text : ‘return Clock;’ « .
34. Aller dans l’onglet « Workspace » (zone 1).
35. Créer une variable système en cliquant sur le bouton « SysEvent » dans la barre d’outils (zone 4) :
    • Choisir l’évènement « Brightness« .
    • Renommer la variable en « Brightness« .
    • Laisser une période de 0 millisecondes.
    • Mettre 100 en valeur initiale.
    • Cliquer sur « Save« .
36. Double cliquer sur la valeur de luminosité (« 100 » dans Control-Panel.svg)
37. Rendre le texte éditable en cochant la case « Editable » dans la zone de propriétés (zone 3).
38. Ouvrir l’éditeur de projet si vous l’avez fermé.
39. Ajouter au début de l’éditeur (avant la ligne 1 : « Artboard {« ) la ligne  » ‘char buffet[10];’ « 
40. Toujours dans l’éditeur, rechercher le texte de la luminosité.
41. Remplacer la ligne  » text : “100“  » par  » text : ‘sprintf(buffer, « %03d », Brightness); return buffer;’ « .
42.  Double cliquer sur le bouton « + » (Control-Panel.svg).
43. Sélectionner le bouton.
44. Ajouter une action en cliquant sur le bouton « Action » dans la barre d’outils (zone 4) :
    • Dans la zone de propriétés (zone 3), sélectionner l’action « Press« .
    • Au même endroit, sélectionner l’animation « code« .
45. Double cliquer sur le bouton « – » (Control-Panel.png).
46. Sélectionner le bouton.
47. Ajouter une action en cliquant sur le bouton « Action » dans la barre d’outils (zone 4) :
    • Dans la zone de propriétés (zone 3), sélectionner l’action « Press« .
    • Au même endroit, sélectionner l’animation « code« .
48. Ouvrir l’éditeur de projet si vous l’avez fermé.
49. Rechercher le bouton « + » dans l’éditeur (aide : se servir de son nom dans l’arbre d’objets (onglet « Artboards« )).
50. Remplacer la ligne  » onPress  : ’’  » par  » onPress  : ’if(Brightness > 15) { Brightness+=15; }’ « .
51. Rechercher le bouton « – » dans l’éditeur.
52. Remplacer la ligne  » onPress  : ’’  » par  » onPress  : ’if(Brightness < 180) { Brightness-=15; }’ « .
53. Aller dans l’onglet « Workspace » (zone 1).
54. Étendre la liste des librairies (cliquer sur la flèche à gauche de « Libraries » dans l’onglet de « Workspace« , zone 1).
55. Cocher la ligne « libcurl.so« .
56. Glisser les fichiers et dossier contenu dans le dossier « External code » dans la zone de Workspace.
57. Créer une variable système en cliquant sur le bouton « SysEvent » dans la barre de d’outils (zone 4) :
    • Choisir l’évènement « Timer« .
    • Laisser une période de 60000 millisecondes.
    • Remplir le champ  » Function to call  » par « getTemp« .
    • Ajouter une variable en cliquant sur le bouton « +« .
    • Remplir le champ « Name » par « temp« .
    • Remplacer le type par « String (char*)« .
    • Cliquer sur « Save« .
58. Double cliquer sur le numéro de la température (en haut à droite).
59. Sélectionner le texte de la température.
60. Rendre le texte éditable en cochant la case « Editable » dans la zone de propriétés (zone 3).
61. Ouvrir l’éditeur de projet.
62. Rechercher le texte de l’heure dans l’éditeur.
63. Remplacer la ligne  » text : “3“  » par  » text : ‘return temp;’ « .

Bravo ! Vous avez fini de construire votre application.