How to place overlay on top of picamera preview

Question

So I have this bit of code almost working but the overlay takes over the entire HDMI output (fullscreen) when I only want it to appear on the camera preview window.

import picamera
import time

image_folder="../images/"

with picamera.PiCamera() as camera:
                camera.start_preview()
                camera.preview.window=(0,0, 750, 400)
                camera.preview.fullscreen=False

                # Overlay
                img = Image.open(image_folder+'cam_overlay.png')
                pad = Image.new('RGBA', (
                    ((img.size[0] + 31) // 32) * 32,
                    ((img.size[1] + 15) // 16) * 16,
                    ))
                pad.paste(img, (0, 0))
                o = camera.add_overlay(pad.tobytes(), size=img.size)
                o.alpha = 32
                o.layer = 3
          
                time.sleep(10)
                camera.stop_preview()

Pic included below. Overlay is vertical lines over the whole screen but should only be on the part in the upper left.

Answer 1

For anyone encountering this problem, the live preview and overlay act independently using different renderers. You have specified the position of the preview window via

camera.preview.window=(0,0, 750, 400)

but have not specified the same for the overlay window. This can be done using the same syntax but referencing the overlay itself

# add the overlay
o = camera.add_overlay(pad.tobytes(), size=img.size)
o.fullscreen = False

# specify the position of the overlay window to match the preview
o.window = (0, 0, 750, 400)
o.alpha = 32
o.layer = 3