Drawn image is shown with interlaced horizontal black lines?

reggi commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

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 commented 4 months ago

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,
})

microsoft / devicescript