Bedienoberfläche

Eigene HTML-HMI

Die HMI sieht nicht aus wie ein SPS-Bildschirm. Sie ist dein HTML, dein Branding, ausgeliefert vom Gerät – mit einer einzeiligen Brücke zu Live-Prozessdaten und Bindungen, die weit über eine Werteanzeige hinausgehen.

Eine gebrandete Melanite-Bedienseite mit dem Titel Zuhause: Live-Solarleistung von 5,9 kW mit Tageskurve, Batterie bei 100 Prozent und Kacheln für Klima und Licht pro Raum. — Eine eigene HMI unter /device: das HTML des Besitzers, sein Layout, seine Sprache, mit Live-Werten. Einziges Melanite-Branding ist das Badge der kostenlosen Stufe — eine Commercial-Lizenz entfernt es.

In einem Satz

Melanite hostet unter /device eine eigene, vollständig gebrandete Bedienoberfläche. Ein einziges JavaScript-Include öffnet eine WebSocket-Brücke, sodass jedes HTML-Element per Data-Attribut einen Live-Wert abonnieren oder zurückschreiben kann – ohne Framework, ohne Build-Schritt. Über Zahlen hinaus bindet dieselbe Brücke Live-3D-Kameraansichten aus dem Spatial-Editor ein, dazu 2D-Szenen, Kamerastreams mit Vision-Overlays, Sparkline-Verlaufscharts, quittierbare Alarme, Audio-Zonensteuerung und serverseitig gerenderte Sätze in der Sprache des Betrachters. Erstelle sie im eingebauten Browser-Editor oder lass sie vom KI-Assistenten schreiben.

Fähigkeiten

Gebrandete Oberfläche

Dein Logo, deine Farben und deine Begriffe, ausgeliefert unter /device – kein generischer Hersteller-Skin. Mit einer kommerziellen Lizenz entfällt das „powered by Melanite“-Badge, und die Plattform ist unsichtbar.

Live-Brücke

Ein JS-Include. Ergänze gewöhnliches HTML um data-mio-*-Attribute, und Werte strömen über WebSocket herein; Eingaben schreiben über denselben Socket zurück, serverseitig geprüft nach Rolle und HMI-Stufe.

Umfangreiche Bindungen

Live-3D-Kameraansichten, eingebettete 2D-Szenen, Kamerastreams mit Fiducial-/Fokus-Overlays, jede Stufe einer Vision-Pipeline als Bild, Taster, Sparkline-Verlaufscharts und Audio-Zonensteuerung.

Text, der sich richtig liest

String-Variablen plus serverseitig gerenderte ICU-Templates: Binde einen Satz, keine Zahl. „Reaktor bei 83,4 °C“ wird pro Client in dessen Sprache gerendert – von derselben Engine, die Durchsagen laut spricht, sodass der Bildschirm genau das zeigt, was der Raum hört.

Alarme auf deiner eigenen Seite

Liste aktive Zustände auf, zeige das Ereignisjournal und lass einen Bediener einen Alarm direkt aus deinem HTML quittieren – mit Aufzeichnung, wer und wann.

Erstellung

Eingebauter Browser-Editor mit geteilter Live-Vorschau, einem globalen Variablenregister (der Tag-Tabelle) und Content-Security-Policy für das, was du auslieferst. Oder beschreibe die Seite dem KI-Assistenten und verfeinere, was er schreibt.

Zwei Oberflächen, ein System

Noch bevor du irgendetwas erstellst, rendert die eingebaute Widget-HMI unter /ui Slider-, Button-, Anzeige-, Text- und Farbwähler-Nodes automatisch als Touch-Raster. Wechsle zu eigenem HTML, wenn du das Branding willst.

Durchgespielte Beispiele

Ein Maschinenpanel, das kein SPS-Bildschirm ist

Ein OEM liefert eine Maschine aus und will, dass die Bedienoberfläche nach seinem Produkt aussieht, nicht nach Automatisierungssoftware.

So geht's

Sein Designer schreibt gewöhnliches HTML/CSS mit Schrift und Farben des Unternehmens, ergänzt die Bedienelemente um data-mio-*-Attribute und liefert die Seite unter /device aus. Die kommerzielle Lizenz entfernt das Melanite-Badge. Dieselbe Seite bettet eine Live-3D-Ansicht der Maschine und ein Trenddiagramm der letzten Schicht ein.

Ein Haus-Dashboard auf einem Wandpanel

Eine Grundrissseite, auf der jede Lampe antippbar ist und der Heizungszustand als Satz dasteht.

So geht's

Ein SVG-Grundriss wird importiert und seine Elemente direkt an Variablen gebunden, sodass ein Tipp auf #lamp_kitchen das Licht schaltet. Ein gebundenes ICU-Template rendert „Heizung aus, Rücklauf 31,4 °C“ auf dem Panel auf Deutsch und auf dem Handy eines Gastes auf Englisch – aus derselben Bindung.

Warum Melanite

Klassische HMI-Editoren geben dir ihre Widgets, ihren Look und ihre Lizenz. Melanite gibt dir die Webplattform: Wer HTML schreiben kann, kann die Bedienoberfläche bauen – und die Brücke, die die Live-Daten trägt, trägt auch 3D-Ansichten, Kamerastreams, Charts, Alarme und Sprache.

FAQ

Kann die HMI in die Logik zurückschreiben?

Ja. Jedes Bedienelement kann über dieselbe WebSocket-Brücke einen Live-Wert abonnieren und ihn schreiben. Schreibzugriffe werden serverseitig nach Benutzerrolle und nach einer HMI-Stufe pro Variable geprüft, sodass eine reine Anzeigeseite eine reine Anzeigeseite bleibt.

Brauche ich einen Build-Schritt oder ein Framework?

Nein. Es ist einfaches HTML, CSS und Attribute. Die Brücke ist ein einziges Script-Include. Du kannst ein Framework verwenden, wenn du willst, aber nichts setzt eines voraus.

Kann die KI die HMI für mich schreiben?

Ja. Der eingebaute Assistent und jeder externe KI-Agent erstellen /device-Seiten über dieselbe auditierte Tool-Schnittstelle – HMI-Dateien auflisten, lesen und schreiben. Ein Durchgang des Assistenten ist ein einziger Undo-Schritt; bei einem externen Agenten ist es jeder Batch.

Kostenlos, voller Funktionsumfang

Alle Funktionen, kostenlos für die private Nutzung.

Ein Binary läuft in jeder Stufe — die Lizenz schaltet nur Berechtigungen, nie den Funktionsumfang.

Kostenlos herunterladen Alle Funktionen