🐛 Fix: s4l-lite logo's aspect ratio

services/static-webserver/client/source/class/osparc/auth/LoginPage.js

@@ -39,6 +39,11 @@ qx.Class.define("osparc.auth.LoginPage", {
     "done": "qx.event.type.Data"
   },
 
+  statics: {
+    LOGO_WIDTH: 300,
+    LOGO_HEIGHT: 90
+  },
+
   members: {
     _createChildControlImpl: function(id) {
       let control;
@@ -60,18 +65,29 @@ qx.Class.define("osparc.auth.LoginPage", {
             flex: 1
           });
           break;
-        case "logo-w-platform":
+        case "logo-w-platform": {
           control = new osparc.ui.basic.LogoWPlatform();
-          control.setSize({
-            width: 300,
-            height: 90
-          });
+          const productLogoPath = osparc.product.Utils.getLogoPath();
+          if (qx.util.ResourceManager.getInstance().getImageFormat(productLogoPath) === "png") {
+            // png images don't scale keeping the aspect ratio
+            const height = osparc.ui.basic.Logo.getHeightKeepingAspectRatio(productLogoPath, this.self().LOGO_WIDTH)
+            control.setSize({
+              width: this.self().LOGO_WIDTH,
+              height
+            });
+          } else {
+            control.setSize({
+              width: this.self().LOGO_WIDTH,
+              height: this.self().LOGO_HEIGHT
+            });
+          }
           control.setFont("text-18");
           this.getChildControl("main-layout").add(control);
           break;
+        }
         case "science-text-image":
           control = new qx.ui.basic.Image("osparc/Sim4Life_science_Subline.svg").set({
-            width: 300,
+            width: this.self().LOGO_WIDTH,
             height: 24,
             scale: true,
             alignX: "center",

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

@@ -1028,6 +1028,7 @@ qx.Class.define("osparc.data.model.Node", {
       this.__initLoadingPage();
 
       const iframe = new osparc.widget.PersistentIframe();
+      osparc.utils.Utils.setIdToWidget(iframe, "iframe_"+this.getNodeId());
       if (osparc.product.Utils.isProduct("s4llite")) {
         iframe.setShowToolbar(false);
       }

services/static-webserver/client/source/class/osparc/ui/basic/Logo.js

@@ -38,6 +38,15 @@ qx.Class.define("osparc.ui.basic.Logo", {
     osparc.WindowSizeTracker.getInstance().addListener("changeCompactVersion", () => this.__resetSourcePath(), this);
   },
 
+  statics: {
+    getHeightKeepingAspectRatio: function(logoPath, width) {
+      const imgHeight = qx.util.ResourceManager.getInstance().getImageHeight(logoPath);
+      const imgWidth = qx.util.ResourceManager.getInstance().getImageWidth(logoPath);
+      const aspectRatio = imgWidth/imgHeight;
+      return parseInt(width/aspectRatio);
+    }
+  },
+
   members: {
     __resetSourcePath: function() {
       const long = !osparc.WindowSizeTracker.getInstance().isCompactVersion();

services/static-webserver/client/source/class/osparc/ui/message/Loading.js

@@ -118,19 +118,19 @@ qx.Class.define("osparc.ui.message.Loading", {
         flex: 1
       });
 
-      const defaultLogoPath = osparc.product.Utils.getLogoPath();
-      const logo = new osparc.ui.basic.Thumbnail(defaultLogoPath, this.self().LOGO_WIDTH, this.self().LOGO_HEIGHT).set({
+      const productLogoPath = osparc.product.Utils.getLogoPath();
+      const logo = new osparc.ui.basic.Thumbnail(productLogoPath, this.self().LOGO_WIDTH, this.self().LOGO_HEIGHT).set({
         alignX: "center"
       });
-      /*
-      // this is needed for svg images, but it breaks the GUI if the image source changes
-      logo.getChildControl("image").set({
-        minWidth: parseInt(this.self().LOGO_WIDTH/1.5),
-        minHeight: parseInt(this.self().LOGO_HEIGHT/1.5)
-      });
-      */
+      if (qx.util.ResourceManager.getInstance().getImageFormat(productLogoPath) === "png") {
+        const height = osparc.ui.basic.Logo.getHeightKeepingAspectRatio(productLogoPath, this.self().LOGO_WIDTH)
+        logo.getChildControl("image").set({
+          width: this.self().LOGO_WIDTH,
+          height
+        });
+      }
       this.bind("logo", logo, "source", {
-        converter: newPath => newPath ? newPath : defaultLogoPath
+        converter: newPath => newPath ? newPath : productLogoPath
       });
       mainLayout.addAt(logo, {
         column: 0,