drawBackground Imlemented

Canvas.js

@@ -159,6 +159,7 @@ function newCanvas () {
 
                    /* Here we add all the functions that will be called during the animation cycle. */
 
+          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)

Spaces/ChartSpace.js

@@ -15,6 +15,7 @@ function newChartSpace () {
 
   var thisObject = {
     container: undefined,
+    drawBackground: drawBackground,
     draw: draw,
     timeMachines: [],
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -97,11 +98,16 @@ function newChartSpace () {
     }
   }
 
+  function drawBackground () {
+    for (var i = 0; i < thisObject.timeMachines.length; i++) {
+      var timeMachine = thisObject.timeMachines[i]
+      timeMachine.drawBackground()
+    }
+  }
+
   function draw () {
     thisObject.container.frame.draw(false, false)
 
-        /* When we draw the chart space, that means we draw all the time machines in it. */
-
     for (var i = 0; i < thisObject.timeMachines.length; i++) {
       var timeMachine = thisObject.timeMachines[i]
       timeMachine.draw()

SplashScreen.js

@@ -100,7 +100,7 @@ function newSplashScreen () {
         /* Second the % of Advance. */
 
     let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
-    stepsInitializationCounter = stepsInitializationCounter + 0.5
+    stepsInitializationCounter = stepsInitializationCounter + 0.1
 
     if (stepsInitializationCounter > 99) {
       splashScreenNeeded = false

TimeMachine.js

@@ -17,6 +17,7 @@ function newTimeMachine () {
 
   let thisObject = {
     container: undefined,
+    drawBackground: drawBackground,
     draw: draw,
     charts: [],
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -158,11 +159,16 @@ function newTimeMachine () {
     }
   }
 
+  function drawBackground () {
+    for (let i = 0; i < this.charts.length; i++) {
+      let chart = this.charts[i]
+      chart.drawBackground()
+    }
+  }
+
   function draw () {
     this.container.frame.draw(false, false)
 
-        /* When we draw a time machine, that means also to draw all the charts in it. */
-
     for (let i = 0; i < this.charts.length; i++) {
       let chart = this.charts[i]
       chart.draw()

TimelineChart.js

@@ -14,6 +14,7 @@
    let thisObject = {
      setDatetime: setDatetime,
      container: undefined,
+     drawBackground: drawBackground,
      draw: draw,
      getContainer: getContainer,
      initialize: initialize,
@@ -301,8 +302,8 @@
      }
    }
 
-   function draw () {
-     if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') }
+   function drawBackground () {
+     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') }
 
      if (thisObject.container.frame.isInViewPort()) {
        if (window.CHART_ON_FOCUS === '') {
@@ -310,8 +311,16 @@
 
          this.container.frame.draw()
 
-         drawBackground()
+         drawChartsBackgroundImages()
        }
+     }
+   }
+
+   function draw () {
+     if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') }
+
+     if (thisObject.container.frame.isInViewPort()) {
+       drawChartsBackground()
 
        chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
 
@@ -321,8 +330,36 @@
      }
    }
 
-   function drawBackground () {
-     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') }
+   function drawChartsBackground () {
+        /* We will paint some transparent background here. */
+
+     let opacity = '0.9'
+
+     let fromPoint = {
+       x: 0,
+       y: 0
+     }
+
+     let toPoint = {
+       x: 0,
+       y: thisObject.container.frame.height
+     }
+
+     fromPoint = transformThisPoint(fromPoint, thisObject.container)
+     toPoint = transformThisPoint(toPoint, thisObject.container)
+
+     browserCanvasContext.beginPath()
+
+     browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
+
+     browserCanvasContext.closePath()
+
+     browserCanvasContext.fill()
+   }
+
+   function drawChartsBackgroundImages () {
+     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawChartsBackground -> Entering function.') }
 
      if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return }
 
@@ -431,32 +468,6 @@
          browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight)
        }
      }
-
-        /* We will paint some transparent background here. */
-
-     let opacity = '0.9'
-
-     let fromPoint = {
-       x: 0,
-       y: 0
-     }
-
-     let toPoint = {
-       x: 0,
-       y: thisObject.container.frame.height
-     }
-
-     fromPoint = transformThisPoint(fromPoint, thisObject.container)
-     toPoint = transformThisPoint(toPoint, thisObject.container)
-
-     browserCanvasContext.beginPath()
-
-     browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y)
-     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
-     browserCanvasContext.closePath()
-
-     browserCanvasContext.fill()
    }
 
    function moveViewPortToCurrentDatetime () {