Charting System Improved

2020-02-11 20:33:08 +01:00
1 parent 7da244bb8a
commit 1a8a0c27ad
@@ -227,6 +227,7 @@ function newCanvas () {
      }
    }
  }
+
  function onKeyDown (event) {
    checkMediaRecording(event)

@@ -266,27 +267,22 @@ function newCanvas () {
      }
    }

-    if (event.altKey === true && event.code === 'ArrowUp') {
+    if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
      thisObject.cockpitSpace.toTop()
      return
    }

-    if (event.altKey === true && event.code === 'ArrowDown') {
+    if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
      thisObject.cockpitSpace.toBottom()
      return
    }

-    if (event.altKey === true && event.code === 'ArrowLeft' || event.altKey === true && event.code === 'ArrowRight') {
-      thisObject.cockpitSpace.toMiddle()
-      return
-    }
-
-    if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowUp') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowLeft') {
      thisObject.cockpitSpace.moveUp()
      return
    }

-    if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowDown') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowRight') {
      thisObject.cockpitSpace.moveDown()
      return
    }
@@ -456,11 +452,9 @@ function newCanvas () {

  function onMouseDown (event) {
    try {
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN,
-        button: event.button
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN

      dragVector.downX = point.x
      dragVector.downY = point.y
@@ -513,7 +507,7 @@ function newCanvas () {

      container = thisObject.panelsSpace.getContainer(point)

-      if (container !== undefined && container.isDraggeable === true && event.button === 2) {
+      if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) {
        containerBeingDragged = container
        containerDragStarted = true
        containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -527,10 +521,10 @@ function newCanvas () {

           /*  we check if it is over any of the existing containers at the Chart Space. */

-      container = thisObject.chartSpace.getContainer(point)
+      container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)

      if (container !== undefined) {
-        if (container.isDraggeable === true && event.button === 2) {
+        if (container.isDraggeable === true) {
          containerBeingDragged = container
          containerDragStarted = true
          containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -566,10 +560,9 @@ function newCanvas () {
        ignoreNextClick = false
        return
      }
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN

      let container

@@ -648,10 +641,9 @@ function newCanvas () {
  function onMouseMove (event) {
    try {
      /* Processing the event */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN

      if (canvas.chartSpace.viewport !== undefined) {
        canvas.chartSpace.viewport.mousePosition.x = point.x
@@ -695,20 +687,16 @@ function newCanvas () {

  function onMouseOver (event) {
    try {
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+
      if (containerDragStarted === true) {
-        let point = {
-          x: event.pageX,
-          y: event.pageY - CURRENT_TOP_MARGIN
-        }
        containerBeingDragged.eventHandler.raiseEvent('onMouseOver', point)
        return
      }

       /* Then we check who is the current object underneeth the mounse. */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }

      let container

@@ -881,13 +869,18 @@ function newCanvas () {
        browserCanvas.style.cursor = 'grabbing'
        thisObject.eventHandler.raiseEvent('Dragging', undefined)

-        if (containerDragStarted || viewPortBeingDragged) {
+        if (viewPortBeingDragged) {
          let displaceVector = {
            x: dragVector.upX - dragVector.downX,
            y: dragVector.upY - dragVector.downY
          }

-          if (containerBeingDragged !== undefined && containerBeingDragged.insideViewport === true) {
+          if (viewPortBeingDragged) {
+            canvas.chartSpace.viewport.displace(displaceVector)
+          }
+        }
+        if (containerDragStarted) {
+          if (containerBeingDragged !== undefined) {
            let downCopy = {
              x: dragVector.downX,
              y: dragVector.downY
@@ -908,13 +901,7 @@ function newCanvas () {
              x: upNoZoom.x - downNoZoom.x,
              y: upNoZoom.y - downNoZoom.y
            }
-          }

-          if (viewPortBeingDragged) {
-            canvas.chartSpace.viewport.displace(displaceVector)
-          }
-
-          if (containerBeingDragged !== undefined) {
            let moveSucceed = containerBeingDragged.displace(displaceVector)
            if (moveSucceed === false) {
              deactivateDragging(event)
@@ -922,8 +909,7 @@ function newCanvas () {
          }
        }

-               /* Finally we set the starting point of the new dragVector at this current point. */
-
+        /* Finally we set the starting point of the new dragVector at this current point. */
        dragVector.downX = dragVector.upX
        dragVector.downY = dragVector.upY
      }
@@ -0,0 +1,473 @@
+function newEdgeEditor () {
+  const MODULE_NAME = 'Edge Editor'
+
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    isVisible: true,
+    physics: physics,
+    drawForeground: drawForeground,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  const EDGE_SIZE = 6
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+
+  thisObject.container.isDraggeable = true
+  thisObject.container.isClickeable = false
+  thisObject.container.isWheelable = false
+  thisObject.container.detectMouseOver = true
+
+  let buttonUsedForDragging
+  let isMouseOver
+  let whereIsMouseOver = 'outside'
+
+  let coordinateSystem
+
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+  let onDragStartedEventSubscriptionId
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+    mouse = undefined
+  }
+
+  function initialize (pCoordinateSystem) {
+    coordinateSystem = pCoordinateSystem
+
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
+  }
+
+  function onMouseOver (event) {
+    isMouseOver = true
+    mouse = {
+      position: {
+        x: event.x,
+        y: event.y
+      }
+    }
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
+  function onDragStarted (event) {
+    switch (event.buttons) {
+      case 1: {
+        buttonUsedForDragging = 'left mouse button'
+        break
+      }
+      case 2: {
+        buttonUsedForDragging = 'right mouse button'
+        break
+      }
+    }
+  }
+
+  function getContainer (event, purpose) {
+    if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
+      let point = {
+        x: event.x,
+        y: event.y
+      }
+      point = unTransformThisPoint(point, thisObject.container)
+
+      if (point.x <= 0) {
+        whereIsMouseOver = 'left'
+        return thisObject.container
+      }
+
+      if (point.x >= thisObject.container.frame.width) {
+        whereIsMouseOver = 'right'
+        return thisObject.container
+      }
+
+      if (point.y <= 0) {
+        whereIsMouseOver = 'top'
+        return thisObject.container
+      }
+
+      if (point.y >= thisObject.container.frame.height) {
+        whereIsMouseOver = 'bottom'
+        return thisObject.container
+      }
+
+      whereIsMouseOver = 'center'
+      switch (purpose) {
+        case GET_CONTAINER_PURPOSE.MOUSE_OVER:
+          return // We will let the Time Machine to handle this situation.
+          break
+        case GET_CONTAINER_PURPOSE.DRAGGING:
+          return thisObject.container
+          break
+      }
+    }
+  }
+
+  function physics () {
+    if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
+
+    let dragVector = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    /* Calculating the Direct Position, that will be needed to manipulate the coordinate system */
+    thisObject.container.frame.position.x = 0 + dragVector.x
+    thisObject.container.frame.position.y = 0 + dragVector.y
+
+    let directPositionA = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    directPositionA = transformThisPoint(directPositionA, thisObject.container)
+
+    thisObject.container.frame.position.x = 0 + dragVector.x / 2
+    thisObject.container.frame.position.y = 0 + dragVector.y / 2
+
+    let directPositionB = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    directPositionB = transformThisPoint(directPositionB, thisObject.container)
+
+    /* Calculating the Inverted Position, that will be needed to manipulate the coordinate system */
+    thisObject.container.frame.position.x = 0 - dragVector.x
+    thisObject.container.frame.position.y = 0 - dragVector.y
+
+    let invertedPositionA = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    invertedPositionA = transformThisPoint(invertedPositionA, thisObject.container)
+
+    /* Calculating the Inverted Position, that will be needed to manipulate the coordinate system */
+    thisObject.container.frame.position.x = 0 - dragVector.x / 2
+    thisObject.container.frame.position.y = 0 - dragVector.y / 2
+
+    let invertedPositionB = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    invertedPositionB = transformThisPoint(invertedPositionB, thisObject.container)
+
+    /* Finally we reset this */
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    const MIN_WIDTH = 100
+    const MIN_HEIGHT = 50
+
+    switch (whereIsMouseOver) {
+      case 'center': {
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */
+            thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
+            thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
+            break
+          }
+          case 'right mouse button': {
+            let newMinDate = getDateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
+            let newMaxRate = getRateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
+            let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
+            let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
+            coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+            coordinateSystem.max.y = newMaxRate
+            coordinateSystem.recalculateScale()
+          }
+        }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
+        break
+      }
+      case 'top' : {
+        if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT) {
+          return
+        }
+        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - dragVector.y
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMaxRate = getRateFromPoint(directPositionB, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.max.y = newMaxRate
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        break
+      }
+      case 'bottom' : {
+        if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT) {
+          return
+        }
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMaxRate = getRateFromPoint(directPositionA, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.min.y = coordinateSystem.min.y - (coordinateSystem.max.y - newMaxRate)
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        break
+      }
+      case 'left' : {
+        if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH) {
+          return
+        }
+        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - dragVector.x
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMinDate = getDateFromPoint(directPositionA, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            let newMinDate = getDateFromPoint(directPositionB, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        break
+      }
+      case 'right' : {
+        if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH) {
+          return
+        }
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
+
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMinDate = getDateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
+            let xDifferenceMaxMin = coordinateSystem.min.x - newMinDate.valueOf()
+            coordinateSystem.max.x = coordinateSystem.max.x + xDifferenceMaxMin
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
+        break
+      }
+    }
+  }
+
+  function drawForeground () {
+    let MARGIN = 1
+    let edgeSize
+    let lineWidth
+
+    if (whereIsMouseOver === 'outside' || isMouseOver === false) {
+      edgeSize = EDGE_SIZE / 2
+      lineWidth = 0.1
+    } else {
+      edgeSize = EDGE_SIZE
+      lineWidth = 0.5
+    }
+
+    const OPACITY = 1
+
+    pointA1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointA2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointA3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointA4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointB1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointB2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointB3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointB4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointA1 = transformThisPoint(pointA1, thisObject.container)
+    pointA2 = transformThisPoint(pointA2, thisObject.container)
+    pointA3 = transformThisPoint(pointA3, thisObject.container)
+    pointA4 = transformThisPoint(pointA4, thisObject.container)
+
+    pointB1 = transformThisPoint(pointB1, thisObject.container)
+    pointB2 = transformThisPoint(pointB2, thisObject.container)
+    pointB3 = transformThisPoint(pointB3, thisObject.container)
+    pointB4 = transformThisPoint(pointB4, thisObject.container)
+
+    pointA1 = {
+      x: pointA1.x - MARGIN,
+      y: pointA1.y - MARGIN
+    }
+
+    pointA2 = {
+      x: pointA2.x + MARGIN,
+      y: pointA2.y - MARGIN
+    }
+
+    pointA3 = {
+      x: pointA3.x + MARGIN,
+      y: pointA3.y + MARGIN
+    }
+
+    pointA4 = {
+      x: pointA4.x - MARGIN,
+      y: pointA4.y + MARGIN
+    }
+
+    pointB1 = {
+      x: pointB1.x - edgeSize,
+      y: pointB1.y - edgeSize
+    }
+
+    pointB2 = {
+      x: pointB2.x + edgeSize,
+      y: pointB2.y - edgeSize
+    }
+
+    pointB3 = {
+      x: pointB3.x + edgeSize,
+      y: pointB3.y + edgeSize
+    }
+
+    pointB4 = {
+      x: pointB4.x - edgeSize,
+      y: pointB4.y + edgeSize
+    }
+
+    browserCanvasContext.setLineDash([0, 0])
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('top')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('right')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('bottom')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('left')
+
+    function drawEdge (edgeType) {
+      if (whereIsMouseOver === edgeType && isMouseOver === true) {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+      } else {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+      }
+      browserCanvasContext.fill()
+      browserCanvasContext.stroke()
+    }
+  }
+}
@@ -21,6 +21,7 @@ function newTimeMachine () {
    timeScale: undefined,
    rateScale: undefined,
    payload: undefined,
+    edgeEditor: undefined,
    timelineCharts: [],
    fitFunction: fitFunction,
    physics: physics,
@@ -63,7 +64,7 @@ function newTimeMachine () {
    thisObject.container = newContainer()
    thisObject.container.initialize(MODULE_NAME)
    thisObject.container.fitFunction = thisObject.fitFunction
-    thisObject.container.isDraggeable = true
+    thisObject.container.isDraggeable = false
    thisObject.container.insideViewport = true
    thisObject.container.detectMouseOver = true

@@ -101,6 +102,7 @@ function newTimeMachine () {
    thisObject.container.finalize()
    thisObject.container = undefined
    thisObject.payload = undefined
+    thisObject.edgeEditor = undefined

    mouse = undefined
    timelineChartsMap = undefined
@@ -149,6 +151,10 @@ function newTimeMachine () {
    onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
    onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)

+    thisObject.edgeEditor = newEdgeEditor()
+    thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
+    thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true, true, true)
+
    callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
  }

@@ -196,11 +202,11 @@ function newTimeMachine () {
      if (event.isUserAction === true) {
        let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
        let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
+        // thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
        recalculateCoordinateSystem()
        moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, false, true, event.mousePosition)
      } else {
-        thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
+        // thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
        recalculateCoordinateSystem()
      }
      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -224,11 +230,11 @@ function newTimeMachine () {
        let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
        let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)

-        thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
+        // thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
        recalculateCoordinateSystem()
        moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, true, false, event.mousePosition)
      } else {
-        thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
+        // thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
        recalculateCoordinateSystem()
      }
      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -307,8 +313,15 @@ function newTimeMachine () {
      }
    }

-    if (thisObject.container.frame.isThisPointHere(point) === true) {
-      return thisObject.container
+    container = thisObject.edgeEditor.getContainer(point, purpose)
+    if (container !== undefined) {
+      return container
+    } else {
+      if (thisObject.container.isForThisPurpose(purpose)) {
+        if (thisObject.container.frame.isThisPointHere(point) === true) {
+          return thisObject.container
+        }
+      }
    }
  }

@@ -382,6 +395,8 @@ function newTimeMachine () {
  }

  function physics () {
+    thisObject.edgeEditor.physics()
+
    saveFrame(thisObject.payload, thisObject.container.frame)
    if (thisObject.container.frame.isInViewPort()) {
      childrenPhysics()
@@ -571,14 +586,8 @@ function newTimeMachine () {
        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
      }

-      let style = {
-        color: UI_COLOR.BLACK,
-        opacity: 1,
-        lineWidth: 1,
-        lineDash: [1, 3]
-      }
-      thisObject.container.frame.draw(false, true, false, thisObject.fitFunction, style)
      drawLabel()
+      thisObject.edgeEditor.drawForeground()
    }
  }

@@ -160,11 +160,13 @@ function newFrame () {
    return point
  }

-  function isThisPointHere (point, outsideViewPort, dontTransform) {
- // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+  function isThisPointHere (point, outsideViewPort, dontTransform, padding) {
+    // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+    // The padding is a distance to the borders of the container. Can be either negative (outside, to increase the cointainer size) or positive (inside to decrease the cointainer size)
+
+    if (padding === undefined) { padding = 0 }

       /* We need not to modify the point received, so me make a copy of it. */
-
    let checkPoint = {
      x: point.x,
      y: point.y
@@ -193,7 +195,7 @@ function newFrame () {
    }

    if (thisObject.type === 'Rectangle') {
-      if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) {
+      if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width - padding || checkPoint.y > thisObject.height - padding) {
        return false
      } else {
        return true
@@ -203,7 +203,8 @@ function newTimeFrameScale () {
    thisObject.isVisible = true
    thisObject.payload.isVisible = true
    if (thisObject.container.frame.position.y + thisObject.container.frame.height > bottonCorner.y ||
-        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y) {
+        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y ||
+      thisObject.container.frame.position.x < upCorner.x) {
      thisObject.isVisible = false
      thisObject.payload.isVisible = false
    }
@@ -269,7 +269,8 @@ function newTimeScale () {

    thisObject.isVisible = true
    if (thisObject.container.frame.position.y + thisObject.container.frame.height * 4 > bottonCorner.y ||
-        thisObject.container.frame.position.y < upCorner.y) {
+        thisObject.container.frame.position.y < upCorner.y ||
+      thisObject.container.frame.position.x < upCorner.x) {
      thisObject.isVisible = false
    }
  }
@@ -405,6 +406,8 @@ function newTimeScale () {
      browserCanvasContext.lineTo(point8.x, point8.y)
      browserCanvasContext.lineTo(point9.x, point9.y)

+      browserCanvasContext.closePath()
+
      browserCanvasContext.lineWidth = LINE_WIDTH
      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
      browserCanvasContext.stroke()
@@ -123,23 +123,25 @@ function newChartSpace () {
      }
    }

-    /* Now we see which is the inner most container that has it */
+    /*
+    Now we see which is the inner most container that has it.
+    In this case we will ask all the time machines even if one of them already returned a matching container.
+    This will help the others know they are not on ofcus
+    */
+    let containerFound
    for (let i = 0; i < thisObject.timeMachines.length; i++) {
      container = thisObject.timeMachines[i].getContainer(point, purpose)
      if (container !== undefined) {
        if (purpose !== undefined) {
-          if (container.isForThisPurpose(purpose)) {
-            if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-              return container
-            }
-          }
+          containerFound = container
        } else {
          if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-            return container
+            containerFound = container
          }
        }
      }
    }
+    if (containerFound !== undefined) { return containerFound }

    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
      return thisObject.container
@@ -87,14 +87,14 @@
         break
       }
       case 'TOP': {
-         thisObject.container.frame.position.y = 0
+         thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
         break
       }
     }
   }

   function toTop () {
-     thisObject.container.frame.position.y = 0
+     thisObject.container.frame.position.y = COCKPIT_SPACE_HEIGHT
   }

   function toBottom () {
@@ -106,14 +106,14 @@
   }

   function moveUp () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y - browserCanvas.height / 10
+     thisObject.container.frame.position.y = thisObject.container.frame.position.y - COCKPIT_SPACE_HEIGHT * 2
     if (thisObject.container.frame.position.y < 0) {
       thisObject.container.frame.position.y = 0
     }
   }

   function moveDown () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y + browserCanvas.height / 10
+     thisObject.container.frame.position.y = thisObject.container.frame.position.y + COCKPIT_SPACE_HEIGHT * 2
     if (thisObject.container.frame.position.y > browserCanvas.height - COCKPIT_SPACE_HEIGHT) {
       thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
     }
@@ -148,8 +148,8 @@
       canvas.floatingSpace.makeVisible()
     }

-     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) {
-       thisObject.container.frame.position.y = 0
+     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100 + TOP_SPACE_HEIGHT) {
+       thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
       thisObject.status = 'TOP'
       canvas.panelsSpace.visible = false
     } else {
@@ -77,9 +77,9 @@ function newTopSpace () {
    browserCanvasContext.beginPath()
    browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
    if (areWeRecording === true) {
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
-    } else {
      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
+    } else {
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
    }
    browserCanvasContext.closePath()
    browserCanvasContext.fill()
@@ -71,12 +71,9 @@ function newSplashScreen () {
        /* Set the background. */

    browserCanvasContext.beginPath()
-
    browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
    browserCanvasContext.closePath()
-
    browserCanvasContext.fill()

    if (canDrawLogo === false) { return }
@@ -100,18 +97,18 @@ function newSplashScreen () {
        /* Second the % of Advance. */

    let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
-    stepsInitializationCounter = stepsInitializationCounter + 5.0
+    stepsInitializationCounter = stepsInitializationCounter + 2.0

    if (stepsInitializationCounter > 99) {
      splashScreenNeeded = false
      stepsInitializationCounter = 99
    }

-    let fontSize = 10
+    let fontSize = 15

    let labelPoint = {
-      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 25,
-      y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 80 + yDisplacement
+      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 22,
+      y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 90 + yDisplacement
    }

    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
@@ -123,13 +120,13 @@ function newSplashScreen () {

        /* Algo Bots Competitions Sub Title */

-    fontSize = 15
+    fontSize = 35

    title = 'Beta'

    titlePoint = {
      x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,
-      y: thisObject.container.frame.height / 2 - fontSize * 2 + 80 + yDisplacement
+      y: thisObject.container.frame.height / 2 + 70 + yDisplacement
    }

    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
@@ -34,6 +34,7 @@ function newAppLoader() {
                'AppSchema.js',
                'MQService',

+                'ChartsSpace/EdgeEditor.js',
                'ChartsSpace/ChartUtilities.js',
                'ChartsSpace/PlottersManager.js',
                'ChartsSpace/TimelineChart.js',
@@ -1,6 +1,6 @@
 trading_system: "A trading system is a framework handling the low-level logic that serves to structure the processes and methods used to implement and deploy trading strategies."

-parameters: "Parameters are user definitions over several concepts. Parameters defined at the level of a session take precedence over parameters defined at the level of the trading system, which act as a fallback instance. The behavior of parameters may vary depending on the type of session."
+parameters: "Parameters are user definitions over several concepts that influence the behavior of trading sessions and improve the quality of simulations. When defined at the level of a session, parameters take precedence over those defined at the level of the trading system, which acts as a fallback instance."

 base_asset: "In the context of a trading system or a session, the base asset is the asset in the pair on which capital stands when out of a trade."

@@ -1,6 +1,6 @@
 trading_system: "A trading system is a framework handling the low-level logic that serves to structure the processes and methods used to implement and deploy trading strategies."

-parameters: "Parameters are user definitions over several concepts. Parameters defined at the level of a session take precedence over parameters defined at the level of the trading system, which act as a fallback instance. The behavior of parameters may vary depending on the type of session."
+parameters: "Parameters are user definitions over several concepts that influence the behavior of trading sessions and improve the quality of simulations. When defined at the level of a session, parameters take precedence over those defined at the level of the trading system, which acts as a fallback instance."

 base_asset: "In the context of a trading system or a session, the base asset is the asset in the pair on which capital stands when out of a trade."

@@ -0,0 +1,100 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "XXXXXXXXXXXXXXXX" %}
+{% assign definition = site.data.charting_space.XXXXXXXXXXXXXXXX %}
+{% assign preposition = "XXXXXXXXXXXXXXXX" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,100 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Charting Space" %}
+{% assign definition = site.data.charting_space.charting_space %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+There is only one Charting Space hierarchy, thus all charts are configured here. As is common throughout the system, different concepts and elements of the charts such as the scales, data layers and so on, are represented by nodes in the hierarchy. The system allows great flexibility on how to visualize information over the charts by adding, configuring, and arranging these nodes.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,111 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Layer" %}
+{% assign definition = site.data.charting_space.layer %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+To set up a layer, you need to establish a <a href="suite-references.html" data-toggle="tooltip" data-original-title="{{site.data.concepts.reference}}">reference</a> with the <a href="suite-network-hierarchy.html#data-product" data-toggle="tooltip" data-original-title="{{site.data.network.data_product}}">data product</a> of your choice.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a layer, select *Add Layer* on the layer manager node menu. 
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+Select *Configure Layer* on the menu to access the configuration.
+
+```json
+{
+    "status":"on", 
+    "showPanels":true
+}
+```
+
+* ```status``` may be *on* or *off* and refers to the layer being visible or not on the charts.
+
+* ```showPanels``` may be *true* or *false*; *true* shows the plotter panel that may be associated with the data product as per the plotter module definitions; *false* makes panels invisible.
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,100 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Layers Manager" %}
+{% assign definition = site.data.charting_space.layers_manager %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+In other words, you use the layers manager node to configure which data products you wish to be made available for visualization purposes on the charts, in particular, on a specific timeline chart to which the layers manager node is attached to.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a layers manager, select *Add Layers Manager* on the preferred timeline chart node menu.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,129 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Rate Scale" %}
+{% assign definition = site.data.charting_space.rate_scale %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+Rate scales may exist both at the level of a time machine and at the level of a timeline chart, each affecting the corresponding concept.
+
+When set at the level of the time machine, the scale setting affects all charts within the time machine. When set at the level of the timeline chart, the setting overrides the rate scale at the time machine level. This allows having multiple charts on the same time machine, each with a different rate scales.
+
+* **Scale Value:** When the scale is set to zero, the vertical span of the time machine or the timeline chart is the smallest possible. When the scale is set to 100, it is the largest possible. In other words, the charts are compressed on the vertical axis with low scale numbers and expanded as the scale increases.
+
+* **Scale Offset:** The offset is a property of the rate scale by which the scale may be shifted upwards or downwards. As a result, charts aligned in the vertical axis&mdash;synchronized in datetime by a shared time machine&mdash;may be put one above the other.
+
+* **Scale Minimum and Maximum:** The rate scale remains the same at all times unless you change it. This means that&mdash;unlike in other platforms&mdash;the rate scale does not adjust dynamically depending on the information on the screen. This is a design choice so that rates may be easily comparable along the datetime span of the market.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+You may set a scale value from within the charts by placing the mouse pointer over the corresponding time machine or timeline chart rate box and scrolling the mouse wheel. Add the <kbd>Shift</kbd> key to affect the offset.
+
+{% include tip.html content="Pressing the mouse wheel while scrolling accelerates the process." %}
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a rate scale, select *Add Rate Scale* on the time machine or the timeline chart node menu.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+Select *Configure Rate Scale* on the menu to access the configuration.
+
+```json
+{
+    "scale":"50",
+    "offset":0,
+    "minValue":0,
+    "maxValue":25000
+    }
+```
+
+* ```minValue``` sets the value for the origin of the y-axis, that is, the rate scale. Usually, this value would be zero, but it doesn't need to be zero, as it is configurable.
+
+* ```maxValue``` may be set to any positive number.
+
+* ```scale``` is a numerical value between 0 and 100. 
+
+* ```offset``` is a numerical value which may be positive or negative, with no specific minimum or maximum. 
+
+{% include note.html content="The values for scale and offset may be entered via the designer and the charts. Both input methods are synchronized and the resulting values are stored in the node." %}
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,114 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Time Frame Scale" %}
+{% assign definition = site.data.charting_space.time_frame_scale %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+When the time frame scale is set at the level of the time machine, the scale setting affects all charts within the time machine. When set at the level of the timeline chart, the setting overrides the time frame scale at the time machine level. This allows comparing charts in different time frames, but still synchronized at the datetime level.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+You may set a time frame value from within the charts by placing the mouse pointer over the corresponding time machine or timeline chart time frame box and scrolling the mouse wheel.
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a time frame scale, select *Add Time Frame Scale* on the time machine or the timeline chart node menu.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+Select *Configure Frame Scale* on the menu to access the configuration.
+
+```json
+{
+    "value":"06-hs"
+}
+```
+
+* ```value``` can be any of the time frames supported by the system:
+
+  * ```01-min```, ```02-min```, ```03-min```, ```04-min```, ```05-min```, ```10-min```, ```15-min```, ```20-min```, ```30-min```, ```40-min```, and ```45-min```.
+
+  * ```01-hs```, ```02-hs```, ```03-hs```, ```04-hs```, ```06-hs```, ```08-hs```, ```12-hs```, and ```24-hs```.
+
+  {% include note.html content="The values entered via the designer and the charts are synchronized and stored in the node." %}
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Time Machine" %}
+{% assign definition = site.data.charting_space.time_machine %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+Think of a time machine as an aide that helps you keep any number of pieces of information synchronized on the same time scale. Every data structure that you set up within the same time machine, will always be synchronized in time. Put in other words, the open and closing datetime of each dataset will always be aligned on the vertical axis.
+
+On the other hand, when you arrange charts on different time machines, they are completely independent of one another.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a time machine, select *Add Time Machine* on the Charting Space node menu.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,112 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Time Scale" %}
+{% assign definition = site.data.charting_space.time_scale %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+The time scale is represented by a numerical value between 0 and 100. When the scale is set to zero, the horizontal span of the time machine and charts within it is the smallest possible. When the scale is set to 100, it is the largest possible. In other words, the charts are compressed on the horizontal axis with low scale numbers and expanded as the scale increases.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+You may set a scale value from within the charts by placing the mouse pointer over the corresponding time machine datetime box and scrolling the mouse wheel.
+
+{% include tip.html content="Pressing the mouse wheel while scrolling accelerates the process." %}
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a time scale, select *Add Time Scale* on the time machine node menu.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+Select *Configure Time Scale* on the menu to access the configuration.
+
+```json
+{
+    "scale":"0"
+}
+```
+
+* ```scale``` is a numerical value between 0 and 100. 
+
+{% include note.html content="The value may be entered via the designer and the charts. Both input methods are synchronized and the resulting values are stored in the node." %}
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,104 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Timeline Chart" %}
+{% assign definition = site.data.charting_space.timeline_chart %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+In other words, a timeline chart is a set of information to be displayed over a timeline. The information may include candles&mdash;the main and foremost resource&mdash;as well as any other indicator, study or&mdash;in general&mdash;data product that may be available.
+
+You may add as many charts as you wish. Charts within the same time machine are synchronized in the y-axis, that is, at the datetime level. Charts in different time machines are independent of each other concerning the datetime. In either case, you may also add rate scales and time frame scales at the timeline charts level.
+
+The information that each timeline chart makes available on the screen is given by the layers set up in the corresponding layers manager.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a timeline chart, select *Add Timeline Chart* on the preferred time machine node menu.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,106 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Viewport" %}
+{% assign definition = site.data.charting_space.viewport %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+At this point, the system supports one viewport only. When you navigate through the charts, panning, zooming or moving elements around, what you are doing is panning and zooming on the viewport. That is, you are not moving the charts, but the space that contains them.
+
+Think of the viewport as a huge drawing board. You can have lots of information plotted on different parts of the board, so you move the viewport around and zoom in to focus on specific bits of information.
+
+When you zoom out, you are bringing more information in focus. Because information is handled dynamically, reading data from files, interpreting it, and drawing the corresponding visual elements on the screen in real-time, zooming out or&mdash;in general&mdash;bringing lots of information in focus may slow your system down. The information that is out of focus, that is, out of the visible screen, is not processed. 
+
+The concept of the viewport allows having multiple charts configured all at once, so that you may consult different exchanges, different markets, or different technical studies on demand, simply by moving around and zooming in or out on the viewport. You may put any of those elements side by side, or even superimpose them to study market flows, search for arbitrage opportunities, or simply keep them in sight when you analyze particular market situations.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.charts != "" %}
+
+{{include.charts}} Controlling the {{title}} from the Charts
+
+<!--------------------------------------------- CHARTS starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CHARTS ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,110 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Asset" %}
+{% assign definition = site.data.crypto_ecosystem.asset %}
+{% assign preposition = "an" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add an asset, select *Add Asset* on the crypto exchange assets node menu. 
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+Select *Configure Asset* on the menu to access the configuration.
+
+```json
+{ 
+"codeName": "BTC"
+}
+```
+
+* codeName is the ticker of the asset as listed by the exchange (*i.e.:* BTC, BTH, ETH, LTC, BNB, USDT, USD, etc.)
+
+{% include note.html content="Consult the list of supported assets for the list of possible values for the ```codeName``` field. When a configured asset is within the system's icon catalog, the standard asset icon is replaced with the logotype of the corresponding asset." %}
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Crypto Ecosystem" %}
+{% assign definition = site.data.crypto_ecosystem.crypto_ecosystem %}
+{% assign preposition = "" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+The crypto ecosystem is a hierarchy that contains definitions regarding information obtained from third-parties, including exchanges and their markets, as well as accounts of users with those third parties.
+
+There is only one crypto ecosystem hierarchy. You will use it to define which exchanges and which markets you wish to work with, as well as the details of your accounts with those exchanges. 
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,110 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Crypto Exchange" %}
+{% assign definition = site.data.crypto_ecosystem.crypto_exchange %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a crypto exchange, select *Add Crypto Exchange* on the crypto exchanges node menu. The crypto exchange node is created along with the rest of the basic structure of nodes required to define assets, markets and user accounts.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+Select *Configure Crypto Exchange* on the menu to access the configuration.
+
+```json
+{ 
+"codeName": "Poloniex"
+}
+```
+
+* codeName is the name of the exchange as handled in the code of the system. 
+
+{% include note.html content="Consult the list of supported exchanges for the list of possible values for the ```codeName``` field. When a supported exchange is successfully configured, the standard crypto exchange icon is replaced with the logotype of the corresponding exchange." %}
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Crypto Exchanges" %}
+{% assign definition = site.data.crypto_ecosystem.crypto_exchanges %}
+{% assign preposition = "" %}
+{% assign plural = "" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a crypto exchanges node, select *Add Crypto Exchanges* on the crypto ecosystem node menu. 
+
+{% include note.html content="Only one crypto exchanges node may exist on the hierarchy." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,100 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Exchange Account Asset" %}
+{% assign definition = site.data.crypto_ecosystem.exchange_account_asset %}
+{% assign preposition = "an" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,113 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Exchange Account Key" %}
+{% assign definition = site.data.crypto_ecosystem.exchange_account_key %}
+{% assign preposition = "an" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add an exchange account key, select *Add Key* on the user keys node menu.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+Select *Configure Key* on the menu to access the configuration.
+
+```json
+{ 
+"codeName": "Paste your exchange API name or label here",
+"secret": "Paste your exchange API secret key here."
+}
+```
+
+* ```codeName``` is the name or label of your key, as supplied by the exchange.
+
+* ```secret``` is the *secret key* as supplied by the exchange.
+
+{% include warning.html content="To keep your exchange keys safe, never share data structures you may download from the system, as downloads contain all information in the data structure, including personal information such as exchange keys. Use the share option on the menu instead. The share option strips sensitive information and outputs a file that is safe for sharing." %}
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Exchange Accounts" %}
+{% assign definition = site.data.crypto_ecosystem.exchange_accounts %}
+{% assign preposition = "an" %}
+{% assign plural = "" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add an exchange accounts node, select *Add Exchange Account* on the crypto exchange node menu. The exchange account node is created along with the basic structure of nodes used to define keys and user assets with the exchange.
+
+{% include note.html content="Only one exchange accounts node may exist on each exchange." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Exchange Assets" %}
+{% assign definition = site.data.crypto_ecosystem.exchange_assets %}
+{% assign preposition = "an" %}
+{% assign plural = "" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add an exchange assets node, select *Add Exchange Assets* on the crypto exchanges node menu. The exchange assets node is created along with a first asset.
+
+{% include note.html content="Only one exchange assets node may exist on each exchange." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Exchange Markets" %}
+{% assign definition = site.data.crypto_ecosystem.exchange_markets %}
+{% assign preposition = "an" %}
+{% assign plural = "" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add an exchange markets node, select *Add Exchange Markets* on the crypto exchange node menu. The exchange markets node is created along with the basic structure of nodes to define the first market.
+
+{% include note.html content="Only one exchange assets node may exist on each exchange." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Market Base Asset" %}
+{% assign definition = site.data.crypto_ecosystem.market_base_asset %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+A market base asset must reference an asset defined under the exchange assets node.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a market base asset, select *Add Market Base Asset* on the market node menu. 
+
+{% include note.html content="Remember to establish a reference with an asset defined under the exchange assets node." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Market Quoted Asset" %}
+{% assign definition = site.data.crypto_ecosystem.market_quoted_asset %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+A market quoted asset must reference an asset defined under the exchange assets node.
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a market quoted asset, select *Add Market Quoted Asset* on the market node menu. 
+
+{% include note.html content="Remember to establish a reference with an asset defined under the exchange assets node." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,100 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "Market" %}
+{% assign definition = site.data.crypto_ecosystem.market %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+{% include important.html content="Only markets that are effectively listed on the exchange may be configured and used with the system. Check with the exchange and make sure you understand what tickers they are using, which is the base asset and which the quoted asset on the listed markets." %}
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a market, select *Add Market* on the crypto exchange node menu. The market node is created along with the basic structure of nodes used to define the market.
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "User Account" %}
+{% assign definition = site.data.crypto_ecosystem.user_account %}
+{% assign preposition = "a" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add a user account, select *Add User Account* on the exchange accounts node menu. The user account node is created along with the basic structure of nodes used to define keys and user assets with the exchange.
+
+{% include tip.html content="You may add and administer as many user accounts as you wish." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "User Assets" %}
+{% assign definition = site.data.crypto_ecosystem.user_assets %}
+{% assign preposition = "a" %}
+{% assign plural = "" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add user assets node, select *Add User Assets* on the user account node menu. The user assets node is created along with the first exchange account asset.
+
+{% include note.html content="Only one user assets node may exist under a user account." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -0,0 +1,102 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "User Keys" %}
+{% assign definition = site.data.crypto_ecosystem.user_keys %}
+{% assign preposition = "" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+To add user keys node, select *Add User Keys* on the user account node menu. The user keys node is created along with the first exchange account key.
+
+{% include note.html content="Only one user keys node may exist under a user account." %}
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -1,7 +1,7 @@
 <!--------------------------------------------- TITLE AND DEFINITION starts -->

 {% assign title = "XXXXXXXXXXXXXXXX" %}
-{% assign definition = site.data.network.XXXXXXXXXXXXXXXX %}
+{% assign definition = site.data.crypto_ecosystem.XXXXXXXXXXXXXXXX %}
 {% assign preposition = "XXXXXXXXXXXXXXXX" %}
 {% assign plural = "s" %}

@@ -0,0 +1,100 @@
+<!--------------------------------------------- TITLE AND DEFINITION starts -->
+
+{% assign title = "XXXXXXXXXXXXXXXX" %}
+{% assign definition = site.data.crypto_ecosystem.XXXXXXXXXXXXXXXX %}
+{% assign preposition = "XXXXXXXXXXXXXXXX" %}
+{% assign plural = "s" %}
+
+<!--------------------------------------------- TITLE AND DEFINITION ends -->
+
+{% if include.heading != "" %}
+{{include.heading}} {{title}}
+{% endif %}
+
+{% if include.icon != "no" %} 
+
+{% if include.table == "yes" and include.icon != "no" %}
+<table class="definitionTable"><tr><td>
+{% endif %}
+
+<img src='images/icons/{{include.icon}}{{ title | downcase | replace: " ", "-" }}.png' />
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td><td>
+{% endif %}
+
+{% endif %}
+
+{% if include.definition == "bold" %}
+
+<strong>{{ definition }}</strong>
+
+{% else %}
+
+{{ definition }}
+
+{% endif %}
+
+{% if include.table == "yes" and include.icon != "no" %}
+</td></tr></table>
+{% endif %}
+
+{% if include.more == "yes" and include.content == "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.content != "no" %}
+
+<!--------------------------------------------- CONTENT starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONTENT ends -->
+
+{% endif %}
+
+{% if include.more == "yes" and include.content != "more" %}
+<details><summary class="nobr">Click to learn more about {{ title | downcase }}{{plural}}
+</summary>
+{% endif %}
+
+{% if include.adding != "" %}
+
+{{include.adding}} Adding {{preposition}} {{title}}
+
+<!--------------------------------------------- ADDING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- ADDING ends -->
+
+{% endif %}
+
+{% if include.configuring != "" %}
+
+{{include.configuring}} Configuring the {{title}}
+
+<!--------------------------------------------- CONFIGURING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- CONFIGURING ends -->
+
+{% endif %}
+
+{% if include.starting != "" %}
+
+{{include.starting}} Starting {{preposition}} {{title}}
+
+<!--------------------------------------------- STARTING starts -->
+
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+<!--------------------------------------------- STARTING ends -->
+
+{% endif %}
+
+{% if include.more == "yes" %}
+</details>
+{% endif %}
@@ -48,7 +48,9 @@

 <!--------------------------------------------- CONTENT starts -->

-Each testing session has its own set of parameters. This allows you to configure different trading sessions with different parameters, and go back and forth between them as required. For instance, you may have different backtesting sessions with different date ranges, different exchange fees or different slippage settings.
+The behavior of parameters may vary depending on the type of session.
+
+Each testing session has its own set of parameters. This allows you to configure different trading sessions with different parameters, and go back and forth between them as required. For instance, you may have different backtesting sessions with different date ranges, different exchange fees or different slippage settings to account for different possible scenarios.

 <!--------------------------------------------- CONTENT ends -->

@@ -186,235 +186,20 @@ toc: false



+{% include /charting_space/charting-space.md heading="##" icon="150-" adding="" configuring="" charts="" content="yes" definition="bold" table="yes" more="no"%}

-## Charting Space
+{% include /charting_space/viewport.md heading="##" icon="150-" adding="" configuring="" charts="" content="yes" definition="bold" table="yes" more="no"%}

-<img src='images/icons/150-charting-space.png' />
+{% include /charting_space/time-machine.md heading="##" icon="150-" adding="####" configuring="" charts="" content="yes" definition="bold" table="yes" more="no"%}

-**{{site.data.charting_space.charting_space}}**
+{% include /charting_space/time-scale.md heading="##" icon="150-" adding="####" configuring="####" charts="####" content="yes" definition="bold" table="yes" more="no"%}

-There is only one Charting Space hierarchy, thus all charts are configured here. As is common throughout the system, different concepts and elements of the charts such as the scales, data layers and so on, are represented by nodes in the hierarchy. The system allows great flexibility on how to visualize information over the charts by adding, configuring, and arranging these nodes.
+{% include /charting_space/rate-scale.md heading="##" icon="150-" adding="####" configuring="####" charts="####" content="yes" definition="bold" table="yes" more="no"%}

+{% include /charting_space/time-frame-scale.md heading="##" icon="150-" adding="####" configuring="####" charts="####" content="yes" definition="bold" table="yes" more="no"%}

+{% include /charting_space/timeline-chart.md heading="##" icon="150-" adding="####" configuring="" charts="" content="yes" definition="bold" table="yes" more="no"%}

+{% include /charting_space/layers-manager.md heading="##" icon="150-" adding="####" configuring="" charts="" content="yes" definition="bold" table="yes" more="no"%}

-
-## Viewport
-
-<img src='images/icons/150-viewport.png' />
-
-**{{site.data.charting_space.viewport}}**
-
-At this point, the system supports one viewport only. When you navigate through the charts, panning, zooming or moving elements around, what you are doing is panning and zooming on the viewport. That is, you are not moving the charts, but the space that contains them.
-
-Think of the viewport as a huge drawing board. You can have lots of information plotted on different parts of the board, so you move the viewport around and zoom in to focus on specific bits of information.
-
-When you zoom out, you are bringing more information in focus. Because information is handled dynamically, reading data from files, interpreting it, and drawing the corresponding visual elements on the screen in real-time, zooming out or&mdash;in general&mdash;bringing lots of information in focus may slow your system down. The information that is out of focus, that is, out of the visible screen, is not processed. 
-
-The concept of the viewport allows having multiple charts configured all at once, so that you may consult different exchanges, different markets, or different technical studies on demand, simply by moving around and zooming in or out on the viewport. You may put any of those elements side by side, or even superimpose them to study market flows, search for arbitrage opportunities, or simply keep them in sight when you analyze particular market situations.
-
-
-
-
-
-## Time Machine
-
-<img src='images/icons/150-time-machine.png' />
-
-**{{site.data.charting_space.time_machine}}**
-
-Think of a time machine as an aide that helps you keep any number of pieces of information synchronized on the same time scale. Every data structure that you set up within the same time machine, will always be synchronized in time. Put in other words, the open and closing datetime of each dataset will always be aligned on the vertical axis.
-
-On the other hand, when you arrange charts on different time machines, they are completely independent of one another.
-
-### Adding a Time Machine
-
-To add a time machine, select *Add Time Machine* on the Charting Space node menu.
-
-
-
-
-
-## Time Scale
-
-<img src='images/icons/150-time-scale.png' />
-
-**{{site.data.charting_space.time_scale}}**
-
-### Adding a Time Scale
-
-To add a time scale, select *Add Time Scale* on the time machine node menu.
-
-### Scale Value
-
-The time scale is represented by a numerical value between 0 and 100. When the scale is set to zero, the horizontal span of the time machine and charts within it is the smallest possible. When the scale is set to 100, it is the largest possible. In other words, the charts are compressed on the horizontal axis with low scale numbers and expanded as the scale increases.
-
-### Setting a Time Scale
-
-You may set a scale value from within the charts by placing the mouse pointer over the corresponding time machine datetime box and scrolling the mouse wheel.
-
-{% include tip.html content="Pressing the mouse wheel while scrolling accelerates the process." %}
-
-
-
-You may also set a scale value from within the designer by selecting *Configure Time Scale* on the time scale node menu and editing the corresponding configuration.
-
-```json
-{"scale":"0"}
-```
-
-{% include note.html content="The values entered via the designer and the charts are synchronized and stored in the node." %}
-
-
-
-
-
-## Rate Scale
-
-<img src='images/icons/150-rate-scale.png' />
-
-**{{site.data.charting_space.rate_scale}}**
-
-Rate scales may exist both at the level of a time machine and at the level of a timeline chart, each affecting the corresponding concept.
-
-When set at the level of the time machine, the scale setting affects all charts within the time machine. When set at the level of the timeline chart, the setting overrides the rate scale at the time machine level. This allows having multiple charts on the same time machine, each with a different rate scales.
-
-### Adding a Rate Scale
-
-To add a rate scale, select *Add Rate Scale* on the time machine or the timeline chart node menu.
-
-### Rate Scale Value
-
-The rate scale is represented by a numerical value between 0 and 100. When the scale is set to zero, the vertical span of the time machine or the timeline chart is the smallest possible. When the scale is set to 100, it is the largest possible. In other words, the charts are compressed on the vertical axis with low scale numbers and expanded as the scale increases.
-
-### Rate Scale Minimum and Maximum
-
-The rate scale remains the same at all times unless you change it. This means that&mdashunlike in other platforms&mdash;the rate scale does not adjust dynamically depending on the information on the screen. This is a design choice so that rates may be easily comparable along the datetime span of the market.
-
-### Offset Value
-
-The offset is a property of the rate scale by which the scale may be shifted upwards or downwards. As a result, charts aligned in the vertical axis&mdash;synchronized in datetime by a shared time machine&mdash;may be put one above the other. The offset value is a numerical value which may be positive or negative, with no specific minimum or maximum.
-
-### Setting Rate Scale and Offset Values
-
-You may set a scale value from within the charts by placing the mouse pointer over the corresponding time machine or timeline chart rate box and scrolling the mouse wheel. Add the <kbd>Shift</kbd> key to affect the offset.
-
-{% include tip.html content="Pressing the mouse wheel while scrolling accelerates the process." %}
-
-
-
-You may also set a scale setting, minimum and maximum values for the scale, and offset value from within the designer by selecting *Configure Rate Scale* on the rate scale node menu and editing the configuration.
-
-```json
-{"scale":"50","offset":0,"minValue":0,"maxValue":25000}
-```
-
-* The ```minValue``` sets the value for the origin of the y-axis, that is, the rate scale. Usually, this value would be zero, but it doesn't need to be zero, as it is configurable.
-
-* The ```maxValue``` may be set to any positive number.
-
-{% include note.html content="The values entered via the designer and the charts are synchronized and stored in the node." %}
-
-
-
-
-
-## Time Frame Scale
-
-<img src='images/icons/150-time-frame-scale.png' />
-
-**{{site.data.charting_space.time_frame_scale}}**
-
-When the time frame scale is set at the level of the time machine, the scale setting affects all charts within the time machine. When set at the level of the timeline chart, the setting overrides the time frame scale at the time machine level. This allows comparing charts in different time frames, but still synchronized at the datetime level.
-
-### Adding a Time Frame Scale
-
-To add a time frame scale, select *Add Time Frame Scale* on the time machine or the timeline chart node menu.
-
-### Time Frame Scale Value
-
-The time frame scale value can be any of the time frames supported by the system:
-
-* 1, 2, 3, 4, 5, 10, 15, 20, 30, 40, and 45 minutes
-
-* 1, 2, 3, 4, 6, 8, 12, and 24 hours.
-
-### Setting a Time Frame
-
-You may set a time frame value from within the charts by placing the mouse pointer over the corresponding time machine or timeline chart time frame box and scrolling the mouse wheel.
-
-
-
-You may also set a time frame from within the designer by selecting *Configure Rate Scale* on the rate scale node menu and editing the configuration.
-
-```json
-{"value":"06-hs"}
-```
-
-{% include note.html content="The values entered via the designer and the charts are synchronized and stored in the node." %}
-
-
-
-
-
-## Timeline Chart
-
-<img src='images/icons/150-timeline-chart.png' />
-
-**{{site.data.charting_space.timeline_chart}}**
-
-In other words, a timeline chart is a set of information to be displayed over a timeline. The information may include candles&mdash;the main and foremost resource&mdash;as well as any other indicator, study or&mdash;in general&mdash;data product that may be available.
-
-You may add as many charts as you wish. Charts within the same time machine are synchronized in the y-axis, that is, at the datetime level. Charts in different time machines are independent of each other concerning the datetime. In either case, you may also add rate scales and time frame scales at the timeline charts level.
-
-The information that each timeline chart makes available on the screen is given by the layers set up in the corresponding layers manager.
-
-### Adding a Timeline Chart
-
-To add a timeline chart, select *Add Timeline Chart* on the preferred time machine node menu.
-
-
-
-
-
-## Layers Manager
-
-<img src='images/icons/150-layers-manager.png' />
-
-**{{site.data.charting_space.layers_manager}}**
-
-In other words, you use the layers manager node to configure which data products you wish to be made available for visualization purposes on the charts, in particular, on a specific timeline chart to which the layers manager node is attached to.
-
-### Adding a Layers Manager
-
-To add a layers manager, select *Add Layers Manager* on the preferred timeline chart node menu.
-
-
-
-
-
-## Layer
-
-<img src='images/icons/150-layer.png' />
-
-**{{site.data.charting_space.layer}}**
-
-### Adding Layers
-
-To add a layer, select *Add Layer* on the layer manager node menu. 
-
-### Setting Up Layers
-
-To set up a layer, you need to establish a <a href="suite-references.html" data-toggle="tooltip" data-original-title="{{site.data.concepts.reference}}">reference</a> with the <a href="suite-network-hierarchy.html#data-product" data-toggle="tooltip" data-original-title="{{site.data.network.data_product}}">data product</a> of your choice.
-
-### Configuring Layers
-
-Select *Configure Layer* on the menu to access the configuration.
-
-```json
-{"status":"on", "showPanels":true}
-```
-
-* ```status``` may be *on* or *off* and refers to the layer being visible or not on the charts.
-
-* ```showPanels``` may be *true* or *false*; *true* shows the plotter panel that may be associated with the data product as per the plotter module definitions; *false* makes panels invisible.
+{% include /charting_space/layer.md heading="##" icon="150-" adding="####" configuring="####" charts="" content="yes" definition="bold" table="yes" more="no"%}
@@ -250,276 +250,33 @@ toc: false



+{% include /crypto_ecosystem/crypto-ecosystem.md heading="##" icon="150-" adding="" configuring="" starting="" content="yes" definition="bold" table="yes" more="no"%}

+{% include /crypto_ecosystem/crypto-exchanges.md heading="##" icon="150-" adding="####" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}

-## Crypto Ecosystem
+{% include /crypto_ecosystem/crypto-exchange.md heading="##" icon="150-" adding="####" configuring="####" starting="" content="no" definition="bold" table="yes" more="no"%}

-<img src='images/icons/150-crypto-ecosystem.png' />
+{% include /crypto_ecosystem/exchange-assets.md heading="##" icon="150-" adding="####" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}

-**{{site.data.crypto_ecosystem.crypto_ecosystem}}**
+{% include /crypto_ecosystem/asset.md heading="##" icon="150-" adding="####" configuring="####" starting="" content="no" definition="bold" table="yes" more="no"%}

-The crypto ecosystem is a hierarchy that contains definitions regarding information obtained from third-parties, including exchanges and their markets, as well as accounts of users with those third parties.
+{% include /crypto_ecosystem/exchange-markets.md heading="##" icon="150-" adding="####" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}

-There is only one crypto ecosystem hierarchy. You will use it to define which exchanges and which markets you wish to work with, as well as the details of your accounts with those exchanges. 
+{% include /crypto_ecosystem/market.md heading="##" icon="150-" adding="####" configuring="" starting="" content="yes" definition="bold" table="yes" more="no"%}

+{% include /crypto_ecosystem/market-base-asset.md heading="##" icon="150-" adding="####" configuring="" starting="" content="yes" definition="bold" table="yes" more="no"%}

+{% include /crypto_ecosystem/market-quoted-asset.md heading="##" icon="150-" adding="####" configuring="" starting="" content="yes" definition="bold" table="yes" more="no"%}

+{% include /crypto_ecosystem/exchange-accounts.md heading="##" icon="150-" adding="####" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}

+{% include /crypto_ecosystem/user-account.md heading="##" icon="150-" adding="####" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}

-## Crypto Exchanges
+{% include /crypto_ecosystem/user-keys.md heading="##" icon="150-" adding="####" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}

-<img src='images/icons/150-crypto-exchanges.png' />
+{% include /crypto_ecosystem/exchange-account-key.md heading="##" icon="150-" adding="####" configuring="####" starting="" content="no" definition="bold" table="yes" more="no"%}

-**{{site.data.crypto_ecosystem.crypto_exchanges}}**
+{% include /crypto_ecosystem/user-assets.md heading="##" icon="150-" adding="####" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}

-### Adding a Crypto Exchanges Node
-
-To add a crypto exchanges node, select *Add Crypto Exchanges* on the crypto ecosystem node menu. 
-
-{% include note.html content="Only one crypto exchanges node may exist on the hierarchy." %}
-
-
-
-
-
-## Crypto Exchange
-
-<img src='images/icons/150-crypto-exchange.png' />
-
-**{{site.data.crypto_ecosystem.crypto_exchange}}**
-
-### Adding a Crypto Exchange
-
-To add a crypto exchange, select *Add Crypto Exchange* on the crypto exchanges node menu. The crypto exchange node is created along with the rest of the basic structure of nodes required to define assets, markets and user accounts.
-
-### Configuring a Crypto Exchange
-
-Select *Configure Crypto Exchange* on the menu to access the configuration.
-
-```json
-{ 
-"codeName": "Poloniex"
-}
-```
-
-* codeName is the name of the exchange as handled in the code of the system. 
-
-{% include note.html content="Consult the list of supported exchanges for the list of possible values for the ```codeName``` field. When a supported exchange is successfully configured, the standard crypto exchange icon is replaced with the logotype of the corresponding exchange." %}
-
-
-
-
-
-## Exchange Assets
-
-<img src='images/icons/150-exchange-assets.png' />
-
-**{{site.data.crypto_ecosystem.exchange_assets}}**
-
-### Adding an Exchange Assets Node
-
-To add an exchange assets node, select *Add Exchange Assets* on the crypto exchanges node menu. The exchange assets node is created along with a first asset.
-
-{% include note.html content="Only one exchange assets node may exist on each exchange." %}
-
-
-
-
-
-## Asset
-
-<img src='images/icons/150-asset.png' />
-
-**{{site.data.crypto_ecosystem.asset}}**
-
-### Adding an Asset
-
-To add an asset, select *Add Asset* on the crypto exchange assets node menu. 
-
-### Configuring an Asset
-
-Select *Configure Asset* on the menu to access the configuration.
-
-```json
-{ 
-"codeName": "BTC"
-}
-```
-
-* codeName is the ticker of the asset as listed by the exchange (*i.e.:* BTC, BTH, ETH, LTC, BNB, USDT, USD, etc.)
-
-{% include note.html content="Consult the list of supported assets for the list of possible values for the ```codeName``` field. When a configured asset is within the system's icon catalog, the standard asset icon is replaced with the logotype of the corresponding asset." %}
-
-
-
-
-
-## Exchange Markets
-
-<img src='images/icons/150-exchange-markets.png' />
-
-**{{site.data.crypto_ecosystem.exchange_markets}}**
-
-### Adding an Exchange Markets Node
-
-To add an exchange markets node, select *Add Exchange Markets* on the crypto exchange node menu. The exchange markets node is created along with the basic structure of nodes to define the first market.
-
-{% include note.html content="Only one exchange assets node may exist on each exchange." %}
-
-
-
-
-
-## Market
-
-<img src='images/icons/150-market.png' />
-
-**{{site.data.crypto_ecosystem.market}}**
-
-{% include important.html content="Only markets that are effectively listed on the exchange may be configured and used with the system. Check with the exchange and make sure you understand what tickers they are using, which is the base asset and which the quoted asset on the listed markets." %}
-
-### Adding a Market
-
-To add a market, select *Add Market* on the crypto exchange node menu. The market node is created along with the basic structure of nodes used to define the market.
-
-
-
-
-
-## Market Base Asset
-
-<img src='images/icons/150-market-base-asset.png' />
-
-**{{site.data.crypto_ecosystem.market_base_asset}}**
-
-A market base asset must reference an asset defined under the exchange assets node.
-
-### Adding a Market Base Asset
-
-To add a market base asset, select *Add Market Base Asset* on the market node menu. 
-
-{% include note.html content="Remember to establish a reference with an asset defined under the exchange assets node." %}
-
-
-
-
-
-## Market Quoted Asset
-
-<img src='images/icons/150-market-quoted-asset.png' />
-
-**{{site.data.crypto_ecosystem.market_quoted_asset}}**
-
-A market quoted asset must reference an asset defined under the exchange assets node.
-
-### Adding a Market Quoted Asset
-
-To add a market quoted asset, select *Add Market Quoted Asset* on the market node menu. 
-
-{% include note.html content="Remember to establish a reference with an asset defined under the exchange assets node." %}
-
-
-
-
-
-## Exchange Accounts
-
-<img src='images/icons/150-exchange-accounts.png' />
-
-**{{site.data.crypto_ecosystem.exchange_accounts}}**
-
-### Adding an Exchange Accounts Node
-
-To add an exchange accounts node, select *Add Exchange Account* on the crypto exchange node menu. The exchange account node is created along with the basic structure of nodes used to define keys and user assets with the exchange.
-
-{% include note.html content="Only one exchange accounts node may exist on each exchange." %}
-
-
-
-
-
-## User Account
-
-<img src='images/icons/150-user-account.png' />
-
-**{{site.data.crypto_ecosystem.user_account}}**
-
-### Adding a User Account
-
-To add a user account, select *Add User Account* on the exchange accounts node menu. The user account node is created along with the basic structure of nodes used to define keys and user assets with the exchange.
-
-{% include tip.html content="You may add and administer as many user accounts as you wish." %}
-
-
-
-
-
-## User Keys
-
-<img src='images/icons/150-user-keys.png' />
-
-**{{site.data.crypto_ecosystem.user_keys}}**
-
-### Adding a User Keys Node
-
-To add user keys node, select *Add User Keys* on the user account node menu. The user keys node is created along with the first exchange account key.
-
-{% include note.html content="Only one user keys node may exist under a user account." %}
-
-
-
-
-
-## Exchange Account Key
-
-<img src='images/icons/150-exchange-account-key.png' />
-
-**{{site.data.crypto_ecosystem.exchange_account_key}}**
-
-### Adding an Exchange Account Key
-
-To add an exchange account key, select *Add Key* on the user keys node menu.
-
-### Configuring an Exchange Account Key
-
-Select *Configure Key* on the menu to access the configuration.
-
-```json
-{ 
-"codeName": "Paste your exchange API name or label here",
-"secret": "Paste your exchange API secret key here."
-}
-```
-
-* ```codeName``` is the name or label of your key, as supplied by the exchange.
-
-* ```secret``` is the *secret key* as supplied by the exchange.
-
-{% include warning.html content="To keep your exchange keys safe, never share data structures you may download from the system, as downloads contain all information in the data structure, including personal information such as exchange keys. Use the share option on the menu instead. The share option strips sensitive information and outputs a file that is safe for sharing." %}
-
-
-
-
-
-## User Assets
-
-<img src='images/icons/150-user-assets.png' />
-
-**{{site.data.crypto_ecosystem.user_assets}}**
-
-### Adding a User Assets Node
-
-To add user assets node, select *Add User Assets* on the user account node menu. The user assets node is created along with the first exchange account asset.
-
-{% include note.html content="Only one user assets node may exist under a user account." %}
-
-
-
-
-
-## Exchange Account Asset
-
-<img src='images/icons/150-exchange-account-asset.png' />
-
-**{{site.data.crypto_ecosystem.exchange_account_asset}}**
+{% include /crypto_ecosystem/exchange-account-asset.md heading="##" icon="150-" adding="" configuring="" starting="" content="no" definition="bold" table="yes" more="no"%}