✨ Previews: 2D images and 3D scenes (#4412)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/Application.js

@@ -64,6 +64,9 @@ qx.Class.define("osparc.Application", {
       const intlTelInput = osparc.wrapper.IntlTelInput.getInstance();
       intlTelInput.init();
 
+      const threejs = osparc.wrapper.Three.getInstance();
+      threejs.init();
+
       const webSocket = osparc.wrapper.WebSocket.getInstance();
       webSocket.addListener("connect", () => osparc.io.WatchDog.getInstance().setOnline(true));
       webSocket.addListener("disconnect", () => osparc.io.WatchDog.getInstance().setOnline(false));

services/static-webserver/client/source/class/osparc/component/editor/ThumbnailSuggestions.js

@@ -76,8 +76,9 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", {
             this.__thumbnailsPerNode[nodeId] = [];
           }
           this.__thumbnailsPerNode[nodeId].push({
-            type: "image",
-            source: srvMetadata["thumbnail"]
+            type: "serviceImage",
+            thumbnailUrl: srvMetadata["thumbnail"],
+            fileUrl: srvMetadata["thumbnail"]
           });
         }
       });
@@ -87,12 +88,33 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", {
       // make it first in the list
       this.__thumbnailsPerNode["0000-workbenchUIPreview"] = [{
         type: "workbenchUIPreview",
-        source: osparc.product.Utils.getWorkbenhUIPreviewPath()
+        thumbnailUrl: osparc.product.Utils.getWorkbenhUIPreviewPath(),
+        fileUrl: osparc.product.Utils.getWorkbenhUIPreviewPath()
       }];
       const themeManager = qx.theme.manager.Meta.getInstance();
       themeManager.addListener("changeTheme", () => this.addWorkbenchUIPreviewToSuggestions());
     },
 
+    addPreviewsToSuggestions: function(previewsPerNodes) {
+      previewsPerNodes.forEach(previewsPerNode => {
+        const nodeId = previewsPerNode["node_id"];
+        const previews = previewsPerNode["screenshots"];
+        if (previews && previews.length) {
+          if (!(nodeId in this.__thumbnailsPerNode)) {
+            this.__thumbnailsPerNode[nodeId] = [];
+          }
+          previews.forEach(preview => {
+            this.__thumbnailsPerNode[nodeId].push({
+              type: preview["mimetype"],
+              thumbnailUrl: preview["thumbnail_url"],
+              fileUrl: preview["file_url"]
+            });
+          });
+        }
+      });
+      this.setSelectedNodeId(null);
+    },
+
     setSelectedNodeId: function(selectedNodeId) {
       let suggestions = new Set([]);
       if (selectedNodeId && selectedNodeId in this.__thumbnailsPerNode) {
@@ -111,14 +133,14 @@ qx.Class.define("osparc.component.editor.ThumbnailSuggestions", {
       this.removeAll();
       suggestions.forEach(suggestion => {
         const maxHeight = this.getMaxHeight();
-        const thumbnail = new osparc.ui.basic.Thumbnail(suggestion.source, maxHeight, parseInt(maxHeight*2/3));
+        const thumbnail = new osparc.ui.basic.Thumbnail(suggestion.thumbnailUrl, maxHeight, parseInt(maxHeight*2/3));
         thumbnail.setMarginLeft(1); // give some extra space to the selection border
         thumbnail.addListener("tap", () => {
           this.getChildren().forEach(thumbnailImg => osparc.utils.Utils.removeBorder(thumbnailImg));
           osparc.utils.Utils.addBorder(thumbnail, 1, "#007fd4"); // Visual Studio blue
           this.fireDataEvent("thumbnailTapped", {
             type: suggestion.type,
-            source: suggestion.source
+            source: suggestion.fileUrl
           });
         }, this);
         this.add(thumbnail);

services/static-webserver/client/source/class/osparc/component/widget/Three.js

@@ -0,0 +1,122 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2023 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.component.widget.Three", {
+  extend: qx.ui.core.Widget,
+
+  construct : function(fileUrl) {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.Canvas());
+
+    this.__transformControls = [];
+    this.__entities = [];
+
+    this.addListenerOnce("appear", () => {
+      this.__threeWrapper = osparc.wrapper.Three.getInstance();
+      if (this.__threeWrapper.isLibReady()) {
+        this.__start(fileUrl);
+      } else {
+        this.__threeWrapper.addListener("ThreeLibReady", e => {
+          if (e.getData()) {
+            this.__start(fileUrl);
+          }
+        });
+      }
+    }, this);
+  },
+
+  members: {
+    __threeWrapper: null,
+
+    __start: function(fileUrl) {
+      this.getContentElement().getDomElement()
+        .appendChild(this.__threeWrapper.getDomElement());
+
+      // this.__threeWrapper.SetCameraPosition(18, 0, 25);
+      this.__threeWrapper.setCameraPosition(210, 210, 90); // Z up
+      this.__threeWrapper.setBackgroundColor("#484f54");
+      this.__resized();
+
+      this.addListener("resize", () => this.__resized(), this);
+
+      this.__render();
+
+      this.__threeWrapper.loadScene(fileUrl);
+    },
+
+    __resized: function() {
+      const minWidth = 400;
+      const minHeight = 400;
+      const bounds = this.getBounds();
+      const width = Math.max(minWidth, bounds.width);
+      const height = Math.max(minHeight, bounds.height);
+      this.__threeWrapper.setSize(width, height);
+    },
+
+    getThreeWrapper: function() {
+      return this.__threeWrapper;
+    },
+
+    __render: function() {
+      this.__threeWrapper.render();
+    },
+
+    addSnappingPlane: function(fixedAxe = 2, fixedPosition = 0) {
+      let instersectionPlane = this.__threeWrapper.createInvisiblePlane(fixedAxe, fixedPosition);
+      instersectionPlane.name = "PlaneForSnapping";
+      this.__entities.push(instersectionPlane);
+    },
+
+    removeSnappingPlane: function() {
+      for (let i = 0; i < this.__entities.length; i++) {
+        if (this.__entities[i].name === "PlaneForSnapping") {
+          this.__entities.splice(i, 1);
+          break;
+        }
+      }
+    },
+
+    centerCameraToBB: function() {
+      let center = {
+        x: 0,
+        y: 0,
+        z: 0
+      };
+      if (this.__entities.length > 0) {
+        let unionBBox = null;
+        for (let i = 0; i < this.__entities.length; i++) {
+          const ent = this.__entities[i];
+          if (ent.Name === "PlaneForSnapping") {
+            continue;
+          }
+          const bBox = this.__threeWrapper.getBBox(ent);
+          if (unionBBox === null) {
+            unionBBox = bBox;
+          }
+          unionBBox = this.__threeWrapper.mergeBBoxes(bBox, unionBBox);
+        }
+        center = this.__threeWrapper.getBBoxCenter(unionBBox);
+      }
+      this.__threeWrapper.setOrbitPoint(center);
+    },
+
+    importGLTFSceneFromBuffer: function(modelBuffer) {
+      this.__threeWrapper.importGLTFSceneFromBuffer(modelBuffer);
+    }
+  }
+});

services/static-webserver/client/source/class/osparc/dashboard/ResourceMoreOptions.js

@@ -361,6 +361,16 @@ qx.Class.define("osparc.dashboard.ResourceMoreOptions", {
       return page;
     },
 
+    __getScenePage: function() {
+      const id = "Scene";
+      const title = this.tr("Scene");
+      const icon = "https://avatars.githubusercontent.com/u/33161876?s=32";
+      const threeView = new osparc.component.widget.Three("#00FF00");
+      const page = this.__permissionsPage = this.__createPage(title, threeView, icon, id);
+      page.setIcon(icon);
+      return page;
+    },
+
     __getPermissionsPage: function() {
       const id = "Permissions";
       const resourceData = this.__resourceData;

services/static-webserver/client/source/class/osparc/dashboard/StudyThumbnailExplorer.js

@@ -107,6 +107,16 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
       });
       thumbnailSuggestions.addWorkbenchUIPreviewToSuggestions();
       thumbnailSuggestions.setStudy(study);
+
+      const params = {
+        url: {
+          studyId: this.__studyData["uuid"]
+        }
+      };
+      osparc.data.Resources.fetch("studyPreviews", "getPreviews", params)
+        .then(previewsPerNodes => thumbnailSuggestions.addPreviewsToSuggestions(previewsPerNodes))
+        .catch(err => console.error(err));
+
       return thumbnailSuggestions;
     },
 
@@ -128,12 +138,15 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
         const thumbnailData = e.getData();
         let control = null;
         switch (thumbnailData["type"]) {
-          case "image":
-            control = this.__getThumbnail(thumbnailData["source"]);
-            break;
           case "workbenchUIPreview":
             control = this.__getWorkbenchUIPreview();
             break;
+          case null:
+            control = this.__getThreeSceneViewer(thumbnailData["source"]);
+            break;
+          default:
+            control = this.__getThumbnail(thumbnailData["source"]);
+            break;
         }
         if (control) {
           thumbnailViewerLayout.removeAll();
@@ -171,6 +184,11 @@ qx.Class.define("osparc.dashboard.StudyThumbnailExplorer", {
       return workbenchUIPreview;
     },
 
+    __getThreeSceneViewer: function(fileUrl) {
+      const threeView = new osparc.component.widget.Three(fileUrl);
+      return threeView;
+    },
+
     __initComponents: function() {
       const scrollThumbnails = this.getChildControl("scroll-thumbnails");
       scrollThumbnails.setSelectedNodeId(null);

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -199,6 +199,16 @@ qx.Class.define("osparc.data.Resources", {
           }
         }
       },
+      "studyPreviews": {
+        useCache: true,
+        idField: "uuid",
+        endpoints: {
+          getPreviews: {
+            method: "GET",
+            url: statics.API + "/projects/{studyId}/nodes/-/preview"
+          }
+        }
+      },
       /*
        * NODES
        */

services/static-webserver/client/source/class/osparc/info/CardLarge.js

@@ -57,7 +57,8 @@ qx.Class.define("osparc.info.CardLarge", {
   members: {
     _attachHandlers: function() {
       this.addListenerOnce("appear", () => this._rebuildLayout(), this);
-      this.addListener("resize", () => this._rebuildLayout(), this);
+      // OM: Not so sure about this one
+      // this.addListener("resize", () => this._rebuildLayout(), this);
     },
 
     _rebuildLayout: function() {

services/static-webserver/client/source/class/osparc/product/Utils.js

@@ -145,7 +145,7 @@ qx.Class.define("osparc.product.Utils", {
     },
 
     showStudyPreview: function() {
-      if (this.isProduct("osparc") || this.isProduct("s4l")) {
+      if (this.isProduct("osparc") || this.isProduct("s4l") || this.isProduct("s4llite")) {
         return true;
       }
       return false;

services/static-webserver/client/source/class/osparc/store/Store.js

@@ -66,6 +66,10 @@ qx.Class.define("osparc.store.Store", {
       check: "Array",
       init: []
     },
+    studyPreviews: {
+      check: "Array",
+      init: []
+    },
     nodesInStudyResources: {
       check: "Array",
       init: []