Several improvements and bug fixes

CanvasApp/ChartsSpace/PlottersManager.js

@@ -219,6 +219,8 @@ function newPlottersManager () {
                     connector.plotter.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)
                     connector.panels.push(plotterPanelHandle)
                   }
+
+                  connector.layer.panels = connector.panels
                 }
 
                 connectors.push(connector)
@@ -237,7 +239,7 @@ function newPlottersManager () {
   }
 
   function onLayerStatusChanged (layer) {
-    if (layer.status === PRODUCT_CARD_STATUS.LOADING) {
+    if (layer.status === LAYER_STATUS.LOADING) {
             /* Lets see if we can find the Plotter of this card on our Active Plotters list, other wise we will initialize it */
       let found = false
       for (let i = 0; i < connectors.length; i++) {
@@ -253,7 +255,7 @@ function newPlottersManager () {
         }
       }
     }
-    if (layer.status === PRODUCT_CARD_STATUS.OFF) {
+    if (layer.status === LAYER_STATUS.OFF) {
             /* If the plotter of this card is not on our Active Plotters list, then we remove it. */
       for (let i = 0; i < connectors.length; i++) {
         let connector = connectors[i]

CanvasApp/ChartsSpace/TimeMachine.js

@@ -329,10 +329,21 @@ function newTimeMachine () {
   }
 
   function physics () {
-    thisObjectPhysics()
-    childrenPhysics()
-    syncWithDesigner()
-    saveFrame(thisObject.payload, thisObject.container.frame)
+    if (thisObject.container.frame.isInViewPort()) {
+      thisObjectPhysics()
+      childrenPhysics()
+      syncWithDesigner()
+      saveFrame(thisObject.payload, thisObject.container.frame)
+    }
+    panelPhysics()
+  }
+
+  function panelPhysics () {
+    if (thisObject.container.frame.isInViewPort()) {
+      canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
+    } else {
+      canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')
+    }
   }
 
   function syncWithDesigner () {
@@ -457,6 +468,7 @@ function newTimeMachine () {
   }
 
   function drawBackground () {
+    drawChartsBackground()
     if (thisObject.container.frame.isInViewPort()) {
       for (let i = 0; i < thisObject.timelineCharts.length; i++) {
         let timelineChart = thisObject.timelineCharts[thisObject.timelineCharts.length - i - 1]
@@ -465,6 +477,10 @@ function newTimeMachine () {
     }
   }
 
+  function drawChartsBackground () {
+    drawContainerBackground(thisObject.container, UI_COLOR.WHITE, 0.5, thisObject.fitFunction)
+  }
+
   function draw () {
     if (thisObject.container.frame.isInViewPort()) {
       for (let i = 0; i < thisObject.timelineCharts.length; i++) {

CanvasApp/ChartsSpace/TimelineChart.js

@@ -417,34 +417,7 @@ function newTimelineChart () {
   }
 
   function drawChartsBackground () {
-       /* We will paint some transparent background here. */
-
-    let opacity = '0.0'
-
-    let fromPoint = {
-      x: 0,
-      y: 0
-    }
-
-    let toPoint = {
-      x: thisObject.container.frame.width,
-      y: thisObject.container.frame.height
-    }
-
-    fromPoint = transformThisPoint(fromPoint, thisObject.container)
-    toPoint = transformThisPoint(toPoint, thisObject.container)
-
-    fromPoint = thisObject.fitFunction(fromPoint)
-    toPoint = thisObject.fitFunction(toPoint)
-
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.fill()
+    drawContainerBackground(thisObject.container, UI_COLOR.WHITE, 0, thisObject.fitFunction)
   }
 
   function recalculateCoordinateSystem () {

CanvasApp/Globals.js

@@ -164,7 +164,7 @@ const BREAKPOINT_HEIGHT = 15;
 const SIDE_PANEL_WIDTH = 450
 let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT
 
-const PRODUCT_CARD_STATUS = {
+const LAYER_STATUS = {
     ON: 'on',
     LOADING: 'loading',
     OFF: 'off'

CanvasApp/Panels/Layer.js

@@ -6,10 +6,11 @@ function newLayer () {
 
   let thisObject = {
     container: undefined,
-    status: PRODUCT_CARD_STATUS.OFF,
+    status: LAYER_STATUS.OFF,
     fitFunction: undefined,
     payload: undefined,
     definition: undefined,
+    panels: undefined,
     physics: physics,
     draw: draw,
     turnOff: turnOff,
@@ -73,6 +74,7 @@ function newLayer () {
   thisObject.eventHandler = newEventHandler()
   let imagesLoaded = 0
   let onMouseClickEventSuscriptionId
+  let panelsVisibleButton
 
   return thisObject
 
@@ -85,6 +87,7 @@ function newLayer () {
     thisObject.fitFunction = undefined
     thisObject.payload = undefined
     thisObject.definition = undefined
+    thisObject.panels = undefined
 
     timeFrame = undefined
     datetime = undefined
@@ -102,6 +105,8 @@ function newLayer () {
     singleFileProgressBar = undefined
     fileSequenceProgressBar = undefined
 
+    panelsVisibleButton = undefined
+
     thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
   }
 
@@ -114,7 +119,6 @@ function newLayer () {
       thisObject.container.isClickeable = true
 
        /* Lets set the basic dimensions of this thisObject. */
-
       let position = {
         x: 0,
         y: 0
@@ -173,6 +177,12 @@ function newLayer () {
   }
 
   function getContainer (point) {
+    if (panelsVisibleButton !== undefined) {
+      let container = panelsVisibleButton.getContainer(point)
+      if (container !== undefined) {
+        return container
+      }
+    }
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
     }
@@ -242,31 +252,31 @@ function newLayer () {
   }
 
   function turnOff () {
-    if (thisObject.status !== PRODUCT_CARD_STATUS.OFF) {
+    if (thisObject.status !== LAYER_STATUS.OFF) {
       resetProgressBars()
-      changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+      changeStatusTo(LAYER_STATUS.OFF)
     }
   }
 
   function turnOn () {
-    if (thisObject.status === PRODUCT_CARD_STATUS.OFF) {
+    if (thisObject.status === LAYER_STATUS.OFF) {
       resetProgressBars()
-      changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+      changeStatusTo(LAYER_STATUS.LOADING)
     }
   }
 
   function onMouseClick (event) {
     switch (thisObject.status) {
-      case PRODUCT_CARD_STATUS.ON:
+      case LAYER_STATUS.ON:
         resetProgressBars()
-        changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+        changeStatusTo(LAYER_STATUS.OFF)
         break
-      case PRODUCT_CARD_STATUS.OFF:
+      case LAYER_STATUS.OFF:
         resetProgressBars()
-        changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+        changeStatusTo(LAYER_STATUS.LOADING)
         break
-      case PRODUCT_CARD_STATUS.LOADING:
-        changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+      case LAYER_STATUS.LOADING:
+        changeStatusTo(LAYER_STATUS.OFF)
         break
     }
   }
@@ -294,25 +304,54 @@ function newLayer () {
   }
 
   function physics () {
+    statusPhysics()
+    childrenPhysics()
+  }
+
+  function childrenPhysics () {
+    /* Panels Visible Button Setup */
+    if (thisObject.status === LAYER_STATUS.ON) {
+      if (panelsVisibleButton === undefined) {
+        if (thisObject.panels !== undefined) {
+          if (thisObject.panels.length > 0) {
+            panelsVisibleButton = newPanelsVisibleButton()
+
+            let storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'showPanels')
+            if (storedValue !== undefined) {
+              if (storedValue === true || storedValue === false) {
+                panelsVisibleButton.showPanels = storedValue
+              }
+            }
+
+            panelsVisibleButton.initialize(thisObject.panels)
+            panelsVisibleButton.container.connectToParent(thisObject.container)
+          }
+        }
+      } else {
+        savePropertyAtNodeConfig(thisObject.payload, 'showPanels', panelsVisibleButton.showPanels)
+      }
+    }
+  }
+
+  function statusPhysics () {
   /* We retrieve the stored status at the config. */
     try {
-      let code = JSON.parse(thisObject.payload.node.code)
-      let storedValue = code.status
+      let storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'status')
 
       if (storedValue !== undefined) {
         if (storedValue !== thisObject.status) {
-          if (storedValue === PRODUCT_CARD_STATUS.ON) {
+          if (storedValue === LAYER_STATUS.ON) {
             resetProgressBars()
-            changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+            changeStatusTo(LAYER_STATUS.LOADING)
           }
-          if (storedValue === PRODUCT_CARD_STATUS.OFF) {
+          if (storedValue === LAYER_STATUS.OFF) {
             resetProgressBars()
-            changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+            changeStatusTo(LAYER_STATUS.OFF)
           }
         }
       } else {
         resetProgressBars()
-        changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+        changeStatusTo(LAYER_STATUS.OFF)
       }
     } catch (err) {
    // we ignore errors here since most likely they will be parsing errors.
@@ -320,11 +359,11 @@ function newLayer () {
 
     /* Check when the loading finishes */
     if (
-      thisObject.status === PRODUCT_CARD_STATUS.LOADING &&
+      thisObject.status === LAYER_STATUS.LOADING &&
       marketFileProgressBar.value === 100 &&
       dailyFileProgressBar.value === 100
     ) {
-      changeStatusTo(PRODUCT_CARD_STATUS.ON)
+      changeStatusTo(LAYER_STATUS.ON)
     }
   }
 
@@ -332,14 +371,14 @@ function newLayer () {
     if (thisObject.status !== newStatus) {
       thisObject.status = newStatus
 
-      try {
-        let code = JSON.parse(thisObject.payload.node.code)
-        code.status = thisObject.status
-        thisObject.payload.node.code = JSON.stringify(code)
-      } catch (err) {
-         // we ignore errors here since most likely they will be parsing errors.
+      if (thisObject.status === LAYER_STATUS.OFF) {
+        if (panelsVisibleButton !== undefined) {
+          panelsVisibleButton.finalize()
+          panelsVisibleButton = undefined
+        }
       }
 
+      savePropertyAtNodeConfig(thisObject.payload, 'status', thisObject.status)
       let eventData = thisObject
       thisObject.container.eventHandler.raiseEvent('Status Changed', eventData)
     }
@@ -347,6 +386,9 @@ function newLayer () {
 
   function draw () {
     drawLayer()
+    if (panelsVisibleButton !== undefined) {
+      panelsVisibleButton.draw()
+    }
   }
 
   function drawLayer () {

CanvasApp/Panels/LayersPanel.js

@@ -1,10 +1,11 @@
-function newProductsPanel () {
+function newLayersPanel () {
   let thisObject = {
     name: 'Layers Panel',
     fitFunction: undefined,
     container: undefined,
     layers: [],
     payload: undefined,
+    isVisible: true,
     getLoadingLayers: getLoadingLayers,
     physics: physics,
     draw: draw,
@@ -74,6 +75,12 @@ function newProductsPanel () {
     panelTabButton.initialize()
 
     onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+
+    let storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'visibleLayers')
+    if (storedValue >= 0 && storedValue <= 20) {
+      desiredVisibleLayers = storedValue
+    }
+
     isInitialized = true
   }
 
@@ -134,6 +141,7 @@ function newProductsPanel () {
     }
     desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + heatherHeight + footerHeight
     calculateVisbleLayers()
+    savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers)
   }
 
   function panelSizePhysics () {
@@ -192,7 +200,7 @@ function newProductsPanel () {
     let onProducts = []
 
     for (let i = 0; i < thisObject.layers.length; i++) {
-      if (thisObject.layers[i].status === PRODUCT_CARD_STATUS.LOADING) {
+      if (thisObject.layers[i].status === LAYER_STATUS.LOADING) {
         onProducts.push(thisObject.layers[i])
       }
     }
@@ -409,4 +417,3 @@ function newProductsPanel () {
     }
   }
 }
-

CanvasApp/Panels/PanelTabButton.js

@@ -88,6 +88,7 @@ function newPanelTabButton () {
   }
 
   function draw () {
+    return
     if (isInitialized === false) { return }
 
     drawButton()
@@ -113,6 +114,7 @@ function newPanelTabButton () {
   }
 
   function getContainer (point) {
+    return
     let container
 
        /* First we check if thisObject point is inside thisObject space. */

CanvasApp/Panels/PanelsVisibleButton.js

@@ -0,0 +1,83 @@
+function newPanelsVisibleButton () {
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    parentContainer: undefined,
+    panels: undefined,
+    showPanels: true,
+    draw: draw,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize,
+    finalize: finalize
+  }
+
+   /* Cointainer stuff */
+  thisObject.container = newContainer()
+  thisObject.container.name = 'Panels Visible Button'
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.frame.containerName = 'Panels Visible Button'
+
+  let onMouseClickEventSuscriptionId
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+    thisObject.parentContainer = undefined
+    thisObject.panels = undefined
+  }
+
+  function initialize (panels) {
+    thisObject.panels = panels
+    setPanelVisibility()
+
+    thisObject.container.frame.width = 25
+    thisObject.container.frame.height = 25
+
+    let position = {
+      x: thisObject.container.frame.width * 1 / 8,
+      y: 45
+    }
+
+    thisObject.container.frame.position = position
+
+    /* Lets listen to our own events to react when we have a Mouse Click */
+    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+  }
+
+  function onMouseClick (event) {
+    if (thisObject.showPanels === false) {
+      thisObject.showPanels = true
+    } else {
+      thisObject.showPanels = false
+    }
+    setPanelVisibility()
+  }
+
+  function setPanelVisibility () {
+    for (let i = 0; i < thisObject.panels.length; i++) {
+      panel = canvas.panelsSpace.getPanel(thisObject.panels[i])
+      panel.isVisible = thisObject.showPanels
+    }
+  }
+
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    }
+  }
+
+  function draw () {
+    let icon
+    if (thisObject.showPanels === true) {
+      icon = canvas.designerSpace.iconCollection.get('plotter-panel')
+    } else {
+      icon = canvas.designerSpace.iconCollection.get('social-bot')
+    }
+
+    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
+  }
+}

CanvasApp/Panels/PlotterPanel.js

@@ -9,6 +9,7 @@ function newPlotterPanel () {
   let thisObject = {
     fitFunction: undefined,
     container: undefined,
+    isVisible: true,
     onRecordChange: onRecordChange,
     draw: draw,
     getContainer: getContainer,
@@ -30,6 +31,7 @@ function newPlotterPanel () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.fitFunction = undefined
+    thisObject.isVisible = undefined
 
     heightFactor = undefined
     currentRecord = undefined
@@ -56,6 +58,7 @@ function newPlotterPanel () {
   }
 
   function getContainer (point) {
+    if (thisObject.isVisible !== true) { return }
     let container
 
     container = panelTabButton.getContainer(point)
@@ -80,10 +83,10 @@ function newPlotterPanel () {
   }
 
   function draw () {
+    if (thisObject.isVisible !== true) { return }
+
     thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
-
     plotCurrentRecordData()
-
     panelTabButton.draw()
   }
 

CanvasApp/Spaces/ChartSpace.js

@@ -332,11 +332,11 @@ function newChartSpace () {
       }
 
       if (timeMachine.container.frame.isInViewPort()) {
-        timeMachine.physics()
         thisObject.inViewport.set(timeMachine.payload.node.id, timeMachine)
       } else {
         thisObject.inViewport.delete(timeMachine.payload.node.id)
       }
+      timeMachine.physics()
     }
   }
 

CanvasApp/Spaces/PanelsSpace.js

@@ -8,6 +8,8 @@ function newPanelsSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
+    makeVisible: makeVisible,
+    makeInvisible: makeInvisible,
     createNewPanel: createNewPanel,
     destroyPanel: destroyPanel,
     getPanel: getPanel,
@@ -40,9 +42,10 @@ function newPanelsSpace () {
 
       case 'Layers Panel':
         {
-          panel = newProductsPanel()
+          panel = newLayersPanel()
           panel.fitFunction = canvas.chartSpace.fitFunction
           panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+          panel.type = 'Layers Panel'
           break
         }
       case 'Plotter Panel':
@@ -60,7 +63,7 @@ function newPanelsSpace () {
             panel.session = pSession
             panel.initialize()
           }
-
+          panel.type = 'Plotter Panel'
           break
         }
     }
@@ -73,6 +76,24 @@ function newPanelsSpace () {
     return panel.handle
   }
 
+  function makeVisible (owner, type) {
+    for (let i = 0; i < thisObject.panels.length; i++) {
+      let panel = thisObject.panels[i]
+      if (panel.owner === owner && panel.type === type) {
+        panel.isVisible = true
+      }
+    }
+  }
+
+  function makeInvisible (owner, type) {
+    for (let i = 0; i < thisObject.panels.length; i++) {
+      let panel = thisObject.panels[i]
+      if (panel.owner === owner && panel.type === type) {
+        panel.isVisible = false
+      }
+    }
+  }
+
   function destroyPanel (pPanelHandle) {
     for (let i = 0; i < thisObject.panels.length; i++) {
       let panel = thisObject.panels[i]
@@ -125,15 +146,10 @@ function newPanelsSpace () {
         let panel = thisObject.panels[i]
 
         /* setting the speed of the panel */
-        let ACCELERATION = 0.1 // This is resting speed.
         if (panel.container.speed === undefined) {
           panel.container.speed = {
-            x: 1,
-            y: 1
-          }
-          panel.container.resistance = {
-            x: 0,
-            y: 0
+            x: 2,
+            y: 2
           }
         }
 
@@ -149,26 +165,29 @@ function newPanelsSpace () {
         let verticalLine = (canvas.chartSpace.viewport.visibleArea.topRight.x - canvas.chartSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartSpace.viewport.visibleArea.topLeft.x
         let horizontalLine = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) * 2 / 3 + canvas.chartSpace.viewport.visibleArea.topRight.y
 
+        if (centerPoint.x < verticalLine && centerPoint.y < horizontalLine) {
+          panel.gravitatesTowards = 'topLeft'
+        }
+        if (centerPoint.x >= verticalLine && centerPoint.y < horizontalLine) {
+          panel.gravitatesTowards = 'topRight'
+        }
+        if (centerPoint.x < verticalLine && centerPoint.y >= horizontalLine) {
+          panel.gravitatesTowards = 'bottomLeft'
+        }
+        if (centerPoint.x >= verticalLine && centerPoint.y >= horizontalLine) {
+          panel.gravitatesTowards = 'bottomRight'
+        }
+
         /* According to the quadrant we push the panels to the sides */
         if (centerPoint.x < verticalLine) {
           panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x
-          if (isOverlapping(i, panel.container) === true) {
-            panel.container.frame.position.x = panel.container.frame.position.x + panel.container.speed.x * 3
-            accelerateOnX()
-          } else {
-            desAccelerateOnX()
-          }
+          isOverlapping(i, panel.container)
           if (panel.container.frame.position.x < 0) {
             panel.container.frame.position.x = 0
           }
         } else {
           panel.container.frame.position.x = panel.container.frame.position.x + panel.container.speed.x
-          if (isOverlapping(i, panel.container) === true) {
-            panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x * 3
-            accelerateOnX()
-          } else {
-            desAccelerateOnX()
-          }
+          isOverlapping(i, panel.container)
           if (panel.container.frame.position.x + panel.container.frame.width > browserCanvas.width) {
             panel.container.frame.position.x = browserCanvas.width - panel.container.frame.width
           }
@@ -176,71 +195,18 @@ function newPanelsSpace () {
         if (panel.container.frame.height <= canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) {
           if (centerPoint.y < horizontalLine) {
             panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y
-            if (isOverlapping(i, panel.container) === true) {
-              panel.container.frame.position.y = panel.container.frame.position.y + panel.container.speed.y * 3
-              accelerateOnY()
-            } else {
-              desAccelerateOnY()
-            }
+            isOverlapping(i, panel.container)
             if (panel.container.frame.position.y < canvas.chartSpace.viewport.visibleArea.topLeft.y) {
               panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.topLeft.y
             }
           } else {
             panel.container.frame.position.y = panel.container.frame.position.y + panel.container.speed.y
-            if (isOverlapping(i, panel.container) === true) {
-              panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y * 3
-              accelerateOnY()
-            } else {
-              desAccelerateOnY()
-            }
+            isOverlapping(i, panel.container)
             if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartSpace.viewport.visibleArea.bottomRight.y) {
               panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
             }
           }
         }
-
-        function accelerateOnX () {
-          panel.container.speed.x = panel.container.speed.x + ACCELERATION
-          if (panel.container.speed.x > ACCELERATION * 10) {
-            panel.container.speed.x = ACCELERATION * 10
-          }
-          panel.container.resistance.x = panel.container.resistance.x + 1
-        }
-        function desAccelerateOnX () {
-          if (panel.container.resistance.x < -3) {
-            panel.container.resistance.x = 0
-            panel.container.speed.x = ACCELERATION * 5
-            return
-          }
-          panel.container.speed.x = panel.container.speed.x - ACCELERATION
-          if (panel.container.speed.x < ACCELERATION) {
-            panel.container.speed.x = ACCELERATION * 1
-          }
-          panel.container.resistance.x = panel.container.resistance.x - 1
-        }
-        function accelerateOnY () {
-          if (panel.container.resistance.y > 5) {
-            panel.container.resistance.y = 0
-            return
-          }
-          panel.container.speed.y = panel.container.speed.y + ACCELERATION
-          if (panel.container.speed.y > ACCELERATION * 10) {
-            panel.container.speed.y = ACCELERATION * 5
-          }
-          panel.container.resistance.y = panel.container.resistance.y + 1
-        }
-        function desAccelerateOnY () {
-          if (panel.container.resistance.y < -3) {
-            panel.container.resistance.y = 0
-            panel.container.speed.y = ACCELERATION * 10
-            return
-          }
-          panel.container.speed.y = panel.container.speed.y - ACCELERATION
-          if (panel.container.speed.y < ACCELERATION) {
-            panel.container.speed.y = ACCELERATION * 1
-          }
-          panel.container.resistance.y = panel.container.resistance.y - 1
-        }
       }
     }
 
@@ -264,11 +230,41 @@ function newPanelsSpace () {
 
       for (let i = 0; i < currentIndex; i++) {
         let panel = thisObject.panels[i]
+        if (panel.isVisible === true) {
+          if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
+            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+          }
+          if (isThisPointInsideThisFrame(corner2, panel.container.frame) === true) {
+            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+          }
+          if (isThisPointInsideThisFrame(corner3, panel.container.frame) === true) {
+            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+          }
+          if (isThisPointInsideThisFrame(corner4, panel.container.frame) === true) {
+            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+          }
+        }
+      }
 
-        if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) { return true }
-        if (isThisPointInsideThisFrame(corner2, panel.container.frame) === true) { return true }
-        if (isThisPointInsideThisFrame(corner3, panel.container.frame) === true) { return true }
-        if (isThisPointInsideThisFrame(corner4, panel.container.frame) === true) { return true }
+      function pushOut (currentContainer, controlContainer, corner) {
+        switch (corner) {
+          case 'topLeft': {
+            currentContainer.frame.position.x = controlContainer.frame.position.x + controlContainer.frame.width
+            break
+          }
+          case 'topRight': {
+            currentContainer.frame.position.x = controlContainer.frame.position.x - currentContainer.frame.width
+            break
+          }
+          case 'bottomLeft': {
+            currentContainer.frame.position.x = controlContainer.frame.position.x + controlContainer.frame.width
+            break
+          }
+          case 'bottomRight': {
+            currentContainer.frame.position.x = controlContainer.frame.position.x - currentContainer.frame.width
+            break
+          }
+        }
       }
 
       function isThisPointInsideThisFrame (point, frame) {

CanvasApp/SplashScreen.js

@@ -125,7 +125,7 @@ function newSplashScreen () {
 
     fontSize = 15
 
-    title = 'Trading Automation System'
+    title = 'People and Machines working together to create Superalgos'
 
     titlePoint = {
       x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,

CanvasApp/Utilities.js

@@ -1,3 +1,45 @@
+function drawContainerBackground (container, color, opacity, fitFunction) {
+  let fromPoint = {
+    x: 0,
+    y: 0
+  }
+
+  let toPoint = {
+    x: container.frame.width,
+    y: container.frame.height
+  }
+
+  fromPoint = transformThisPoint(fromPoint, container)
+  toPoint = transformThisPoint(toPoint, container)
+
+  fromPoint = fitFunction(fromPoint)
+  toPoint = fitFunction(toPoint)
+
+  browserCanvasContext.beginPath()
+  browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
+  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
+  browserCanvasContext.closePath()
+  browserCanvasContext.fill()
+}
+
+function savePropertyAtNodeConfig (payload, propertyName, value) {
+  try {
+    let code = JSON.parse(payload.node.code)
+    code[propertyName] = value
+    payload.node.code = JSON.stringify(code)
+  } catch (err) {
+     // we ignore errors here since most likely they will be parsing errors.
+  }
+}
+
+function loadPropertyFromNodeConfig (payload, propertyName) {
+  try {
+    let code = JSON.parse(payload.node.code)
+    return code[propertyName]
+  } catch (err) {
+     // we ignore errors here since most likely they will be parsing errors.
+  }
+}
 
 function saveFrame (payload, frame) {
   payload.frame = {

Inter-Process-Files/AppSchema.json

@@ -5088,6 +5088,14 @@
     {
         "type": "Layers Manager",
         "menuItems": [
+            {
+                "action": "Configure Layers Manager",
+                "label": "Configure Layers Manager",
+                "iconPathOn": "html",
+                "iconPathOff": "html",
+                "dontShowAtFullscreen": true,
+                "actionFunction": "uiObject.configEditor.activate"
+            },
             {
                 "action": "Add UI Object",
                 "label": "Add Layer",
@@ -5105,6 +5113,12 @@
             }
         ],
         "addLeftIcons": true,
+        "editors": {
+            "config": true
+        },
+        "initialValues": {
+            "code": "{ \n\"visibleLayers\": 5\n}"
+        },
         "level": 3,
         "icon": "layer-manager",
         "chainAttachesTo": {

Legacy-Code/AAMasters/bots/AACharly-Sensor-Bot/Historic-Trades/User.Bot.js

@@ -210,7 +210,6 @@ exports.newUserBot = function newUserBot(bot, logger, COMMONS, UTILITIES, fileSt
                         }
 
                         /* Fetching the trades from the exchange.*/
-                        console.log(JSON.stringify("PARAMS ", params))
                         const trades = await exchange.fetchTrades(symbol, since, limit, params)
 
                         if (FULL_LOG === true) { logger.write(MODULE_NAME, "[INFO] start -> getTrades -> Trades Fetched = " + trades.length) }

Legacy-Code/AAMasters/plotters/Plotters-Bollinger-Bands/BollingerBandsPanel.js

@@ -5,6 +5,7 @@ function newAAMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel ()
         fitFunction: undefined,
         onRecordChange: onRecordChange,
         container: undefined,
+        isVisible: true,
         draw: draw,
         getContainer: getContainer,
         initialize: initialize,
@@ -24,6 +25,7 @@ function newAAMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel ()
         thisObject.container.finalize()
         thisObject.container = undefined
         thisObject.fitFunction = undefined
+        thisObject.isVisible = undefined
 
         currentBand = undefined
         panelTabButton.finalize()
@@ -46,7 +48,7 @@ function newAAMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel ()
     }
 
     function getContainer(point) {
-
+        if (thisObject.isVisible !== true) { return }
         let container;
 
         container = panelTabButton.getContainer(point)
@@ -76,7 +78,7 @@ function newAAMastersPlottersBollingerBandsBollingerBandsBollingerBandsPanel ()
 
 
     function draw() {
-
+        if (thisObject.isVisible !== true) { return }
         thisObject.container.frame.draw(false, false, true, thisObject.fitFunction);
 
         plotCurrentBandInfo();

Legacy-Code/AAMasters/plotters/Plotters-Candles-Volumes/CandlePanel.js

@@ -4,6 +4,7 @@ function newAAMastersPlottersCandlesVolumesCandlesCandlePanel() {
     let thisObject = {
         fitFunction: undefined,
         container: undefined,
+        isVisible: true,
         onRecordChange: onRecordChange,
         draw: draw,
         getContainer: getContainer,
@@ -24,6 +25,7 @@ function newAAMastersPlottersCandlesVolumesCandlesCandlePanel() {
         thisObject.container.finalize()
         thisObject.container = undefined
         thisObject.fitFunction = undefined
+        thisObject.isVisible = undefined
 
         currentCandle = undefined
         panelTabButton.finalize()
@@ -46,7 +48,7 @@ function newAAMastersPlottersCandlesVolumesCandlesCandlePanel() {
     }
 
     function getContainer(point) {
-
+        if (thisObject.isVisible !== true) { return }
         let container;
 
         container = panelTabButton.getContainer(point)
@@ -76,7 +78,7 @@ function newAAMastersPlottersCandlesVolumesCandlesCandlePanel() {
 
 
     function draw() {
-
+        if (thisObject.isVisible !== true) { return }
         thisObject.container.frame.draw(false, false, true, thisObject.fitFunction);
 
         plotCurrentCandleInfo();

Legacy-Code/AAMasters/plotters/Plotters-Candles-Volumes/VolumePanel.js

@@ -4,6 +4,7 @@ function newAAMastersPlottersCandlesVolumesVolumesVolumePanel() {
     let thisObject = {
         fitFunction: undefined,
         container: undefined,
+        isVisible: true,
         onRecordChange: onRecordChange,
         draw: draw,
         getContainer: getContainer,
@@ -24,6 +25,7 @@ function newAAMastersPlottersCandlesVolumesVolumesVolumePanel() {
         thisObject.container.finalize()
         thisObject.container = undefined
         thisObject.fitFunction = undefined
+        thisObject.isVisible = undefined
 
         currentVolume = undefined
         panelTabButton.finalize()
@@ -46,7 +48,7 @@ function newAAMastersPlottersCandlesVolumesVolumesVolumePanel() {
     }
 
     function getContainer(point) {
-
+        if (thisObject.isVisible !== true) { return }
         let container;
 
         container = panelTabButton.getContainer(point)
@@ -76,7 +78,7 @@ function newAAMastersPlottersCandlesVolumesVolumesVolumePanel() {
 
 
     function draw() {
-
+        if (thisObject.isVisible !== true) { return }
         thisObject.container.frame.draw(false, false, true, thisObject.fitFunction);
 
         plotCurrentVolumeInfo();

Legacy-Code/AAMasters/plotters/Plotters-Trading-Simulation/SimulationExecutionPanel.js

@@ -5,10 +5,12 @@ function newAAMastersPlottersTradingSimulationSimulationExecutionSimulationExecu
     let thisObject = {
         fitFunction: undefined,
         container: undefined,
+        isVisible: true,
         onRecordChange: onRecordChange,
         draw: draw,
         getContainer: getContainer,
-        initialize: initialize
+        initialize: initialize,
+        finalize: finalize
     };
 
     let container = newContainer();
@@ -22,6 +24,17 @@ function newAAMastersPlottersTradingSimulationSimulationExecutionSimulationExecu
 
     return thisObject;
 
+    function finalize() {
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.isVisible = undefined
+
+        currentRecord = undefined
+        panelTabButton.finalize()
+        panelTabButton = undefined
+    }
+
     function initialize() {
 
         thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL;
@@ -38,7 +51,7 @@ function newAAMastersPlottersTradingSimulationSimulationExecutionSimulationExecu
     }
 
     function getContainer(point) {
-
+        if (thisObject.isVisible !== true) { return }
         let container;
 
         container = panelTabButton.getContainer(point)
@@ -68,7 +81,7 @@ function newAAMastersPlottersTradingSimulationSimulationExecutionSimulationExecu
 
 
     function draw() {
-
+        if (thisObject.isVisible !== true) { return }
         thisObject.container.frame.draw(false, false, true, thisObject.fitFunction);
 
         plot();

Legacy-Code/AAMasters/plotters/Plotters-Trading-Simulation/TradingSimulationPanel.js

@@ -6,6 +6,7 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation
         onRecordChange: onRecordChange,
         container: undefined,
         session: undefined,
+        isVisible: true,
         draw: draw,
         getContainer: getContainer,
         initialize: initialize,
@@ -48,6 +49,7 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation
         thisObject.container = undefined
         thisObject.fitFunction = undefined
         thisObject.onRecordChange = undefined
+        thisObject.isVisible = undefined
 
         currentRecord = undefined
         lastRecord = undefined
@@ -55,7 +57,7 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation
     }
 
     function getContainer(point) {
-
+        if (thisObject.isVisible !== true) { return }
         let container;
 
         container = panelTabButton.getContainer(point)
@@ -86,7 +88,7 @@ function newAAMastersPlottersTradingSimulationTradingSimulationTradingSimulation
 
 
     function draw() {
-
+        if (thisObject.isVisible !== true) { return }
         thisObject.container.frame.draw(false, false, true, thisObject.fitFunction);
 
         plotCurrentRecordInfo();

Share - Pre-Release Testing Workspace.json

@@ -0,0 +1 @@
+{"type":"Workspace","name":"Bot Instance Config Cleaned","rootNodes":[{"type":"Network","name":"Superalgos","networkNodes":[{"type":"Network Node","name":"My Computer","dataStorage":{"type":"Data Storage","name":"New Data Storage","sessionIndependentData":{"type":"Session Independent Data","name":"New Session Independent Data","singleMarketData":[{"type":"Single Market Data","name":"Poloniex BTC/USDT","dataProducts":[{"type":"Data Product","name":"Candles","id":"55e735a5-60c9-4e2d-a582-a6c6eddf3502","savedPayload":{"position":{"x":20638.6059442939,"y":26942.27818712573},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Candles","id":"36ae2d5d-6734-4526-b2f8-31c89a0c4fc1"}}},{"type":"Data Product","name":"Volumes","id":"ffaf5a8e-12d6-4040-922d-57845eb3377c","savedPayload":{"position":{"x":20804.619211464753,"y":26745.34536940477},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Volumes","id":"b2d5ba69-67ac-490f-9e74-28239b35a92e"}}},{"type":"Data Product","name":"Candle-Stairs","id":"e1c46e1f-09d1-46a2-b738-e761b4e04cd9","savedPayload":{"position":{"x":21022.09028220901,"y":26879.455513120673},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Candle-Stairs","id":"642474e9-da61-4168-97dc-7f7869bebc02"}}},{"type":"Data Product","name":"Volume-Stairs","id":"eefaf182-ffe4-457e-a7fa-f43dfabdc086","savedPayload":{"position":{"x":21289.6777141654,"y":27102.547956317398},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Volume-Stairs","id":"846e9572-c4d6-4c7e-942e-c82402c5ecea"}}},{"type":"Data Product","name":"Bollinger Bands","id":"3576cfd0-1774-4094-b8a0-66e182fc4c41","savedPayload":{"position":{"x":21200.510975971047,"y":27469.85063353425},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Bands","id":"29088877-8d63-4217-8d34-8742afc262f4"}}},{"type":"Data Product","name":"Percentage Bandwidth","id":"4dfde44c-0bbf-4204-91de-ce99ecba4cf2","savedPayload":{"position":{"x":20895.702155757215,"y":27778.625205637927},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Percentage Bandwidth","id":"3b7885a0-cd72-4a3f-a38b-3dc8c47bd068"}}},{"type":"Data Product","name":"Bollinger Channels Objects","id":"6986bcb1-119c-48c9-a00b-d046e9e07951","savedPayload":{"position":{"x":20411.34568682323,"y":27774.338383921255},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Channels Objects","id":"1f111f72-624f-4166-9f99-ab8d785d5267"}}},{"type":"Data Product","name":"Bollinger Sub-Channels Objects","id":"85098ab8-a125-49f1-b24d-416c2090c7a0","savedPayload":{"position":{"x":20386.252015593775,"y":27274.154501298886},"targetPosition":{"x":20753.26730568965,"y":27123.76805855528},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Bollinger Sub-Channels Objects","id":"080c87fc-4546-4482-ab11-180a33f6d9ab"}}}],"id":"49a747b4-2eb7-41d6-b0e2-493f43ceed44","savedPayload":{"position":{"x":20753.27323415736,"y":27123.69839359708},"targetPosition":{"x":20294.58757634718,"y":26977.27809593435},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Market","name":"BTC/USDT","id":"d4098b73-7e25-434e-8fd9-342393cbb400"}}},{"type":"Single Market Data","name":"Kraken ETH/BTC","dataProducts":[{"type":"Data Product","name":"Candles","id":"fce50098-d674-4006-94ad-cce46f3d59a4","savedPayload":{"position":{"x":20749.113604244125,"y":27179.829098890244},"targetPosition":{"x":20390.125134675498,"y":27162.662207172078},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":true,"isTensed":true},"uiObject":{},"referenceParent":{"type":"Product Definition","name":"Candles","id":"36ae2d5d-6734-4526-b2f8-31c89a0c4fc1"}}},{"type":"Data Product","name":"Volumes","id":"601b3615-7045-4e8f-aaaLine truncated

WebServer/Scripts/AppLoader.js

@@ -59,6 +59,7 @@ function newAppLoader() {
                 'Panels/PanelTabButton.js',
                 'Panels/Layer.js',
                 'Panels/PlotterPanel.js',
+                'Panels/PanelsVisibleButton.js',
                 
                 'ControlsToolBox/SidePanel.js',
                 'ControlsToolBox/SidePanelTab.js',