Scales with icons and names

ChartsSpace/TimeMachine.js

@@ -141,7 +141,7 @@ function newTimeMachine () {
   function initializeTimeScale () {
     thisObject.timeScale = newTimeScale()
     thisObject.timeScale.fitFunction = thisObject.fitFunction
-    thisObject.timeScale.payload = thisObject.payload
+    thisObject.timeScale.payload = thisObject.payload.node.timeScale.payload
 
     timeScaleEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
       thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
@@ -162,7 +162,7 @@ function newTimeMachine () {
   function initializeRateScale () {
     thisObject.rateScale = newRateScale()
     thisObject.rateScale.fitFunction = thisObject.fitFunction
-    thisObject.rateScale.payload = thisObject.payload
+    thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
 
     rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
       thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100

ChartsSpace/TimelineChart.js

@@ -209,7 +209,7 @@ function newTimelineChart () {
   function initializeTimeFrameScale () {
     thisObject.timeFrameScale = newTimeFrameScale()
     thisObject.timeFrameScale.fitFunction = thisObject.fitFunction
-    thisObject.timeFrameScale.payload = thisObject.payload
+    thisObject.timeFrameScale.payload = thisObject.payload.node.timeFrameScale.payload
 
     timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) {
       let currentTimeFrame = timeFrame

Scales/Commons.js

@@ -1,7 +1,8 @@
 
-function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, container, fitFunction) {
-  let fontSize1 = 20
-  let fontSize2 = 10
+function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, xExtraOffSet3, icon1, icon2, container, fitFunction) {
+  let fontSize1 = 10
+  let fontSize2 = 20
+  let fontSize3 = 10
 
   const RED_LINE_HIGHT = 4
   const OPACITY = 1
@@ -21,11 +22,12 @@ function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, contain
 
   /* Place the Text */
 
+  label1 = label1.substring(0, 18)
   let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
 
   let labelPoint1 = {
-    x: container.frame.width / 2 - xOffset1 + xExtraOffSet1,
-    y: container.frame.height / 2 + 6
+    x: container.frame.width * 1 / 2 - xOffset1 / 2 + xExtraOffSet1,
+    y: container.frame.height * 4 / 5
   }
 
   labelPoint1 = container.frame.frameThisPoint(labelPoint1)
@@ -38,11 +40,12 @@ function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, contain
 
   browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y)
 
+  label2 = label2.substring(0, 20)
   let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
 
   let labelPoint2 = {
-    x: container.frame.width / 2 - xOffset2 / 2 - 3 + xExtraOffSet2,
-    y: container.frame.height / 2 + 6
+    x: container.frame.width * 1 / 2 - xOffset2 / 2 + xExtraOffSet2,
+    y: container.frame.height * 2 / 5
   }
 
   labelPoint2 = container.frame.frameThisPoint(labelPoint2)
@@ -52,5 +55,57 @@ function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, contain
   browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
   browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
+
+  label3 = label3.substring(0, 20)
+  let xOffset3 = label3.length * fontSize3 * FONT_ASPECT_RATIO
+
+  let labelPoint3 = {
+    x: container.frame.width * 1 / 2 - xOffset3 / 2 + xExtraOffSet3,
+    y: container.frame.height * 3 / 5
+  }
+
+  labelPoint3 = container.frame.frameThisPoint(labelPoint3)
+  labelPoint3 = fitFunction(labelPoint3)
+
+  browserCanvasContext.font = fontSize3 + 'px ' + UI_FONT.PRIMARY
+  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+  browserCanvasContext.fillText(label3, labelPoint3.x, labelPoint3.y)
+
+  /* Images */
+
+  if (icon1 !== undefined) {
+    if (icon1.canDrawIcon === true) {
+      let imageSize = 40
+      let imagePosition = {
+        x: container.frame.width * 1 / 8 - imageSize / 2,
+        y: container.frame.height / 2 - imageSize / 2
+      }
+
+      imagePosition = container.frame.frameThisPoint(imagePosition)
+      browserCanvasContext.drawImage(
+        icon1, imagePosition.x,
+        imagePosition.y,
+        imageSize,
+        imageSize)
+    }
+  }
+
+  if (icon2 !== undefined) {
+    if (icon2.canDrawIcon === true) {
+      let imageSize = 40
+      let imagePosition = {
+        x: container.frame.width * 7 / 8 - imageSize / 2,
+        y: container.frame.height / 2 - imageSize / 2
+      }
+
+      imagePosition = container.frame.frameThisPoint(imagePosition)
+      browserCanvasContext.drawImage(
+        icon2, imagePosition.x,
+        imagePosition.y,
+        imageSize,
+        imageSize)
+    }
+  }
 }
 

Scales/RateScale.js

@@ -27,8 +27,8 @@ function newRateScale () {
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
 
-  thisObject.container.frame.width = 300
-  thisObject.container.frame.height = 30
+  thisObject.container.frame.width = 200
+  thisObject.container.frame.height = 60
 
   let isMouseOver
 
@@ -212,9 +212,13 @@ function newRateScale () {
 
     let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2)
     let labelArray = label.split('.')
-    let label1 = (Math.trunc(thisObject.rate)).toLocaleString()
-    let label2 = labelArray[1]
+    let label1 = thisObject.payload.node.payload.parentNode.name
+    let label2 = (Math.trunc(thisObject.rate)).toLocaleString()
+    let label3 = labelArray[1]
 
-    drawScaleDisplay(label1, label2, 10, 40, thisObject.container, thisObject.fitFunction)
+    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, thisObject.fitFunction)
   }
 }

Scales/TimeFrameScale.js

@@ -40,8 +40,8 @@ function newTimeFrameScale () {
     thisObject.container.isWheelable = true
     thisObject.container.detectMouseOver = true
 
-    thisObject.container.frame.width = 300
-    thisObject.container.frame.height = 30
+    thisObject.container.frame.width = 200
+    thisObject.container.frame.height = 60
   }
 
   function finalize () {
@@ -167,9 +167,13 @@ function newTimeFrameScale () {
     if (thisObject.visible === false || timeFrameLabel === undefined) { return }
 
     let label = timeFrameLabel.split('-')
-    let label1 = label[0]
-    let label2 = label[1].toUpperCase()
+    let label1 = thisObject.payload.node.payload.parentNode.name
+    let label2 = label[0]
+    let label3 = label[1].toUpperCase()
 
-    drawScaleDisplay(label1, label2, 10, 60, thisObject.container, thisObject.fitFunction)
+    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, thisObject.fitFunction)
   }
 }

Scales/TimeScale.js

@@ -26,8 +26,8 @@ function newTimeScale () {
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
 
-  thisObject.container.frame.width = 300
-  thisObject.container.frame.height = 30
+  thisObject.container.frame.width = 200
+  thisObject.container.frame.height = 60
 
   let isMouseOver
 
@@ -212,9 +212,13 @@ function newTimeScale () {
 
     let label = thisObject.date.toUTCString()
     let labelArray = label.split(' ')
-    let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
-    let label2 = labelArray[4]
+    let label1 = thisObject.payload.node.payload.parentNode.name
+    let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
+    let label3 = labelArray[4]
 
-    drawScaleDisplay(label1, label2, 10, 60, thisObject.container, thisObject.fitFunction)
+    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, thisObject.fitFunction)
   }
 }