Press and Hold of buttons in chromium Web Visualization

Technical Support
, ,
1

Hello,

I am currently developing a CODESYS application with an UI shown as web visualization on a touch display. For the visualization I am using torizon/weston-vivante:3 and torizon/chromium:2 as defined in the following compose file.
web-visu-compose.yaml (1.4 KB)

The UI works fine and the touch display is recognized. For the application it is mandatory that buttons on the UI can be pressed and hold for a couple of seconds in order to move a motor to the desired position. But after one second a context menu opens with the items “save image as”, “copy image” and “inspect” and prevents the user from pressing the button.

I’ve tried different approaches in the compose file as well as in the weston.ini but non of them made any difference.

[shell]
touchscreen-context-menu=false

[libinput]
enable-tap=false

[touchscreen]
enable-touch = true
tap-and-hold = false

I would be happy to read about new approaches and ideas.

Best regards
KDehren

2

Hi, I’m the Toradex AI Assistant. The Toradex Support team will follow up with you shortly!

Did you like my answer?

:+1: :-1:

Hello,

To address the issue of the context menu appearing when a button is pressed and held in your Chromium-based UI, you can modify the behavior of Chromium to disable this feature. A practical approach is to use JavaScript to prevent the default context menu from appearing. You can add the following script to your web page:

<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>

This script listens for the contextmenu event and prevents it from triggering, effectively disabling the right-click context menu.

Additionally, ensure that your Chromium container is running in kiosk mode, which can help restrict unwanted interactions. You can set the Chromium container to kiosk mode by adding the --kiosk flag in your Docker Compose file or when launching the container.

Regarding your Weston configuration, it seems you have already attempted to adjust settings in the weston.ini file. The primary solution for the context menu issue lies within the web application itself, as described above.

By implementing these changes, you should be able to hold buttons on your UI without triggering the context menu, allowing for the desired motor control functionality.

Best regards,
Toradex AI Assistant

Please, also check if these links can help you solve your problem:

Chromium container cannot render 3D content on Verdin iMX8M-Mini.

3

Hi @KDehren !

I didn’t try myself, but @ToradexAI’s tip about using preventDefault seems pretty good. Have you tried it?

Best regards,

4

Hello @KDehren,

I tested this here with a demo we made and the context menu is not present.

It is possible that the chromium configuration or version is causing this problem.
With weston-vivante:3 and Torizon OS 6, chromium:3 should also be used.
Can you try to replace your Chromium service with the following?

chromium:
    image: torizon/chromium:3
    container_name: chromium
    network_mode: host
    stdin_open: true
    tty: true
    remove: true
    volumes:
      - tmp:/tmp
      - /var/run/dbus:/var/run/dbus
      - /dev/galcore:/dev/galcore
    devices:
      - "/dev/galcore"
    deploy:
      resources:
        devices:
          - capabilities: [ "rwm" ]
    security_opt:
      - seccomp=unconfined
    shm_size: 256mb
    command: http://localhost:8080

Best Regards,
Bruno

5

Hello Bruno,

thank you for this hint.
I’ve currently some logistic issues with the display. Once they are cleared I will test your compose file.

Best regards
KDehren

1 Like