Black WebEngineView

Hi,

I’m trying to display a web page using PySide2 and QtWidgets (QWebEngineView) or QML (WebEngineView), but all I get is a black rectangle where the web page should be.

For example, the code bellow shows the label at the top and a blank rectangle bellow it, like in this image:

# main.py

import sys
from pathlib import Path

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtWebEngine import QtWebEngine

MAIN_QML_FILE: str = (Path(__file__).parent / "main.qml").resolve().as_posix()

if __name__ == "__main__":

    QtWebEngine.initialize()

    app = QGuiApplication(sys.argv)

    engine = QQmlApplicationEngine()
    engine.quit.connect(app.quit)
    engine.load(MAIN_QML_FILE)

    app.exec_()
// main.qml

import QtQuick 2.13
import QtQuick.Layouts 1.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.13
import QtWebEngine 1.10

Window {
    visible: true
    width: 600
    height: 500
    title: "HelloApp"
    visibility: "FullScreen"

    ColumnLayout {
        anchors.fill: parent

        Label {
            text: "web test"
            font.pointSize: 24
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
        }
        WebEngineView {
            Layout.fillHeight: true
            Layout.fillWidth: true
            url: "https://www.google.com/"
        }
    }
}

I get no errors in the command line when starting the app and I can see the ~/.cache and ~/.local/share/ get some references to the url I’m trying to display (“google”, in the above example).

Installing lynx in the container allows to navigate just fine.

Any ideas what I am missing?

This is my tdx-info:

Software summary
------------------------------------------------------------
Bootloader:               U-Boot
Kernel version:           6.6.84-7.2.0-devel-g87bfb710b6f1 #1-Torizon SMP PREEMPT Mon Mar 31 08:47:48 UTC 2025
Kernel command line:      root=LABEL=otaroot rootfstype=ext4 quiet logo.nologo vt.global_cursor_default=0 plymouth.ignore-serial-consoles splash fbcon=map:3 ostree=/ostree/boot.0/torizon/4e38f45a0627c0d028da9c6cafd48eb2d1d39bcd762e95665811e4dd44059940/0 clk-imx8mp.mcore_booted=1 m7bootsync=1 nohlt
Distro name:              NAME="Torizon OS"
Distro version:           VERSION_ID=7.2.0-devel-20250804160339-build.0
Distro variant:           VARIANT="Docker"
Hostname:                 verdin-imx8mp-15229926
------------------------------------------------------------

Hardware info
------------------------------------------------------------
HW model:                 Toradex Verdin iMX8M Plus WB on Yavia Board
Toradex version:          0058 V1.1B
Serial number:            15229926
Processor arch:           aarch64
------------------------------------------------------------

The docker-compose.yml:

services:

  webview-devel:
    env_file:
      - ./.env
    build:
      context: .
      dockerfile: Dockerfile.devel
    volumes:
      - /tmp:/tmp
      - /dev:/dev
      - /var/run/dbus:/var/run/dbus
      - /var/run/docker.sock:/var/run/docker.sock
    device_cgroup_rules:
      # ... for tty0
      - "c 4:0 rmw"
      # ... for tty7
      - "c 4:7 rmw"
      # ... for /dev/input devices
      - "c 13:* rmw"
      - "c 199:* rmw"
      # ... for /dev/dri devices
      - "c 226:* rmw"
      # ... for abc4
      - "c 509:0 rmw"
      - "c 510:0 rmw"
      - "c 511:0 rmw"
    depends_on: [
      weston
    ]
    restart: always
    user: torizon

  weston:
    image: torizon/weston${GPU}:4
    env_file:
      - ./.env
    environment:
      - ACCEPT_FSL_EULA=1
    # Required to get udev events from host udevd via netlink
    network_mode: host
    volumes:
      - /tmp:/tmp
      - /dev:/dev
      - /run/udev:/run/udev
    cap_add:
      - CAP_SYS_TTY_CONFIG
    # Add device access rights through cgroup...
    device_cgroup_rules:
      # ... for tty
      - "c 4:* rmw"
      # ... for /dev/input devices
      - "c 13:* rmw"
      # ... for /dev/galcore
      - "c 199:* rmw"
      # ... for /dev/dri devices
      - "c 226:* rmw"
      # ... for /dev/dma_heap device
      - "c 253:* rmw"
    restart: always

The .env:

##
# Board architecture
##
IMAGE_ARCH=arm64

##
# Board GPU vendor prefix
##
GPU=-imx8

Thank you.

Hi, I’m the Toradex AI Assistant.

I might make mistakes or occasionally get you wrong. Our support team will step in if needed.


WebEngine Black Rectangle Issue with PySide2 on Torizon OS

The black rectangle you’re experiencing with QWebEngineView is a common issue related to hardware acceleration and rendering context in containerized environments. Based on your setup with Verdin iMX8M Plus, here are several solutions to try:

1. Use the Qt for Python Template

The most reliable approach is to use the official Qt for Python (PySide2) template provided by the Torizon IDE Extension(1). This template provides an out-of-the-box experience on Toradex System on Modules with proper integration for GUI applications(1).

2. Container Configuration Issues

Your Docker Compose setup looks mostly correct, but ensure you’re using the proper Weston container for iMX8(2):

# docker container run -d --name=weston --net=host \
    --cap-add CAP_SYS_TTY_CONFIG \
    -v /dev:/dev -v /tmp:/tmp -v /run/udev/:/run/udev/ \
    --device-cgroup-rule="c 4:* rmw" --device-cgroup-rule="c 253:* rmw" \
    --device-cgroup-rule="c 13:* rmw" --device-cgroup-rule="c 226:* rmw" \
    --device-cgroup-rule="c 10:223 rmw" --device-cgroup-rule="c 199:0 rmw" \
    torizon/weston-imx8:4 \
    --developer

(2)

3. Environment Variables for WebEngine

Add these environment variables to your application container in the docker-compose.yml:

environment:
  - QT_XCB_GL_INTEGRATION=none
  - QTWEBENGINE_CHROMIUM_FLAGS=--disable-gpu --disable-software-rasterizer --no-sandbox
  - DISPLAY=:0

4. Hardware Acceleration Context

For iMX8 modules with Vivante GPU, ensure you’re accepting the FSL EULA and have proper device access(1). Your configuration already includes ACCEPT_FSL_EULA=1, which is correct.

5. Qt6 Alternative

Consider migrating to Qt6, as Qt5 has reached EOL and Qt6 provides better support on Torizon OS(1). The Qt C++ Template for Torizon OS supports Qt6 and provides hardware acceleration for Qt applications(1).

6. Debugging Steps

  1. Check Wayland Socket: Ensure the Wayland socket is properly shared between containers by verifying /tmp mount
  2. Test Basic Qt: Try running a simple Qt application without WebEngine first
  3. Check Logs: Monitor both Weston and your application logs for WebEngine-specific errors

7. Network Mode

Consider using network_mode: host for your application container as well, similar to the Weston container configuration(2).

The Qt containers provided by Toradex work on top of Wayland and come with Qt base libraries installed and ready to use, providing hardware acceleration for Qt applications(1). Using the official templates ensures proper integration with the Torizon OS ecosystem.

Best regards, Toradex AI Assistant.


Did you like my answer? :+1: :-1:

If I answered your question, please tick the “Solution” checkbox.

For follow-up questions to me, please use @ToradexAI in your post.

The AI answers didn’t help.

The app based on the C++ template works fine and I am able to display the WebView component, but using pyside2 still gives a blank screen.

When is Torizon planning to switch the Debian trixie so that we can use pyside6?

Thank you.

Hey @borco ,

On Trixie, I can only refer to this comment my colleague made here. In that Trixie for Torizon OS 7 is most likely not on the roadmap. But when updates of Debian containers happen can be seen with major OS updates, although as you can see, Torizon 6/7 share bookworm. It could be possible that if a change is made, It could be beyond Trixie.

Torizon 5 → bullseye
Torizon 6 → bookworm
Torizon 7 → bookworm

Here is our OS roadmap for Lifecycle for reference: