<<< Back to part 2

Getting Started - 03

Next let's add an image =)

To load a image into our project we need to use pygame.image.load(). There's a few images that come with CactusGUI, put the code to load them under the code for 'white bg' but above the last gui.enterState()

image00 = pygame.image.load('resource_files/main/images/cactus_gui_logo.jpg')
image01 = pygame.image.load('resource_files/main/images/cactus_gui_logo_recolored.jpg')
image02 = pygame.image.load('resource_files/main/images/cactus_gui_logo_recolored_2.jpg')

Now we can make an image element. Under the place where the image files where loaded, put:

gui.makeImage('example image')
gui['example image'].style(owner='main', image=image00, top=30, left=30)

If you run this right now, you'll notice that the image is a bit big for our tiny example window.

Let's resize it. Add another line:

gui['example image'].style(resize=True, height=200, width=200)

Better!

Now that we've got our image, let's add some effects to it.

Add another line:

gui['example image'].style(use_hover=True, use_click=True)

This gives the image click and hover events and styles.

Now we can give the image different attributes when the mouse hovers over it. Add another line:

gui['example image'].hoverStyle(image=image02)

If you run it now you'll see the image change when you hover over. Let's take in a step farther though, let's make the background change colors when you hover over the image. For this we'll need to use events:

def example_image_on_hover(element_name):
	gui['white bg'].style(color=(255,255,150))

def example_image_on_unhover(element_name):
	gui['white bg'].style(color=(255,255,255))

gui['example image'].events(onHover=example_image_on_hover, onUnhover=example_image_on_unhover)

The function example_image_on_hover() changes the background, "white bg", to light yellow. The other function example_image_on_unhover() changes it back to white. The events() function attaches the two functions to its element's onHover and onUnhover events.

Full code so far:

import pygame
from cactus_gui import gui

# Window Vars
windowWidth = 500
windowHeight = 300
windowTitle = 'CactusGUI Example'


# Init
pygame.font.init()
screen = pygame.display.set_mode((windowWidth, windowHeight))
clock = pygame.time.Clock()
running = True
pygame.display.set_caption(windowTitle)


# Gui Startup
gui.setup( screen=screen, screen_width=windowWidth, screen_height=windowHeight )
gui.makeState('main')
gui.enterState('main')




#-----------------------------------------------------------------------------




# Add a white background for looks
gui.makeBackground('white bg')
gui['white bg'].style(owner='main', color=(255,255,255), z_order=-200)




# Load images
image00 = pygame.image.load('resource_files/main/images/cactus_gui_logo.jpg')
image01 = pygame.image.load('resource_files/main/images/cactus_gui_logo_recolored.jpg')
image02 = pygame.image.load('resource_files/main/images/cactus_gui_logo_recolored_2.jpg')




# Make an Image
gui.makeImage('example image')
gui['example image'].style(owner='main', image=image00, top=30, left=30)
gui['example image'].style(resize=True, height=200, width=200)




# Add effects to our Image
gui['example image'].style(use_hover=True, use_click=True)
gui['example image'].hoverStyle(image=image02)





# Events for the Image

def example_image_on_hover(element_name):
	gui['white bg'].style(color=(255,255,150)) #Changes the bg to light yellow

def example_image_on_unhover(element_name):
	gui['white bg'].style(color=(255,255,255)) #Changes the bg back to white

gui['example image'].events(onHover=example_image_on_hover, onUnhover=example_image_on_unhover) #Attaches the functs to the Image's events




#-----------------------------------------------------------------------------



gui.enterState('main')



while running:
	
	for event in pygame.event.get():
		if event.type == pygame.QUIT:
			running = False 
		elif event.type == pygame.MOUSEMOTION:
			gui.listener.listenForHovers(event.pos)
		elif event.type == pygame.MOUSEBUTTONDOWN:
			gui.listener.listenForMousedowns(event)
		elif event.type == pygame.MOUSEBUTTONUP:
			gui.listener.listenForMouseups(event)
		elif event.type == pygame.KEYDOWN:
			gui.listener.listenForKeydowns(event)
	
	gui.listener.listenToFrames()
	
	pygame.display.flip()
	clock.tick(60)