Final aesthetic touches

This commit is contained in:
Luis Fernando Molina committed 2020-01-16 15:08:18 +01:00
1 parent 983450aa7f
commit f41a445aa0
4 files changed
+76 -85

No files matched your search

+4 -4
View File
@@ -11,8 +11,8 @@ function newViewPort () {
let ANIMATION_INCREMENT = 0.25
let TOP_MARGIN = 57 + TOP_SPACE_HEIGHT
let BOTTOM_MARGIN = 62 + COCKPIT_SPACE_HEIGHT
let TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
let BOTTOM_MARGIN = 42 + COCKPIT_SPACE_HEIGHT
let LEFT_MARGIN = 0
let RIGHT_MARGIN = 0
let MARGINS = {
@@ -82,8 +82,8 @@ function newViewPort () {
}
function resize () {
TOP_MARGIN = 57 + TOP_SPACE_HEIGHT
BOTTOM_MARGIN = 62 + browserCanvas.height - COCKPIT_SPACE_POSITION
TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
BOTTOM_MARGIN = 42 + browserCanvas.height - COCKPIT_SPACE_POSITION
LEFT_MARGIN = 0
RIGHT_MARGIN = 0
MARGINS = {
+67 -76
View File
@@ -315,74 +315,67 @@ function newLayer () {
}
function drawLayer () {
/* ------------------- Progress Bars -------------------------- */
drawLayerDisplay()
}
function drawProgressBar (progressBar, lineWidth, offsetY) {
const ANIMATED_INCREMENT = 5
const OPACITY_INCREMENT = 0.01
const OPACITY_MIN = 1
drawLayerDisplay()
let point1
let point2
let horizontalMargin = 15
drawProgressBar(marketFileProgressBar, 1, -55)
drawProgressBar(dailyFileProgressBar, 1, -56)
drawProgressBar(singleFileProgressBar, 1, -57)
drawProgressBar(fileSequenceProgressBar, 1, -58)
function drawProgressBar (progressBar, lineWidth, offsetY) {
let point1
let point2
let horizontalMargin = 15
if (progressBar.value === 0) {
return
}
/* Animate */
if (progressBar.animatedValue < progressBar.value) {
progressBar.animatedValue = progressBar.animatedValue + ANIMATED_INCREMENT
progressBar.opacity = progressBar.opacity + OPACITY_INCREMENT
}
if (progressBar.animatedValue >= 100) {
progressBar.animatedValue = 100
progressBar.opacity = progressBar.opacity - OPACITY_INCREMENT
if (progressBar.opacity < OPACITY_MIN) { progressBar.opacity = OPACITY_MIN }
progressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', progressBar.opacity.toString())
changeStatusTo(PRODUCT_CARD_STATUS.ON)
}
point1 = {
x: 0 + horizontalMargin,
y: thisObject.container.frame.height + offsetY
}
point2 = {
x: (thisObject.container.frame.width - horizontalMargin * 2) * progressBar.animatedValue / 100 + horizontalMargin,
y: thisObject.container.frame.height + offsetY
}
/* Now the transformations. */
point1 = thisObject.container.frame.frameThisPoint(point1)
point2 = thisObject.container.frame.frameThisPoint(point2)
point1 = thisObject.fitFunction(point1)
point2 = thisObject.fitFunction(point2)
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(point1.x, point1.y)
browserCanvasContext.lineTo(point2.x, point2.y)
browserCanvasContext.closePath()
browserCanvasContext.strokeStyle = progressBar.strokeStyle.replace('@Opacity', progressBar.opacity.toString())
browserCanvasContext.setLineDash([1, 4])
browserCanvasContext.lineWidth = lineWidth
browserCanvasContext.stroke()
if (progressBar.value === 0) {
return
}
/* Animate */
if (progressBar.animatedValue < progressBar.value) {
progressBar.animatedValue = progressBar.animatedValue + ANIMATED_INCREMENT
progressBar.opacity = progressBar.opacity + OPACITY_INCREMENT
}
if (progressBar.animatedValue >= 100) {
progressBar.animatedValue = 100
progressBar.opacity = progressBar.opacity - OPACITY_INCREMENT
if (progressBar.opacity < OPACITY_MIN) { progressBar.opacity = OPACITY_MIN }
progressBar.strokeStyle = LOADED_STROKE_STYLE.replace('@Opacity', progressBar.opacity.toString())
changeStatusTo(PRODUCT_CARD_STATUS.ON)
}
point1 = {
x: 0 + horizontalMargin,
y: thisObject.container.frame.height + offsetY
}
point2 = {
x: (thisObject.container.frame.width - horizontalMargin * 2) * progressBar.animatedValue / 100 + horizontalMargin,
y: thisObject.container.frame.height + offsetY
}
/* Now the transformations. */
point1 = thisObject.container.frame.frameThisPoint(point1)
point2 = thisObject.container.frame.frameThisPoint(point2)
point1 = thisObject.fitFunction(point1)
point2 = thisObject.fitFunction(point2)
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(point1.x, point1.y)
browserCanvasContext.lineTo(point2.x, point2.y)
browserCanvasContext.closePath()
browserCanvasContext.strokeStyle = progressBar.strokeStyle.replace('@Opacity', progressBar.opacity.toString())
browserCanvasContext.setLineDash([1, 4])
browserCanvasContext.lineWidth = lineWidth
browserCanvasContext.stroke()
}
function drawLayerDisplay () {
@@ -392,18 +385,13 @@ function newLayer () {
let exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
let plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent
let labelArray = thisObject.payload.node.name.split(' ')
let label1 = thisObject.payload.node.name
let label2 = ''
let label3 = exchange.name.substring(0, 15) + ' - ' + market
let label4 = thisObject.status.toUpperCase()
let label2 = exchange.name.substring(0, 15) + ' - ' + market
let label3 = thisObject.status.toUpperCase()
if (label1 !== undefined) {
label1 = label1.substring(0, 22)
}
if (label2 !== undefined) {
label2 = label2.substring(0, 15)
}
let icon1 = getIcon(exchange)
@@ -451,16 +439,19 @@ function newLayer () {
roundedCornersBackground(params)
drawLabel(label1, 1 / 2, 6 / 10, -5, 0, 18, thisObject.container)
drawLabel(label1, 1 / 2, 6 / 10, -5, 0, 17, thisObject.container)
drawLabel(label2, 1 / 2, 8.2 / 10, -5, 0, 9, thisObject.container)
drawLabel(label3, 1 / 2, 9.5 / 10, -5, 0, 9, thisObject.container)
drawLabel(label3, 1 / 2, 8.2 / 10, -5, 0, 9, thisObject.container)
drawLabel(label4, 1 / 2, 9.5 / 10, -5, 0, 9, thisObject.container)
drawProgressBar(marketFileProgressBar, 1, -55)
drawProgressBar(dailyFileProgressBar, 1, -56)
drawProgressBar(singleFileProgressBar, 1, -57)
drawProgressBar(fileSequenceProgressBar, 1, -58)
/* Images */
drawIcon(icon1, 1 / 8, 2 / 10, 0, 0, 15, thisObject.container)
drawIcon(icon2, 7 / 8, 2 / 10, 0, 0, 15, thisObject.container)
drawIcon(icon3, 3 / 8, 2 / 10, 0, 0, 15, thisObject.container)
drawIcon(icon4, 5 / 8, 2 / 10, 0, 0, 15, thisObject.container)
drawIcon(icon1, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container)
drawIcon(icon2, 7 / 8, 2 / 10, 0, 0, 14, thisObject.container)
drawIcon(icon3, 3.5 / 8, 2 / 10, 0, 0, 14, thisObject.container)
drawIcon(icon4, 4.5 / 8, 2 / 10, 0, 0, 14, thisObject.container)
}
}
+2 -2
View File
@@ -349,8 +349,8 @@ function newProductsPanel () {
drawLabel(label1, 1 / 2, 0, 0, 15, 9, thisObject.container)
drawLabel(label2, 1 / 2, 0, 0, 30, 9, thisObject.container)
drawIcon(icon1, 1 / 8, 0, 0, 20, 32, thisObject.container)
drawIcon(icon2, 7 / 8, 0, 0, 20, 32, thisObject.container)
drawIcon(icon1, 1 / 8, 0, 0, 20, 28, thisObject.container)
drawIcon(icon2, 7 / 8, 0, 0, 20, 28, thisObject.container)
}
function drawScrollBar () {
+3 -3
View File
@@ -22,11 +22,11 @@ function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2,
label3 = label3.substring(0, 20)
drawLabel(label1, 1 / 2, 92 / 100, 0, 0, 9, container)
drawLabel(label2, 1 / 2, 42 / 100, 0, 0, 18, container)
drawLabel(label2, 1 / 2, 42 / 100, 0, 0, 17, container)
drawLabel(label3, 1 / 2, 67 / 100, 0, 0, 9, container)
drawIcon(icon1, 1 / 8, 1 / 2, 0, 0, 32, container)
drawIcon(icon2, 7 / 8, 1 / 2, 0, 0, 32, container)
drawIcon(icon1, 1 / 8, 1 / 2, 0, 0, 28, container)
drawIcon(icon2, 7 / 8, 1 / 2, 0, 0, 28, container)
}
function drawScaleDisplayCover (container) {