MolViewer.js

SMILES zu 3D-Moleküldarstellung im Browser

1. Statische Viewer (Markup-only)

Vier Moleküle, jedes mit einem anderen Feature, alle ohne JS angelegt: Wasser zeigt das Zahnrad-Menü data-controls="true", Benzol zeigt Atom-Tooltips data-tooltip="true", Aspirin rotiert mit data-rotate="0.4", Ethanol läuft im Polar-Modus.

Wasser

SMILES: O

Benzol

SMILES: c1ccccc1

Aspirin

SMILES: CC(=O)Oc1ccccc1C(=O)O

Ethanol (Polar-Modus)

SMILES: CCO

2. Interaktiver Viewer (API-Demo)

Dieser Viewer hat data-id="demo" und wird von außen über MolViewer.setMolecule() bzw. MolViewer.setStyle() gesteuert.

3. Mehrere Instanzen mit IDs

Beide Viewer haben data-id; die Buttons unten sprechen sie gemeinsam an.

Koffein (id="koffein")

Glucose (id="glucose")

4. Showcase

Vier Moleküle, vier Kombinationen aus den verfügbaren Features — 3D-Koordinaten, Rotation, Oberflächendarstellung und Farbschemata. Über das Zahnrad-Menü lassen sich alle Einstellungen nachträglich ändern.

Koffein — VdW-Oberfläche, PubChem-Farben

CN1C=NC2=C1C(=O)N(C(=O)N2C)C

Cholesterin — SAS-Oberfläche, Jmol-Farben

CC(C)CCCC(C)C1CCC2C1(CCC3C2CC=C4C3(CCC(C4)O)C)C

Vanillin — Polar-Modus, rotierend

COC1=C(C=CC(=C1)C=O)O

Adamantan — Sphere-Modell, Koltun-Farben

C1C2CC3CC1CC(C2)C3

5. Synchronisierte Viewer (Controller / Agent)

Drei Viewer mit gemeinsamer Steuerung: Stil, Farbschema, Oberfläche, 3D-Modus, H-Sichtbarkeit und vor allem die Kamera (Drehung, Zoom, Verschieben) bleiben in Echtzeit synchron — egal ob Auto-Rotate oder manuelles Drehen mit der Maus auf dem Controller.

Die Agents zeigen hier unterschiedliche Moleküle: links 1-Butanol (achiral), in der Mitte (R)-2-Butanol, rechts (S)-2-Butanol. Sobald ein Agent ein eigenes data-molecule trägt, ist dieser SMILES "gelockt" — Molekül-Wechsel auf dem Controller werden für ihn ignoriert. So lassen sich Stereoisomere oder Konfigurationsvarianten direkt nebeneinander vergleichen, mit identischer Kameraführung.

Controller Controller

CCCCO — 1-Butanol (achiral)

Agent A Agent

C[C@@H](O)CC — (R)-2-Butanol

Agent B Agent

C[C@H](O)CC — (S)-2-Butanol

Tipp: Drag mit der Maus im Controller-Viewer (links) — die Agents drehen mit. Mausrad zoomt mit. Rechtsklick-Drag verschiebt mit.

Quick Start

Drei Schritte: CSS einbinden, JS einbinden, Platzhalter-Element mit data-molecule-Attribut setzen. Die Library lädt RDKit und 3Dmol selbständig nach und rendert automatisch.

<link rel="stylesheet" href="molviewer.css">
<script src="molviewer.js"></script>

<div data-molecule="c1ccccc1"
    data-typ="stick"
    style="width:400px;height:300px"></div>

Das war's. Mehrere [data-molecule]-Elemente pro Seite sind problemlos möglich.

HTML-Attribute

Attribut Werte Default Beschreibung
data-molecule SMILES-String
(oder RepSMILES-Pattern)
Pflicht. Beschreibung des Moleküls in SMILES-Notation. Auch Mehrkomponenten-Systeme (mit „." getrennt) sind möglich. Zusätzlich akzeptiert wird RepSMILES, eine schlanke Wiederholungs-Notation mit {[$N]…[$]}-Blöcken — siehe Abschnitt unten.
data-typ stick
sphere
line
polar
stick Initialer Darstellungsstil. Siehe Abschnitt „Darstellungsstile".
data-id String Optionaler Bezeichner, über den die Instanz von außen über MolViewer.setMolecule(id, …) & Co. angesprochen werden kann. Muss innerhalb der Seite eindeutig sein.
data-bg CSS-Farbe white Hintergrundfarbe der 3D-Szene (z. B. black, #222).
data-controls "true" aus Zeigt oben rechts ein Zahnrad-Menü mit Stilwahl, Rotations-Toggle, PNG-Export und SMILES-kopieren. Schließt bei Klick außerhalb oder mit Esc.
data-tooltip "true" aus Beim Hover über ein Atom erscheint ein kleines Label mit Element und Index (z. B. „C 3").
data-rotate Zahl, "true" oder "false" aus Auto-Rotation um die y-Achse. Vorzeichen = Richtung, Betrag = Grad pro Frame (~0.5 ist gemütlich). "true" entspricht 0.5. Stoppt bei User-Interaktion und kann via Menü neu gestartet werden.
data-hydrogens "true"
"false"
true Wasserstoffatome anzeigen oder verstecken. Kann auch zur Laufzeit über das Zahnrad-Menü oder inst.setHydrogens() umgeschaltet werden.
data-3d "true"
"false"
false Echte 3D-Koordinaten via PubChem laden (mit lokalem SDF-Cache). Erfordert einen Netzwerkroundtrip beim ersten Aufruf (~500 ms). Falls PubChem das Molekül nicht kennt, wird automatisch auf die 2D-Darstellung zurückgefallen; der 3D-Button im Menü wird dann deaktiviert. Kann auch zur Laufzeit über das Zahnrad-Menü oder inst.set3D() umgeschaltet werden.
data-colorscheme rasmol jmol
cpk
koltun
pubchem
rasmol Atom-Farbschema. rasmol und jmol stammen aus 3Dmol.js (eingebaut), die anderen drei aus eigenen Tabellen (siehe CPK-Farbschema auf Wikipedia und jmol.sourceforge.net). Das klassische cpk kennt nur Wasserstoff, Kohlenstoff, Stickstoff und Sauerstoff — alle anderen Elemente werden in Hot Pink dargestellt (historischer „unbekannt"-Marker). Das Schema greift nur im 3D-WebGL-Modus, nicht im 2D-SVG-Fallback (RDKit nutzt dort eigene Farben). Im Polar-Stil wirkungslos, da dort nach Elektronegativität gefärbt wird.
data-surface none
vdw
sas
ms
none Zusätzliche transparente Oberfläche um das Molekül. vdw = Van-der-Waals-Radien (Atom-Hüllen), sas = Solvent-Accessible Surface (oberflächenexponierte Bereiche), ms = Molecular Surface (geglättete Connolly-Oberfläche). Die Oberfläche wird in der Farbe des aktuellen Atom-Farbschemas eingefärbt und nutzt eine Transparenz von 70 %, damit die Atome darunter sichtbar bleiben. Wirkt nur im 3D-WebGL-Modus, nicht im 2D-SVG-Fallback und nicht im Polar-Stil. Bei Molekülen mit mehr als 200 Atomen wird die Berechnung aus Performance-Gründen automatisch deaktiviert.
data-fullscreen "true" aus Zeigt einen zusätzlichen Maximieren-Button links neben dem Zahnrad (data-controls="true" muss aktiv sein, sonst kein Button-Bereich). Beim Klick öffnet sich ein Modal-Overlay mit einem unabhängigen Viewer-Klon in Großdarstellung — Stil, H-Sichtbarkeit, 3D-Modus, Rotation, Farbschema und Oberfläche werden vom Quell-Viewer übernommen. Änderungen im Modal werden beim Schließen verworfen, der Quell-Viewer bleibt unverändert. Falls ein 3D-SDF bereits geladen wurde, wird es an den Klon weitergereicht (kein zusätzlicher PubChem-Roundtrip). Im 2D-SVG-Fallback nicht verfügbar. Schließen via X-Button, Klick auf den abgedunkelten Hintergrund oder Esc.
data-controller-id String (verweist auf data-id eines Controllers) Macht diesen Viewer zu einem Agent: er übernimmt beim Init alle State-relevanten Einstellungen vom Controller (Stil, Farbschema, Oberfläche, 3D-Modus, Rotation, H-Sichtbarkeit) und wird bei jeder Controller-Änderung automatisch mitgezogen — egal ob die Änderung per Zahnrad-Menü oder über die JS-API erfolgt. Zusätzlich wird der Kamera-View (Drehung, Zoom, Verschieben) in Echtzeit per requestAnimationFrame gespiegelt — manuelle Drehung am Controller bewegt alle Agents synchron. Agents zeigen kein Zahnrad- und kein Maximieren-Menü, auch wenn data-controls oder data-fullscreen gesetzt ist (werden zwangsweise abgeschaltet). data-bg und data-tooltip bleiben pro Agent individuell, alles andere kommt vom Controller. data-molecule ist optional — wenn fehlt, kommt der SMILES vom Controller und wird bei jedem Wechsel mitgezogen. Wenn aber gesetzt, "lockt" das den SMILES: setMolecule-Sync vom Controller wird für diesen Agent ignoriert (Use-Case: Stereoisomer-Vergleich, Tautomere, Konfigurationsalternativen — gemeinsame Kamera, unterschiedliche Moleküle). Bei data-3d="true" wird der PubChem-Roundtrip vom Controller geholt und mit allen Agents geteilt, die denselben SMILES haben — Agents mit eigenem (anderen) SMILES holen ihr SDF separat. Reihenfolge im HTML spielt keine Rolle (zwei-Pass-Init). Verschachtelung Agent→Agent wird nicht unterstützt.

Größe: über CSS (Inline-Style oder externes Stylesheet). Werden weder Breite noch Höhe gesetzt, fällt die Library auf 400×200 px zurück.

RepSMILES — Wiederholungs-Notation

Für längere wiederkehrende Strukturen (Polyole, Alkylketten, einfache Oligomere) akzeptiert data-molecule eine schlanke Erweiterung von SMILES, lose inspiriert von BigSMILES und Generative BigSMILES. Vor der Übergabe an RDKit wird das Pattern einmalig zu reinem SMILES expandiert; alle nachgelagerten Features (3D, Surface, Deskriptoren, PNG-Export, Clipboard) funktionieren dadurch unverändert. Es gibt keine Stochastik und keine Bonding-Descriptors — nur deterministische Wiederholung.

Syntax

Pattern Bedeutung
{[$N]UNIT[$]} UNIT wird N-mal wiederholt und konkateniert. N ist eine Ganzzahl von 0 bis 1000.
{[$N]UNIT} Schließendes [$] ist optional und kann der Lesbarkeit halber weggelassen werden.
{[$N1]…{[$N2]…[$]}…[$]} Verschachtelung erlaubt — innerstes Vorkommen wird zuerst expandiert.

Beispiele

Pattern Expandiert Hinweis
OC{[$10]C[$]}CO OCCCCCCCCCCCCO Dodecan-1,12-diol
CC{[$5]C(C)[$]}CCC CCC(C)C(C)C(C)C(C)C(C)CCC Verzweigte Alkylkette
{[$3]O{[$2]CC[$]}[$]} OCCCCOCCCCOCCCC Verschachtelt: innen 2× CC, außen 3× OCCCC
{[$8]CC(=O)O[$]} CC(=O)OCC(=O)O… Polyester-artiges Oligomer (8 Einheiten)

Limits

Zum Schutz vor versehentlichen Speicher-Explosionen gelten harte Grenzen: maximal 1000 Wiederholungen pro Block, maximal 5000 Zeichen Endlänge, maximal 100 Iterationen. Bei Überschreitung wird eine Fehlermeldung im Viewer angezeigt.

Anzeige & Export

Wird ein Pattern verwendet, zeigt das Zahnrad-Menü unten einen Info-Block mit dem Original-Pattern und dem expandierten SMILES zum Vergleich (jeweils als selektierbares Eingabefeld mit Kopier-Button daneben). copySMILES() kopiert den expandierten String in die Zwischenablage. Der PNG-Export-Filename basiert ebenfalls auf dem expandierten SMILES (gekappt auf 200 Zeichen).

Wann nicht verwenden

Für echte Polymere mit Repeat-Unit-Listen, Bonding-Descriptors ($/</>), Endgruppen-Logik oder Verteilungen ist diese Notation bewusst zu schmal — dafür empfehlen sich dedizierte BigSMILES-Parser (z. B. py-bigsmiles). Die hier eingebaute Variante ist ein Mini-Pre-Processor für deterministische Wiederholungen, nicht mehr.

JavaScript-API

Globales MolViewer-Objekt

MolViewer.setMolecule(id, smiles)
Lädt einen neuen SMILES-String in die Instanz mit gegebener data-id.
MolViewer.setStyle(id, style)
Wechselt den Darstellungsstil (siehe unten) der Instanz mit gegebener data-id.
MolViewer.setRotation(id, speed)
Startet, stoppt oder ändert die Auto-Rotation. 0 = aus, positive Zahl = nach rechts, negative = nach links. Der Betrag ist die Geschwindigkeit (Grad pro Frame).
MolViewer.setHydrogens(id, bool)
Zeigt (true) oder verbirgt (false) Wasserstoffatome der Instanz mit gegebener data-id.
MolViewer.set3D(id, bool)
Schaltet echte 3D-Koordinaten (PubChem) für die Instanz mit gegebener data-id ein oder aus. Löst einen Neu-Render aus; beim ersten Aktivieren einen Netzwerkfetch.
MolViewer.setColorScheme(id, scheme)
Wechselt das Atom-Farbschema. Werte: 'rasmol' (Default), 'jmol', 'cpk', 'koltun', 'pubchem'. Wirkt nur im 3D-WebGL-Rendering, nicht im SVG-Fallback und nicht im Polar-Stil.
MolViewer.setSurface(id, type)
Schaltet die Oberflächendarstellung. Werte: 'none' (aus, Default), 'vdw' (Van der Waals), 'sas' (Solvent-Accessible) oder 'ms' (Molecular Surface). Die Färbung folgt automatisch dem aktiven Farbschema. Wirkt nur im 3D-WebGL-Modus und nicht im Polar-Stil.
MolViewer.openMaximized(id)
Öffnet das aktuelle Molekül der Instanz in einem Modal-Overlay (Vollbild-ähnliche Darstellung). Erzeugt eine eigenständige Klon-Instanz mit aktuellen Einstellungen — Änderungen im Modal wirken nicht auf den Quell-Viewer zurück und werden beim Schließen verworfen. Funktioniert auch wenn data-fullscreen nicht gesetzt ist.
MolViewer.reset(id)
Setzt die Anzeige-Einstellungen (Stil, H-Sichtbarkeit, 3D-Modus, Rotation, Farbschema, Oberfläche) der Instanz mit gegebener data-id auf die ursprünglich per data-*-Attributen definierten Werte zurück und rendert komplett neu — dadurch wird auch Kamera/Zoom wieder zentriert. Das geladene Molekül selbst (smiles) bleibt unverändert.
MolViewer.get(id) → Instance | null
Liefert das Instanz-Objekt zur data-id (oder null, wenn keine existiert).
MolViewer.all() → Instance[]
Array aller registrierten Instanzen, auch derer ohne data-id.
MolViewer.ready() → Promise
Promise, das resolvet sobald RDKit.js und 3Dmol.js geladen und initialisiert sind. Praktisch für JS, das auf das Laden warten will.
MolViewer.init(rootEl?) → Promise
Scannt das Dokument (oder den angegebenen Teilbaum) erneut auf neue [data-molecule]-Elemente. Wird normalerweise automatisch beim DOMContentLoaded aufgerufen — manuell nur nötig, wenn nachträglich Elemente per JS eingefügt wurden.
MolViewer.electronegativity
Schreibbares Objekt mit den Pauling-Elektronegativitäten, die im Polar-Modus verwendet werden. Eigene Werte können nachgetragen werden, z. B. MolViewer.electronegativity['Xx'] = 2.0;
MolViewer.VERSION
Versions-String der Library.

Pro-Instanz-Methoden

Holen via const inst = MolViewer.get('myId');

inst.setMolecule(smiles)
Lädt ein neues Molekül in genau diesen Viewer.
inst.setStyle(name)
Wechselt den Stil dieses Viewers.
inst.setRotation(speed)
Vorzeichen-Geschwindigkeit für die Auto-Rotation. 0 stoppt; bei späterem Neustart über das Menü bleibt der zuletzt gesetzte Betrag erhalten.
inst.setHydrogens(bool)
Schaltet die Wasserstoff-Sichtbarkeit für diesen Viewer. Wirkt sofort ohne Neu-Render des Moleküls.
inst.set3D(bool)
Echte 3D-Koordinaten ein-/ausschalten. Bei Aktivierung wird das SDF von PubChem geholt (oder aus dem lokalen Cache geliefert) und das Molekül neu gerendert.
inst.setColorScheme(name)
Wie MolViewer.setColorScheme, nur direkt auf der Instanz.
inst.setSurface(type)
Wie MolViewer.setSurface, nur direkt auf der Instanz.
inst.openMaximized()
Öffnet diesen Viewer in einem Modal-Overlay. Siehe MolViewer.openMaximized.
inst.reset()
Setzt diesen Viewer auf den Anfangszustand zurück: Stil, H-Sichtbarkeit, 3D-Modus, Rotation, Farbschema und Oberfläche kehren zu den Werten der data-*-Attribute zurück, der Viewer wird neu gerendert (Kamera/Zoom zentriert). Das aktuell geladene Molekül bleibt erhalten.
inst.exportPNG(filename?)
Löst den Download des aktuellen 3D-Bilds als PNG aus. Im SVG-Fallback nicht verfügbar. Ohne filename wird ein aus dem SMILES abgeleiteter Name verwendet.
inst.copySMILES() → Promise<boolean>
Kopiert den aktuellen SMILES in die Zwischenablage. Resolve-Wert gibt an, ob das Kopieren erfolgreich war.
inst.getDescriptors() → Object | null
Liefert die zuletzt von RDKit berechneten Deskriptoren als Objekt — u. a. NumAtoms, NumHeavyAtoms, amw (Molmasse), tpsa, NumRings, NumRotatableBonds, CrippenClogP.
inst.resize()
Forciert ein Re-Layout des 3Dmol-Viewers. Nur nötig, wenn die Container-Größe per JS verändert wurde und die automatische Resize-Erkennung nicht greift.
inst.destroy()
Räumt alle Ressourcen ab (RDKit-Mol-Objekte, 3Dmol-Viewer, ResizeObserver) und entfernt die Instanz aus den Registries.

Controller & Agents — synchronisierte Viewer

Mehrere Viewer können aneinandergekoppelt werden, sodass sie immer dieselben Einstellungen, dieselbe Darstellung und dieselbe Kamera zeigen — sehr praktisch für Side-by-Side-Vergleiche von Stereoisomeren oder Tautomeren, oder für Lehr-Layouts mit einer Master-Ansicht plus mehreren Detailansichten.

Ein Viewer wird zum Controller, sobald ein anderer Viewer ihn über data-controller-id referenziert. Der Controller selbst trägt einfach ein eindeutiges data-id. Agents sind die abhängigen Viewer — sie zeigen weder Zahnrad- noch Maximieren-Button, ihre Einstellungen kommen vom Controller. Beim Init scannt die Library alle Viewer in zwei Durchgängen: erst werden alle Instanzen erzeugt, dann werden Agents an ihren Controller verlinkt — die Reihenfolge im HTML ist also egal.

HTML-Beispiel: gemeinsames Molekül

<!-- Controller: bekommt eine ID, alle Optionen wie gewohnt -->
<div data-id="master"
     data-molecule="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
     data-typ="stick"
     data-3d="true"
     data-rotate="0.4"
     data-controls="true"
     ></div>

<!-- Agent ohne data-molecule: übernimmt SMILES vom Controller -->
<div data-controller-id="master"
     data-bg="#1a1a2e"
     data-tooltip="true"
     ></div>

<div data-controller-id="master"
     data-bg="#0a3a1a"
     ></div>

HTML-Beispiel: Stereoisomer-Vergleich

Setzt ein Agent ein eigenes data-molecule, ist dieser SMILES gelockt: setMolecule-Sync vom Controller wird für ihn ignoriert. Style, Farbschema, Oberfläche, 3D-Modus und Kamera bleiben aber synchron — perfekt für direkte Gegenüberstellungen.

<!-- Controller zeigt das achirale Stammmolekül -->
<div data-id="butanol"
     data-molecule="CCCCO"
     data-3d="true"
     data-controls="true"
     ></div>

<!-- Agent A: (R)-Enantiomer — eigenes data-molecule "lockt" den SMILES -->
<div data-controller-id="butanol"
     data-molecule="C[C@@H](O)CC"
     ></div>

<!-- Agent B: (S)-Enantiomer -->
<div data-controller-id="butanol"
     data-molecule="C[C@H](O)CC"
     ></div>

Was wird synchronisiert?

Synchron gehalten wird der gesamte Modell-State: Darstellungsstil, Farbschema, Oberfläche, 3D-Modus, H-Sichtbarkeit, Auto-Rotation (Richtung & Geschwindigkeit) — und der Kamera-View (Position, Drehung, Zoom). Der SMILES selbst wird nur dann mitgezogen, wenn der Agent kein eigenes data-molecule hat. Auch ein reset() auf dem Controller wirkt auf alle Agents — und zwar zurück auf die Controller-Defaults, da Agents beim Verlinken die _initialDefaults vom Controller mitbekommen (der eigene _ownSmiles bleibt erhalten).

Nicht synchronisiert werden Container-Eigenschaften: data-bg (Hintergrundfarbe) und data-tooltip bleiben pro Viewer individuell — ein Agent ist ja eine eigenständige Anzeige, nur die Darstellung und Kamera werden gespiegelt.

Kamera-Sync in Echtzeit

Sobald ein Controller existiert, läuft im Hintergrund ein requestAnimationFrame-Loop: pro Frame wird viewer.getView() ausgelesen, und sobald sich der View gegenüber dem letzten Frame geändert hat, per setView() in alle Agents kopiert (mit anschließendem Re-Render). Damit landen alle Manipulationen auf dem Controller automatisch bei den Agents:

Der Loop ist günstig: kein Aufwand, wenn keine Agents existieren oder der View sich nicht geändert hat (Array-Vergleich mit Float-Toleranz). Wenn der Agent ein anderes Molekül anzeigt (Stereoisomer-Setup), wird derselbe Kamera-View aufgesetzt — bei chemisch ähnlichen Molekülen (gleiches Grundgerüst) sieht das visuell perfekt synchron aus.

API-Aufrufe auf Controller und Agents

Aufrufe wie MolViewer.setStyle('master', 'polar') oder controllerInst.setRotation(0.5) wirken auf den Controller und werden automatisch an alle Agents weitergereicht — egal ob die Aufrufe von einem User-Klick im Zahnrad-Menü oder direkt aus der API kommen. setMolecule wird auf Agents mit _ownSmiles übersprungen.

Auch ein direkter Aufruf auf einer Agent-Instanz ist technisch erlaubt — er wird aber beim nächsten Controller-Update wieder überschrieben. Die Empfehlung ist also: nur den Controller ansprechen (über seine data-id) und die Agents als read-only-Spiegel betrachten.

Eine Ausnahme gibt es: das manuelle Drehen mit der Maus stoppt nur die Auto-Rotation des betreffenden Viewers. Beim Controller wird der Rotations-Stopp an die Agents propagiert, beim Agent bleibt der Stopp lokal. Der reine Kamera-View wird trotzdem in beide Richtungen NICHT zurückgespiegelt — Agent → Controller gibt es nicht, der Datenfluss bleibt einseitig.

Geteilter 3D-Cache

Bei data-3d="true" wird der PubChem-SDF-Roundtrip nur einmal gemacht — vom Controller. Alle Agents mit demselben SMILES teilen sich dasselbe Promise und bekommen die SDF-Daten direkt geliefert. Bei drei Viewern mit demselben Molekül sind das also zwei statt drei Netzwerkfetches eingespart. Agents mit eigenem (anderen) SMILES (Stereoisomer-Setup) holen ihr SDF natürlich separat.

Edge Cases

Verweist ein Agent auf eine ID, die kein registrierter Controller ist (Tippfehler, vergessenes data-id), wird eine Warnung in die Konsole geloggt und der Agent läuft im Standalone-Modus: er nutzt seine eigenen data-*-Attribute (insbesondere data-molecule, falls gesetzt). Ein Agent kann nicht selbst Controller eines weiteren Agents sein — die Kette bleibt einstufig (Controller → Agent), keine Verschachtelung.

Darstellungsstile

Hinweis: Die Partialladungen im Polar-Modus sind eine einfache Schätzung aus EN-Differenzen der gebundenen Nachbarn — kein vollwertiges QM-Verfahren.

Beispiel: API verwenden

// Auf Library-Bereitschaft warten
await MolViewer.ready();

// Molekül und Stil von außen ändern
MolViewer.setMolecule('demo', 'CCO');
MolViewer.setStyle('demo', 'polar');

// Auf die Instanz zugreifen
const inst = MolViewer.get('demo');
console.log(inst.getDescriptors());
// → { NumAtoms: 9, amw: 46.07, tpsa: 20.23, ... }

// Bei Controller/Agent-Setup nur den Controller ansprechen —
// alle Agents folgen automatisch:
MolViewer.setStyle('master', 'sphere');
MolViewer.setSurface('master', 'vdw');
MolViewer.setMolecule('master', 'OCC1OC(O)C(O)C(O)C1O'); // Glucose

Verwendete externe Libraries

Beide werden von der Library beim ersten Laden automatisch von ihrem offiziellen CDN nachgeladen — keine manuellen Script-Tags nötig.

Download

Die Library besteht aus zwei bis drei Dateien:

Alle Dateien haben keine Build-Schritt-Abhängigkeit. molviewer.js und molviewer.css einfach im selben Ordner wie die HTML-Seite ablegen. sdf.api.php wird nur für data-3d="true" benötigt — PHP muss serverseitig verfügbar sein, und das Unterverzeichnis sdf/ muss für den Webserver schreibbar sein. Die PHP-Datei wird als sdf.api.php.txt heruntergeladen und muss vor der Verwendung in sdf.api.php umbenannt werden.

SMILES — Simplified Molecular Input Line Entry System

SMILES ist eine kompakte Textnotation zur Darstellung von Molekülen. Ein SMILES-String beschreibt alle Atome, Bindungen und die Struktur des Moleküls in einer einzigen Zeile.

Grundlagen

Organische Atome (implizite Wasserstoffe)

Die wichtigsten Elemente können mit einem Buchstaben geschrieben werden. Der Rest des Moleküls wird automatisch mit Wasserstoffatomen ergänzt:

SMILES Element Beispiel
C Kohlenstoff CC = Ethan (C–C)
N Stickstoff CN = Methylamin
O Sauerstoff O = Wasser
S Schwefel CS = Dimethylsulfid
P Phosphor CP = Methylphosphin
Cl, Br, I Halogene CCl = Chlormethan

Bindungen

SMILES Bindung Beispiel
- Einfachbindung (optional) C-C oder CC (dasselbe)
= Doppelbindung C=C = Ethen
# Dreifachbindung C#C = Ethin

Verzweigungen (Branches)

Klammern zeigen Verzweigungen an. Alles in Klammern hängt am vorherigen Atom:

Ringe

Zahlen verbinden Atome miteinander und schließen Ringe:

Aromatische Atome (Kleinbuchstaben)

Kleinbuchstaben kennzeichnen aromatische Atome in aromatischen Ringen:

Weitere Symbole

Symbol Bedeutung Beispiel
O (Großbuchstabe) Sauerstoff CCO = Ethanol
[Symbol] Explizite Angaben (Ladung, H-Atome, Isotope) C[OH+] oder [13C]CC
+, - Formale Ladung [NH4+] = Ammonium, [O-] = Oxid-Ion
@, @@ Stereochemie (Chiralität) C[C@H](O)C

Praktische Beispiele

O
Wasser
CC
Ethan
CCO
Ethanol
CC(=O)O
Essigsäure
c1ccccc1
Benzol

Tipps & Tricks

Weitere Ressourcen

Diese Anleitung zeigt nur die Grundlagen. Für alle Details, Stereo-Notationen, erweiterte Syntax und Validierung siehe:

OpenSMILES Specification →