WebViewer-Export Konfiguration

Der Onyx 3D-WebViewer erlaubt die Aufbereitung eines Datensatzes für die Anzeige im Browser auf Geräten ohne OnyxCeph³™, einschliesslich mobilen Endgeräten. Der WebViewer kann in Webseiten oder Webportalen von Dienstleistern eingebunden werden, stellt aber selbst keine über die reine Darstellung hinausgehenden Funktionen bereit. Siehe auch Beitrag Webbasierte Kommunikation.

Benutzung

Exportieren Sie einen Web-basierten 3D Datensatz in der Vollbildansicht des Befundes über den Kontextmenüeintrag "Web Export" der Objektliste oder die Thumbnail-Ansicht der Befunde. Zum Ablegen des Links im Onyx vergeben Sie einen Namen und füllen Sie dann den folgenden Dialog aus:

Eintrag	Beschreibung	Standard
Nur Sichtbare Objekte anzeigen	Es werden keine unsichtbaren Objekte mit übertragen, um Speicherplatz zu sparen.	an
Animation (Quelle)	Animation mit übertragen, wenn beim Befund-Speichern mit Exportiert (verfügbar aus den Modulen V.T.O. 3D, Aligner 3D, Sim 3D)	an
Kommentar	Kommentar des Befundes als Text im WebViewer einblenden	aus
Objektliste	Eine Onyx-ähnliche Objektliste anzeigen	aus
Werkzeuge	Eine Werkzeugleiste mit Funktionen zum Ein/Ausblenden von u.a. Attachments, Malokklusion, Zahnfarben, wenn im Datensatz mit abgelegt. Diese Option sollte gerade für mobile Geräte der Objektliste bevorzugt werden	aus
Farben	Individualisierte Farben zur Anzeige des Viewers benutzen	aus
Passwort	Vergeben Sie immer ein neues Passwort zum Schutz der Daten (oder lassen Sie das Feld frei für ein zufälliges Passwort
Passwort in Link einbinden	an: Das Passwort wird als Teil des Links erzeugt (niedrigere Sicherheit), aus: Das Passwort muss dem Betrachter unabhängig vom Link übermittelt werden und beim Start eingegeben werden (höhere Sicherheit)	aus
Patientendaten	Wählen Sie die Daten, die im Info-Fenster sichtbar sein sollen	komplett anonymisiert
Link	Ergebnis, geben Sie diesen Link weiter oder betten Sie diesen Link in eine patientenspezifische Webseite ein
Passwort	Nur angezeigt, wenn nicht im Link eingebunden

Konfiguration und Individualisierung

Der Upload muss in den Systemoptionen im Reiter Daten hochladen > 3D-Web-Betrachter konfiguriert werden, bevor er als Menüeintrag verfügbar wird.

Zur Individualisierung mit eigenem Logo muss die in den Einstellungen als "Viewer Homepage" verlinkte Seite den Webviewer wie im folgenden Beispiel einbinden und das Logo als transparentes Bild enthalten.

Code-Beispiel für eine Seite mit individualisiertem Viewer

<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>My 3D Viewer</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <script> 
    function addIFrame() { // Neue dynamische Einbindung über Script
      var viewerLink = '//onyx.orthorobot.com/webviewer/main.html'; // Ändern Sie diesen Link auf den Viewer-Unterordner, der mit Ihren Daten auf den eigenen Server geladen wird. Im obigen Beispiel wäre das '???.de/OnyxWebviewerUploads/Viewer/main.html'
      var viewerData = window.location.search;                      // Wenn die Daten in ein Labor-Portal geladen werden, kann dieser Link auf den Datensatz auch dynamisch erzeugt werden. In diesem Beispiel wird der Link aus der URL geholt.
      var iframe     = document.createElement('iframe');            // Legen Sie den IFrame bei komplexeren Seiten auch optional in einem Unterelement Ihrer Seite an. Dieses einfache Beispiel fügt ihn ans Ende des Dokumentes ein.
      
      iframe.setAttribute('name', 'OnyxCephWebGL');
      iframe.setAttribute('style', 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:1;');
      iframe.setAttribute('src', viewerLink+viewerData); 
      document.body.appendChild(iframe);
    }
  </script>
</head>
<body onload="addIFrame()">
  <img src="MyLogo.png" style="position:absolute;top:0;left:0;z-index:2">
  <!-- hier fügt es dynamisch den iframe ein -->
</body>
</html>

Hilfe bei Problemen

Generelles Vorgehen zur Einrichtung des eigenen Servers

Der Upload in OnyxCeph funktioniert nicht

Die Viewer-Seite meldet "Datei nicht gefunden - Bitte Link prüfen"

Die Viewer-Seite meldet "Falsches Passwort oder fehlerhafte Datei"

Erweitertes Interface

Der Webviewer unterstützt eine Vielzahl an Zusatzoptionen zur Individualisierung von Aussehen und Verhalten. So können beispielsweise Icons ausgetauscht oder die Schriftgrößen für "Responsives Design", d.h. bei Einbindung des Viewers als Teil einer größeren Seite, geändert werden. Gesteuert werden diese Optionen über das erweitertes Interface, welches auf das Code-Beispiel oben aufbaut.

Code-Beispiel für das erweiterte Interface

 
 function addIFrame() {
 
   // add event handler to catch the loading finished event from the viewer:
   window.addEventListener("message", eventFromWebviewer);
 
   var viewerLink = '//onyx.orthorobot.com/webviewer/main.html'; // Change this link to the Viewer subfolder that is uploaded next to your data. In the above example, this would be '???.com/OnyxWebviewerUploads/Viewer/main.html'
   var viewerData = window.location.search;                      // If the data is loaded into a lab portal, this link can also be created dynamically. In this example, the parameters are taken from the URL.
   var iframe     = document.createElement('iframe');            // Optionally add the iframe as a child to any other element of your website. In this simple example, it is appended to the end of the document.
 
   iframe.setAttribute('name', 'OnyxCephWebGL');
   iframe.setAttribute('style', 'position:fixed; top:50px; left:0px; bottom:0px; right:0px; width:100%; height:80%; border:none; margin:0; padding:0; overflow:hidden; z-index:1;');
   iframe.setAttribute('src', viewerLink+viewerData); 
   document.body.appendChild(iframe);
 }
 
 // handle events from the viewer
 function eventFromWebviewer(event) {
 
   var eventObj = JSON.parse(event.data);
   if(eventObj !== null && eventObj.type === "LOADING" && eventObj.value === "finished") {
     // Do any initial setup here if required, like:
    
     /* functions for responsive design scaling and replacing icons
     window.frames.OnyxCephWebGL.postMessage('{"type":"SCALE_UI","percent":"50%"}', '*'); // scale down the ui for better reactive sizes when the viewer is not fullscreen
     window.frames.OnyxCephWebGL.postMessage('{"type":"REPLACE_ICON","id":"viewUpperBtn","part":"path","value":"M ... Z"}', '*'); // see below
     // id: possible values are: 
     //     viewUpperBtn, viewFrontBtn, viewLowerBtn, viewRotateBtn, infoBtn,
     //     aniPlayBtn, aniPauseBtn, aniStepBtn, aniRepeatBtn, aniNoRepeatBtn,
     //     aniSpeed0Btn, aniSpeed1Btn, aniSpeed2Btn,
     //     aniMarkerBtn0, aniMarkerBtn1, ... // replace all with a loop up to aniMarkerBtn300 (current maximum) 
     //     toggleClippingBtn, toggleRulerBtn, toggleCommentBtn, toggleMalocclusionBtn, toggleAttachmentsBtn
     // part: "path" or "viewBox", see below. Note that it is not possible to change the style or add other svg elements.
     // value: d attribute of the svg path element for "part":"path" or viewBox attribute of the svg element for "part":"viewBox"
     
     // Example for changing all the step icons to smaller icons (i.e. smaller numbers)
     for(var i=0; i<300; i++) // Tiny numbers (bottom aligned)
       window.frames.OnyxCephWebGL.postMessage('{"type":"REPLACE_ICON","id":"aniMarkerBtn' + i + '", "part":"viewBox", "value":"-20 -30 64 64"}', '*');
     for(var i=0; i<300; i+=5) // Scale medium for 0,5,10,...
       window.frames.OnyxCephWebGL.postMessage('{"type":"REPLACE_ICON","id":"aniMarkerBtn' + i + '", "part":"viewBox", "value":"-5 -5 34 34"}', '*');
       
     // Example for changing all the icons back to the pin-icons:
     for(var i=0; i<300; i++) {
       window.frames.OnyxCephWebGL.postMessage('{"type":"REPLACE_ICON","id":"aniMarkerBtn' + i + '", "part":"viewBox", "value":"0 0 24 24"}', '*');
       window.frames.OnyxCephWebGL.postMessage('{"type":"REPLACE_ICON","id":"aniMarkerBtn' + i + '", "part":"path", "value":"M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"}', '*');
     }
     */
   
     /* functions for controlling the timeline
     window.frames.OnyxCephWebGL.postMessage('{"type":"PLAY_TO","key":"0"}', '*'); // Plan to specific key "0", "1", ... or "first" or "last"
     */
   
     /* possible functions for automatic control of the "tools"
     window.frames.OnyxCephWebGL.postMessage('{"type":"ATTACHMENT_STYLE",  "value":"ghost"}',  '*'); // "normal","hidden","ghost" (show Attm. as in animation/not at all/as ghosts only)
     window.frames.OnyxCephWebGL.postMessage('{"type":"MALOCCLUSION_STYLE","value":"ghost"}',  '*'); // "normal","hidden","ghost","full" (overlay MO as in animation/not/as ghost/very strong)
     window.frames.OnyxCephWebGL.postMessage('{"type":"TEETHCOLOR_STYLE",  "value":"hidden"}', '*'); // "normal","hidden" (show/hide colors exported with the aligner animation like occlusal contacts)
     window.frames.OnyxCephWebGL.postMessage('{"type":"COMMENT_STYLE",     "value":"short"}',  '*'); // "none","short","full" (comment off/step comment only/step + finding comment)
     window.frames.OnyxCephWebGL.postMessage('{"type":"RULER_STYLE",       "value":"none"}',   '*'); // "none","ruler" (ruler on/off)
     */
     
     /* functions for control of the "navigation panel" on the left
     window.frames.OnyxCephWebGL.postMessage('{"type":"CAMERA",       "from"  :"left"}',  '*'); // "left", "right", "top", "bottom", "front", "back"
     window.frames.OnyxCephWebGL.postMessage('{"type":"CAMERA",       "zoom"  :"reset"}', '*'); // reset zoom
     window.frames.OnyxCephWebGL.postMessage('{"type":"CAMERA",       "transl":"reset"}', '*'); // reset translation
     window.frames.OnyxCephWebGL.postMessage('{"type":"HIDE_JAW",     "jaw"   :"upper"}', '*'); // "upper", "lower", "none"
     window.frames.OnyxCephWebGL.postMessage('{"type":"CLIPPING",     "side"  :"left"}',  '*'); // "left", "right", "none", "switch" (switch toggles through the modes)
     */
   }
 }

Verweise

	Webbasierte Kommunikation
	WebView-Upload-Einstellungen
	WebViewer-Bedienelemente
	Beispiele der Laborportal-Kommunikation