CODESYS · Track 07 · the HMI is built in

Screens, Included

CODESYS has a full HMI baked into the IDE — no separate tool, no extra licence to start. You draw a Visualization, bind each element to a project variable, and the same screen runs on a target display or as a WebVisu in any browser. Drive the PLC variables on the right and watch the browser screen react.

🖼️ Visualization editor🌐 WebVisutag binding
01 · Binding, live

Drive the PLC, the browser follows

The left is the WebVisu — the same visualization served over HTTP to a browser. The right is the PLC's variables. Toggle xPumpRun, drag rLevel, raise the temperature — the screen elements (bound to those variables) update instantly. Press START on the screen and it writes the variable back. No separate HMI project; it's all one CODESYS application.

http://192.168.1.10/webvisu.htm
Tank Station
level 40% · temp 24°C · STOPPED

📋 Application variables

the visualization elements are bound to these
xPumpRunFALSE
↳ binds: pump lamp + state text
rLevel40%
↳ binds: tank fill height + value
rTemp24°C
↳ binds: temp value (lamp turns amber > 70°C)

Press START on the screen — it writes xPumpRun := TRUE straight into the running application, and the toggle on the right flips. Binding is two-way and the screen has no logic of its own: like every HMI, it's a window onto the controller's variables. Same visualization renders on a panel, a PC, or this browser via WebVisu.

02 · One visualization, three places

Where your screen can run

🖥️ TargetVisu — rendered on a display attached to the controller (a panel PC, an HMI screen). The operator station on the machine.

🌐 WebVisu — the controller serves the same screen over HTTP; open it in any browser, phone or tablet. No client install.

🛠️ Editor / online — the same visualization animates inside the CODESYS IDE while you're online, doubling as a test & debug surface.

♻️ Draw once — you build the screen a single time; which renderer shows it is just a setting. Alarms, trends & multitouch elements are built in.

03 · Check yourself

Where's the logic?

A WebVisu screen looks great, but an operator asks: "if the visualization crashes, will the safety interlock still work?"