creating the first project in Visual GLCD GLCD GUI design software Let’s go together through several easy steps and build a simple GUI with two buttons and two screens using the powerful Visual GLCD software.
TO OUR VALUED CUSTOMERS I want to express my thanks to you for being interested in our products and for having confidence in MikroElektronika. The primary aim of our company is to design and produce high quality electronic products and to constantly improve the performance thereof in order to better suit your needs. Nebojsa Matic General Manager The PIC® and Windows® logos and product names are trademarks of Microchip Technology® and Microsoft® in the U.S.A. and other countries.
Table of Contents 1. Introduction to Visual GLCD software 4 Change button caption to “Next Screen >” 15 2. What do we need? 5 Add another screen using the toolbar button 16 3.
1. Introduction to Visual GLCD software Visual GLCD software is a standalone application used for rapid development of graphical user interfaces for GLCD displays. Software generates code compatible with mikroElektronika compilers: mikroC, mikroBasic and mikroPascal, for all supported MCU architectures: PIC, dsPIC30/33, PIC24, PIC32, ARM and AVR.
2. What do we need? Figure 2-1: mikroC PRO for PIC is a powerful ANSI C compiler for popular Microchip PIC microcontrollers Figure 2-2: EasyPIC v7 is a full-featured PIC development board with In-Circuit debugger In this tutorial we will develop a simple application with two screens. Each screen will carry a button which can be used to switch to the other screen.
3. New Project Wizard 01 02 Start a new project wizard Let’s start by creating a new project. On the welcome screen click the New Project button 01 . A new window will appear and guide you through the process of creating a new project. The first thing we need to do is to specify the new project’s name and destination folder. Click the browse button 02 next to the edit field.
03 04 05 Specify project name and location A new dialog window will appear. First select the destination folder 03 where you want to store your new project. Then specify the project’s name 04 . “MyFirstProject”, for example. Then click the Save button 05 to confirm.
06 07 Make the final check and create a new project Full project path will be shown in the edit field 06 . If you want to change destination path or project name you can still do it. When you are done click the OK button 07 to create a blank new project.
08 09 Quick project configuration using Project Settings After the project is created the Project Settings window will appear. We need to specify the target hardware we will be using 08 and compiler 09 as well.
11 Select the target hardware Click the button 10 of the first dropdown box and a list of hardware configuration patterns will appear. Each one carries complete settings of GLCD and Touch Panel connections for the target hardware. We will select EasyPIC_v7_Connectivity from the list 11 .
12 13 Select the target compiler and confirm Now we need to select the target compiler. We will only be able to choose among PIC compilers because our selected target hardware (EasyPIC v7) is a PIC development board. Select mikroC PRO for PIC 12 and hit OK 13 .
4. Designing the User Interface So far, we have successfully created a blank new project for EasyPIC v7 development board. Graphics will be displayed on 128x64 pixel graphical display based on KS108 controller. A 4-wire resistive touch panel is placed on top of the display, thus creating a Touch Screen module. We have chosen to use mikroC PRO for PIC compiler and the code generated by Visual GLCD will be compatible with it. Let’s take a brief look at the Visual GLCD window before we begin.
01 03 04 02 05 Page 13
Place a button on the screen We will start by placing a Rounded Button component onto the Screen1. Just click and drag the component from the components palette and drop it over the center of the Screen1.
Change button caption to “Next Screen >” Click the button to select it. It’s properties will be shown in Components section of the Object Inspector. Click the Caption property and change it to “Next Screen >”. Button will be instantly updated. Readjust it’s size and position as shown in the screenshot above.
Add another screen using the toolbar button Let’s add another screen now. In the toolbar section locate the green round button with the white “plus” in the middle. It is used for adding screens to the project. Click this button to add a new screen.
New empty Screen2 New screen is automatically named Screen2. It will be initially empty. You can traverse through screens using the dropdown list in the Screens section of the Object Inspector.
Place a button on Screen2 Let’s now place a button on Screen2. As in the previous case, just click and drag the Rounded Button component from Components Palette window and drop it over the center of the Screen2. A new component named ButtonRound2 will appear.
Change button caption to “< Previous Screen” Click the ButtonRound2 to select it. It’s properties will be shown in Components section of the Object Inspector. Click the Caption property and change it to “Previous Screen >”. The button will be instantly updated.
Add “OnClick” event code to ButtonRound2 It’s time to specify the function of the buttons when clicked. In order to do that we will add OnClick events to both buttons. Locate the OnClick property of the ButtonRound2 in the Object Inspector and double click it. The User Code window will appear. It will contain the function prototype that is automatically associated with the click event. In the function body just type the following line of code: “DrawScreen(&Screen1);”.
Add “OnClick” event code to ButtonRound1 Select ButtonRound1 component from the dropdown list in the Components section of the Object Inspector window. Double click it’s OnClick property to create and associate corresponding function. Type the following line of code in the body of the function using the editor of User Code window: “DrawScreen(&Screen2);”. The code will be executed when the button is clicked, thus invoking the drawing of Screen2.
5. Building the code in the compiler We have now successfully created a new project, designed a new graphical interface with two screens and two buttons, and defined their behaviour. All we have to do now is to generate the application code and build it with mikroC PRO for PIC compiler, assuming that you have already downloaded and installed the mikroC PRO for PIC compiler and that you have a valid license (USB Dongle or KeyFile License).
Figure 5-1: mikroC PRO for PIC compiler loaded with our first Visual GLCD project Page 23
6. Uploading the firmware to MCU After the project is built, the compiler produces a .HEX file which can be downloaded into the target microcontroller on the EasyPIC v7 development board. Programming of the MCU is done using on-board mikroProg USB 2.0 programmer/debugger and the software called mikroProg Suite for PIC. Software and programmer drivers are usually installed together with the compiler.
7. Test on target hardware When programming is done, the application will start and the Graphic Display will show calibration screen. This is due to the piece of code automatically created by Visual GLCD software. It will help you to calibrate the Touch panel using 2-point calibration procedure. After that, the initial screen will appear. It features the “Next Screen >” button, exactly as we have intended. One click of the button takes us to the next screen.
8. What’s Next? We have successfully created together your first project in Visual GLCD software. But this is only the first step. You can now continue on your own, but will always have our help and support along the way. Projects Community Support Choose the development board and compiler and you are ready to start writing your projects. We have equipped If you want to find answers to your questions on many interesting topics we invite you to visit our forum at http://www.mikroe.
DISCLAIMER All the products owned by MikroElektronika are protected by copyright law and international copyright treaty. Therefore, this manual is to be treated as any other copyright material. No part of this manual, including product and software described herein, may be reproduced, stored in a retrieval system, translated or transmitted in any form or by any means, without the prior written permission of MikroElektronika.
If you want to learn more about our products, please visit our website at www.mikroe.com If you are experiencing some problems with any of our products or just need additional information, please place your ticket at www.mikroe.com/esupport If you have any questions, comments or business proposals, do not hesitate to contact us at office@mikroe.
