diff --git a/Images/aa-logo-background.png b/Images/aa-logo-background.png new file mode 100644 index 000000000..cb84e7a21 Binary files /dev/null and b/Images/aa-logo-background.png differ diff --git a/Images/poloniex-logo-background.png b/Images/poloniex-logo-background.png new file mode 100644 index 000000000..b589e405f Binary files /dev/null and b/Images/poloniex-logo-background.png differ diff --git a/Images/poloniex-logo.png b/Images/poloniex-logo.png new file mode 100644 index 000000000..798c46a19 Binary files /dev/null and b/Images/poloniex-logo.png differ diff --git a/TimelineChart.js b/TimelineChart.js index bf7b94ca6..801da0896 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -45,8 +45,12 @@ /* Background */ let logoAssetA; let logoAssetB; + let logoExchange; + let logoAA; let canDrawLogoA = false; let canDrawLogoB = false; + let canDrawLogoExchange = false; + let canDrawLogoAA = false; return thisObject; @@ -60,6 +64,8 @@ logoA = new Image(); logoB = new Image(); + logoExchange = new Image(); + logoAA = new Image(); logoA.onload = onImageALoaded; @@ -73,8 +79,22 @@ canDrawLogoB = true; } + logoExchange.onload = onImageExchangeLoaded; + + function onImageExchangeLoaded() { + canDrawLogoExchange = true; + } + + logoAA.onload = onImageAALoaded; + + function onImageAALoaded() { + canDrawLogoAA = true; + } + logoA.src = "Images/tether-logo-background.png"; logoB.src = "Images/bitcoin-logo-background.png"; + logoExchange.src = "Images/poloniex-logo-background.png"; + logoAA.src = "Images/aa-logo-background.png"; /* Remember the Products Panel */ @@ -944,7 +964,7 @@ if (INTENSIVE_LOG === true) { logger.write("[INFO] drawBackground -> Entering function."); } - if (canDrawLogoA === false || canDrawLogoB === false) { return; } + if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return; } let backgroundLogoPoint1; let backgroundLogoPoint2; @@ -963,7 +983,7 @@ }; let point2 = { - x: viewPort.visibleArea.topLeft.x + imageWidth * 4, + x: viewPort.visibleArea.topLeft.x + imageWidth * 8, y: viewPort.visibleArea.topLeft.y }; @@ -991,13 +1011,13 @@ if (offSet === 0) { - offSet = -imageWidth; + offSet = imageWidth * 4 - imageWidth; } else { offSet = 0; } - for (let i = 1; i < 6; i = i + 2) { + for (let i = 0; i < 9; i = i + 4) { let logo = logoA; @@ -1012,13 +1032,13 @@ if (offSet === 0) { - offSet = -imageWidth; + offSet = imageWidth * 4 - imageWidth; } else { offSet = 0; } - for (let i = 0; i < 6; i = i + 2) { + for (let i = 1; i < 9; i = i + 4) { let logo = logoB; @@ -1027,6 +1047,48 @@ } } + offSet = 0; + + for (let j = 0; j < 5; j++) { + + if (offSet === 0) { + + offSet = imageWidth * 4 - imageWidth; + + } else { + offSet = 0; + } + + for (let i = 2; i < 9; i = i + 4) { + + let logo = logoExchange; + + browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight, imageWidth, imageHeight); + + } + } + + offSet = 0; + + for (let j = 0; j < 5; j++) { + + if (offSet === 0) { + + offSet = imageWidth * 4 - imageWidth; + + } else { + offSet = 0; + } + + for (let i = 3; i < 9; i = i + 4) { + + let logo = logoAA; + + browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight, imageWidth, imageHeight); + + } + } + /* We will paint some transparent background here. */ let opacity = "0.9";