1 概述

本文档介绍CODESYS使用Web可视化的方法和操作流程

适用范围
本应用文档适用所有支持Web可视化运行时的CODESYS产品

2 应用指导

介绍使用CODESYS可视化的操作步骤。

2.1 操作流程

1 新建工程

选择菜单栏"File"->"New Project...",选择创建"Standard project"

2 添加可视化对象

右键单击"Application",选择"Add object",然后选择"Visualization..."

在弹出对话框中，点击"Add"

执行完成后在左侧的工程目录中会出现可视化管理器（Visualization Manager）和可视化对象（Visualization）

一个应用只能添加一个可视化管理器，但是可以添加多个可视化对象。

3 设计界面双击左侧工程目录中的可视化对象，在右侧的窗口中你可以设计您的可视化界面

4 下载程序到您的设备

在菜单栏选择"Online"->"Login"或点击菜单栏图标：

5 访问Web可视化打开浏览器输入<设备IP>:8080即可访问。

2.2 配置Web可视化全屏显示

通过配置设备启动系统后自动打开浏览器访问Web可视化的地址，可以实现CODESYS应用界面的全屏显示。

1 创建开机自启动快捷方式

mkdir -p ~/.config/autostart
touch autobrowser.desktop

autobrowser.desktop文件内容如下

[Desktop Entry]
Name=autobrowser
Comment="Opens the browser with the specified url"
Exec=/home/pi/.local/visu_demo_start.sh
Terminal=yes
MultipleArgs=false
Type=Application
Categories=Application;Development;
StartupNotify=true

Exec执行路径是/home/pi/.local/，您可以更加您脚本的实际路径进行修改，visu_demo_start.sh脚本内容根据系统使用的浏览器不同分别对应如下

Raspberry Pi OS Bullseye系统

#!/bin/sh

export DISPLAY=:0.0
sleep 1
chromium-browser --new-window --app=http://localhost:8080 --start-fullscreen

Raspberry Pi OS Bookworm系统

#!/bin/sh

export DISPLAY=:0.0
sleep 1
firefox --new-window http://localhost:8080 --kiosk -height 800 -width 1280 &

根据您屏幕的实际分辨率替换屏幕宽度和高度参数，我司10寸屏分辨率为800x1280，7寸屏为1024x600。

NOTE: Raspberry Pi OS Bullseye系统基于X11,只适配了chromium浏览器，而Raspberry Pi OS Bookworm系统基于Wayland，firefox浏览器适配的更好。Raspberry Pi OS官方镜像从2023-12-05号之后均为Bookworm系统，您可以通过执行指令cat /etc/os-release 获得系统版本信息

2 隐藏桌面任务栏 Raspberry Pi OS Bullseye系统在浏览器全屏显示时仍然会显示桌面任务栏，通过如下方法可以隐藏任务栏：

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

编辑/etc/xdg/lxsession/LXDE-pi/autostart文件，将@lxpanel --profile LXDE-pi line这一行注释掉，最终内容如下：

#@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
@xscreensaver -no-splash

NOTE: Raspberry Pi OS Bookworm系统无需执行隐藏桌面任务栏操作，firefox浏览器全屏会覆盖任务栏