Visual GLCD. Creating the First Project. additional software. GUI design made easy

Size: px

Start display at page:

Download "Visual GLCD. Creating the First Project. additional software. GUI design made easy"

Stephen Cobb
6 years ago
Views:

1 Creating the First Project Software for rapid development of graphical user interfaces for various types of GLCDs in embedded devices. additional software Visual GLCD GUI design made easy

SOFTWARE FOR RAPID DEVELOPM OF GRAPH ENT ICAL USER INTERFACE FOR VARIO S US TYPES O F GLCDs IN EMBED DED DEVIC ES. You design. We code. This software allows your creativity to come ﬁrst.

You don t have to be a programming guru anymore to create fancy touch applications. CHOOSE your favorite MikroElektronika compiler and build great GLCD applications TODAY! Saving Tim e And Mon ey.

2 SOFTWARE FOR RAPID DEVELOPM OF GRAPH ENT ICAL USER INTERFACE FOR VARIO S US TYPES O F GLCDs IN EMBED DED DEVIC ES. You design. We code. This software allows your creativity to come ﬁrst. After you are done designing, it will generate all those complex GUI codes for you automatically! Easy To Use Even beginners can make great GUIs. You don t have to be a programming guru anymore to create fancy touch applications. CHOOSE your favorite MikroElektronika compiler and build great GLCD applications TODAY! Saving Tim e And Mon ey. With intuitive user environment you ll cut production time in half, saving money along the way. You ll be amazed how easy you can get the job done. Software includes: - free examples - kickstart online video tutorials - 15 great GUI components - intuitive user interface - support for Mikroelektronika compilers - free software upgrades - free product lifetime tech support GET IT NOW

3 Table of contents Introduction 4 Hardware Connections 5 Creating a new project 6 Step 1. Create Project Files 6 Step 2. Configure Project 6 Step 3. Add Screen and give it a name 7 Step 4. Place Components 8 Step 5. Enter the components properties 8 Step 6. Assigning Actions To Components 9 Step 7. Generate the Code 10 Step 8. Open Your Project In a Compiler 11 What s Next? 12 mikroelektronika VisualGLCD Additional Software 3 PAGE

4 Introduction The following text will help you in using Visual GLCD for the first time. In order to make it clear and easy to understand, we divided the process of developing your first project into several steps. We chose this order of steps just to help you with your first project. 1. Create Project Files 2. Configure Project 3. Add Screen and give it a name 4. Place Components 5. Enter the components properties 6. Assigning Actions To Components 7. Generate the Code 8. Open Your Project In a Compiler Note that you don t have to follow the proposed procedure to make your project work. The small project created in this tutorial is intended for the mikroc PRO for PIC compiler, so the generated code will be written in mikroc language. Note that this tutorial is relevant for other Mikroelektronika s compilers as well (mikropascal and mikrobasic). PAGE 4 VisualGLCD Additional Software mikroelektronika

5 PIC18F4520 Hardware Connections For the purpose of testing this example on a PIC microcontroller, it is necessary to connect GLCD and touch panel as per schematic below. Figure 1. Connecting GLCD and Touch Panel with microcontroller Installation Prior to creating a new project, it is necessary to do the following: Step 1: Install the Visual GLCD program Download the Visual GLCD program from our web site at Then follow the procedure in order to install it. Desktop shortcut and start menu shortcut will be automatically created. Step 2: Start up the program Start up the Visual GLCD by double clicking on the appropriate icon. The Visual GLCD IDE (Integrated Development Environment) will appear on the screen. Now you are ready to create a new project. mikroelektronika VisualGLCD Additional Software 5 PAGE

Enter the project name and choose the desired project path. Then click OK. Figure 2.

6 Creating a new project Step 1: Create Project Files The process of creating a new project is very simple. Select the New option from the Project menu, or click on the New Project icon from the Project toolbar. A window, as shown in Figure below, will appear on the sreen. Enter the project name and choose the desired project path. Then click OK. Figure 2. You must first specify the project path and project name Step 2: Configure Project As soon as you enter the previous information and click on the OK button, the Settings window appears. Here, you can set your hardware and software configuration: Figure 3. Settings Window PAGE 6 VisualGLCD Additional Software mikroelektronika

Step 3: Add Screen and give it a name After configuring your project parameters in the Settings window and clicking on the OK

As you can see, it contains only one blank screen. Figure 4. Blank New Screen Let s rename this screen to StartScreen.

can be added by clicking on the Add Screen icon from the Screens toolbar. We will add another one now and name it SecondScreen.

7 Step 3: Add Screen and give it a name After configuring your project parameters in the Settings window and clicking on the OK button, a new project will appear. The visual overview of your project is available in the Display view. As you can see, it contains only one blank screen. Figure 4. Blank New Screen Let s rename this screen to StartScreen. In the Screens section of the Object Inspector view, find the Name property, and enter the new name of the screen here: A new screen can be added by clicking on the Add Screen icon from the Screens toolbar. We will add another one now and name it SecondScreen. Use the tabs located at the bottom of the Display view in order to navigate between the different screens. Figure 5. Screens tabs mikroelektronika VisualGLCD Additional Software 7 PAGE

Step 4: Place Components Now when you know how to deal with screens, it s time to add components to the screens.

Click on the component you want and drag-and-drop it onto the selected screen. Repeat the same procedure for each component you want to add.

Adding Components onto a Screen Step 5: Enter the components properties You can modify all the properties of a component, such as name, caption,

8 Step 4: Place Components Now when you know how to deal with screens, it s time to add components to the screens. You can choose components you want to add among the available components in the Components Palette. Click on the component you want and drag-and-drop it onto the selected screen. Repeat the same procedure for each component you want to add. drag-n-drop Figure 6. Adding Components onto a Screen Step 5: Enter the components properties You can modify all the properties of a component, such as name, caption, size, color, etc. You just have to select the component in the display view and go to the Components section of the Object Inspector. In the example below we have modified the Caption property. Do the same for any component you have defined in your project. Figure 7. Edit component s properties in Object Inspector PAGE 8 VisualGLCD Additional Software mikroelektronika

Step 6: Assigning Actions To Components At this stage, you have created all graphical components and you have a clear idea of their usage. So, it s time to add some action to your project.

9 Step 6: Assigning Actions To Components At this stage, you have created all graphical components and you have a clear idea of their usage. So, it s time to add some action to your project. Select one component. In the Object Inspector view, double click on the event (OnDown, OnClick or OnPress) you want to associate to this component. Figure 8. Assigning OnClick Event to selected button The following function will automatically appear in the Display Code view. Figure 9. User Code Window displaying OnClick handler function Use this view to add the code to be associated to the event. For example, let s say that we want to invert the logic states of PORTA pins: Figure 10. Simple mikroc code for toggling PORTA LEDs Each time you press Button2 on the touch panel, the logic states of PORTA pins will be inverted. Repeat the same procedure to define the function associated to all components of your project. mikroelektronika VisualGLCD Additional Software 9 PAGE

Step 7: Generate the Code Now, all the components of your project have been created and their associated events have been defined. Your job is already finished.

10 Step 7: Generate the Code Now, all the components of your project have been created and their associated events have been defined. Your job is already finished. The last step is the generation of different files, such as driver file (hardware connections and graphical functions), events file (regroup the different events of your project), main file (main function) and a header file (object declaration). To generate the code, just click on the Generate Code icon. The created files appear in the Generated Code view: Figure 11. Generated Code Window PAGE 10 VisualGLCD Additional Software mikroelektronika

The generated files are stored in this folder. Open the project by clicking on the.mcppi file.

11 Step 8: Open Your Project In a Compiler Open the project folder (the one you defined while creating the project). Figure 12. Project Folder and Files Folder with the name of the target compiler (this is the one you defined in Settings). Open it. The generated files are stored in this folder. Open the project by clicking on the.mcppi file. The compiler will automatically start up and the project files will appear in the Code window and in the Project Manager view. Figure 13. Generated project opened in mikroc PRO for PIC Compiler mikroelektronika VisualGLCD Additional Software 11 PAGE

12 What s Next? More Projects Now when you have successfully created the first project, it s time to move on to more complex examples. Check out the examples provided in the Examples folder located in the VisualGLCD installation folder. Feel free to experiment on your own and change the code as you much as you like, so it suits your new project idea. Compiler You still don t have the appropriate compiler? Visit and choose the compiler that suits you best. Software is equipped with fully functional demo version, limited only to 2K of generated code s program words. Support If you cannot find enough information in the Help file, or you need to ask a question or report a malfunction, feel free to contact our Technical Support Team at

GUI design made easy. Creating the First Project with. additional software

GUI design made easy. Creating the First Project with. additional software Creating the First Project with additional software Software for rapid development of graphical user interfaces for various types of TFT displays GUI design made easy To our valued customers, I want to