Mechanische Anlagen im Browser visualisieren

Hallo,

Ich arbeite derzeit an einer Lösung, eine Anlage über eine Webanwendung zu visualisieren.

Bei den Anlagen handelt es sich um zum Beispiel um LNG Gasanlagen. Die Bauteile die auf der Anlage stehen (Lagertanks, Pumpen, Verdampfer, usw.) sind in der Datenbank eingetragen. Zu jeder Komponente werden auch Bilder für die Visualisierung gespeichert.

Die einzelnen Bauteile sollen auf verschiedene "Screens" aufgeteilt werden, und auf diesem frei positioniert werden. Dafür habe ich in der Datenbank bei den Objekten die entsprechenden Felder eingefügt, dass ein Objekt weiß, auf welchem Screen es platziert wurde und auf welchen Koordinaten die linke obere Ecke des Bildes platziert ist.

Meine Frage ist jetzt, ob ihr ein Framework kennt, mit welchem man ein Koordinatensystem wie zum Beispiel bei einem HTML5 Canvas aufbauen kann, und die Objekte aus der Datenbank mit zum Beispiel dem Bild + Titel vernünftig anzeigen kann und auch am Server dann die Koordinaten ordentlich in die DB speichern kann?

Ich denke, dass dies Broswerseitig mit einem Javascript Framework wie zum Beispiel Konva gelöst werden sollte. Oder seid ihr da anderer Meinung?

Ich wäre für Inputs sehr dankbar!

SVGs können sowas. Alternativ WebGL wenn es komplexer ist; für Anlagenvisualisierung reicht aber i.d.R. SVG (verwende ich auch für sowas (Maschinen-Visualisierung)).
Angesteuert werden sie dann direkt auf dem Client durch JavaScript. Serverseitig geht das nicht.

Frameworktechnisch sind die üblichen Verdächtnigen oft Velocity, SnapSVG...

Hi Blue_Dragon,

Die einzelnen Bauteile sollen auf verschiedene "Screens" aufgeteilt werden, und auf diesem frei positioniert werden. Dafür habe ich in der Datenbank bei den Objekten die entsprechenden Felder eingefügt, dass ein Objekt weiß, auf welchem Screen es platziert wurde und auf welchen Koordinaten die linke obere Ecke des Bildes platziert ist.

Wenn ich das richtig verstehe, geht es nur darum, die Grafiken der Anlagen mit der Maus innerhalb eines Rechtecks positionieren zu können?

Für diese Anforderung würde HTML mit JS reichen. Die Positionierung eines Anlagen-Elements kann per Styles festgelegt, und das Verschieben mittels JavaScript realisiert werden. Wenn du AngularJS verwendest, kannst du die Positions-Werte per ng-style an dein ViewModel binden.

Wenn es doch etwas komplizierter ist, eignen sich SVG-Grafiken. Diese können auch inline in den HTML-Text eingefügt und interaktiv verändert werden.

WebGL würde ich nur dann empfehlen, wenn es sich um eine interaktive 3D-Darstellung handelt.

Hallo,

Danke für die Antworten!

Ich habe mir einmal SVG angesehen. Das sieht sehr vielversprechend aus!