Microchip Graphics Suite (MGS) Simulator EV Charger Example

Last modified by Microchip on 2024/09/18 14:44

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.

To learn more about the MGS Composer, refer to the "Microchip Graphics Suite (MGS) Harmony Composer User Guide" page.

To learn more about the MGS Simulator, refer to the "Microchip Graphics Suite (MGS) Simulator User Guide" page.

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 is 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.
EV Charger example application

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.

New project

Select Application Project(s), click Next.

Project type

In the Device textbox, type “sam9”, from the resulting list, choose SAM9X60D1G. Click Next. Target Type

For Compiler, choose XC32 v4.40. Click Next.

Compiler Version

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.

Project name

This will launch the MCC Content Manager Wizard. Click Select MPLAB Harmony.

From the MCC Harmony Content Manager, choose the mandatory library for installation (bsp, csp, core, Devices, dev_packs, and gfx). If the required SW is already installed, the Content Manager will display a notification indicating that it is already in place. Click Finish.
MCC finish screen

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.

Add BSP

- Libraries > Harmony > Graphics > Templates > Legato Graphics w/ PDA TM5000 Display

Add GFX Template

This will launch several pop-up windows asking you to confirm if other components can be added to the graph and if they can be interconnected. Say Yes to all pop-ups except FreeRTOS.

- Libraries > Harmony > Peripherals > RTC

Add RTC

- Libraries > Harmony > Simulator > MGS Web Simulator.

Add MGS Simulator

Right-click on LE Display Driver from Legato block and click disconnect.

Disconnect Legato

Right-click on LE Display Driver again, and from the list of satisfiers, choose Graphics Canvas.

Connect Canvas

Now connect LE Display Driver on both Graphics Canvas and LE LCDDC Driver blocks.

Connect LCDC Canvas

Selecting Graphics Canvas from project graph, make the changes highlighted below in the Configuration Options:

Canvas Configuration

The Composer design has 3 layers where layer_0 and layer_1 are of the size 800x480 and layer_3 is of the size 161x261. The configurations of the 3 canvas objects above reflects this.

Select LE LCDC Driver from project graph and in the Configuration Options, select Canvas Mode.

Enable Canvas Mode

We will modify the project graph to work with the MGS Simulator since we will develop our application using the Simulator first and then port it to the target. Switching from Simulator to target and vice versa is trivial therefore we will have components for both options available.

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.

Changes for MGS Simulator

The MGS Simulator supports calls to Time System Service APIs. You may also print to a console using printf (line buffered).

Select MGS Web Simulator from the project graph and from the Configuration Options. For Display Type, choose WVGA.

Simulator Configuration

Choose the display type based on the target display. If you are using a circular display, select the Circular Display checkbox.

The final Project Graph should look as shown in the accompanying image.

Project Graph Final

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.

Download the design ZIP file to the project at the following location: EVCharger\src\config\default.

From the Project Graph Plugins drop-down menu, launch Microchip Graphics Composer.
launch MGS Harmony 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.

Composer with Project

Take the time to observe the design in the MGS Harmony Composer including the images, strings, etc.

Keeping the MGS Harmony Composer open, from the MCC Resource Management tab, click Generate.
Click Generate

This will generate an MGSWS file in the EVCharger\src\config\default folder. This file will be used by the simulator.

With this, we have finished designing the GUI, and using MCC, we have generated the required MPLAB Harmony code. We are now ready to develop the application code.

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.

Take the time to observe the application code in app.c, app_scene0.c, app_scene1.c, app_scene2.c and app.h:

Three canvas layers are set up with size and position. The third canvas is used for the charge cable animation.
LeFixedString variables to display the meter readings, etc. are created and pointers to cable images are initialized for animation. 14 pictures of cables are cycled through using gfxcSetPixelBuffer to animate the charge cable.
Three timers are set up for cable animation, to track idle time for Screen 2 and to animate the microchip icon and the battery on Screen 3.
Touch input listener is added to track user input to return from Screen 3 to Screen 2.
Button event handlers are added for the power buttons, and the +/- buttons.
Logic is added to track which screen is displayed and updated accordingly using gfxcShowCanvas/gfxcHideCanvas.

Building the Application Using MGS Harmony Simulator

Before using the MGS Simulator to build the demo application, make sure that you have installed and familiarized yourself with the Simulator. Also, make sure that the MGS Simulator SDK is installed. To learn more, refer to the MGS Simulator guide.

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).

Launch the MGS Simulator

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.

Open Simulator Project

Project Open

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.

Import the application file and click build

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.

Click on the link (highlighted) to launch the MGS Simulator output

The MGS Simulator output has been tested on Google Chrome and Microsoft Edge.

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).

Launch the MGS Simulator

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.

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.

Import the application file and click Export

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.

Output Console

Ensure that Microsoft® Visual Studio Code (VS Code®) or a suitable IDE is installed with all the necessary extensions.

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.

Open with Code option

VS Code is launched with the project. In the pop-up window, click the Yes, I trust the authors button. Authorize user application files

Press F5 on your keyboard to build and run the demo in debug mode. Alternately, click on the Run and Debug icon, then click on Debug button. Launch Debug

The demo application is launched in a separate window. Step through the code using the debug icons.

DebugIcons

Explore the application files using the project explorer and set breakpoints by pressing F9.

Set BreakPoints

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:

Project Graph

Click MCC Generate.

In app.h, uncomment the following line of code:

//#define TARGET 1

In EVCharger/src/config/default/gfx/legato/renderer/legato_renderer.c, find the following lines of code:

#ifndef LE_NO_CACHE_ATTR
#define LE_NO_CACHE_ATTR
#endif

Replace the above lines of code with the following:

#ifndef LE_NO_CACHE_ATTR
// 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 harmony

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.

If you get any build errors due to warnings, go to project properties and uncheck the Make warnings into errors checkbox and Additional warnings checkbox.

Copy the harmony.bin from EVChargerTraining/EVCharger.X/dist/default/debug folder to a fat formatted SD card. Copy the boot.bin to the same SD card.

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.

You should see the EV Charger demo on the display and the user experience should match what you saw with the MGS Simulator.

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:

Tabulations

The accompanying image captures the changes required in the project graph:

Project Graph Changes