CODESYS TargetVisu Container

Introduction

TargetVisu is a CODESYS visualization component that alows you to render the graphical interface of your application directly on a display connected to the target device, without the need to access the application via a browser. TargetVisu is ideal for embedded systems and industrial controllers that include a local display, enabling real-time monitoring and interaction with the control application without needing a separate container running a web browser or a different client device..

This article will guide you on how to visualize your application through TargetVisu. Following the steps below, you will create two separate containers: A weston container with XWayland for TargetVisu to run on top of, and a container with both the Codesys Runtime and TargetVisu, which will run and display your application.

The basic usage of CODESYS is covered in our article about the CODESYS Demo Container. This article requires a similar, but slightly different IDE set up, which is specified in the Set Up the IDE section.

Prerequisites

• Follow the article Partner Demo Container - CODESYS.

Codesys Visualization with TargetVisu

Since TargetVisu is not available on the Codesys Demo container, you need to create your own container and install TargetVisu on it. TargetVisu requires an X11 environment to run on top of. While Toradex does not offer support for X11, you can run XWayland on top of Weston so that TargetVisu can use it.

To start configuring the containers, create a directory on your host machine to work on:

$ mkdir codesys && cd codesys

Download Codesys Debian Packages

Before building the Codesys container, fetch the Debian packages required to run the Codesys runtime and TargetVisu. The packages and steps to download them are described below:

• codesyscontrol_linuxarm64_<version>_arm64.deb: Codesys runtime, necessary for running the Codesys application.

  1. Open the Codesys Download Page and download the latest version of CODESYS Control for Linux ARM inside the codesys directory you just created (requires login).

  2. Unzip the file and extract the Debian package to the root of the codesys directory

     $ unzip CODESYS\ Control\ for\ Linux\ ARM64\ SL\ <version>.package -d codesys-control
     $ cp codesys-control/Delivery/linuxarm64/codesyscontrol_linuxarm64_<version>_arm64.deb .

• codemeter-lite_<version>_arm64.deb: Software license server, a dependency for Codesys Control.

  1. Open the CodeMeter Download Page and download CodeMeter for Linux. Select the Linux/AArch64 64-bit DEB Package option, as shown in the image below:

     

  2. Copy the Debian package to the codesys directory.

• codesysvisualization_visualizationarm64_<version>_arm64.deb: Codesys component that displays user interfaces directly on the device running the Codesys runtime. It alows you to view your application directly on the display connected to the device.

  1. Download TargetVisu and copy it to the codesys directory (requires login).

  2. Unzip the file and extract the Debian package to the root of the codesys directory

     $ unzip CODESYS\ TargetVisu\ for\ Linux\ SL\ <version>.package -d target-visu
     $ cp target-visu/Delivery/visualizationarm64/codesysvisualization_visualizationarm64_<version>_arm64.deb .

warning

The 4.17.0.0 version of TargetVisu is not currently compatible with Torizon and Qt6. For displaying your application directly on a display connected to your device, download a TargetVisu version up to 4.16.0.0.

With the three Debian packages inside the codesys directory, transfer them to your device:

$ scp *.deb torizon@<module>-<serial_number>.local:~/

Initialize the Codesys Runtime

TargetVisu requires an X environment to run on top of. While Toradex does not offer support for X, you can run XWayland on top of Weston so that TargetVisu can use it.

The instructions below show you how to set up the Weston and Qt containers, such that you'll be able to start TargetVisu with a single docker compose up command.

1. Inside the codesys directory, create the two Dockerfiles below. Make sure you substitute the *.deb packages for the ones you downloaded at Download Codesys Debian Packages.

   Dockerfile.weston

   Dockerfile.weston

   
   ARG BASE_NAME=weston-imx8
   ARG IMAGE_ARCH=linux/arm64
   ARG IMAGE_TAG=4
   # For arm32v7 use: 
   ARG PKG_ARCH=arm64v8
   ARG DOCKER_REGISTRY=torizon
   
   FROM --platform=$IMAGE_ARCH $DOCKER_REGISTRY/$BASE_NAME:$IMAGE_TAG
   WORKDIR /home/torizon
   
   RUN apt-get update -y && \
       apt-get upgrade -y && \
       apt-get install -y x11-xserver-utils
   
   COPY weston-xutils-entry.sh /usr/bin/weston-xutils-entry.sh
   RUN chmod +x /usr/bin/weston-xutils-entry.sh
   
   ENTRYPOINT ["/usr/bin/weston-xutils-entry.sh"]

   Dockerfile.targetvisu

   Dockerfile.targetvisu

   ARG BASE_NAME=qt6-wayland-examples-imx8
   ARG IMAGE_ARCH=linux/arm64
   ARG IMAGE_TAG=4
   # For arm32v7 use: 
   ARG PKG_ARCH=arm64v8
   ARG DOCKER_REGISTRY=torizon
   
   FROM --platform=$IMAGE_ARCH $DOCKER_REGISTRY/$BASE_NAME:$IMAGE_TAG
   WORKDIR /home/torizon
   
   RUN apt-get update -y && \
       apt-get upgrade -y && \
       apt-get install -y sudo xwayland x11-apps libqt6svg6 libqt6webenginecore6 \
                          libqt6webenginewidgets6 libncursesw6 libproc2-0 procps
   
   ENV DISPLAY=:0
   
   # Copy files
   COPY codemeter-lite_<version>_arm64.deb .
   COPY codesyscontrol_linuxarm64_<version>_arm64.deb .
   COPY codesysvisualization_visualizationarm64_<version>_arm64.deb .
   
   RUN dpkg -i ./codemeter-lite_<version>_arm64.deb ./codesyscontrol_linuxarm64_<version>_arm64.deb
   
   RUN sudo dpkg -i --force-depends codesysvisualization_visualizationarm64_<version>_arm64.deb
   
   # Remove installation files
   RUN rm ./codesyscontrol_linuxarm64_<version>_arm64.deb ./codemeter-lite_<version>_arm64.deb ./codesysvisualization_visualizationarm64_<version>_arm64.deb
   
   ENV LD_LIBRARY_PATH=${LD_LIBRARY_PATH}:/opt/codesysvisualization/lib
   
   COPY targetvisu-entry.sh /usr/bin/
   RUN chmod +x /usr/bin/targetvisu-entry.sh
   
   ENTRYPOINT ["/usr/bin/targetvisu-entry.sh"]

2. Also in the codesys directory, create the weston-xutils-entry.sh and targetvisu-entry.sh shown below. These scripts need to be executed in runtime, and are thus the entry points of each container.

   weston-xutils-entry.sh

   weston-xutils-entry.sh

   #!/bin/bash
   
   nohup /usr/bin/entry.sh --developer --tty=/dev/tty7 2>&1 &
   
   sleep 3
   
   su torizon -c "export DISPLAY=:0 && xhost +"
   
   # Prevent container from exiting
   tail -f /dev/null

   targetvisu-entry.sh

   targetvisu-entry.sh

   #!/bin/bash
   
   /etc/init.d/codemeter start
   /etc/init.d/codesyscontrol start
   /opt/codesysvisualization/bin/codesysvisualization.bin /etc/codesysvisualization/CODESYSVisualization.cfg

3. Build the containers and push them to your Dockerhub repository.

   $ docker build -t <your-dockerhub-user>/weston-xutils:latest -f Dockerfile.weston .
   $ docker build -t <your-dockerhub-user>/targetvisu:latest -f Dockerfile.targetvisu .
   $ docker push <your-dockerhub-user>/weston-xutils
   $ docker push <your-dockerhub-user>/targetvisu:latest

4. Create the docker-compose.yml file shown below.

note

Keep in mind that it runs the Codesys container in privileged mode, since this procedure is for evaluation purposes. Do not use this docker-compose.yml file in production.

docker-compose.yml

services:
  weston:
    network_mode: host
    cap_add:
      - CAP_SYS_TTY_CONFIG
    volumes:
      - '/dev:/dev'
      - '/tmp:/tmp'
      - '/run/udev/:/run/udev/'
    device_cgroup_rules:
      - 'c 4:* rmw'
      - 'c 10:223 rmw'
      - 'c 13:* rmw'
      - 'c 199:0 rmw'
      - 'c 226:* rmw'
      - 'c 253:* rmw'
    image: '<username>/weston-xutils:latest'

  codesys:
    network_mode: host
    privileged: true
    depends_on:
      - weston
    device_cgroup_rules:
      - 'c 199:* rmw'
    volumes:
      - '/tmp:/tmp'
      - '/home:/home'
      - '/dev:/dev'
      - '/run/udev:/run/udev'
    image: '<username>/targetvisu:latest'
    stdin_open: true
    tty: true

1. Copy the docker-compose.yml file to the module.

   scp docker-compose.yml torizon@verdin-imx8mp-15006535.local:~

2. Inside the module, run the containers:

   # docker compose up

After running the previous command, weston should start, and a Codesys graphical interface should appear in your display. The Codesys GUI should show your board's hostname as one of the available options. Do not select your board in the interface yet, you will need to set up your user and password in the Set up the IDE section below.

IDE and Project Setup

Reconfigure an Existing Project for TargetVisu

If you have already followed the CODESYS Demo Container Article, you do not need to reconfigure your IDE, simply follow the steps below and advance to Run the Application. Otherwise, jump to the next section.

1. Install CODESYS Control for Linux ARM64 SL, if it's not already installed.

   

2. Update your device to the CODESYS Control for Linux ARM64 SL configuration.

   

Install the CODESYS IDE

1. Download the CODESYS Installer from the Codesys store;

   

2. Install the lastest version of the Codesys Development System;

   

3. Install the following Add-Ons:

   • CODESYS Control for Linux ARM64 SL
   • CODESYS Virtual Control for Linux SL
   • CODESYS LD/FBD
   
   
   
   

Download and Deploy the Gateway Container

1. Click the Tools tab and Open the Deploy Control SL Menu;

   note

   If you can't see the Deploy Control SL option, check if Virtual Control for Linux SL was installed correctly in step 3.

   

2. Connect to the Target Device. You can connect using the hostname or the IP address of your target device. You should see the Connected status.

   

3. In the "Deployment" tab, install the Virtual Edge Gateway container.

   info

   The edgearm is a Gateway Application and the virtuallinuxarm is the Runtime Application.

   

4. In the "Operation" tab, add an instance (image) of the Virtual Edge Gateway. For this example, we named the image codesys_gateway.

   

5. Start all the containers. The status on all images should change to "Running":

   

Create a Basic Application

1. Create a new Standard project, give the project a name and click ok:

   

2. Select the CODESYS Control for Linux ARM64 SL. In PLC_PRG select Ladder Logic Diagram (LD):

   

3. Now a new project is created. You will see a menu listed on the left-hand side of the project window.

4. Double click on Device. A new tab will open. Click on Gateway -> Manage Gateways:

   

5. Click Add to create a new Gateway using the target device IP:

6. Change to the new Gateway and Click Scan Network:

7. In the Select Device window make sure the device was found and then double click on it. If no device is found under the Gateway, verify if the Codesys Control container is running.

   

8. With the device connected to the development environment, we can start programming the logic. Click PLC_PRG in the project tree. In Toolbox drag and drop a Contact and a Coil to the Ladder area:

   

9. Add the INPUT_01 variable name in the Contact text box and select as type BOOL:

   

10. Add the OUTPUT_01 variable name in the Coil text box and select as type BOOL:

    

11. Add a Visualization to the project. In the project tree, right click on Application > Add Object > Visualization:

    

12. On Add Visualization window just click Add button:

    

13. On the Visualization tab, which can be opened with double click on Visualization in the project tree, select Visualization Toolbox > Lamps/Switches/Bitmaps one DipSwitch and one Lamp1, drag and drop one at a time for the Visualization tab:

    

14. Connect the elements of the visualization to the elements of the ladder.

15. Select DipSwitch and in Properties select Variable:

    

16. The DipSwitch must be connected to the Contact element of the Ladder. In the window Input Assist select Application > PLC_PRG > INPUT_01 (the variable which has been added to Contact):

    

17. Select Lamp1 and in Properties select Variable. In the window Input Assist select Application > PLC_PRG > OUTPUT_01 (the variable which has been added to Coil):

    

Run the Application

1. Disable the "Support client animations and overlay of native elements" option inside "Visualization Manager".

   

2. Click the Online menu and select Login (always choose download):

   

3. With the project downloaded and online, the following screen will be shown and the project will be in the STOP state:

   

4. Select your board on the display of your target device (as set up in the Initialize the Codesys Runtime section). Enter the user and password you created in the IDE earlier. After a few seconds, the message below should appear on the console of your container. It means the Codesys runtime is only waiting for the application to start.

   2025-10-15T17:26:44.549Z: Cmp=CmpTargetVisu, Class=1, Error=0, Info=0, pszInfo= Waiting for registration in the iec visualization (Is the visu application stopped?)

5. To start the application, click on play. The application should show up on your device's display, and if you toggle the input DipSwitch, the output Lamp1 should also toggle.

   

   At this point, the application will be in the RUN state. You can interact with it either directly on your target device's display or on the Visualization tab of the IDE. Pressing the DipSwitch should light the Lamp1 on.

   

Display and Touchscreen Configuration

For the displays recommended by Toradex, go to Setting up Displays with Torizon page.