[OnyxCeph³™ Wiki]

DokuWiki - World Wide Web

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
function_webexport

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
function_webexport [2022/10/06 09:05] – tomfunction_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. 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-Speicherplatz | 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/'' |+
  
 ++++ Code-Beispiel für eine Seite mit individualisiertem Viewer | ++++ Code-Beispiel für eine Seite mit individualisiertem Viewer |
Zeile 93: Zeile 84:
 ++++  ++++ 
  
 +----
 +
 +===== 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 =====  ===== 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 ]]  |
 \\ \\
function_webexport.1665039941.txt.gz · Zuletzt geändert: 2022/10/06 09:05 von tom