Styling Modification Basics

Styling/Modification Basics

---

How the Code generates and displays the UI:

The Code uses PIL (Pillow) to generate the displayed Picture.

The generated Picture is displayed on the Oled with the LUMA Module.

Please refer to the links above, if you want to dive deeper into the syntax of PIL and LUMA.

Display Basic:

1: We generate a Picture

image = Image.new('RGB', (oled.WIDTH, oled.HEIGHT))

It is a Colour Picture with Red, Green and Blue Colour informations.

It has the size:

256 Pixels in width (oled.WIDTH) and 64 Pixels in Height (oled.HEIGHT) (ssd1322)

128 Pixels in width (oled.WIDTH) and 64 Pixels in Height (oled.HEIGHT) (ssd1306)

2: We "draw" something on it:

self.draw.text((self.ArtistPosition), oled.activeArtist, font=font, fill='white')
self.draw.rectangle((Screen1barLineX , Screen1barLineThick1, Screen1barLineX+Screen1barwidth, Screen1barLineThick2), outline=Screen1barLineBorder, fill=Screen1barLineFill)

3: We "paste" the Picture on the Display:

image.paste(self.image, (0, 0))

Every 0.034 seconds, the "UPDATE_INTERVAL = 0.034" forces the code to push the "Draw-On" Modal and generates a new Image, after that, the code "crops" the resulting Image and displays it on the OLED-Screen:

cimg = image.crop((0, 0, oled.WIDTH, oled.HEIGHT)) 
oled.display(cimg)

Modification / Styling:

In order to make the code more convenient, i implemented the config-files.

For each Display-Type (ssd1322 / ssd1306) there's a config file.

The reason: I used "variables / placeholders" in the main-code for nearly all "Modification Options"....

Basicly most of the time, it is a simple X, Y coordination-Information.

X is the space from the left Screen Border in Pixels

Y is the space from the upper Screen Border in Pixels

So please have a look in the config files, if you have questions, please contact me ;)