From f7f0990c738048020725e816ddd19ea15bbbbd29 Mon Sep 17 00:00:00 2001 From: Hemansh Khaneja Date: Wed, 14 Apr 2021 19:39:50 +0530 Subject: [PATCH 01/20] Support for including Measurements in the ScreenShot added --- common/util.js | 155 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) diff --git a/common/util.js b/common/util.js index 38b5407c3..67aee8be5 100644 --- a/common/util.js +++ b/common/util.js @@ -1062,6 +1062,161 @@ async function captureScreen(camic, { } */ + if(hasRuler && + viewer.measureInstance + ) { + // get HTML elements of all ruler divs + const availableRulers = document.getElementsByClassName('ruler'); + + for(let i = 0; i < availableRulers.length; i++) { + // add to canvas only if ruler is visible on the slide + if(availableRulers[i].style.display !== 'none') { + + // details about position and size of ruler div + const rulerDiv = { + left : parseFloat(availableRulers[i].style.left), + top : parseFloat(availableRulers[i].style.top), + width : parseFloat(availableRulers[i].style.width), + height : parseFloat(availableRulers[i].style.height), + direction : null + } + // skip iteration if Ruler Div has some missing attributes + if(isNaN(rulerDiv.left) || isNaN(rulerDiv.top) || isNaN(rulerDiv.width) || isNaN(rulerDiv.height)) { + console.error('Required Attributes of Ruler Missing'); + continue; + } + // for ruler mode straight + if(availableRulers[i].dataset.mode === 'straight') { + + // checking direction of ruler in this mode + for(let j = 0; j < availableRulers[i].children.length; j++) { + + if(availableRulers[i].children[j].className === 'scale h') { + let rotateIndex = availableRulers[i].children[j].style.transform.search('rotate'); + let len = availableRulers[i].children[j].style.transform.length; + let rotateAngle; + if(rotateIndex != -1) { + rotateAngle = parseFloat(availableRulers[i].children[j].style.transform.substring(rotateIndex + 7, len)); + } + if(isNaN(rotateAngle)){ + rotateAngle = (Math.PI); + } + if(rotateAngle >= (Math.PI / 2)) { + rulerDiv.direction = 'r2l'; + } else{ + rulerDiv.direction = 'l2r'; + } + break; + } + + } + // drawing ruler on result canvas + ctx.strokeStyle = '#acfc03e6'; + ctx.lineWidth = 2; + ctx.beginPath(); + if(rulerDiv.direction === 'l2r') { + ctx.moveTo(rulerDiv.left, rulerDiv.top); + ctx.lineTo(rulerDiv.width + rulerDiv.left, rulerDiv.height + rulerDiv.top); + } else if(rulerDiv.direction === 'r2l') { + ctx.moveTo(rulerDiv.width + rulerDiv.left, rulerDiv.top); + ctx.lineTo(rulerDiv.left, rulerDiv.height + rulerDiv.top); + } else { + console.error('Something went wrong'); + continue; + } + ctx.stroke(); + + // writing ruler Value on result canvas + let scaleValue = ''; + let fontSize = 13; + for(let j = 0; j < availableRulers[i].children.length; j++){ + if(availableRulers[i].children[j].className === 'box'){ + try{ + scaleValue = availableRulers[i].children[j].children[0].innerHTML; + } + catch(error){ + scaleValue = ''; + } + break; + } + } + // background behind scale value + ctx.font = `900 ${fontSize}px sans-serif`; + ctx.fillStyle = '#acfc03e6'; + let xOffset = (rulerDiv.width/2 + rulerDiv.left); + let yOffset = (rulerDiv.height/2 + rulerDiv.top); + ctx.fillRect(xOffset - ctx.measureText(scaleValue).width/2, yOffset - fontSize + 2, ctx.measureText(scaleValue).width, fontSize); + + // scale value text + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(scaleValue, xOffset , yOffset); + + } else { + // for ruler mode coordinate + // drawing coordinate ruler on result canvas + ctx.strokeStyle = '#acfc03e6'; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(rulerDiv.left, rulerDiv.top); + ctx.lineTo(rulerDiv.left, rulerDiv.height + rulerDiv.top); + ctx.moveTo(rulerDiv.left, rulerDiv.height + rulerDiv.top); + ctx.lineTo(rulerDiv.left + rulerDiv.width, rulerDiv.height + rulerDiv.top); + ctx.stroke(); + + let h_scaleValue = ''; + let v_scaleValue = ''; + + for(let j = 0; j < availableRulers[i].children.length; j++){ + if(availableRulers[i].children[j].className === 'h_scale'){ + try{ + h_scaleValue = availableRulers[i].children[j].children[0].innerHTML; + } + catch(error){ + h_scaleValue = ''; + } + } else if(availableRulers[i].children[j].className === 'v_scale'){ + try{ + v_scaleValue = availableRulers[i].children[j].children[0].innerHTML; + } + catch(error){ + v_scaleValue = ''; + } + } + } + + let fontSize = 13; + + let h_xOffset = (rulerDiv.left); + let h_yOffset = (rulerDiv.height/2 + rulerDiv.top); + let v_xOffset = (rulerDiv.width/2 + rulerDiv.left); + let v_yOffset = (rulerDiv.height + rulerDiv.top) + 11; + + // background behind scale value + ctx.font = `900 ${fontSize}px sans-serif`; + ctx.fillStyle = '#acfc03e6'; + ctx.fillRect(h_xOffset - ctx.measureText(h_scaleValue).width/2, h_yOffset - fontSize + 2, ctx.measureText(h_scaleValue).width, fontSize); + + // scale value text + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(h_scaleValue, h_xOffset , h_yOffset); + + // background behind scale value + ctx.font = `900 ${fontSize}px sans-serif`; + ctx.fillStyle = '#acfc03e6'; + ctx.fillRect(v_xOffset - ctx.measureText(v_scaleValue).width/2, v_yOffset - fontSize + 2, ctx.measureText(v_scaleValue).width , fontSize); + + // scale value text + ctx.fillStyle = 'black'; + ctx.textAlign = 'center'; + ctx.fillText(v_scaleValue, v_xOffset , v_yOffset); + + } + } + } + } + return canvas; } From f6675b85040f20bd919086cd4e3b31a7da2a5d46 Mon Sep 17 00:00:00 2001 From: Hemansh Khaneja Date: Wed, 14 Apr 2021 23:39:43 +0530 Subject: [PATCH 02/20] Bug Solution Trial --- common/util.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/common/util.js b/common/util.js index 67aee8be5..d538c1c88 100644 --- a/common/util.js +++ b/common/util.js @@ -1074,10 +1074,10 @@ async function captureScreen(camic, { // details about position and size of ruler div const rulerDiv = { - left : parseFloat(availableRulers[i].style.left), - top : parseFloat(availableRulers[i].style.top), - width : parseFloat(availableRulers[i].style.width), - height : parseFloat(availableRulers[i].style.height), + left : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('left')), + top : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('top')), + width : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('width')), + height : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('height')), direction : null } // skip iteration if Ruler Div has some missing attributes From 5f11ca134c0c1989c57d20a8399556f2528b0c4a Mon Sep 17 00:00:00 2001 From: Hemansh Khaneja Date: Thu, 15 Apr 2021 12:59:07 +0530 Subject: [PATCH 03/20] Bug Solution Trial 2 --- common/util.js | 55 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 39 insertions(+), 16 deletions(-) diff --git a/common/util.js b/common/util.js index d538c1c88..ab28d8d18 100644 --- a/common/util.js +++ b/common/util.js @@ -1072,14 +1072,36 @@ async function captureScreen(camic, { // add to canvas only if ruler is visible on the slide if(availableRulers[i].style.display !== 'none') { + // let overlay = viewer.getOverlayById(availableRulers[i]); + // //console.log(overlay); + // let overlayBounds = viewer.viewport.viewportToViewerElementRectangle(overlay.getBounds(viewer.viewport)); + // //console.log(overlayBounds); + + // details about position and size of ruler div + // const rulerDiv = { + // left : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('left')), + // top : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('top')), + // width : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('width')), + // height : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('height')), + // direction : null + // } const rulerDiv = { - left : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('left')), - top : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('top')), - width : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('width')), - height : parseFloat(window.getComputedStyle(availableRulers[i], null).getPropertyValue('height')), + left : parseFloat(availableRulers[i].style.left)*(slideCanvas.width/window.innerWidth), + top : parseFloat(availableRulers[i].style.top)*(slideCanvas.height/window.innerHeight), + width : parseFloat(availableRulers[i].style.width)*(slideCanvas.width/window.innerWidth), + height : parseFloat(availableRulers[i].style.height)*(slideCanvas.height/window.innerHeight), direction : null } + // console.log(slideCanvas); + // console.log(canvas); + // console.log(rulerDiv); + // const rulerDiv ={ + // left : overlayBounds.x, + // top : overlayBounds.y, + // width : overlayBounds.width, + // height : overlayBounds.height + // } // skip iteration if Ruler Div has some missing attributes if(isNaN(rulerDiv.left) || isNaN(rulerDiv.top) || isNaN(rulerDiv.width) || isNaN(rulerDiv.height)) { console.error('Required Attributes of Ruler Missing'); @@ -1112,7 +1134,7 @@ async function captureScreen(camic, { } // drawing ruler on result canvas ctx.strokeStyle = '#acfc03e6'; - ctx.lineWidth = 2; + ctx.lineWidth = 2* ((slideCanvas.width) / (window.innerWidth)); ctx.beginPath(); if(rulerDiv.direction === 'l2r') { ctx.moveTo(rulerDiv.left, rulerDiv.top); @@ -1128,7 +1150,7 @@ async function captureScreen(camic, { // writing ruler Value on result canvas let scaleValue = ''; - let fontSize = 13; + let fontSize = 13 * ((slideCanvas.width) / (window.innerWidth)); for(let j = 0; j < availableRulers[i].children.length; j++){ if(availableRulers[i].children[j].className === 'box'){ try{ @@ -1145,7 +1167,7 @@ async function captureScreen(camic, { ctx.fillStyle = '#acfc03e6'; let xOffset = (rulerDiv.width/2 + rulerDiv.left); let yOffset = (rulerDiv.height/2 + rulerDiv.top); - ctx.fillRect(xOffset - ctx.measureText(scaleValue).width/2, yOffset - fontSize + 2, ctx.measureText(scaleValue).width, fontSize); + ctx.fillRect(xOffset - ctx.measureText(scaleValue).width/2, yOffset - fontSize + (2 * ((slideCanvas.width) / (window.innerWidth))), ctx.measureText(scaleValue).width, fontSize); // scale value text ctx.fillStyle = 'black'; @@ -1156,7 +1178,7 @@ async function captureScreen(camic, { // for ruler mode coordinate // drawing coordinate ruler on result canvas ctx.strokeStyle = '#acfc03e6'; - ctx.lineWidth = 2; + ctx.lineWidth = 2 * ((slideCanvas.width) / (window.innerWidth)); ctx.beginPath(); ctx.moveTo(rulerDiv.left, rulerDiv.top); ctx.lineTo(rulerDiv.left, rulerDiv.height + rulerDiv.top); @@ -1184,18 +1206,19 @@ async function captureScreen(camic, { } } } - - let fontSize = 13; + console.log(h_scaleValue); + console.log(v_scaleValue); + let fontSize = 13 * ((slideCanvas.width) / (window.innerWidth)); - let h_xOffset = (rulerDiv.left); - let h_yOffset = (rulerDiv.height/2 + rulerDiv.top); - let v_xOffset = (rulerDiv.width/2 + rulerDiv.left); - let v_yOffset = (rulerDiv.height + rulerDiv.top) + 11; + let v_xOffset = (rulerDiv.left); + let v_yOffset = (rulerDiv.height/2 + rulerDiv.top); + let h_xOffset = (rulerDiv.width/2 + rulerDiv.left); + let h_yOffset = (rulerDiv.height + rulerDiv.top) + (11 * ((slideCanvas.width) / (window.innerWidth))); // background behind scale value ctx.font = `900 ${fontSize}px sans-serif`; ctx.fillStyle = '#acfc03e6'; - ctx.fillRect(h_xOffset - ctx.measureText(h_scaleValue).width/2, h_yOffset - fontSize + 2, ctx.measureText(h_scaleValue).width, fontSize); + ctx.fillRect(h_xOffset - ctx.measureText(h_scaleValue).width/2, h_yOffset - fontSize + (2 * ((slideCanvas.width) / (window.innerWidth))), ctx.measureText(h_scaleValue).width, fontSize); // scale value text ctx.fillStyle = 'black'; @@ -1205,7 +1228,7 @@ async function captureScreen(camic, { // background behind scale value ctx.font = `900 ${fontSize}px sans-serif`; ctx.fillStyle = '#acfc03e6'; - ctx.fillRect(v_xOffset - ctx.measureText(v_scaleValue).width/2, v_yOffset - fontSize + 2, ctx.measureText(v_scaleValue).width , fontSize); + ctx.fillRect(v_xOffset - ctx.measureText(v_scaleValue).width/2, v_yOffset - fontSize + (2 * ((slideCanvas.width) / (window.innerWidth))), ctx.measureText(v_scaleValue).width , fontSize); // scale value text ctx.fillStyle = 'black'; From 0d4c2850ed00c1e29918600ce4d0e83f716beaa6 Mon Sep 17 00:00:00 2001 From: Ryan Birmingham Date: Thu, 6 May 2021 18:09:14 -0400 Subject: [PATCH 04/20] addl links pdb pattern match --- apps/viewer/init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 3c2c894a7..73cba71b2 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -563,7 +563,7 @@ async function initUIcomponents() { try { let additionalLinksUrl = '../../additional_links.json'; if ($D.params.mode == 'pathdb') { - additionalLinksUrl = '../../../additional_links.json'; + additionalLinksUrl = '../../additional_links.json'; } var additionalLinksFetchResponse = await fetch(additionalLinksUrl, {headers: headers}); // Handle error From 299f4b17919d129fc029eb4d2077bfe60d728e8d Mon Sep 17 00:00:00 2001 From: Priyaraj17 Date: Sat, 8 May 2021 10:47:39 +0530 Subject: [PATCH 05/20] Updated to bootstrap 5 --- apps/landing/landing.html | 73 +++++++++++++++++++-------------------- apps/landing/main.css | 40 ++++++++++++++------- apps/signup/signup.css | 17 ++++++++- apps/signup/signup.html | 64 +++++++++++++++++----------------- 4 files changed, 110 insertions(+), 84 deletions(-) diff --git a/apps/landing/landing.html b/apps/landing/landing.html index 0a134e014..4e01032b7 100644 --- a/apps/landing/landing.html +++ b/apps/landing/landing.html @@ -4,16 +4,12 @@ + - - - + @@ -38,33 +34,35 @@ --> -