Incorrect background color displayed when using dithering with a png image

[ZouhirYachou]

Hello,

I'm trying to display the current weather and forecast with the inky display 7 colors and for the weather icon, I wish to use a PNG image as a source (from this repo https://github.com/basmilius/weather-icons), but I do not understand why the transparency doesn't work
I tried using the dithering add-on to display the image:

My current code:

import hitherdither
from PIL import Image, ImageDraw, ImageFont
from inky.auto import auto
from datetime import datetime

# Initialize the Inky Impression display
inky_display = auto()
inky_display.set_border(inky_display.WHITE)

saturation = 0.5
thresholds = [64, 64, 64]
palette = hitherdither.palette.Palette(inky_display._palette_blend(saturation, dtype='uint24'))

# Create a new image with a white background
img = Image.new("P", (inky_display.width, inky_display.height), color=inky_display.WHITE)
draw = ImageDraw.Draw(img)

# Load fonts
font_file_bold = "fonts/RobotoCondensed-Bold.ttf"
font_file_Regular = "fonts/RobotoCondensed-Regular.ttf"
font_small = ImageFont.truetype(font_file_bold, 20)
font_medium = ImageFont.truetype(font_file_bold, 26)
font_large = ImageFont.truetype(font_file_Regular, 82)


# Define text for testing
location = "Paris, FR"
temperature = "25°C"
weather = "Mostly sunny"
rain_chance = "Rain: 7%"
humidity = "Humidity: 64%"
wind_speed = "Wind: 5 km/h"


# Get current date
dt = datetime.now()
dt_format = dt.strftime("%A %d %B")

# Draw the location
draw.text((10, 10), location, inky_display.BLACK, font=font_medium)

# Draw the date
date_text_width, date_text_height = (draw.textsize(dt_format, font=font_medium))
draw.text((inky_display.WIDTH - date_text_width - 10, 10), dt_format, inky_display.BLACK, font=font_medium)

# Draw the temperature
temp_text_width, temp_text_height = (draw.textsize(temperature, font=font_large))
draw.text((10, inky_display.HEIGHT / 5 ), temperature, inky_display.BLACK, font=font_large)

# Draw the rain chance, humidity and wind 
rain_text_width, rain_text_height = (draw.textsize(rain_chance, font=font_medium))
humidity_text_height = (rain_text_height + 10)
wind_text_height = (rain_text_height + 10 ) * 2
draw.text(((inky_display.WIDTH / 1.4), (inky_display.HEIGHT / 5)), rain_chance, inky_display.BLACK, font=font_medium)
draw.text(((inky_display.WIDTH / 1.4), (inky_display.HEIGHT / 5) + humidity_text_height), humidity, inky_display.BLACK, font=font_medium)
draw.text(((inky_display.WIDTH / 1.4), (inky_display.HEIGHT / 5) + wind_text_height), wind_speed, inky_display.BLACK, font=font_medium)
 
# Draw the weather description
weather_text_width, weather_text_height = (draw.textsize(weather, font=font_medium))
draw.text(((inky_display.WIDTH - weather_text_width) / 2, (inky_display.HEIGHT + weather_text_height) / 2 ), weather, inky_display.BLACK, font=font_medium)

# Draw the weather icon
icon_path = "icons/clear-day.png"  
icon_img = Image.open(icon_path).convert("RGB")  
icon_img = icon_img.resize((200, 200))
image_dithered = hitherdither.ordered.bayer.bayer_dithering(icon_img, palette, thresholds, order=8)
icon_width = int((inky_display.WIDTH - 200 ) / 2)
img.paste(image_dithered.convert("P"), (icon_width, 40))


# Display the image on the Inky Impression
inky_display.set_image(img)
inky_display.show()

The result:

I need some help understanding how I can display a PNG image, while keeping its transparency
thank you