Microchip Graphics Suite (MGS) Simulator EV Charger Example
Introduction
This guide shows how to develop an Electric Vehicle (EV) Charger Graphics application using the Microchip ecosystem - Microchip Graphics Suite (MGS) Composer, MPLAB® X IDE, MPLAB Code Configurator (MCC), and MGS Simulator.
This guide shows how easy it is to develop a graphics application using the MGS Simulator and port it to the desired target once the application is ready.
Required Hardware and Software
For the purpose of this training, the required hardware are as follows:
- EV40E67A SAM9X60 Curiosity Development Board.
- A Micro-USB cable to power the board.
- High-Performance WVGA Display Module with maXTouch® Technology.
- External Segger JTAG debugger such as J32 Debug Probe.
The required software is as follows:
Description of Example Application
In this training session, we are going to create an EV Charger demo application that has a moderate degree of complexity. The Composer design has three layers. Canvas is enabled and several PLIBs such as RTC, TC, LCDC, etc are used. Below, you will find a description of the GFX User Interface (UI) and its functionality.
- From the first screen displaying the Please, plug your car message, pressing the red power button launches the charging screen with the charge cable animation.
- Pressing the + and - buttons beside the battery increases/decreases the battery percentage and changes the string for output power, charge time, etc.
- If 100 percent battery charge is reached, Battery Fully Charged is displayed. Pressing the green power button reverts to the first screen.
- From Screen 2, on a 10-second idle time, the Charging... screen is displayed. Pressing anywhere on the screen reverts to the charging (second) screen.
Getting Started with the Application
In this section, we will learn how to use the MPLAB X IDE to create the EV Charger example application.
Create an MCC Project
We start by creating an MCC project.
Click on the New Project icon.
Select Application Project(s), click Next.
![TargetType](/xwiki/bin/download/software-tools/mgs/mgs-harmony-guide/simulator/complex/WebHome/1717124277089-677.png?rev=1.1)
For Compiler, choose XC32 v4.40. Click Next.
In the last window, enter the project name and location. Leave the Set as main project and Open MCC on Finish checkbox checked. Click Finish.
![MCC Content Manager wizard](/xwiki/bin/download/software-tools/mgs/mgs-harmony-guide/simulator/complex/WebHome/1708582010596-837.png?width=600&height=169&rev=1.1)
![MCC finish screen](/xwiki/bin/download/software-tools/mgs/mgs-harmony-guide/simulator/complex/WebHome/1708582444359-726.png?rev=1.1)
Build the Project Graph
Next, we will build the Project Graph by adding the necessary resources and configuring them. For this example, we build the project graph as explained in the following steps.
From the MCC Resource Management tab, Select the following components from Device Resources by clicking on the add icon:
- Libraries > Harmony > BSP > SAM 9x60 Curiosity BSP.
- Libraries > Harmony > Graphics > Templates > Legato Graphics w/ PDA TM5000 Display
- Libraries > Harmony > Peripherals > RTC
- Libraries > Harmony > Simulator > MGS Web Simulator.
Right-click on LE Display Driver from Legato block and click disconnect.
Right-click on LE Display Driver again, and from the list of satisfiers, choose Graphics Canvas.
Now connect LE Display Driver on both Graphics Canvas and LE LCDDC Driver blocks.
Selecting Graphics Canvas from project graph, make the changes highlighted below in the Configuration Options:
Select LE LCDC Driver from project graph and in the Configuration Options, select Canvas Mode.
Disconnect the connection between Graphics Canvas and LE LCDC Driver (right-click on the green diamond on Graphics Canvas block and select Disconnect) and connect Graphics Canvas and MGS Web Simulator. Also, disconnect Time System Service block from TC0 and connect it to the MGS Web Simulator. Disconnect LE GFX2D from Legato.
Select MGS Web Simulator from the project graph and from the Configuration Options. For Display Type, choose WVGA.
The final Project Graph should look as shown in the accompanying image.
Designing GUI with MGS Harmony Composer
With the MCC project created and the project graph ready, we will finally design the GUI using MGS Harmony Composer. For the purpose of this training, we will use a pre-made design.
From the Project Graph Plugins drop-down menu, launch Microchip Graphics Composer.
From MGS Composer, click Load an existing project and choose the design file from Step 1. The Composer displays the project design as shown in the accompanying image.
![Click generate](/xwiki/bin/download/software-tools/mgs/mgs-harmony-guide/simulator/complex/WebHome/1708587374753-438.png?rev=1.1)
Application Code - Example
The EV Charger example application can be downloaded from GitHub.
Copy the app.c, app_scene0.c, app_scene1.c, app_scene2.c and app.h file to your project.
Building the Application Using MGS Harmony Simulator
Using the MGS Simulator in Web Mode
To run the GFX demo application on the Simulator in web mode, follow the tutorial steps:
Launch the MGS Simulator installed in the C:\Users\<USER>\AppData\Local folder or use the desktop shortcut (if selected during installation).
Click Open and choose the default.mgsws file in the EVCharger\src\config\default folder generated by MCC as explained in the Designing GUI with MGS MPLAB Harmony Composer section.
Make sure that the Simulator is in web mode. To build the project, import the application file(s) and click Build as shown in the accompanying graphic.
On a successful build, you should see an output as shown in the accompanying image, including a link to the generated HTML file. Click on the link (highlighted) to launch the MGS Simulator output on your default web browser.
MGS Simulator Output
To interact with the MGS Simulator output:
- Click on the red and green power button.
- Click on the + and - buttons next to the battery and observe the changes.
- From the charging screen (with the animated power cable) on a 10-second idle time, the charging screen is launched. Observe the Microchip logo animation.
- Click anywhere on the screen to revert to the charging screen.
Using the MGS Simulator in Native mode
To run the GFX demo application on the Simulator in native mode, follow the tutorial steps:
Launch the MGS Simulator installed in the C:\Users\<USER>\AppData\Local folder or use the desktop shortcut (if selected during installation).
Click Open and choose the default.mgsws file in the EVCharger\src\config\default folder generated by MCC as explained in the "Designing GUI with MGS MPLAB Harmony Composer" section.
Make sure that the Simulator is in native mode. To build the project, import the application file(s) and click Export as shown in the accompanying graphic.
From the Export pop-up window, choose any location to export the cmake project. In the output console, you will immediately see a log message that the project export is complete.
Right-click on the folder to which the project was exported. You may have to hold down the shift key. Click on Open with Code.
![Authorize user application files](/xwiki/bin/download/software-tools/mgs/mgs-harmony-guide/simulator/complex/WebHome/1717103738879-153.png?rev=1.1)
![Launch Debug](/xwiki/bin/download/software-tools/mgs/mgs-harmony-guide/simulator/complex/WebHome/1717103754137-609.png?rev=1.1)
The demo application is launched in a separate window. Step through the code using the debug icons.
Explore the application files using the project explorer and set breakpoints by pressing F9.
Porting to the Target
Now that the EV Charger demo application is ready and tested using the Simulator, we are ready to port it to the target, which is a straightforward process.
Change the MCC project graph as shown in the accompanying image:
In app.h, uncomment the following line of code:
In EVCharger/src/config/default/gfx/legato/renderer/legato_renderer.c, find the following lines of code:
#define LE_NO_CACHE_ATTR
#endif
Replace the above lines of code with the following:
// CUSTOM CODE - DO NOT OVERWRITE
#define LE_NO_CACHE_ATTR SECTION(".region_nocache")
// END CUSTOM CODE
#endif
From the dashboard pane, click on the wrench icon to launch the project properties. Select Building from Categories and select the Execute this link after build checkbox and in the textbox enter:
${MP_CC_DIR}/xc32-objcopy -O binary ${DISTDIR}/${PROJECTNAME}.${IMAGE_TYPE}.elf ${DISTDIR}/harmony.bin
Build the project by pressing F11 from your keyboard or click the Clean and Build icon .
This builds the project successfully for the target. You will find harmony.bin generated in the EVCharger/evCharger.X/dist/default/debug folder.
Connect the WVGA display to the SAM9X60 Curiosity board. Power the board by connecting a USB cable to J1. Insert the SD card to J3 and press the Reset button.
It is easy to switch between simulator and target for this example if we keep the following required changes in mind:
- Project graph changes
- #define TARGET in app.h
- #define LE_NO_CACHE_ATTR in legato_renderer.c
This above bullet points are tabulated below:
The accompanying image captures the changes required in the project graph: