Merge pull request #43 from AAMasters/develop

On the way to plot strategies

Animation.js

@@ -131,8 +131,6 @@ function newAnimation () {
   }
 
   function clearBrowserCanvas () {
-    if (INFO_LOG === true) { logger.write('[INFO] clearBrowserCanvas -> Entering function.') }
-
     browserCanvasContext.beginPath()
 
     browserCanvasContext.rect(0, 0, browserCanvas.width, browserCanvas.height)

Canvas.js

@@ -170,12 +170,12 @@ function newCanvas () {
           animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded)
           animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded)
           animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
-          animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
           animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded)
           animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
           animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
           animation.start(onStart)
 
@@ -540,58 +540,69 @@ function newCanvas () {
 
             /* We check if the mouse is over an element of the Strategy Space / */
 
-      container = thisObject.strategySpace.getContainer(point)
+      if (thisObject.strategySpace !== undefined) {
+        container = thisObject.strategySpace.getContainer(point)
 
-      if (container !== undefined && container.detectMouseOver === true) {
-        container.eventHandler.raiseEvent('onMouseOver', point)
-        return
+        if (container !== undefined && container.detectMouseOver === true) {
+          container.eventHandler.raiseEvent('onMouseOver', point)
+          return
+        }
       }
 
            /* We check if the mouse is over an element of the Top Space / */
 
-      container = thisObject.topSpace.getContainer(point)
+      if (thisObject.topSpace !== undefined) {
+        container = thisObject.topSpace.getContainer(point)
 
-      if (container !== undefined && container.detectMouseOver === true) {
-        container.eventHandler.raiseEvent('onMouseOver', point)
-        return
+        if (container !== undefined && container.detectMouseOver === true) {
+          container.eventHandler.raiseEvent('onMouseOver', point)
+          return
+        }
       }
 
            /* We check if the mouse is over an element of the Bottom Space / */
 
-      container = thisObject.bottomSpace.getContainer(point)
+      if (thisObject.bottomSpace !== undefined) {
+        container = thisObject.bottomSpace.getContainer(point)
 
-      if (container !== undefined && container.detectMouseOver === true) {
-        container.eventHandler.raiseEvent('onMouseOver', point)
-        return
+        if (container !== undefined && container.detectMouseOver === true) {
+          container.eventHandler.raiseEvent('onMouseOver', point)
+          return
+        }
       }
 
            /* We check if the mouse is over a panel/ */
 
-      container = thisObject.panelsSpace.getContainer(point)
+      if (thisObject.panelsSpace !== undefined) {
+        container = thisObject.panelsSpace.getContainer(point)
 
-      if (container !== undefined && container.detectMouseOver === true) {
-        container.eventHandler.raiseEvent('onMouseOver', point)
-        return
+        if (container !== undefined && container.detectMouseOver === true) {
+          container.eventHandler.raiseEvent('onMouseOver', point)
+          return
+        }
       }
 
            /* We check if the mouse is over a floatingObject/ */
+      if (thisObject.floatingSpace !== undefined) {
+        let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
 
-      let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
+        if (floatingObjectBeingClicked >= 0) {
+          let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked)
+          floatingObject.eventHandler.raiseEvent('onMouseOver', point)
 
-      if (floatingObjectBeingClicked >= 0) {
-        let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked)
-        floatingObject.eventHandler.raiseEvent('onMouseOver', point)
-
-        return
+          return
+        }
       }
 
            /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
-      container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
+      if (thisObject.chartSpace !== undefined) {
+        container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
-      if (container !== undefined && container.detectMouseOver === true) {
-        container.eventHandler.raiseEvent('onMouseOver', point)
-        return
+        if (container !== undefined && container.detectMouseOver === true) {
+          container.eventHandler.raiseEvent('onMouseOver', point)
+          return
+        }
       }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) }

ControlsToolBox/SidePanel.js

@@ -9,9 +9,6 @@ function newSidePanel () {
     initialize: initialize
   }
 
-  const SIDE_PANEL_WIDTH = 450
-  const SIDE_PANEL_TAB_WIDTH = 400
-
   let isInitialized = false
 
   thisObject.container = newContainer()

FloatingSpace/FloatingLayer.js

@@ -11,6 +11,8 @@ function newFloatingLayer () {
                       to specify the location of a bot instance.
 
     2. Notes:         Notes are a rectangular area where some text is posted. It has a subject and a body.
+
+    3. Strategy Parts: These are small balls that represent parts of an strategy.
     */
 
   const MODULE_NAME = 'Floating Layer'
@@ -61,7 +63,7 @@ function newFloatingLayer () {
 
   let dyingFloatingObjects = []
 
-  let maxTargetRepulsionForce = 0.003
+  let maxTargetRepulsionForce = 0.001
   let currentHandle = 0
 
   return thisObject
@@ -78,17 +80,9 @@ function newFloatingLayer () {
     }
   }
 
-  function initialize (callBackFunction) {
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
+  function initialize () {
 
-            /* We dont need to initialize anything right now. */
-
-      if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.message = ' + err.message) }
-      if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) }
-    }
+        /* We dont need to initialize anything right now. */
   }
 
   function addFloatingObject (pFloatingObject, callBackFunction) {
@@ -218,6 +212,21 @@ function newFloatingLayer () {
               pFloatingObject.payload = payload
               break
             }
+            case 'Strategy Part': {
+              if (pFloatingObject.payload.profile.visible === false) { return }
+
+              payload.profile = {
+                position: {
+                  x: pFloatingObject.payload.profile.position.x,
+                  y: pFloatingObject.payload.profile.position.y
+                },
+                visible: pFloatingObject.payload.profile.visible,
+                botAvatar: pFloatingObject.payload.profile.botAvatar
+              }
+
+              pFloatingObject.payload = payload
+              break
+            }
             default: {
               break
             }
@@ -347,6 +356,11 @@ function newFloatingLayer () {
 
                 break
               }
+              case 'Strategy Part': {
+                payload.position = floatingObject.payload.profile.position
+                payload.visible = floatingObject.payload.profile.visible
+                break
+              }
               default: {
                 break
               }
@@ -489,7 +503,11 @@ function newFloatingLayer () {
                   payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position
                   payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible
                 }
-
+                break
+              }
+              case 'Strategy Part': {
+                payload.position = floatingObject.payload.profile.position
+                payload.visible = floatingObject.payload.profile.visible
                 break
               }
               default: {
@@ -551,6 +569,10 @@ function newFloatingLayer () {
                 payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible
                 break
               }
+              case 'Strategy Part': {
+                payload.visible = floatingObject.payload.profile.visible
+                break
+              }
               default: {
                 break
               }
@@ -776,6 +798,10 @@ function newFloatingLayer () {
             payload.position = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position
             break
           }
+          case 'Strategy Part': {
+            payload.position = floatingObject2.payload.profile.position
+            break
+          }
           default: {
             break
           }
@@ -999,4 +1025,3 @@ function newFloatingLayer () {
     }
   }
 }
-

FloatingSpace/FloatingObject.js

@@ -64,7 +64,7 @@ function newFloatingObject () {
 
   return thisObject
 
-  function initialize (pType, callBackFunction) {
+  function initialize (pType, floatingLayer, callBackFunction) {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
@@ -89,7 +89,20 @@ function newFloatingObject () {
           }
           break
         }
+
+        case 'Strategy Part': {
+          underlayingObject = newStrategyPart()
+          underlayingObject.initialize(floatingLayer, onInitialized)
+
+          function onInitialized (err) {
+
+          }
+
+          break
+        }
         default: {
+          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) }
+          callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
           break
         }
       }
@@ -121,9 +134,9 @@ function newFloatingObject () {
   }
 
   function onMouseOver () {
-    thisObject.targetRadius = thisObject.rawRadius * 1.5
-    thisObject.targetImageSize = thisObject.rawImageSize * 1.5
-    thisObject.targetFontSize = thisObject.rawFontSize * 1.5
+    thisObject.targetRadius = thisObject.rawRadius * 2.5
+    thisObject.targetImageSize = thisObject.rawImageSize * 2.5
+    thisObject.targetFontSize = thisObject.rawFontSize * 2.5
 
     underlayingObject.onMouseOver()
   }

FloatingSpace/Note.js

@@ -214,7 +214,7 @@ function newNote () {
 
         if (label !== undefined) {
           if (SIZE_PERCENTAGE > 0.9) {
-            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
 
             let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
             let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2
@@ -292,7 +292,7 @@ function newNote () {
                 y: startingPosition.y + (i + 1) * (fontSize * FONT_ASPECT_RATIO + 10)
               }
 
-              browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+              browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
               browserCanvasContext.fillStyle = 'rgba(60, 60, 60, ' + ALPHA + ')'
               browserCanvasContext.fillText(labelRow, labelPoint.x, labelPoint.y)
             }

FloatingSpace/NoteSets.js

@@ -31,21 +31,8 @@ function newNoteSets () {
 
   return thisObject
 
-  function initialize (pFloatingLayer, callBackFunction) {
-        /*
-        During the initialization process, we receive the floatingLayer where all the floatingObjects we will be creating here will live at.
-        */
-
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
-
-      floatingLayer = pFloatingLayer
-
-      callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE)
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-    }
+  function initialize (pFloatingLayer) {
+    floatingLayer = pFloatingLayer
   }
 
   function createNoteSet (pPayload, pEventHandler, callBackFunction) {
@@ -232,7 +219,7 @@ function newNoteSets () {
                             */
 
               let floatingObject = newFloatingObject()
-              floatingObject.initialize('Note', onInitialized)
+              floatingObject.initialize('Note', floatingLayer, onInitialized)
 
               function onInitialized (err) {
                 if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Entering function.') }

FloatingSpace/ProfileBall.js

@@ -278,7 +278,7 @@ function newProfileBall () {
       let labelPoint
       let fontSize = pFloatingObject.currentFontSize
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
 
       let label
 
@@ -290,7 +290,7 @@ function newProfileBall () {
           y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
         }
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
         browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
       }
@@ -303,7 +303,7 @@ function newProfileBall () {
           y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
         }
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
         browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
       }

FloatingSpace/ProfileBalls.js

@@ -1,4 +1,4 @@
- 
+
 function newProfileBalls () {
   const MODULE_NAME = 'Profile Balls'
   const INFO_LOG = false
@@ -6,11 +6,11 @@ function newProfileBalls () {
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
 
-    /*
+   /*
 
-    This object deals with Profile Balls, a type of Floating Object that shows profile info in a floating ball.
+   This object deals with Profile Balls, a type of Floating Object that shows profile info in a floating ball.
 
-    */
+   */
 
   let thisObject = {
 
@@ -35,22 +35,13 @@ function newProfileBalls () {
     }
   }
 
-  function initialize (pFloatingLayer, callBackFunction) {
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
-
-      floatingLayer = pFloatingLayer
-
-      callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE)
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-    }
+  function initialize (pFloatingLayer) {
+    floatingLayer = pFloatingLayer
   }
 
   function createNewProfileBall (pPayload, callBackFunction) {
     let floatingObject = newFloatingObject()
-    floatingObject.initialize('Profile Ball', onInitialized)
+    floatingObject.initialize('Profile Ball', floatingLayer, onInitialized)
 
     function onInitialized (err) {
       floatingObject.payload = pPayload
@@ -67,7 +58,7 @@ function newProfileBalls () {
 
       floatingLayer.addFloatingObject(floatingObject)
 
-      callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle)
+      callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle)
     }
   }
 

FloatingSpace/StrategyPart.js

@@ -0,0 +1,333 @@
+
+function newStrategyPart () {
+  let thisObject = {
+
+    physicsLoop: physicsLoop,
+    onMouseOver: onMouseOver,
+    onMouseClick: onMouseClick,
+    onMouseNotOver: onMouseNotOver,
+    drawBackground: drawBackground,
+    drawForeground: drawForeground,
+    initialize: initialize
+
+  }
+
+  let ballStringMenu = [
+    {
+      visible: false,
+      imagePathOn: 'Images/menu.icon.on.1.gif',
+      imagePathOff: 'Images/menu.icon.off.1.gif',
+      rawRadius: 8,
+      targetRadius: 0,
+      currentRadius: 0,
+      angle: 60
+    },
+    {
+      visible: false,
+      imagePathOn: 'Images/menu.icon.on.2.gif',
+      imagePathOff: 'Images/menu.icon.off.2.gif',
+      rawRadius: 8,
+      targetRadius: 0,
+      currentRadius: 0,
+      angle: 20 * 1
+    },
+    {
+      visible: false,
+      imagePathOn: 'Images/menu.icon.on.3.gif',
+      imagePathOff: 'Images/menu.icon.off.3.gif',
+      rawRadius: 8,
+      targetRadius: 0,
+      currentRadius: 0,
+      angle: -20
+    },
+    {
+      visible: false,
+      imagePathOn: 'Images/menu.icon.on.4.gif',
+      imagePathOff: 'Images/menu.icon.off.4.gif',
+      rawRadius: 8,
+      targetRadius: 0,
+      currentRadius: 0,
+      angle: -60
+    }
+  ]
+
+  let floatingLayer
+  let isMouseOver = false
+
+  return thisObject
+
+  function initialize (pFloatingLayer, callBackFunction) {
+    floatingLayer = pFloatingLayer
+
+    for (let i = 0; i < ballStringMenu.length; i++) {
+      let menuItem = ballStringMenu[i]
+
+      menuItem.iconOn = new Image()
+
+      menuItem.iconOn.onload = onImageLoad
+
+      function onImageLoad () {
+        menuItem.iconOff = new Image()
+
+        menuItem.iconOff.onload = onImageLoad
+
+        function onImageLoad () {
+          menuItem.canDrawIcon = true
+        }
+
+        menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff
+      }
+
+      menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn
+
+      menuItem.icon = menuItem.iconOn // The default value is ON.
+    }
+
+    callBackFunction()
+  }
+
+  function physicsLoop () {
+        // The menuItems also have a target.
+
+    for (let i = 0; i < ballStringMenu.length; i++) {
+      let menuItem = ballStringMenu[i]
+
+      if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) {
+        if (menuItem.currentRadius < menuItem.targetRadius) {
+          menuItem.currentRadius = menuItem.currentRadius + 0.5
+        } else {
+          menuItem.currentRadius = menuItem.currentRadius - 0.5
+        }
+      }
+    }
+  }
+
+  function onMouseOver () {
+    for (let i = 0; i < ballStringMenu.length; i++) {
+      let menuItem = ballStringMenu[i]
+
+      menuItem.targetRadius = menuItem.rawRadius * 2.5
+    }
+
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    for (let i = 0; i < ballStringMenu.length; i++) {
+      let menuItem = ballStringMenu[i]
+
+      menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5
+    }
+
+    isMouseOver = false
+  }
+
+  function onMouseClick (pPoint, pFloatingObject) {
+        /* What we need to do here is to check which menu item was clicked, if any. */
+
+    let menuItemIndex
+
+    for (let i = 0; i < ballStringMenu.length; i++) {
+      let menuItem = ballStringMenu[i]
+
+      if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
+        let position = {
+          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
+          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
+        }
+
+        browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
+
+        let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2))
+
+        if (distance < menuItem.currentRadius) {
+          menuItemIndex = i
+        }
+      }
+    }
+
+    if (menuItemIndex !== undefined) {
+      switch (menuItemIndex) {
+
+        case 0: {
+ // This menu item is to turn ON / OFF the plotting of this bot.
+
+          if (pFloatingObject.payload.profile.plot === true) {
+            pFloatingObject.payload.profile.plot = false
+
+            let menuItem = ballStringMenu[0]
+            menuItem.icon = menuItem.iconOff
+          } else {
+            pFloatingObject.payload.profile.plot = true
+
+            let menuItem = ballStringMenu[0]
+            menuItem.icon = menuItem.iconOn
+          }
+
+          break
+        }
+
+        case 1: {
+ // This menu item is to turn ON the Debug Log pannel for the bot.
+
+          break
+        }
+      }
+    }
+  }
+
+  function drawBackground (pFloatingObject) {
+    /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */
+
+    if (pFloatingObject.payload.parentNode !== undefined) {
+      let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle)
+
+      pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x
+      pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y
+    }
+
+   /* Here I continue painting the background */
+
+    let point = {
+      x: pFloatingObject.payload.profile.position.x,
+      y: pFloatingObject.payload.profile.position.y
+    }
+
+    point = viewPort.fitIntoVisibleArea(point)
+
+    if (pFloatingObject.currentRadius > 1) {
+            /* Target Line */
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
+      browserCanvasContext.lineTo(point.x, point.y)
+      browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
+      browserCanvasContext.setLineDash([4, 2])
+      browserCanvasContext.lineWidth = 1
+      browserCanvasContext.stroke()
+      browserCanvasContext.setLineDash([0, 0])
+    }
+
+    if (pFloatingObject.currentRadius > 0.5) {
+            /* Target Spot */
+
+      var radius = 1
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true)
+      browserCanvasContext.closePath()
+      browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'
+      browserCanvasContext.fill()
+    }
+  }
+
+  function drawForeground (pFloatingObject) {
+    if (pFloatingObject.currentRadius > 5) {
+            /* Contourn */
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
+      browserCanvasContext.closePath()
+      browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'
+      browserCanvasContext.lineWidth = 1
+      browserCanvasContext.stroke()
+    }
+
+    if (pFloatingObject.currentRadius > 0.5) {
+            /* Main FloatingObject */
+
+      var alphaA
+
+      if (pFloatingObject.currentRadius < 3) {
+        alphaA = 1
+      } else {
+        alphaA = 0.75
+      }
+
+      alphaA = 0.75
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true)
+      browserCanvasContext.closePath()
+
+      browserCanvasContext.fillStyle = pFloatingObject.fillStyle
+
+      browserCanvasContext.fill()
+    }
+
+        /* Image */
+
+    if (pFloatingObject.payload.profile.imageId !== undefined) {
+      let image = pFloatingObject.payload.profile.botAvatar
+
+      if (image !== null && image !== undefined) {
+        browserCanvasContext.save()
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
+        browserCanvasContext.closePath()
+        browserCanvasContext.clip()
+        browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize)
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
+        browserCanvasContext.clip()
+        browserCanvasContext.closePath()
+        browserCanvasContext.restore()
+      }
+    }
+
+        /* StringBall Menu */
+
+    for (let i = 0; i < ballStringMenu.length; i++) {
+      let menuItem = ballStringMenu[i]
+
+      if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
+        let position = {
+          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
+          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
+        }
+
+        browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
+      }
+    }
+
+        /* Label Text */
+
+    if (pFloatingObject.currentRadius > 6) {
+      browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
+
+      let labelPoint
+      let fontSize = pFloatingObject.currentFontSize
+
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+      let label
+
+      label = pFloatingObject.payload.profile.upLabel
+
+      if (label !== undefined) {
+        labelPoint = {
+          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+
+      label = pFloatingObject.payload.profile.downLabel
+
+      if (label !== undefined && isMouseOver === true) {
+        labelPoint = {
+          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+    }
+  }
+}
+

FloatingSpace/StrategyParts.js

@@ -0,0 +1,155 @@
+
+function newStrategyParts () {
+  const MODULE_NAME = 'Strategy Parts'
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+   /*
+
+   This object deals with Strategy Parts, a type of Floating Object that shows together with other parts a graphical representation of a strategy.
+
+   */
+
+  let thisObject = {
+
+    createNewStrategyPart: createNewStrategyPart,
+    destroyStrategyPart: destroyStrategyPart,
+    initialize: initialize,
+    finalize: finalize
+
+  }
+
+  let floatingLayer
+
+  return thisObject
+
+  function finalize () {
+    floatingLayer.finalize()
+  }
+
+  function initialize (pFloatingLayer) {
+    floatingLayer = pFloatingLayer
+  }
+
+  function createNewStrategyPart (type, pPayload, callBackFunction) {
+    let floatingObject = newFloatingObject()
+    floatingObject.initialize('Strategy Part', floatingLayer, onInitialized)
+
+    function onInitialized (err) {
+      const FRICTION = 0.97
+      floatingObject.payload = pPayload
+
+      switch (type) {
+        case 'Strategy': {
+          level_1()
+          break
+        }
+        case 'Strategy Entry': {
+          level_2()
+          break
+        }
+        case 'Strategy Exit': {
+          level_2()
+          break
+        }
+        case 'Trade Entry': {
+          level_2()
+          break
+        }
+        case 'Trade Exit': {
+          level_2()
+          break
+        }
+        case 'Stop': {
+          level_2()
+          break
+        }
+        case 'Take Profit': {
+          level_2()
+          break
+        }
+        case 'Phase': {
+          level_3()
+          break
+        }
+        case 'Situation': {
+          level_4()
+          break
+        }
+        case 'Condition': {
+          level_5()
+          break
+        }
+        default: {
+          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) }
+        }
+      }
+
+      function level_1 () {
+        floatingObject.friction = FRICTION
+
+        floatingObject.initializeMass(100)
+        floatingObject.initializeRadius(60)
+        floatingObject.initializeImageSize(110)
+        floatingObject.initializeFontSize(10)
+
+        floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+      }
+
+      function level_2 () {
+        floatingObject.friction = FRICTION
+
+        floatingObject.initializeMass(50)
+        floatingObject.initializeRadius(45)
+        floatingObject.initializeImageSize(80)
+        floatingObject.initializeFontSize(10)
+
+        floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'
+      }
+
+      function level_3 () {
+        floatingObject.friction = FRICTION
+
+        floatingObject.initializeMass(10)
+        floatingObject.initializeRadius(40)
+        floatingObject.initializeImageSize(70)
+        floatingObject.initializeFontSize(10)
+
+        floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
+      }
+
+      function level_4 () {
+        floatingObject.friction = FRICTION
+
+        floatingObject.initializeMass(10)
+        floatingObject.initializeRadius(35)
+        floatingObject.initializeImageSize(60)
+        floatingObject.initializeFontSize(10)
+
+        floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'
+      }
+
+      function level_5 () {
+        floatingObject.friction = FRICTION
+
+        floatingObject.initializeMass(10)
+        floatingObject.initializeRadius(30)
+        floatingObject.initializeImageSize(50)
+        floatingObject.initializeFontSize(10)
+
+        floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)'
+      }
+
+      floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+      floatingLayer.addFloatingObject(floatingObject)
+
+      callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle)
+    }
+  }
+
+  function destroyStrategyPart (pFloatingObjectHandle) {
+    floatingLayer.killFloatingObject(pFloatingObjectHandle)
+  }
+}

Frame.js

@@ -1,7 +1,7 @@
  
 function newFrame () {
   const PANEL_CORNERS_RADIOUS = 5
-  const TITLE_BAR_HEIGHT = 14 // this must be grater than radius
+  const TITLE_BAR_HEIGHT = 15 // this must be grater than radius
 
   let frame = {
     containerName: '',                  // This is for debugging purposes only.
@@ -340,7 +340,7 @@ function newFrame () {
     let labelPoint
     let fontSize = 10
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
     let label = frame.containerName
 

Globals.js

@@ -162,7 +162,8 @@ const MAX_PLOTABLE_DATE = maxDate;
 const TOP_SPACE_HEIGHT = 5;
 const BOTTOM_SPACE_HEIGHT = 35;
 const BREAKPOINT_HEIGHT = 15;
-
+const SIDE_PANEL_WIDTH = 450
+  
 const PRODUCT_CARD_STATUS = {
     ON: 'on',
     LOADING: 'loading',

Panels/TimeControlPanel.js

@@ -115,7 +115,7 @@ function newTimeControlPanel () {
 
     labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
@@ -132,7 +132,7 @@ function newTimeControlPanel () {
 
     labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
@@ -151,7 +151,7 @@ function newTimeControlPanel () {
 
     labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
   }

ProductCard.js

@@ -609,7 +609,7 @@ function newProductCard () {
     let labelPoint
     let fontSize = 10
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
 
     let label
 
@@ -626,7 +626,7 @@ function newProductCard () {
 
       labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
       browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
       browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
@@ -642,7 +642,7 @@ function newProductCard () {
 
       labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
       browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
       browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
     }
@@ -665,7 +665,7 @@ function newProductCard () {
 
     labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 

Scales/TimePeriodScale.js

@@ -209,35 +209,64 @@ to be visible at the top of the viewPort. */
     thisObject.container.frame.width = point2.x - point1.x
     thisObject.container.frame.height = point3.y - point2.y
 
-    let point = {
+  /* Common Variables */
+
+    let label = timePeriodLabel.split('-')
+    let label1 = label[0]
+    let label2 = label[1].toUpperCase()
+    let fontSize1 = 25
+    let fontSize2 = 10
+
+  /* We draw the circle container */
+
+    const RED_LINE_HIGHT = 5
+    const RADIOUS = 25
+    const OPACITY = 1
+
+    let centerPoint = {
       x: mouse.position.x,
+      y: point1.y + viewPort.margins.BOTTOM - 5
+    }
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+    browserCanvasContext.fill()
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+    browserCanvasContext.fill()
+
+    /* Place the Text */
+
+    let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
+
+    let labelPoint1 = {
+      x: mouse.position.x - xOffset1 / 2 - 3,
       y: point1.y + viewPort.margins.BOTTOM
     }
 
-    let label = timePeriodLabel
-    let fontSize = 10
+    browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
-    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
+    browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y)
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)'
+    let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
 
-    if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return }
+    let labelPoint2 = {
+      x: mouse.position.x - xOffset2 / 2 - 3,
+      y: point1.y + viewPort.margins.BOTTOM + fontSize2
+    }
 
-    browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 1)
-/*
-    browserCanvasContext.beginPath()
+    browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
-    browserCanvasContext.moveTo(point.x, point1.y)
-    browserCanvasContext.lineTo(point.x, point5.y)
-
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
-    browserCanvasContext.lineWidth = 0.2
-    browserCanvasContext.setLineDash([1, 5])
-    browserCanvasContext.stroke()
-*/
+    browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
   }
 
   function saveObjectState () {
@@ -265,3 +294,4 @@ to be visible at the top of the viewPort. */
     thisObject.container.eventHandler.raiseEvent('Time Period Changed', event)
   }
 }
+

Spaces/ChartSpace.js

@@ -14,6 +14,7 @@ function newChartSpace () {
   logger.fileName = MODULE_NAME
 
   let thisObject = {
+    visible: true,
     container: undefined,
     drawBackground: drawBackground,
     draw: draw,
@@ -83,6 +84,8 @@ function newChartSpace () {
   }
 
   function drawBackground () {
+    if (thisObject.visible !== true) { return }
+
     for (var i = 0; i < thisObject.timeMachines.length; i++) {
       var timeMachine = thisObject.timeMachines[i]
       timeMachine.drawBackground()
@@ -90,7 +93,7 @@ function newChartSpace () {
   }
 
   function draw () {
-    // thisObject.container.frame.draw(false, false)
+    if (thisObject.visible !== true) { return }
 
     for (var i = 0; i < thisObject.timeMachines.length; i++) {
       var timeMachine = thisObject.timeMachines[i]
@@ -99,7 +102,7 @@ function newChartSpace () {
   }
 
   function getContainer (point, purpose) {
-    if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') }
+    if (thisObject.visible !== true) { return }
 
     let container
 

Spaces/FloatingSpace.js

@@ -11,6 +11,7 @@ function newFloatingSpace () {
   let thisObject = {
     floatingLayer: undefined,               // This is the array of floatingObjects being displayed
     profileBalls: undefined,
+    strategyParts: undefined,
     noteSets: undefined,
     initialize: initialize,
     finalize: finalize
@@ -24,6 +25,7 @@ function newFloatingSpace () {
 
       thisObject.floatingLayer.finalize()
       thisObject.profileBalls.finalize()
+      thisObject.strategyParts.finalize()
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
@@ -31,21 +33,16 @@ function newFloatingSpace () {
 
   function initialize (callBackFunction) {
     thisObject.floatingLayer = newFloatingLayer()
-    thisObject.floatingLayer.initialize(onFloatingLayerInitialized)
+    thisObject.floatingLayer.initialize()
 
-    function onFloatingLayerInitialized (err) {
-      thisObject.profileBalls = newProfileBalls()
-      thisObject.profileBalls.initialize(thisObject.floatingLayer, onProfileBallsInitialized)
+    thisObject.profileBalls = newProfileBalls()
+    thisObject.profileBalls.initialize(thisObject.floatingLayer)
 
-      function onProfileBallsInitialized (err) {
-        thisObject.noteSets = newNoteSets()
-        thisObject.noteSets.initialize(thisObject.floatingLayer, onNoteSetsInitialized)
+    thisObject.noteSets = newNoteSets()
+    thisObject.noteSets.initialize(thisObject.floatingLayer)
 
-        function onNoteSetsInitialized (err) {
-
-        }
-      }
-    }
+    thisObject.strategyParts = newStrategyParts()
+    thisObject.strategyParts.initialize(thisObject.floatingLayer)
   }
 }
 

Spaces/PanelsSpace.js

@@ -6,6 +6,7 @@ The Panel Space y the place wehre all panels live, no matter who create them.
 
 function newPanelsSpace () {
   let thisObject = {
+    visible: true,
     container: undefined,
     createNewPanel: createNewPanel,
     destroyPanel: destroyPanel,
@@ -100,6 +101,8 @@ function newPanelsSpace () {
   }
 
   function draw () {
+    if (thisObject.visible !== true) { return }
+
     thisObject.container.frame.draw(false, false)
 
     thisObject.panels = panelsMap.get('Global')
@@ -120,6 +123,8 @@ function newPanelsSpace () {
   }
 
   function getContainer (point) {
+    if (thisObject.visible !== true) { return }
+
     let container
 
         /*

Spaces/StrategySpace.js

@@ -32,10 +32,16 @@ function newStrategySpace () {
   function getContainer (point) {
     let container
 
+    if (thisObject.strategyCollection !== undefined) {
+      container = thisObject.strategyCollection.getContainer(point)
+      if (container !== undefined) { return container }
+    }
+
     if (thisObject.sidePanel !== undefined) {
       container = thisObject.sidePanel.getContainer(point)
       if (container !== undefined) { return container }
     }
+
     return
   }
 
@@ -43,3 +49,4 @@ function newStrategySpace () {
     thisObject.sidePanel.draw()
   }
 }
+

StrategySpace/StrategyCollection.js

@@ -26,7 +26,7 @@ function newStrategyCollection () {
   thisObject.container.frame.position.y = 0
 
   thisObject.container.isDraggeable = false
-  thisObject.container.isClickeable = true
+  thisObject.container.isClickeable = false
 
   return thisObject
 
@@ -40,8 +40,6 @@ function newStrategyCollection () {
         return
       }
 
-      thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick)
-
       user = JSON.parse(user)
 
       const authId = user.authId
@@ -181,7 +179,7 @@ function newStrategyCollection () {
           })
                   .then(response => {
                     window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies))
-                    thisObject.strategies = response.data.strategizer_StrategyByFb.subStrategies
+                    thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies))
                     createCollectionItems()
                     resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies})
                   })
@@ -233,22 +231,18 @@ function newStrategyCollection () {
     }
   }
 
-  function onClick () {
-
-  }
-
   function getContainer (point) {
     let container
 
-        /* First we check if this point is inside this object UI. */
-
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return this.container
-    } else {
-            /* This point does not belong to this space. */
-
-      return undefined
+    for (let i = 0; i < colletionItems.length; i++) {
+      let item = colletionItems[i]
+      container = item.getContainer(point)
+      if (container !== undefined) {
+        return container
+      }
     }
+
+    return undefined
   }
 
   function draw () {

StrategySpace/StrategyCollectionItem.js

@@ -17,10 +17,12 @@ function newStrategyCollectionItem () {
   thisObject.container.isClickeable = true
   thisObject.container.isDraggeable = false
 
+  let visible = false
+
   return thisObject
 
   function initialize () {
-    const ITEM_WIDTH = 430
+    const ITEM_WIDTH = SIDE_PANEL_WIDTH - 20
     const ITEM_HEIGHT = 80
 
     thisObject.container.frame.width = ITEM_WIDTH
@@ -37,12 +39,216 @@ function newStrategyCollectionItem () {
   }
 
   function onMouseClick (event) {
+    if (visible === false) {
+      canvas.chartSpace.visible = false
+      canvas.panelsSpace.visible = false
+      generateStrategyParts()
+      visible = true
+    } else {
+      canvas.chartSpace.visible = true
+      canvas.panelsSpace.visible = true
+      destroyStrategyParts()
+      visible = false
+    }
+  }
 
+  function createPart (partType, name, node, parentNode, title) {
+    let payload = {
+      profile: {
+        position: {
+          x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH,
+          y: viewPort.height / 2
+        },
+        visible: true
+      },
+      notes: []
+    }
+
+    let imageId // 'My Image.png'
+
+    if (title !== undefined) {
+      payload.profile.upLabel = title
+    } else {
+      payload.profile.upLabel = partType
+    }
+
+    payload.profile.downLabel = name
+    payload.profile.imageId = imageId
+    payload.profile.botAvatar = 'dont know what this is'
+    payload.parentNode = parentNode
+
+    node.payload = payload
+
+    canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated)
+
+    function onStrategyPartCreated (err, pPartHandle) {
+      node.handle = pPartHandle
+    }
+  }
+
+  function destroyPart (node) {
+    canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle)
+  }
+
+  function generateStrategyParts () {
+    let lastPhase
+    let strategy = thisObject.strategy
+    createPart('Strategy', strategy.name, strategy, undefined)
+
+    createPart('Strategy Entry', '', strategy.entryPoint, strategy)
+    for (let k = 0; k < strategy.entryPoint.situations.length; k++) {
+      let situation = strategy.entryPoint.situations[k]
+      createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' ' + (k + 1))
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
+      }
+    }
+
+    createPart('Strategy Exit', '', strategy.exitPoint, strategy)
+    for (let k = 0; k < strategy.exitPoint.situations.length; k++) {
+      let situation = strategy.exitPoint.situations[k]
+      createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' ' + (k + 1))
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
+      }
+    }
+
+    createPart('Trade Entry', '', strategy.sellPoint, strategy)
+    for (let k = 0; k < strategy.sellPoint.situations.length; k++) {
+      let situation = strategy.sellPoint.situations[k]
+      createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' ' + (k + 1))
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
+      }
+    }
+
+    createPart('Stop', '', strategy.stopLoss, strategy)
+    for (let p = 0; p < strategy.stopLoss.phases.length; p++) {
+      let phase = strategy.stopLoss.phases[p]
+
+      let parent
+      if (p === 0) {
+        parent = strategy.stopLoss
+      } else {
+        parent = lastPhase
+      }
+      lastPhase = phase
+      createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1))
+
+      for (let k = 0; k < phase.situations.length; k++) {
+        let situation = phase.situations[k]
+        createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1))
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
+        }
+      }
+    }
+
+    createPart('Take Profit', '', strategy.buyOrder, strategy)
+    for (let p = 0; p < strategy.buyOrder.phases.length; p++) {
+      let phase = strategy.buyOrder.phases[p]
+      let parent
+      if (p === 0) {
+        parent = strategy.buyOrder
+      } else {
+        parent = lastPhase
+      }
+      lastPhase = phase
+      createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1))
+
+      for (let k = 0; k < phase.situations.length; k++) {
+        let situation = phase.situations[k]
+        createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1))
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
+        }
+      }
+    }
+  }
+
+  function destroyStrategyParts () {
+    let strategy = thisObject.strategy
+    destroyPart(strategy)
+
+    destroyPart(strategy.entryPoint)
+    for (let k = 0; k < strategy.entryPoint.situations.length; k++) {
+      let situation = strategy.entryPoint.situations[k]
+      destroyPart(situation)
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        destroyPart(condition)
+      }
+    }
+
+    destroyPart(strategy.exitPoint)
+    for (let k = 0; k < strategy.exitPoint.situations.length; k++) {
+      let situation = strategy.exitPoint.situations[k]
+      destroyPart(situation)
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        destroyPart(condition)
+      }
+    }
+
+    destroyPart(strategy.sellPoint)
+    for (let k = 0; k < strategy.sellPoint.situations.length; k++) {
+      let situation = strategy.sellPoint.situations[k]
+      destroyPart(situation)
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        destroyPart(condition)
+      }
+    }
+
+    destroyPart(strategy.stopLoss)
+    for (let p = 0; p < strategy.stopLoss.phases.length; p++) {
+      let phase = strategy.stopLoss.phases[p]
+      destroyPart(strategy.stopLoss)
+
+      for (let k = 0; k < phase.situations.length; k++) {
+        let situation = phase.situations[k]
+        destroyPart(situation)
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          destroyPart(condition)
+        }
+      }
+    }
+
+    destroyPart(strategy.buyOrder)
+    for (let p = 0; p < strategy.buyOrder.phases.length; p++) {
+      let phase = strategy.buyOrder.phases[p]
+      destroyPart(strategy.buyOrder)
+
+      for (let k = 0; k < phase.situations.length; k++) {
+        let situation = phase.situations[k]
+        destroyPart(situation)
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          destroyPart(condition)
+        }
+      }
+    }
   }
 
   function getContainer (point) {
     let container
-    if (thisObject.container.frame.isThispointHere(point, true) === true) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
     } else {
       return undefined
@@ -56,6 +262,19 @@ function newStrategyCollectionItem () {
     text()
     arrow()
     icon()
+    floatingBackground()
+  }
+
+  function floatingBackground () {
+    if (visible === false) { return }
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height)
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
+
+    browserCanvasContext.closePath()
+    browserCanvasContext.fill()
   }
 
   function text () {

Utilities.js

@@ -172,7 +172,7 @@ function loadEmoji (pPath) {
 function printLabel (labelToPrint, x, y, opacity, fontSize) {
   let labelPoint
 
-  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira'
+  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
 
   let label = '' + labelToPrint
 

ViewPort.js

@@ -23,6 +23,8 @@ function newViewPort () {
 
   let thisObject = {
     visibleArea: undefined,
+    width: undefined,
+    height: undefined,
     eventHandler: undefined,
     zoomTargetLevel: undefined,
     zoomLevel: undefined,
@@ -81,6 +83,9 @@ function newViewPort () {
       bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN}
     }
 
+    thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x
+    thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y
+
     readObjectState()
   }