56 January 2018
Images can also be invisibly marked
with touch areas, which trigger
actions when touched.
Once all of the images and
windows with trigger areas are
defined, the CCS Interface Designer
generates C code associated with
the graphical inputs that were
provided by the programmer. The
resultant code is then run through a
compilation and linkage process.
Images used in the application must
also be downloaded to the Display
4. 3’s memory. That is accomplished
via the Interface Designer
application and the 4. 3’s USB portal.
Displaying an Image
Let’s begin our journey by importing an
image, adding an area to the imported image,
placing it in a window, and displaying it on the
Touch Display. Since there are a few too many
steps to illustrate one by one here, I’m going to
compress the visual keyboard strokes and place
multiple operations into a single view.
Screenshot 1 combines all of the steps
needed to create a new window called
windowBug. Basically, in Screenshot 1, we
create a window that is called by our desired
name and sized to our desired dimensions.
The next thing we want to do is get — or
import — an image to place into the window.
We will do that by accessing a file folder that
contains various graphical images, and selecting
the graphic we want to import. As you can see
in Screenshot 2, I’ve captured the Atmel Bug
image, named it Bug, and put it into the
Interface Designer jar.
We add an image to our new window in
Screenshot 3. Note the sidebar menus (Images
— Windows — Actions — Window Images).
These menus appear as we add images and
windows to the application. Interaction between
the windows, areas, and images is controlled
using these sidebar menus. Note also that we
must enter Window Edit Mode to add the
imported image to the window. It’s necessary to
flow between the Window Edit Mode and Image
Edit Mode to make and apply changes to each
ADVANCED TECHNIQUES FOR DESIGN ENGINEERS
■ SCREENSHOT 1. This is a
of the creation of a CCS
Interface Designer window.
■ SCREENSHOT 2.
This compressed-keystroke capture
features the Atmel
Bug. Note that at
this point we have
simply pulled the
image into the CCS
■ SCREENSHOT 3. This is a
compressed-keystroke view of the
steps needed to add an image to our
new window. Note the sidebar menus
that have appeared. Once a window
or image is added, the associated
sidebar menu is shown.
CCS PICC C Compiler
Touch Display 4. 3 Development Kit