Quick Tutorial: Custom Pixelmaps on S7G2



What we’re doing

  • Implement product feedback from young child to add a picture of her stuffed animal called Yuki onto S7G2 board.
  • Add text to button to display Yuki.

What you should do before this

This assumes you went through the Garfield Pixmap on S7G2 and now want to add custom icons.

Background of feature request

My pre-teen daughter liked the Pusheen and Garfield characters and requested that I build a demo around a stuffed animal she bought in San Francisco a month ago.

This is her stuffed animal with the S7G2 for scale.

Let’s get the cat into the S7G2 LCD screen.


  • Obtain graphic of stuffed animal, either from Google Image search or from an actual photograph
  • Use image editor to convert image into 128x128 pixel JPEG icon
  • Add icon to GUIX Studio
  • Create layout in GUIX Studio (drag and drop)
  • Generate GUI files for e2 Studio
  • Build in e2 Studio and transfer to the S7G2 board

Create Icon

I used GIMP to create a 128x128 JPEG image.

Add Icon to GUIX Studio

Click on Pixelmaps to expand. Click on Custom and Add New Pixelmap.

Add Icon to window2.

Adjust Pixelmap in *Properties View)

Save and generate output files.

e2 Studio

All the gui files are nicely generated for you in src/gui. In the file guiapp_resources.c, the pixelmaps are automatically put in.

Pixelmap values are automatically inserted.

You can also see the strings for the widgets.

Note that I did not edit this file by hand. I used the GUIX Studio to automatically create this file.

The event handling is taken care of in guiapp_event_handlers.c. I did not create new event handlers in this short tutorial.

Next Step

Go through guiapp_event_handlers.c and create your own event handler.

Quick Tutorial: Garfield Pixmap on S7G2
SK-S7G2 Tutorials
[SOLVED] SK-S7G2 GUIX "Hello World" Application Project