Trouble with creating png images for inky phat


#1

Hi all

Loving my new yellow inky phat.

I’m currently re-writing a good chunk of the weather script to take info from the BBC instead of Yahoo. So far, so good. It’s mostly working, has a lot more options for info and is broadly working, with the exception of a few tweaks.

My main problem is self inflicted but if I can solve it, should help others too.

I’m trying to make new icons (as here https://learn.pimoroni.com/tutorial/sandyj/getting-started-with-inky-phat)for the weather but am having problems creating them correctly so they render on the inky phat. According to http://docs.pimoroni.com/inkyphat/#paste-an-image I should be able to create a PNG with transparency which will work the same as the ones in the example script/resources.

The problem is that whilst the stock image works as expected, the one I’m creating in GIMP 2.10.8 looks fine in Windows but ends up like this:

For reference, here are the stock image/result and my image/result. As you can see there’s nothing wrong with the script as the stock image works.

Please note the second image may be invisible as it’s white on transparent!

icon-cloud
It’ll only let me post one image so I’ll have to reply with the rest.

Please point me in the right direction!


#2

IMG_0646
IMG_0647


#3

Cheers,

What might be a reason for the image not showing as expected is that the transparency info is not present.

What you could try in GIMP:

  • in the Layers ribbon: right click --> add alpha-channel
  • Select the background using the magic wand tool (U) - you can add more areas by holding the shift-key
  • hit “delete”. The to-be-trasparent area should now appear as a chess-board
  • save as *.png and select “save backgound info”

Try on your screen

Hope it works.

Sven


#4

That’s the weird thing, I’m doing exactly that. I have the chequered background. The resulting file looks right in Windows, Raspbian, Web browsers, etc. etc. Look closer at the white square on my cloud, you can see in the corners that some of it is becoming transparent. Also note that the square is black before I delete it and the cloud is white. Something is causing the black and white to invert. If I don’t use the alpha channel, the image is correct but without transparency. If use the alpha channel and I colour the cloud red in GIMP, it comes up coloured on the inky phat but with the background still white.

Behaviour and result is the same in GIMP 2.10 in Windows and GIMP 2.8 in Raspbian.

Re. export settings:
PNG obviously
Interlacing unticked
Save background colour ticked
save gamma unticked
save layer offset unticked
save resolution ticked
save creation time ticked
save comment greyed out
save colour values from transparent pixels tocked
compression level 9

One more thing, if I simply open and then export the stock cloud, it breaks also.
IMG_0663
IMG_0664
Notice the top left and bottom left pixels seem to be transparent…


#5

Very odd, indeed.

A second way i found on the internet:

  1. Open the image in GIMP, and change it to RGB color mode if necessary.
  2. Select Layer → Transparency → Color to Alpha…
  3. Select black ( #000000 ) as the color to make transparent.
  4. Click “OK”.
  5. Save the resulting image in PNG format:

But I don’t really know, how the Inky works. Maybs someone else has some more brilliant ideas.

Good luck,
Cheers,

Sven


#6

Thank you Sven. I’m always open to new ideas and methods. I don’t think it’s that though. It’s something to do with how GIMP is encoding the alpha channel and PIL is processing it. I’m wondering if I’m somehow choosing some wrong settings when exporting it?

One thing I tried last night was to entirely remove the alpha channel. Same image, just no alpha channel. It displayed fine, correct colours but without any transparency of course.


#7

I’ve concluded it’s something to do with GIMP and how it’s exporting the PNGs with alpha channels. I’ve instead created a modified inky pallette with a 4th colour (green). Areas to be transparent are coloured green. The image is then exported as is, without an alpha channel. I’ve then written a short python script which opens and resaves the image with the green denoted as transparency. This then works with the inky phat.

I will finish off the script later and post it here with instructions when it’s ready.


#8

Ok. First follow the instructions here https://learn.pimoroni.com/tutorial/sandyj/getting-started-with-inky-phat to create your image. Before you make it an indexed image (Go to the ‘Image’ menu, then ‘Mode’, and select ‘Indexed’), do the following.

Use a text editor to change the contents of inky-palette.gpl to the following:

GIMP Palette
Name: Inky pHAT
Columns: 1
#
255 255 255	Untitled
  0   0   0	Untitled
255   0   0	Untitled
  0 255   0 Untitled

This will give a 4th colour of green. This won’t be used by the inky phat but should be used later to mark areas to be transparent.

Now go to the ‘Windows’ menu, ‘Dockable Dialogs’, then Palettes.
Right click on any palette on the right, then click 'Import Palette.
Select ‘Palette File’ then click the little folder icon and use the ‘Select Palette File’ dialogue to load your new palette file.
You should see white, black, red, green then all the rest white.
Click Import and the select your new palette on the right.
Now go to the ‘Image’ menu, then ‘Mode’, and select ‘Indexed’.
Select ‘Use custom palette’, then click the ‘Palette selection dialogue’ button just underneath (square button looks like a palette preview) and select your newly loaded inky-palette.gpl. It should still show the 4 colours above.
Untick ‘Remove unused and duplicate colors from colormap’
Click ‘Convert’
Ensure there’s no alpha channel by going to the ‘Layer’ menu, then ‘Transparency’, and selecting ‘Remove Alpha Channel’. This will be unavailable if no alpha channel is present.
Finally click ‘File’, ‘Export As…’ and save your png file. I suggest saving it in a new folder so you don’t accidentally process other images in the next step.
Create a new python script with the following code and save it in the same folder as your image(s)

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from PIL import Image
import glob

# Load our icon files and convert green to transparency
for icon in glob.glob("icon-*.png"):
    im = Image.open(icon)
    im.save(icon, transparency = 3, optimize = 1)

When you run this, it simply opens the image, then saves it with colour index 3 (green of 0,1,2,3) as transparency.
This then works with the Python Image Library where the GIMP transparency doesn’t.