Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- function_webexport [2022/10/05 16:40] – tom
+++ function_webexport [2024/04/08 07:59] (aktuell) – [Verweise] onyxadmin
@@ Zeile 1: / Zeile 1: @@
+====== WebViewer-Export Konfiguration======
-====== WebViewer-Export ======
 ----
-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 [[webviewexamples|übergeordnete Webseiten]] oder Webportale von Dienstleistern eingebunden werden, stellt aber selbst keine über die reine Darstellung hinausgehenden Funktionen bereit. Siehe auch Beitrag [[lab_communication|Webbasierte Kommunikation]].
+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 [[web_communication|Webbasierte Kommunikation]].
@@ Zeile 25: / Zeile 24: @@
 ----
-===== Konfiguration =====
+===== Konfiguration und Individualisierung =====
 Der Upload muss in den [[settings|Systemoptionen]] im Reiter [[tab_uploaddata_webview|Daten hochladen]] > 3D-Web-Betrachter konfiguriert werden, bevor er als Menüeintrag verfügbar wird.
-^ Eintrag ^ Beschreibung ^ Beispiel ^
+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.
-| Host | Ihr Dienstleister für den FTP-Speichersplatz | 123.456.789.012 |
-| Verbindungssicherheit | Protokoll für den Upload | FTPS |
-| Benutzername | Der für den FTP-Zugriff eingerichtete Account-Name | onyxUser |
-| Benutzerpasswort | Das zum Benutzer passende Passwort für den FTP-Zugriff | •••• |
-| Host Verzeichnis | Das Verzeichnis der Daten relativ zum root-Verzeichnis des Benutzers | ''public_html/OnyxWebviewerUploads'' |
-| htaccess | Soll automatisch eine Datei für Zugriffsrechts (CORS) angelegt werden? | an |
-| Viewer Homepage | Ihre individualisierte Seite mit eingebettetem Webviewer (s. Beispiel unten) | ''www.image-instruments.de/webviewer/index.html'' |
-| Daten Adresse | Die zum Host Verzeichnis gehörige Adresse so wie von Aussen gesehen | ''???.de/OnyxWebviewerUploads/'' |
-  * Achten Sie darauf, in der iFrame-Einbindung und der Onyx-Konfiguration eine gültige Protokoll-Abfolge zu haben (http >= https in ''Viewer Homepage'' > ''iFrame'' > ''Daten-Adresse'').
+++++ Code-Beispiel für eine Seite mit individualisiertem Viewer |
-  * Achten Sie auf den ggf. abweichenden Verzeichnispfad der Daten aus Sicht des FTP-Zugangs und des Zugangs von aussen.
-  * Die minimale Seite für einen individualisierten Viewer sieht wie folgt aus:
-  * m( Bitte beachten, dass sich die Art der Einbindung aufgrund eines neuen Sicherheitsfeature (oder Bugs) im Safari-Browser geändert hat:
   <html xmlns="http://www.w3.org/1999/xhtml">
@@ Zeile 48: / Zeile 36: @@
     <script>
       function addIFrame() { // Neue dynamische Einbindung über Script
-        var iframe = document.createElement('iframe');
+        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', '//onyx.orthorobot.com/webviewer/main.html'+window.location.search); // change this if you have a CMS managing the link data "?mlink=abc.iiwgl&p=xxx&..."
+        iframe.setAttribute('src', viewerLink+viewerData);
         document.body.appendChild(iframe);
       }
@@ Zeile 61: / Zeile 52: @@
   </body>
   </html>
+++++
 ----
@@ Zeile 66: / Zeile 58: @@
 ===== Hilfe bei Problemen =====
-Der Upload funktioniert nicht:
+++++ Generelles Vorgehen zur Einrichtung des eigenen Servers |
+  - Füllen Sie die Konfiguration wie oben beschrieben aus.
+  - Laden Sie einen Datensatz hoch und prüfen Sie, dass die im ''mlink='' Parameter angegebene Datei auch allein im Browser heruntergeladen werden kann.
+  - Kopieren Sie das Code-Beispiel aus dieser Seite als eine html-Seite auf Ihren Server und ändern Sie die Variable ''viewerLink'' wie beschrieben auf das Viewer-Verzeichnis, welches im Stammverzeichnis der Daten angelegt wurde.
+  - Ergänzen Sie ein Logo, möglichst transparent und mit der Seite skalierend.
+  - Verlinken Sie Ihre Viewer-Seite in der Konfiguration und testen Sie den Upload.
+++++
+++++ Der Upload in OnyxCeph funktioniert nicht |
   * Prüfen Sie Einstellungen und probieren Sie, ob unabhängig vom OnyxCeph ein Dateiexplorer mit FTP-Funktionalität wie TotalCommander oder FileZilla mit Ihren Eingaben verbinden kann
+  * Wenn es mit denselben Anmeldedaten nur in OnyxCeph nicht funktioniert, probieren Sie die verschiedenen Protokolle durch (FTP, FTPS, FTPES, SFTP).
+++++
-Die Viewer-Seite bleibt mit der leeren Box "Downloading" stehen:
+++++ Die Viewer-Seite meldet "Datei nicht gefunden - Bitte Link prüfen" |
-  * Überprüfen Sie die Datenadresse in der Konfiguration: kann der in der URL hinter mlink= stehende WebLink auf die iiwgl-Datei alleinstehend aufgerufen werden? Wenn nicht, prüfen Sie mittels einem FTP-Tool, wo die Daten wirklich liegen und wie über http oder https darauf zugegriffen werden kann. Ggf. muss der Dateityp am Server explizit freigegeben werden.
+  * Überprüfen Sie die Datenadresse in der Konfiguration: kann der in der URL hinter ''mlink='' stehende WebLink auf die iiwgl-Datei alleinstehend aufgerufen werden? Wenn nicht, prüfen Sie mittels einem FTP-Tool, wo die Daten wirklich liegen und wie über http oder https darauf zugegriffen werden kann. Ggf. muss der Dateityp am Server explizit freigegeben werden.
+  * Achten Sie auf den ggf. abweichenden Verzeichnispfad der Daten aus Sicht des FTP-Zugangs und des Zugangs von aussen.
   * Öffnen Sie die Entwicklerwerkzeuge des Browsers mit F12 und schauen Sie in der Konsole, ob eine rote Warnmeldung ausgegeben wird:
     * Wenn eine Fehlermeldung mit dem Inhalt "CORS" auftaucht, handelt es sich um einen Sicherheitsmechanismus, der am Server richtig konfiguriert werden muss.
     * Wenn eine Fehlermeldung bzgl. http und https ausgegeben wird: prüfen Sie die Konfiguration, ein Viewer über https kann keine Daten von http abholen
+++++
+++++ Die Viewer-Seite meldet "Falsches Passwort oder fehlerhafte Datei" |
+  * Die von der Datenadresse zurückgelieferte Datei ist auch nicht der korrekte Datensatz, sondern häufig eine Fehlerseite wie "404 - nicht gefunden".
+  * Überprüfen Sie wieder durch die Eingabe der Datenadresse allein, welche Datei der Server ausliefert.
+++++
+----
+===== 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 =====
-|{{:wiki_32.png?20}}  | [[:tab_uploaddata_webview|WebView-Upload-Einstellungen ]]  |
+|{{:wiki_32.png?20}}  | [[web_communication|Webbasierte Kommunikation]]  |
-|{{:wiki_32.png?20}}  | [[:3d_viewn|WebViewer-Bedienelemente ]]  |
+|{{:wiki_32.png?20}}  | [[tab_uploaddata_webview|WebView-Upload-Einstellungen ]]  |
-|{{:wiki_32.png?20}}  | [[:webviewexamples|WebViewer Beispiele ]]  |
+|{{:wiki_32.png?20}}  | [[3d_viewn|WebViewer-Bedienelemente ]]  |
+|{{:wiki_32.png?20}}  | [[labportal_example|Beispiele der Laborportal-Kommunikation ]]  |
 \\