TIP visual content (ITISFoundation#3303)

Author: odeimaiz

services/web/client/source/class/osparc/component/tutorial/ti/ElectrodeSelector.js

@@ -38,7 +38,7 @@ qx.Class.define("osparc.component.tutorial.ti.ElectrodeSelector", {
       const label2 = osparc.component.tutorial.ti.Slides.createLabel(text2);
       this._add(label2);
 
-      const image = new qx.ui.basic.Image("osparc/tutorial/ti/ElectrodeSelector.gif").set({
+      const image = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/electrode_selector.gif").set({
         alignX: "center",
         scale: true,
         width: 737,

services/web/client/source/class/osparc/component/tutorial/ti/PostPro.js

@@ -42,11 +42,11 @@ qx.Class.define("osparc.component.tutorial.ti.PostPro", {
       const label2 = osparc.component.tutorial.ti.Slides.createLabel(text2);
       this._add(label2);
 
-      const image1 = new qx.ui.basic.Image("osparc/tutorial/ti/PostProTable.gif").set({
+      const image1 = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_1.gif").set({
         alignX: "center",
         scale: true,
-        width: 737,
-        height: 443
+        width: 740,
+        height: 538
       });
       this._add(image1);
 
@@ -59,11 +59,11 @@ qx.Class.define("osparc.component.tutorial.ti.PostPro", {
       const label3 = osparc.component.tutorial.ti.Slides.createLabel(text3);
       this._add(label3);
 
-      const image2 = new qx.ui.basic.Image("osparc/tutorial/ti/PostProSlices.gif").set({
+      const image2 = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_2.gif").set({
         alignX: "center",
         scale: true,
-        width: 737,
-        height: 443
+        width: 740,
+        height: 520
       });
       this._add(image2);
 
@@ -76,11 +76,11 @@ qx.Class.define("osparc.component.tutorial.ti.PostPro", {
       const label4 = osparc.component.tutorial.ti.Slides.createLabel(text4);
       this._add(label4);
 
-      const image3 = new qx.ui.basic.Image("osparc/tutorial/ti/PostProReport.gif").set({
+      const image3 = new qx.ui.basic.Image("https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_3.gif").set({
         alignX: "center",
         scale: true,
-        width: 737,
-        height: 443
+        width: 740,
+        height: 520
       });
       this._add(image3);
     }

services/web/client/source/class/osparc/component/tutorial/ti/Slides.js

@@ -139,9 +139,8 @@ qx.Class.define("osparc.component.tutorial.ti.Slides", {
     __createFooter: function() {
       const footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
 
-      const text1 = "<a href=https://www.youtube.com/watch?v=dQw4w9WgXcQ style='color: white' target='_blank'>Youtube video</a>";
+      const text1 = "<a href=https://youtu.be/-ZE6yOJ3ipw style='color: white' target='_blank'>TIP video</a>";
       const link1 = new qx.ui.basic.Label(text1).set({
-        visibility: "excluded", // remove this when the video is available
         allowGrowX: true,
         textAlign: "center",
         rich : true