Drawn image is shown with interlaced horizontal black lines?

[reggi]

Type: Bug

Describe the issue

When I render an image it's appearing with horizontal black lines:

To Reproduce

import { getDisplay } from "cardputer"
import { shipping_game_bg } from "cardputer/images/shipping_game_bg"

const display = getDisplay()

await display.init()

display.image.drawImage(shipping_game_bg, 0, 0)

await display.show()

Expected behavior

A complete image

Environment

vscode: 1.86.1
extension: 2.16.2

Devices

interaction_mode: 0
auto_connect: false
reset_in: false
last_reset_in_time: 0
transport:
web: connected
device:
id: EF72 (0x0849422dc605a3bc)
product: ? (0x?)
firmware_version:
uptime:
stats: announce 55392, drop 0, restart 0
services:
infrastructure (0x1e1589eb)
proxy (0x16f19949)

device:
id: ET91 (0x26c32c2553a6b5a3)
product: ? (0x?)
firmware_version:
uptime:
stats: announce 580, drop 0, restart 0
services:
infrastructure (0x1e1589eb)
dashboard (0x1be59107)

device:
id: DF47 (0xfec04e301305a8ff)
product: ? (0x32f390a2)
firmware_version: v2.16.1
uptime: 128899.76437504962
stats: announce 244, drop 1, restart 0
services:
roleManager (0x1e4b7e66)
event change: 4
deviceScriptManager (0x1134ea2b)
ro status_code: 0x0,0x0 (00000000)
last data: 27964981, last get: 27964981, last set: , last gets attempts: 0,
rw autostart: true (01)
last data: 27964584, last get: , last set: , last gets attempts: 0,
ro program_sha256: a65e2ee7a8ccf0ee13557e01bc4af2507df971dc0675e590b147928fb908b477 | .^.......U~..J.P}.q..u...G.....w (a65e2ee7a8ccf0ee13557e01bc4af2507df971dc0675e590b147928fb908b477)
last data: 27964580, last get: 27964581, last set: , last gets attempts: 0,
event status_code_changed: 7
event program_change: 1
devsDbg (0x155b5b40)
settings (0x1107dc4a)
wifi (0x18aae1fa)
cloudConfiguration (0x1462eefc)
cloudAdapter (0x14606e9c)

Extension version: 2.16.2
VS Code version: Code 1.86.1 (Universal) (31c37ee8f63491495ac49e43b8544550fbae4533, 2024-02-07T09:09:01.236Z)
OS version: Darwin arm64 22.6.0
Modes:

System Info

Item	Value
CPUs	Apple M1 (8 x 24)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	2, 3, 3
Memory (System)	8.00GB (0.06GB free)
Process Argv	--crash-reporter-id 3fef04cc-3e39-471c-8c9c-899a8ad30d03
Screen Reader	no
VM	0%

A/B Experiments

vsliv368:30146709
vspor879:30202332
vspor708:30202333
vspor363:30204092
vscorecescf:30445987
vscod805cf:30301675
binariesv615:30325510
vsaa593cf:30376535
py29gd2263:30899288
c4g48928:30535728
azure-dev_surveyone:30548225
962ge761:30959799
pythongtdpath:30769146
welcomedialog:30910333
pythonidxpt:30866567
pythonnoceb:30805159
asynctok:30898717
pythontestfixt:30902429
pythonregdiag2:30936856
pyreplss1:30897532
pythonmypyd1:30879173
pythoncet0:30885854
pythontbext0:30879054
dsvsc016:30899300
dsvsc017:30899301
dsvsc018:30899302
3ef8e399:30949928
e3gdj431:30958358

[reggi]

@mmoskal I see you wrote some of that c code that runs the image render, any insights here (sorry for the direct ping)

I did a deep dive to see if there was anything I could do in userland but I think my configuration good, the image context from allocate doesn't allow me to fix this AFAIK.

[mmoskal]

You want to make sure you initialize the screen correctly. Eg code for 1.14inch picolcd is this:

   const d = new ST7789Driver(Image.alloc(240, 136, 4), {
            dc: pins.GP8,
            cs: pins.GP9,
            reset: pins.GP12,
            // frmctr1: 0x0e_14_ff,
            flip: false,
            spi: spi,
            offX: 40,
            offY: 53,
        })
        await d.init()

You need to make sure you have similar code that matches what's in the vendor's C libraries. Also they say the display is 135px tall, but it's probably 136px; if not that may be a problem

[reggi]

I can render background colors, circles and squares just fine. The only issue is images. I was thinking because if this it wouldn't be my configuration.

Here's my config, looks the same.

spi.configure({
  mosi: gpio(35),
  sck: gpio(36),
  hz: 8_000_000,
})

// backlight led
gpio(38).setMode(GPIOMode.OutputHigh)

const width = 240
const height = 136

const display = new ST7789Driver(Image.alloc(width, height, 4), {
    dc: gpio(34),
    cs: gpio(37),
    reset: gpio(33),
    // frmctr1: 0x0e_14_ff,
    flip: false,
    spi: spi,
    
    offX: 40,
    offY: 53,
})