EXAMPLE 1 : interactive and multimedia Time-Meteo-Dial.

Thanks to Magneto Studio, you can get your connected application running autonomously on your embedded board in seconds. Simply open the embedded project in this example and uncheck the draft mode to see it run immediately.

The objective of this tutorial is to describe step by step the implementation of the multimedia elements that compose the application to give it life in interaction with the physical world that surrounds it (system, user).

Before starting, please refer, if you have not already done so, to the various tutorials in the Help Center which detail each operation described below.

Preparation

The resources needed to build the application are integrated into the project. You will find there:

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

You can choose two photos or images that you would like to see displayed in your frame, instead of the default ones provided.

Warning : Since we’re talking about embedded here, it’s important to understand that the storage space and computing power of embedded systems is small compared to desktop computers. For this reason, using images the size of your screen is a good reflex. However, Magneto Studio allows you to use images up to 2048×2048 without compromising your user experience.

Optimization : With suitable software (e.g. the Overview application in macOS), resize your images to the size of the screen you will be using to do the tutorial.

Find all the ingredients you need to prepare before following Magneto Studio’s recipe, as well as the full video of the example here.

The application step by step

The areas described in the rest of this tutorial are described here.

1. Create a new project (File > New or command + N).
2. Uncheck the “Draft Mode” in the connectivity area (area 5).
3. If needed, choose your screen size (in pixels) in the properties area (area 3).

Warning: If your Raspberry Pi is already connected to a screen and connected to Magneto Studio, the screen size will be updated automatically.

1. Create a visual workspace by clicking on the “Artboard” button in the toolbar (area 4).
2. Extend the Artboard to the entire screen size:
   • Click and hold on the top left of the screen and release on the bottom right of the screen.
3. Import your two photos (one by one) by dragging them into the Artboard.
4. Adjust the size of your photos (if needed) by selecting one of the corners and holding the click.
5. Replace them with the mouse (for more precision use the property area, area 3) :
   • Place your first image in x = 0 and y = 0.
   • Place your second image in x = 800 and y = 0.
6. Select your first image (the one in position 0).
7. Create an animation by clicking on the “Animation” button in the toolbar (area 4).
8. Move your image to automatically create the first step:
   • Reposition the image to x = -800 and y = 0.
   • Double click on your second image in the object tree (zone 1) to add it to the animation.
   • Reposition the image to x = 0 and y = 0.
   • Click on the “ok” button (in the tab at the bottom of the work area, area 2).
9. Import the Time-Meteo-Dial.svg mockup integrated with the project assets by dragging it into the Artboard.
10. Replace the SVG mockup in x = 0 and y = 0.
11. Double click on the right arrow to make it an object.

Information: When you import an SVG file it appears as an object. To create other objects that are part of the SVG, you just have to double click on the desired elements.

1. Proceed in the same way with the left arrow.
2. Select the right arrow.
3. Add an action by clicking on the “Action” button in the toolbar (area 4) :
   • In the properties area (area 3), select the “Press” action.
   • In the same place, select the “Anim1” animation.
   • Still in the same place, select step 1.
4. Repeat steps 13. and 14. this time with the left arrow :
   • The action parameters remain the same except for the step, select step 0.
5. Import Infos-Panel.png by dragging and dropping it into your Artboard.
6. Move the image to x = 105 and y = 80.
7. Select the image.
8. Create an animation by clicking on the “Animation” button in the toolbar (area 4).
9. Move your image to automatically create the first step :
   • Reposition the image to x = 105 and y = 480.
   • Click on the “ok” button (in the tab at the bottom of the work area, area 2).
10. Double click on the information icon (bottom right).
11. Select the icon.
12. Add an action by clicking on the “Action” button in the toolbar (area 4) :
    • In the properties area (area 3), select the “Press” action.
    • In the same place, select the “Anim2” animation.
    • Still in the same place, select step 0.
13. Select the information image (Infos-Panel.png).
14. Add an action by clicking on the “Action” button in the toolbar (area 4) :
    • In the properties area (area 3), select the “Press” action.
    • In the same place, select the “Anim2” animation.
    • Still in the same place, select step 1.
15. Import Control-Panel.svg by dragging and dropping it into your Artboa
16. Move the imported mockup to x = 240 and y = 15.
17. Select the mock-up.
18. Create an animation by clicking on the “Animation” button in the toolbar (area 4).
19. Move your image to automatically create the first step :
    • Reposition the image to x = 240 and y = -150.
    • Click on the “ok” button (in the tab at the bottom of the work area, area 2).
20. Double click on the brightness icon (top left).
21. Select the icon.
22. Add an action by clicking on the “Action” button in the toolbar (area 4) :
    • In the properties area (area 3), select the “Press” action.
    • In the same place, select the “Anim3” animation.
    • Still in the same place, select step 0.
23. Double click on the “Close” button of the previously imported layout.
24. Select the button.
25. Add an action by clicking on the “Action” button in the toolbar (area 4) :
    • In the properties area (area 3), select the “Press” action.
    • In the same place, select the “Anim3” animation.
    • Still in the same place, select step 1.
26. Double click on the time (bottom left).
27. Select the time text.
28. Make the text editable by checking the “Editable” box in the properties area (area 3).
29. Go to the “Workspace” tab (zone 1).
30. Create a system variable by clicking on the “SysEvent” button in the toolbar (area 4) :
    • Choose the “Clock” event.
    • Rename the variable to “Clock“.
    • Allow a period of 1000 milliseconds.
    • Replace the format with “%H:%M“.
    • Choose your time zone.
    • Click on “Save“.
31. Open the project editor by clicking the “Editor” button in the toolbar (area 4).
32. Search for the time text in the editor.
33. Replace the line “text: “16:51”” with “text: ‘return Clock;’“.
34. Go to the “Workspace” tab (zone 1).
35. Create a system variable by clicking on the “SysEvent” button in the toolbar (area 4) :
    • Choose the “Brightness” event.
    • Rename the variable to “Brightness“.
    • Leave a period of 0 milliseconds.
    • Set 100 as the initial value.
    • Click on “Save“.
36. Double click on the brightness value (“100” in Control-Panel.svg).
37. Make the text editable by checking the “Editable” box in the properties area (area 3).
38. Open the project editor if you have closed it.
39. Add to the beginning of the editor (before line 1: “Artboard {“) the line ” ‘char buffet[10];’“.
40. Always in the editor, look for the text of the brightness.
41. Replace the line “text: “100”” with “text: ‘sprintf(buffer, “%03d”, Brightness); return buffer;’“.
42. Double click on the “+” button (Control-Panel.svg).
43. Select the button.
44. Add an action by clicking on the “Action” button in the toolbar (area 4) :
    • In the properties area (area 3), select the “Press” action.
    • In the same place, select the “code” animation.
45. Double click on the “–” button (Control-Panel.png).
46. Select the button.
47. Add an action by clicking on the “Action” button in the toolbar (area 4) :
    • In the properties area (area 3), select the “Press” action.
    • In the same place, select the “code” animation.
48. Open the project editor if you have closed it.
49. Look for the “+” button in the editor (help: use its name in the object tree (“Artboards” tab)).
50. Replace the line “onPress: ”” with “onPress: ‘if(Brightness > 15) { Brightness+=15; }’“.
51. Look for the “–” button in the editor.
52. Replace the line “onPress: ”” with “onPress: ‘if(Brightness < 180) { Brightness-=15; }’“.
53. Go to the “Workspace” tab (zone 1).
54. Expand the list of libraries (click on the arrow to the left of “Libraries” in the “Workspace” tab, area 1).
55. Check the “libcurl.so” line.
56. Drag the files and folder contained in the “External code” folder into the Workspace area.
57. Create a system variable by clicking on the “SysEvent” button in the toolbar (area 4) :
    • Choose the “Timer” event.
    • Allow a period of 60000 milliseconds.
    • Fill the “Function to call” field with “getTemp“.
    • Add a variable by clicking on the “+” button.
    • Fill the “Name” field with “temp“.
    • Replace the type with “String (char*)“.
    • Click on “Save“.
58. Double click on the temperature number (top right).
59. Select the temperature text.
60. Make the text editable by checking the “Editable” box in the properties area (area 3).
61. Open the project editor.
62. Search for the time text in the editor.
63. Replace the line “text: “3”” with “text: ‘return temp;’“.

Congratulations! You have finished building your application.