Skip to main content

HMI & Embedded Platform · Software

Elmes HMI Editor

Coming soon

Draw HMI screens in the browser, bind them to variables, simulate without the device.

Request information Specifications
Elmes HMI Editor: oven screen designed in the browser on a laptop, next to a 7-inch HMI panel running the same screen

Overview

The problem. OEM device makers usually design screens in vendor-specific desktop tools (DWIN DGUS, Nextion Editor, TouchGFX Designer). Each tool needs its own installation, learning curve and file format. The designer and the firmware engineer do not see the same screen, and every change has to be loaded onto the device for customer approval. Variable–component bindings (temperature > 50 → red) are usually hand-coded in firmware.

The solution. HMI Editor is a three-panel web editor: a component library on the left, a React Flow-based canvas in the middle, page and property panels on the right. The designer opens multiple pages, drags rectangle/text/button/image components, snaps them to a grid, manages layer order and edits properties (position, size, border, corner radius, color) in the panel. Global variables (tags) are defined and bound to component properties; in the planned simulation mode, changing a variable's value will show how the interface reacts without the device.

Project file. Projects are saved and reloaded as JSON; customer approval happens through a single shared link. The goal is to generate DWIN/DiscOS target code or asset packages from the same JSON, closing the gap between design and firmware.

HMI editor in the browser: component palette, selected text on the canvas and tag binding panel; HMI showing the same screen
Concept

This product is in development or field testing. Contact us for technical information, pilot use and a preliminary quotation.

Features

  • Screen area frame: the real display size (e.g. 800×480 DWIN 7") is shown on the canvas as a non-selectable, non-draggable background; components are placed relative to it.
  • Multiple pages: each page has its own screen size, background and border.
  • Tag (variable) binding: component properties bind to global variables.
  • Layer context menu: right-click to bring to front / send to back / move one step forward or back.
  • Resizable panels: left/right panel widths are adjusted with a drag handle.
  • Copy/paste and keyboard shortcuts.
  • Plain JSON project file: versionable with Git; easy to pass between teams by email.
  • TargetConditional styling: styles driven by variable values (Sicaklik > 50 → red).
  • TargetSimulation mode: Play/Stop to see the interface react without the device.
  • TargetAdvanced components: gauge, chart and input field.
  • TargetExport: DWIN DGUS, DiscOS and web HMI targets.
  • TargetCloud project repository and multilingual text tables.
  • TargetComponent template library: ready-made components in the Elmes corporate style.

Specifications

Values marked “Target” are design targets, next-generation values or chip-vendor data; they are updated as measurement and certification are completed.

Deployment
Deployment modelCloud (editor.elmes.io)
On-prem installationInstallation package for OEMsTarget
ServerLinux VPS, Nginx reverse proxy + Let's Encrypt TLS; the beta is served from a development server
Production deploymentProduction buildTarget
UpdatesPull from Git and restart
CI/CDAutomated build and release pipelineTarget
BrowserCurrent Chrome / Edge / Firefox (desktop); mobile browsers are not supported
ClientNo server-side logic; all processing happens in the browser
Development environmentNode.js 20, npm, Vite
Architecture
Technology stackVite + React + TypeScript, @xyflow/react (React Flow), Zustand, MUI (dark theme), Emotion
Data modelProject → pages (id, name, settings: width/height/background/border; nodes; edges) + tag list; plain JSON
Component typesRectangle, text, image, button
Additional component typesCircle, line, polygon, gauge, input field, chartTarget
Integrations
ExportJSON
Export targetsDWIN DGUS asset/page package, DiscOS screen definition, web HMI bundleTarget
ImportJSON (the editor's own project file)
Image importJPG / PNG / SVGTarget
APINone
Project APIREST project API in the cloud layerTarget
Security & data
Project dataThe project file stays on the user's computer; no data is kept on the server
Transport securityTLS 1.2+
Cloud data (KVKK)Data hosted on servers in TürkiyeTarget
AuthenticationNone (open beta server)
AccountsUser accounts and project ownershipTarget
AuthorizationOwner / editor / viewerTarget
Licensing & support
Licensing statusInternal tool for now; the beta is free
Licensing modelFree tier + PRO subscription + OEM/on-prem licenceTarget
Source licenceNot decided yet; third-party components are MIT-licensed (React, Vite, Zustand, React Flow, MUI)
SupportNo support during the beta
Support levelEmail, response within 2 business daysTarget
BackupThe user's own JSON file
Cloud backupDaily backup in the cloudTarget
Roadmap
Stages 1–2Core editor, multiple pages, resizing, layers, MUI — completed
Stage 3Tag system, component–variable binding — partly completed
Stage 4 (completed)Save / open
Stage 4 (planned)Simulation mode; button actions (change page, write variable, script)Target
Later stagesAdvanced components, export targets, cloud accounts, production buildTarget

Applications

  • Oven and process HMIs
  • Laboratory cabinet screens
  • Chiller and fogger panels
  • DiscOS application screens
  • DWIN T5L / Nextion pre-design
  • SCADA operator screen drafts
  • Web HMI prototypes

The editor is used for pre-design and customer approval of OEM device HMIs: the application packages of the Elmes OEM Device Control Platform (ovens, laboratory cabinets, chillers, foggers) and the screens of the Elmes Thermal Process Controller are typical examples. Generating screen definitions for DiscOS .dap packages is planned.

In SCADA and HMI projects (SCADA & Industrial Automation, Industrial HMI & UI/UX Design), operator screen drafts can be prepared in the editor. Today, moving a screen definition into firmware is done by hand as part of the HMI design service.

Compliance & documentation

  • User guide
    Target
  • Licence text (EULA / open-source licence)
    Target
  • Privacy / KVKK (Turkish data protection) notice
    Together with the cloud account layer
    Target
  • Accessibility (WCAG 2.1 AA)
    MUI-based; not audited yet
    Target
  • Third-party licence inventory (SBOM)
    Target
  • Certification
    Software product; no mandatory certification
    Out of scope

Frequently asked questions

Which HMI hardware can the editor export to?

Today it produces only a JSON project file. DWIN DGUS, DiscOS and web HMI export are on the roadmap.

Does it need to be installed?

No; a current desktop browser is enough. A package for OEMs that want an on-prem installation is planned.

Where are my projects stored?

On your computer, in the JSON file you download; the server keeps no data. A cloud project repository is planned.

How does variable binding work?

A variable is defined in the tag panel (e.g. Sicaklik), and the component's color or text is bound to it. A simulation mode, where you change the value by hand and watch the reaction, is in the planning stage.

Can several people work on the same project?

Not yet; the JSON file is shared. Concurrent editing is planned for the PRO tier.

Can I import my existing DWIN or Nextion project?

No. Import works only with the editor's own JSON file.

Is it paid?

It is currently free and in beta. A model with a free tier, a PRO subscription and an OEM/on-prem licence is being considered.

How is the link to firmware made?

In the planned flow, the exported screen definition goes into the DiscOS/DWIN project and the variable list is mapped to the firmware tag table. Today this step is done by hand as part of the Industrial HMI & UI/UX Design service.

Get information about this product

Our engineering team replies within 24 hours.

Request information +90 (312) 395 85 86

Related products