PLC Simulator
HMI Builder

HMI Simulator — Build Operator Screens in Your Browser

Practice HMI development against a live PLC simulation — real scan cycle, real tag binding, real interlock behaviour. Zero install. Vendor-neutral skills that transfer to FactoryTalk View, WinCC, and GP-Pro.

Join 1300+ learners practicing PLC programming

First exercises are free. Create a free account to save your screens.

HMI simulator — build operator screens against a live PLC simulation in your browser

What it is

What is an HMI simulator?

A Human-Machine Interface (HMI) is the operator panel that lets a person interact with a machine: the touchscreen in a control cabinet showing pump pressures and conveyor status, the pushbuttons and pilot lights on a panel door, the SCADA overview screen in a control room. An HMI simulator lets you build and test those screens without physical hardware, without a real PLC, and without a vendor software license.

Our browser HMI simulator goes one step further than a drawing tool: the screens you build run against a live JavaScript PLC simulation engine. When you press a pushbutton widget, the PLC scan cycle sees the input bit go true, executes the ladder rung, sets the output coil, and your pilot lamp widget lights up — exactly as it would on a real panel wired to a real PLC. The simulation, the tag database, and the HMI canvas all run in the same browser tab.

MOTOR CONTROL PANELRUNNINGO:0/0STARTI:0/0STOPI:0/1Tag: O:0/0Tag: I:0/0Live tag binding — widgets read and write PLC memory addresses in real time
An HMI operator panel built in the browser simulator. Pilot lamp and pushbuttons are each bound to a PLC tag address.

How it works

Build, bind, run — against a live PLC simulation

The HMI Builder has three modes: Design, Configure, and Run. In Design mode you place widgets on a canvas. In Configure mode you bind each widget to a PLC tag. In Run mode the simulation executes and your widgets respond in real time.

1

Place widgets on the canvas

Drag a pushbutton, pilot lamp, numeric display, or bar graph onto the HMI canvas. Resize and position it. The canvas maps to a fixed screen resolution — the same constraint you face when sizing a real HMI panel.

2

Bind each widget to a PLC tag

Click a widget to open its tag binding panel. Select the PLC memory address — an input bit (I:0/0), an output bit (O:0/0), a timer accumulator (T4:0.ACC), or an integer register (N7:0). The binding tells the HMI where to read or write during run mode.

3

Switch to run mode

The PLC simulation starts executing its scan cycle. Input widgets (pushbuttons) write to PLC input tags. Output widgets (pilot lamps, numeric displays) read from PLC output or internal tags. Press the Start pushbutton and watch the motor-running lamp light up because the ladder seal-in rung energised the output coil.

4

Observe interlock behaviour

The interlock logic lives in the PLC ladder — not in the HMI. If the PLC program has a safety interlock that prevents motor start while a door is open, your HMI Start button will be unresponsive even if you press it, because the PLC logic is blocking the output. This is the correct real-world behaviour — HMIs command; PLCs decide.

First exercise

Motor start/stop: the first HMI exercise

Every industrial controls curriculum starts with a motor start/stop circuit, and so does the HMI Builder. The PLC simulation runs a ladder seal-in circuit: a Start contact (I:0/0) in parallel with a Hold contact (O:0/0) in series with a Stop contact (I:0/1), driving the Motor coil (O:0/0).

Your task is to build the operator panel: place a green Start pushbutton bound to I:0/0, a red Stop pushbutton bound to I:0/1, and a green pilot lamp bound to O:0/0. Switch to run mode. Press Start — the lamp lights and stays lit because the seal-in branch holds O:0/0 true. Press Stop — the lamp goes dark. This is the correct behaviour of a motor seal-in circuit and you just verified it on a live simulation, not a screenshot.

The exercise takes about ten minutes for a first-timer and establishes the three core HMI concepts you will use in every subsequent exercise: momentary pushbutton input, pilot lamp output, and the separation between HMI commands and PLC decisions.

STARTWRITEHMI widgetI:0/0I:0/0= 1 (true)Input tagscanXICLadder rungO:0/0O:0/0= 1 (true)Output tagREADPilot lampHMI widget → PLC tag write → scan → ladder logic → output tag → HMI widget read
Tag binding data flow: a pushbutton widget writes to the PLC input tag, the ladder rung drives the output coil, the pilot lamp reads the output tag.

Why it works

Why practicing on a simulator beats screenshots and videos

Most HMI learning material is a screenshot walkthrough: here is the software, here is a menu, here is a property dialog. Watching those screenshots does not build the muscle memory of binding a tag, debugging a non-responsive widget, or reasoning about why an interlock prevents a start command from reaching the output.

Immediate feedback

When your pilot lamp does not light, you have to debug it. Wrong tag address? Wrong bit number? Interlock blocking the rung? That debugging loop builds the same skill you use on a real panel.

Interlock behaviour is live

A screenshot can show you an interlock exists. A running simulation shows you what it feels like when a button press does nothing because the PLC logic says no. That behavioural understanding is what separates competent HMI developers from people who just know the menus.

No vendor lock-in for practice

FactoryTalk View ME requires a Rockwell Automation license and a Windows machine. WinCC requires TIA Portal. Practicing the underlying concepts here costs nothing and prepares you to pick up either tool faster.

What you will learn

HMI concepts covered in the exercises

Momentary vs latched pushbuttons

A momentary pushbutton writes a true value to its tag only while it is held. A latched/toggle pushbutton flips the tag state on each press. This distinction drives how the PLC ladder must be written — a motor sealed by a latch button needs no seal-in rung; one driven by a momentary button does.

  • Motor start circuit requires momentary + ladder seal-in
  • Alarm reset toggle uses a latched button
  • Jog mode: motor runs only while jog button is held
Pilot lamp conventions (ISA-101)

Industrial HMI colour conventions are not arbitrary — ISA-101 and IEC 60073 define what each colour means. Green = normal / running. Red = fault / tripped. Amber = caution / standby. Blue = information / acknowledgement required. Flashing = attention needed.

  • Green solid: motor running normally
  • Red flashing: motor tripped on overload
  • Amber steady: motor in manual/local mode
Interlocks live in the PLC, not the HMI

Safety and permissive interlocks must be enforced in the PLC ladder logic, not in HMI button enable/disable properties. An HMI button can be grayed out as a convenience but must never be the only barrier to an unsafe command. The simulation exercises this: even if you build a Start button, the PLC interlock can block it.

  • Guard door interlock blocks motor start at PLC level
  • Low oil pressure interlock prevents pump start
  • HMI button gray = visual aid only; PLC is the real guard
Tag types and addressing

HMI widgets bind to specific PLC memory locations. Understanding the address space — digital input bits (I:), digital output bits (O:), internal bits (B3:), integers (N7:), timer accumulators (T4:.ACC), counter accumulators (C5:.ACC) — is prerequisite knowledge for building any real HMI screen.

  • Pilot lamp → O:0/0 (digital output bit)
  • Numeric display → T4:0.ACC (timer elapsed)
  • Bar graph → N7:5 (analog value integer)

What you build

The HMI Builder, widget by widget

These diagrams show what the browser HMI Builder actually does — the operator panel you assemble, the widget palette you drag from, how each widget binds to a live PLC tag, and the analog, alarm and multi-screen features the exercises teach.

HMI operator panel built in the simulator — Start and Stop pushbuttons, a lit running pilot lamp, a numeric readout and a status line on a browser operator screenAn HMI operator panel: a green Start and red Stop pushbutton, a lit running pilot lamp, a numeric pressure readout, and a status line.MOTOR CONTROLRUNNINGSTARTSTOP42PSIStatus: motor running — no faults
The operator panel — pushbuttons, a lit pilot lamp, readout and status line.
HMI Builder widget palette — Button, Lamp, Gauge, Level, Slider, Selector, Trend and Alarm widgets you drag onto the operator screen canvas in the browser simulatorAn HMI builder widget palette of eight drag-and-drop tiles: Button, Lamp, Gauge, Level, Slider, Selector, Trend and Alarm.WIDGET PALETTEdrag onto canvasButtonLampGaugeLevelSliderSelectorTrendAlarm
The widget palette — drag Button, Lamp, Gauge, Level, Slider, Trend and Alarm.
HMI tag binding in the simulator — a pushbutton and pilot lamp widget bound through live PLC tags to a running simulated PLC, writing inputs and reading outputs in real timeAn HMI Start button and run lamp bound through named PLC tags START_PB and RUN_LAMP to a running PLC controller — binding a widget to a live tag.HMI widgetSTARTLAMPlive tagSTART_PBRUN_LAMPPLCrunningwidget ↔ tag ↔ PLC — bound live
Tag binding — each widget wired to a live PLC tag it reads or writes.
HMI gauge widget in the simulator — an analog gauge showing a 4.2 bar process value, the analog visualisation you bind to a scaled PLC tag in the builderAn analog HMI gauge widget with a sweeping needle on a graduated dial and a numeric readout of 4.2 bar pressure.PRESSURE GAUGE4.2bar010
The gauge widget — an analog process value bound to a scaled tag.
HMI alarm summary in the simulator — critical, high and medium severity alarm rows with state and an acknowledge control, the alarm subsystem the exercises teachAn HMI alarm summary list with severity-ranked rows — critical, high and medium — each showing a message, an active or acknowledged state, and an acknowledge control.ALARM SUMMARY2 activeCRITHigh pressure — vessel 1ACTIVEACKHIGHMotor overload tripACTIVEACKMEDLow level — feed tankACK
The alarm summary — severity tiers, state and an acknowledge workflow.
HMI multi-screen navigation in the simulator — an overview screen with nav buttons opening detail screens and a pop-up faceplate, the multi-screen projects the builder supportsAn HMI overview screen with navigation buttons opening detail screens and a pop-up faceplate — multi-screen navigation in an operator application.OVERVIEWLine ALine BAlarmsDETAIL — LINE AFACEPLATE
Multi-screen navigation — overview, detail screens and a pop-up faceplate.
HMI and SCADA architecture — the operator HMI screen sitting above the PLC, reading and writing tags, within a SCADA supervisory layerA SCADA supervisory layer above a PLC, an operator HMI panel beside the PLC, and the PLC wired down to field devices such as sensors and a motor.SCADAsupervisory layerHMI panelPLCcontrollerSMfield devices (sensors, motor)
HMI / SCADA layers — where the operator screen sits above the PLC and its tags.
HMI runtime loop in the simulator — operator input, the PLC scan, the tag update, then the widget reflecting the new value, the live binding cycle behind every widgetThe HMI runtime loop: operator input, the PLC scan, the tag update, then the widget reflecting the new value — the live binding cycle, repeating.1Operator input2PLC scan3Tag update4Widget reflectsLIVEBINDING
The live binding loop — input, scan, tag update, widget reflects the value.
The PLC scan cycle behind the HMI — read inputs, execute the ladder, update outputs, while the HMI continuously reads and writes the same tags between scansThe repeating PLC scan cycle: read inputs, execute the ladder logic, update outputs, then housekeeping, looping continuously.1Read Inputs2Execute Logic3Update Outputs4HousekeepingSCANCYCLE
The scan cycle — the loop that drives every widget the HMI binds to.

Skills that transfer

What transfers to FactoryTalk View, WinCC, and GP-Pro

Every major HMI platform uses the same underlying model: a canvas with widgets, a tag database, and a binding layer connecting the two. The vendor names change; the concepts do not.

Concept learned hereFactoryTalk View ME/SEWinCC (TIA Portal)
Tag bindingTag Browser → tag link on each object propertyHMI tag table → process tag connection
Momentary pushbuttonMomentary Pushbutton objectButton with Set Bit on mouse-down, Reset on mouse-up
Pilot lampMulti-state indicator (2-state)Circle / ellipse with tag animation
Numeric displayNumeric display objectI/O field with process tag
Interlock visibilityEnable property linked to tagVisibility / Enable animation on tag
Screen navigationDisplay → Go To Display buttonScreen navigation with Click event

For a deeper bridge into the specific vendor tools, see: FactoryTalk View tutorial, WinCC tutorial, HMI programming concepts, and the PLC vs HMI explainer.

Keep exploring

Related practice on this site

  • HMI Path — the guided 5-stage learning journey: concept teaching from tags to multi-screen lines, built to a certificate.
  • HMI Builder — open the in-app HMI Builder and start the first exercise now.
  • PLC simulator — write and run ladder logic programs to understand what the HMI binds to.
  • PLC troubleshooting simulator — 12 fault scenarios: understand the ladder logic that drives your HMI at a deeper level.
  • Motor control PLC scenarios — the ladder programs behind the motor start/stop and star-delta HMI exercises.
  • Studio 5000 tutorial — for when you are ready to pair HMI knowledge with Allen-Bradley ladder skills.
  • TIA Portal tutorial — same HMI concepts applied to the Siemens WinCC dialect.

Start building your first HMI screen now.

Free account. Browser-based. No vendor license. Real PLC simulation behind every widget.

Questions

HMI simulator FAQ

Yes. The HMI Builder and your first exercises are available free — no credit card required. Create a free account to save your screens across sessions. A Pro subscription unlocks the full exercise library, advanced widget palette, and the ability to export screen configurations.

Build your first operator screen in ten minutes.

No install. No vendor license. Real PLC scan cycle behind every widget.