Jumping into GEMstudio. User guide 2013

Transcription

1 Jumping into GEMstudio User guide 2013

2 Table of Contents Jumping into GEMstudio...3 Lesson 1) Launching GEMstudio...4 Lesson 2) Creating & Editing Pages...7 Lesson 3) Adding Buttons...13 Lesson 4) Assigning Button Function...20

3 Jumping into GEMstudio GEMstudio, from Amulet Technologies, is a complete software design environment for easy implementation of a Graphical User Interface (GUI) and touchscreen control for your OLED or LCD displays. This innovative software along with custom hardware, provides a complete package which includes authoring, programming, and simulating tools. This series of 4 lessons are designed for new users of GEMstudio. No programming knowledge is necessary. These lessons will give you an easy introduction to the GEMstudio design environment and demonstrate how to build a 2 screen project with navigating buttons. You will then simulate the design on a 480x272 virtual display.

4 Lesson 1) Launching GEMstudio Make sure you have already installed GEMstudio on your computer. Launch the GEMstudio application: Double click on the GEMstudio icon on your desktop. The GEMstudio introduction screen will appear. Click on the first option, "Create a New GEMstudio Project" The Project Properties window will appear:

5 For the purpose of this tutorial, our project will be for a 480 x 272 LCD. Make sure your settings match those shown above. Click "OK" to launch the main design environment.

6 The main design environment includes Main Toolbar: Pull-down menus for easy access to all commands, tools, and settings Property Panel: Listing of details and function every widget and pages created for the GUI. Layout Editor: Work area for positioning graphical elements for the display. This is the virtual LCD screen you are designing. Add/Delete Widgets: The starting point for every design. Push "+" to add pages, buttons and widgets, text, and all images Program: Compile and program Amulet Display hardware Run: Run a simulation of your virtual display

7 Lesson 2) Creating & Editing Pages Page 1 is given with an empty screen and white background. Selecting Page_1 in the Property Panel will display page 1 of your project in the layout editor. Page_1 will be color highlighted to indicate it's been selected. Changing Background Color The first change to page 1 will be changing the background color. Under "Property Value", right mouse button click on Page_1. This will bring up the following menu:

8 Select "Edit Page Properties". The Page Options window will appear indicating the background color as #FFFFFF. The Bkgnd Color field indicates the color with a RGB hex value. The easiest method to change the background color would be to overwrite #FFFFFF with the name of the desired background color. Type "aqua" without quotes into the Bkgnd Color field Click "OK" The layout editor will now have an aqua background color.

9 Adding a New Page Now we'll proceed to create an additional page. Left click on the "+" sign in the lower left corner and a pop up menu will display: Click on "New Page". The Page Options box will appear. Note that the page name is Page_2.

10 Click "OK" The design environment will now display Page_2. Adding Background Image Rather than changing the color of the background as we did for page 1, now we will import an image for the background. Click on the "+" button

11 Select "Background" A file explorer dialogue box will appear. Now navigate into your "Tutorial" folder, which by default is placed here: %USERPROFILE%\My Documents\GEMstudio\Tutorial Within the tutorial directory, double click on "background.jpg". The layout editor will display Page_2 with the background image:

12 Congratulations, you've completed Lesson 2!

13 Lesson 3) Adding Buttons Click on Page_1 in the Property Panel to select page 1. Left click on the "+" button.

14 From the menu, select Widgets è CustomButton The property window will give details on the button which was just placed.

15 Click and drag the button to position in the lower right of the screen. Now we will add an image to the button. Look into the Property window to find the downimage property.

16 A file explorer dialogue box will appear. Now navigate into your "Tutorial" folder, which by default was placed here: %USERPROFILE%\My Documents\GEMstudio\Tutorial Double click on the file, "RightArrow_down.png" Repeat the procedure for "upimage"

17 Double click on the file, "RightArrow_up.png" Your design environment should appear the same as below:

18 We need to create the same button on page 2. Easiest method is to do a Copy and Paste. In the Layout Editor: Right click on the button Choose Copy Left click Page_2 in the Property Panel to bring up screen 2 in the Layout Editor. Type the keyboard shortcut for paste: Ctrl-V

19 Go ahead and click and drag the button to reposition. The next and final lesson will cover assigning a function to the button. We are going to decide on what action to take when the button is pressed.

20 Lesson 4) Assigning Button Function Go to page 1. Left click on the button that was placed in the Layout Editor The Property Panel expands to display all the properties for that custom button. One of the properties listed under CustomButton_1 is "href" HREF is an acronym for Hypertext Reference. This property will allow us to program a function assigned to that button. Click in the empty area right of "href" shown below:

21 The "Event Method List" window will appear. This is the area where the button function commands are written. Type "Page_2.open()" without the quotes in the window. Alternatively, the button functions can be written using the autocomplete method. By pressing the "Tab" key on your keyboard, a drop-down menu will appear listing all the possible button command assignments. This autocomplete feature reduces syntax errors when writing the function code. Click on "Page_2." at the bottom of the list.

22 Press the "Tab" key to complete the command. Click "Done" We have finished the function programming for this button. When the button is pressed, the command, "Page_2.open()" gets executed. In Lesson 3, we learned about Copy and Paste of buttons from one page to another. Go ahead and copy the button on page 1 and paste it on page 2. Oops. Now there are 2 buttons on this page. Recall that in the Lesson 3, we already pasted a button on page 2. Just delete the bottom button, CustomButton_1. Right click on the button that was previously pasted in Lesson 3

23 Select "Delete" Since we copied the button from page 1 to page 2, the href function was also copied. We must now go to page 2 and change the href function call. Go to the CustomButton_2 properties Edit the href statment from "Page_2.open()" to "Page_1.open()" Simulate a Project Simulating a project, enables the user to preview and test the GUI before programming the physical hardware. To simulate the entire project, click on the button on the lower right corner of the design environment. This design can later be programmed into the actual LCD hardware, and the LCD look and function will be identical to the simulation. An error message about the Com port may appear.

24 Click on "OK" The virtual LCD screen will appear which should look like this: This is the LCD simulation window showing Page 1 with the button. You can click on the arrow button and see button image change. Releasing the button will trigger jumping to page 2.

25 Now pushing this button and releasing will take you back to page 1. Congratulations for completing "Jumping into GEMstudio" tutorial.