From 18e8a0047b51d49def6e49a878c043eb4fc729e6 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 6 Sep 2020 14:33:57 +0200
Subject: [PATCH] Images Working

---
 Spaces/TutorialSpace.js | 50 ++++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/Spaces/TutorialSpace.js b/Spaces/TutorialSpace.js
index 6e69331f7..5b37c077e 100644
--- a/Spaces/TutorialSpace.js
+++ b/Spaces/TutorialSpace.js
@@ -41,6 +41,9 @@ function newTutorialSpace() {
 
     let tutorialDiv = document.getElementById('tutorialDiv')
     let tutorialFormDiv = document.getElementById('tutorialFormDiv')
+    let htmlImage = document.createElement("IMG")
+    let currentImageName  = 'Never Set'
+    let newImageName = 'Never Set'
 
     return thisObject
 
@@ -56,6 +59,8 @@ function newTutorialSpace() {
         currentNode = undefined
 
         tutorialDiv = undefined
+        tutorialFormDiv = undefined
+        image = undefined
     }
 
     function resize() {
@@ -96,18 +101,37 @@ function newTutorialSpace() {
             }
         }
 
-        /* 
-        If there is a reference parent defined, we will highlight it 
-        and move the designer so that that node be at the center of the screen.
-        */
+        checkImage()
+        checkReference()
+        return
 
-        if (currentNode !== undefined) {
-            if (currentNode.payload !== undefined) {
-                if (currentNode.payload.referenceParent !== undefined) {
-                    if (currentNode.payload.referenceParent.payload !== undefined) {
-                        if (currentNode.payload.referenceParent.payload.uiObject !== undefined) {
-                            canvas.floatingSpace.positionAtNode(currentNode.payload.referenceParent)
-                            currentNode.payload.referenceParent.payload.uiObject.highlight()
+        function checkImage() {
+            let tutorialImageDiv = document.getElementById('tutorialImageDiv')
+            if (tutorialImageDiv !== null && tutorialImageDiv !== undefined) {
+                tutorialImageDiv.appendChild(htmlImage)
+            }
+            
+            if (currentImageName === newImageName) {return}
+            currentImageName = newImageName
+            htmlImage.src = 'Images/Icons/style-01/' + currentImageName + '.png'
+            htmlImage.width = "100"
+            htmlImage.height = "100"
+        }
+
+        function checkReference() {
+            /* 
+            If there is a reference parent defined, we will highlight it 
+            and move the designer so that that node be at the center of the screen.
+            */
+
+            if (currentNode !== undefined) {
+                if (currentNode.payload !== undefined) {
+                    if (currentNode.payload.referenceParent !== undefined) {
+                        if (currentNode.payload.referenceParent.payload !== undefined) {
+                            if (currentNode.payload.referenceParent.payload.uiObject !== undefined) {
+                                canvas.floatingSpace.positionAtNode(currentNode.payload.referenceParent)
+                                currentNode.payload.referenceParent.payload.uiObject.highlight()
+                            }
                         }
                     }
                 }
@@ -183,7 +207,6 @@ function newTutorialSpace() {
         currentStatus = 'Stopped'
     }
 
-
     function skip() {
 
     }
@@ -338,7 +361,8 @@ function newTutorialSpace() {
             html = html + '<tr>'
             html = html + '<td>'
             if (nodeConfig.image !== undefined && nodeConfig.image !== '') {
-                html = html + '<img width="100" height="100" src="Images/Icons/style-01/' + nodeConfig.image + '.png" />'
+                html = html + '<div id="tutorialImageDiv" width="100" height="100"/>'
+                newImageName = nodeConfig.image
             }
             html = html + '</td>'
             html = html + '<td>'