Differences

This shows you the differences between two versions of the page.

--- en:function_webexport [2022/10/05 16:42] – tom
+++ en:function_webexport [2024/04/08 07:58] (current) – [Links] onyxadmin
@@ Line 1: / Line 1: @@
+====== WebViewer Export Configuration ======
-====== WebViewer Export ======
 ----
-The Onyx 3D WebViewer allows to create a web based representation of the dataset for viewing in web browsers, including on mobile devices. The WebViewer can be integrated into [[en:webviewexamples|websites]] or web portals of service providers, but does not itself provide any functions that go beyond mere presentation. See also entry [[en:lab_communication | Web-based communication]].
+The Onyx 3D WebViewer allows to create a web based representation of the dataset for viewing in web browsers, including on mobile devices. The WebViewer can be integrated into websites or web portals of service providers, but does not itself provide any functions that go beyond mere presentation. See also entry [[en:web_communication | Web-based communication]].
@@ Line 23: / Line 21: @@
 | Patient Data               | Select the data to display on the information popup                                                                                                                               |  all off   |
 | Link                       | Result which can be given to the user or can be embedded into a patient-specific web page                                                                                         |            |
-| Password                   | Only displayed then not included in the link                                                                                                                                      |            |
+| Password                   | Only shown when not included in the link                                                                                                                                      |            |
 ----
-===== Configuration =====
+===== Configuration and Individualization =====
 The upload has to be configured in [[settings|System Options]] on tab [[tab_uploaddata_webview|Upload Data]] > 3D-Web-Viewer before it becomes available as menu item.
-^ Entry                ^ Description                                                           ^ Example                                            ^
+For individualizing the webviewer with a custom logo, the site linked as "Viewer Homepage" in the settings must embedd the webviewer as shown in the following example and must also contain the logo as a transparent image element.
-| Host                 | Your provider for the FTP-webspace                                    | 123.456.789.012                                    |
-| Connection Security  | Upload protocol                                                       | FTPS                                               |
-| User Name            | The user name für the FTP access                                      | onyxUser                                           |
-| User Password        | The password for the FTP access                                       | ••••                                               |
-| htaccess             | Add a file for access-control (CORS) to the server                    | yes                                                |
-| Host Directory       | The data directory relative to the host                               | ''public_html/OnyxWebviewerUploads''               |
-| Viewer Homepage      | Your individualized page with embedded Webviewer (see example below)  | ''www.image-instruments.de/webviewer/index.html''  |
-| Data Address         | The address of the host directory as visible from outside             | ''???.de/OnyxWebviewerUploads/''                   |
-  * Take care of the valid sequence of protocols in both the iframe-embedding in the viewer homepage and in the configuration above (http >= https in ''Viewer Homepage'' > ''iFrame'' > ''Data-Address'')
+++++ Example code for a page with individualized viewer |
-  * Notice that the of the Host Directory might be different from the address from outside (Data Address)
-  * The minimal page for an individualized viewer looks like this:
-  * :!: Please note that the way of embedding has changed due to a new security feature (or bug) in the safari browser:
   <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() { // New dynamic frame insertion via script
+      function addIFrame() { // Frame is embedded using this script function
-        var iframe = document.createElement('iframe');
+        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: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);
       }
@@ Line 62: / Line 52: @@
   </body>
   </html>
+++++
 ----
 ===== Troubleshooting =====
-The upload does not work:
+++++ First steps to configure your own server and viewer website |
+  - Fill out the configuration as described above.
+  - Upload a dataset and check that the link that is behind the ''mlink='' parameter can also be downloaded in the browser separately.
+  - Copy the example code from above to a html page on your own server and change the variable ''viewerLink'' to the viewer on your own server as described in the comment.
+  - Add a logo which is ideally transparent and scaling well with the site also for mobile devices.
+  - Link your own viewer site in the OnyxCeph configuration and test the upload.
+++++
+++++ The upload in OnyxCeph does not work |
   * Check the upload-settings and verify that you can connect wwith your settings using an auxilliary tool like TotalCommander or FileZilla
+  * If it is working with the same account settings on such other programs, test the other protocols (FTP, FTPES, FTPS, SFTS).
+++++
-The viewer page stays empty with the message "Downloading":
+++++ The viewer page reports "File not found - Please check link" |
-  * Check the data address in the configuration: can you access the iiwgl file linked in the URL after the mlink=? If not use an FTP tool to see where your data is uploaded to and how you can access those files over http or https. Possibly, the file type must be declared explicitly as "allowed to download" in the server configuration.
+  * Check the data address in the configuration: can you access the iiwgl file linked in the URL after the ''mlink='' parameter? If not use an FTP tool to see where your data is uploaded to and how you can access those files over http or https. Possibly, the file type must be declared explicitly as "allowed to download" in the server configuration.
+  * Notice that the host directory is relative on the server and will be different from the data address which is needed for HTTP(S) access
   * Open the development tools in your browser using F12 and look for any red error message in the console:
     * If the error contains something about "CORS", it is not loading because of a security mechanism which must be configured correctly at the server.
     * If the error complains about http and https: verify your configuration: a viewer at https cannot access data using http
+++++
+++++ The viewer page reports "Wrong password or corrupt file" |
+  * The file returned by the link in the ''mlink='' parameter is not the correct data, but in such cases often an error page from the server like "404-File not found".
+  * Check again by entering this link alone that the correct file is delivered by the server.
+++++
+----
+===== Extended Interface =====
+The webviewer supports a wide range of additional options for individualizing appearance and functionality. For instance, the icons can be exchanged and the font size can be controlled for "responsive design", i.e. when the viewer is embedded in a more complex page. These options are accessible with the extended interface which is building on the individualized example above.
+++++ Example code for the extended 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)
+       */
+     }
+   }
+++++
 ----
 ===== Links =====
+|{{:wiki_32.png?20}}  | [[en:web_communication | Web-based communication]]  |
 |{{:wiki_32.png?20}}  | [[en:tab_uploaddata_webview|WebView Upload Settings ]]  |
 |{{:wiki_32.png?20}}  | [[en:3d_viewn|WebViewer Controls ]]  |
-|{{:wiki_32.png?20}}  | [[en:webviewexamples|WebViewer Examples ]]  |
+|{{:wiki_32.png?20}}  | [[en::labportal_example|Examples for Lab Portal Communication ]]  |
 \\