Building A Color Picker in PyGame using Hooman
Tags: python, pygame, hooman
Published: 2020-09-13 16:32:26

---
title: Building A Color Picker in PyGame using Hooman
published: true
description: Building a color picker using Python
tags: python, pygame, hooman
//cover_image: https://direct_url_to_image.jpg
---
In this tutorial we'll be building a color picker in PyGame using the Hooman library:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s2ua0buvr8i0x3p5gxgy.png)

## Introducing Hooman

[Hooman](https://github.com/Abdur-rahmaanJ/hooman) is a library which simplifies PyGame coding.

To install it's just:

```
pip install Hooman
```

The Hooman skeleton is as follows:

```python
from hooman import Hooman
import pygame

window_width, window_height = 500, 500
hapi = Hooman(window_width, window_height)


while hapi.is_running:
    
    hapi.flip_display()
    hapi.event_loop()

pygame.quit()
```

## Building the picker

We need two Hooman elements:

The Slider and the text element.

The slider is as follows:

> hapi.slider(x, y, width, height, options)

where options is a dictionary

The docs tell us:

```
optional parameters

background_color - the background color of the slider
slider_width - the width of slider, by default it is the same as the height
slider_color - the color of the slider
starting_value - the starting value of the slider, by default it is in the middle of the range
value_range - the range that the slider ranges between, by default it is between 0 and 1

Methods

update() - this updates the slider and draws it on screen, this should be called every frame
value() - this returns the current value of the slider
set_value(value) - given a integer or float, this sets the value and moves the slider
```
Before the while loop we set 3 sliders:

```python
slider_options = {"value_range": [0, 255]}

r_slider = hapi.slider(50, 300, 400, 10, slider_options)
g_slider = hapi.slider(50, 330, 400, 10, slider_options)
b_slider = hapi.slider(50, 360, 400, 10, slider_options)
```

where each has a range of 0 to 255

Then we set the background to the slider values. Before the background docs tell:
```
.background

used to set background color of screen
hapi.background((100, 100, 100)) for r g b
hapi.background(100) same as hapi.background((100, 100, 100))
```

The below snippet suits our purpose:

```python
while hapi.is_running:
    bg_col = (r_slider.value(), g_slider.value(), b_slider.value())
    hapi.background(bg_col)
```

colors are set as tuples of 3 values viz red, blue, green

Then after we update the sliders:

```python
    r_slider.update()
    g_slider.update()
    b_slider.update()
```

Then we display the values using .text

.text(the string, x, y)

```python
    hapi.fill(hapi.color["black"])
    r_text = "r:{}".format(r_slider.value())
    hapi.text(r_text, 50, 280)
    g_text = "g:{}".format(g_slider.value())
    hapi.text(g_text, 50, 310)
    b_text = "b:{}".format(b_slider.value())
    hapi.text(b_text, 50, 340)
```

## The complete snippet:

```python
from hooman import Hooman
import pygame

window_width, window_height = 500, 500
hapi = Hooman(window_width, window_height)


slider_options = {"value_range": [0, 255]}

r_slider = hapi.slider(50, 300, 400, 10, slider_options)
g_slider = hapi.slider(50, 330, 400, 10, slider_options)
b_slider = hapi.slider(50, 360, 400, 10, slider_options)

while hapi.is_running:
    bg_col = (r_slider.value(), g_slider.value(), b_slider.value())
    hapi.background(bg_col)

    r_slider.update()
    g_slider.update()
    b_slider.update()

    hapi.fill(hapi.color["black"])
    r_text = "r:{}".format(r_slider.value())
    hapi.text(r_text, 50, 280)
    g_text = "g:{}".format(g_slider.value())
    hapi.text(g_text, 50, 310)
    b_text = "b:{}".format(b_slider.value())
    hapi.text(b_text, 50, 340)

    hapi.flip_display()
    hapi.event_loop()

pygame.quit()
```