Preparation of Images for Display on the Tiny-TV

[TerryJC]

Note: This Topic has been created to cover the preparation of images created by photographic, screen capture or paint tools. Lines, rectangles and text are created within the code and do not need this procedure.

The display has fairly modest specifications:

• Pixels - 128 x 128.
• Display area - 1.5inch (diagonal).
• Display dimensions - 34 mm x 30 mm.
• Display colour - White (16 grey levels (Note: Not 16-bit as stated in the Manual))

These specifications place some fairly important constraints on any images that we want to display. Some are obvious from the spec and some are less obvious. First any image must be reduced in size to fit the screen size; both in terms of its physical dimensions and the number of pixels. Also, the number of colour levels must match the display capability so some processing will be required before the image can be displayed without error.

I'm still working on the best way to get a satisfactory image display, but the following factors are relevant. Any image downloaded from the Internet is usually in .jpg, .gif or .png format. The image must therefore be converted to 128 x 128 pixel format with dimensions approximately the same as the display dimensions. The image must then be converted to grey-scale with 16 colours (levels) in the palette. I've been using The Gimp to do this but Photoshop or other graphical software products should be equally suitable. I'm told that the conversion can also be done in software using the image loading library, (in other words pre-processing before the image is passed to the driver, but I haven't got my head round that yet.

It must be stressed that one of the key factors which is inviolate is the number of pixels in the image. By default the OLED_Driver.py has the dimensions set to match the display, eg:

Code: Select all

OLED_X_MAXPIXEL = 128  #OLED width maximum memory 
OLED_Y_MAXPIXEL = 128  #OLED height maximum memory

The original image of Andy Pandy that I obtained from Pinterest reduced to 128 x 95 and this caused an error. I modified the height setting in the driver to 95 and the image loaded without error, but there was a border at the bottom (as you would expect). Obviously the image could be padded with grey stripes top and bottom to fit the display.

Another important factor is the number of grey levels. In the original, the colour levels were 256 (even though the image was black and white). When converted to grey-scale the 256 levels remained and the image displayed as an almost white screen with squiggles. Once I had converted the levels to 16 the image displayed was acceptable.

The physical size of the image seems less critical. The example image provided with the sample code was 45.2 x 45.2 mm, which is bigger than the available real estate, but the driver sorted that out OK. Before I fully understood what was going on, used those dimensions without error.

When I have sorted out a decent workflow, using The Gimp, I'll add it to the comments below. Perhaps anyone who uses a different tool could also share their experience.

[TerryJC]

I now have a good idea how to create a 16 colour monochrome image from a colour .jpg. The problem is still the aspect ratio. 1950s televisions used an aspect ratio of 4:3, so images downloaded from the Internet tend to be that format. I can shrink them to 128 x 95, but I can't pad the top and bottom with a 128 x 16/17 strip to make them up to 128 high.

I'm sure it can be done, but I've yet to work out how to do it in The Gimp. If anyone has any ideas, please let me know.

[TerryJC]

Note: After my early success using the procedure outlined below, I found that something must have been left out of the description because although the Image Properties looked identical to the first image that I converted (Andy_Pandy.jpg), later files didn't display properly.

I found the Linux Bash shell procedure worked well (mostly provided by the Linux User Group). The procedure is left here in case it proves useful in the future.

With quite a bit of help from the Dorset Linux User Group, I have captured the following method of pre-processing the images. There are a number of steps:

1. Create a palette of 16 grey levels from black to white.
2. Import the image and scale it to 128 wide, maintaining the aspect ratio.
3. Modify the canvas to be 128 x 128 with a black background.
4. Convert the image to 16 grey levels using the palette created above.
5. Export as a bitmap, png or gif (not jpg).

To do this with The Gimp, first create a 16 Level greyscale Palette:

1. Make the Foreground colour black and the background colour white by clicking on the icon in the bottom left-hand corner.
2. Select Windows - Dockable Dialogs - Palettes.
3. Right-click in the list area and select Import Palette. In the Dialogue Box select Gradient - FG to BG HCV (Clockwise Hue), name the Palette '16 Level Greyscale', No of Colours: 16 and Columns: 16. Press Convert.

The Steps above only need to be done once because the imported Palette will then become available for use in other sessions. Now convert the image:

1. Make the Foreground colour white and the background colour black by clicking on the icon in the bottom left-hand corner.
2. Create a New image; New and in the Dialogue Box set the size to 128 x 128.
3. Import the image and scale it to 128 x * (maintain aspect ratio). Select Image - Scale.
4. Set the canvas size to 128 x 128 and fill with the background colour (black). Select Image - Canvas Size.
5. Convert the image to 16 grey levels. Select Image - Mode - Indexed; in the Dialogue Box select Use Custom palette and select the 16 Level Greyscale Palette imported above.
6. Export the result as a bitmap. Select File - Export.

[TerryJC]

After spending some time trying to reproduce the early success using The Gimp, I found that the following shell commands worked well. The Linux system in use will need Imagemagick, netpbm and libnetpbm to be installed.

Note: The versions of netpbm and libnetpbm in (K)Ubuntu 20.04 are hopelessly out of date. There is a PPA at > > https://launchpad.net/~darkdragon-0 ... ubuntu/ppa, but that failed to provide the required versions, so I installed libnetpbm11_10.90.00-ppa_amd64.deb followed by netpbm_10.90.00-ppa_amd64.deb from https://launchpad.net/~darkdragon-001/+ ... /+packages.

Most images available on the web are in jpg format and these will need to be converted to .png format. Place all the files to be converted into a directory and type:

Code: Select all

mogrify -format png *.jpg

This will convert all the files to png. The originals will be untouched

Then type:

Code: Select all

w=128 h=128   # Desired size of images.

pngtopnm Andy_Pandy.png | pamscale -xysize $w $h | pnmpad -w $w -h $h | pnmremap -mapfile=<(pamseq 1 15) | pnmtopng > ./Processed/Andy_Pandy.png

Repeat this for all imagesm substituting the filename of each file for 'Andy_Pandy' in two places.

(I did try to make this automatically scan the directory as mogrify does, but decided that the time taken to make the script work wasn't going to be any less than the time taken to convert a dozen files or so. If you manage to make this work, please post the script below)