From 39024d83a1c138ef0a3c838115b56799c1e50805 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Fri, 10 Nov 2023 22:27:23 -0300 Subject: [PATCH 1/6] dont show helpers in scnreenshot - change tock event function to update - add render call before screenshot - add toggleHelpers function - move takeScreenshotNow function to component --- src/components/screentock.js | 75 +++++++++++++++++++++--------------- 1 file changed, 45 insertions(+), 30 deletions(-) diff --git a/src/components/screentock.js b/src/components/screentock.js index a5b516375..7abfea0eb 100644 --- a/src/components/screentock.js +++ b/src/components/screentock.js @@ -14,32 +14,6 @@ // AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true); // } -takeScreenshotNow = function (filename, type, imgElement) { - var renderer = AFRAME.scenes[0].renderer; - - function downloadImageDataURL (filename, dataURL) { - var element = document.createElement('a'); - var url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); - element.setAttribute('href', url); - element.setAttribute('download', filename); - element.style.display = 'none'; - document.body.appendChild(element); - element.click(); - document.body.removeChild(element); - } - var saveFilename = filename + '.' + type; - - if (type == 'img') { - imgElement.src = renderer.domElement.toDataURL(); - return; - } - if (type == 'png') { - downloadImageDataURL(saveFilename, renderer.domElement.toDataURL('image/png')); - } else { - downloadImageDataURL(saveFilename, renderer.domElement.toDataURL('image/jpeg', 0.95)); - } -}; - AFRAME.registerComponent('screentock', { schema: { takeScreenshot: { type: 'boolean', default: false }, @@ -47,11 +21,52 @@ AFRAME.registerComponent('screentock', { type: { type: 'string', default: 'jpg' }, // png, jpg, img imgElementSelector: { type: 'selector' } }, - tock: function () { + takeScreenshotNow: function (filename, type, imgElement) { + const inspector = AFRAME.INSPECTOR; + const renderer = AFRAME.scenes[0].renderer; + + // hide helpers + toggleHelpers(false); + + function downloadImage (filename, dataURL) { + downloadImageDataURL(filename, dataURL); + // show helpers + toggleHelpers(true); + } + + function toggleHelpers(show) { + if (inspector && inspector.opened) inspector.sceneHelpers.visible = show; + } + + function downloadImageDataURL (filename, dataURL) { + const element = document.createElement('a'); + const url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); + element.setAttribute('href', url); + element.setAttribute('download', filename); + element.style.display = 'none'; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); + } + const saveFilename = filename + '.' + type; + + renderer.render(AFRAME.scenes[0].object3D, AFRAME.scenes[0].camera); + + if (type == 'img') { + imgElement.src = renderer.domElement.toDataURL(); + return; + } + if (type == 'png') { + downloadImage(saveFilename, renderer.domElement.toDataURL('image/png')); + } else { + downloadImage(saveFilename, renderer.domElement.toDataURL('image/jpeg', 0.95)); + } + }, + update: function () { // this should be paused when not in use. could be throttled too if (this.data.takeScreenshot) { - this.el.setAttribute('screentock', 'takeScreenshot', false); - takeScreenshotNow(this.data.filename, this.data.type, this.data.imgElementSelector); - } + this.data.takeScreenshot = false; + this.takeScreenshotNow(this.data.filename, this.data.type, this.data.imgElementSelector); + } } }); From 5f3d267fbf034efd36221d6bd00df854d8754999 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Sun, 12 Nov 2023 17:01:26 -0300 Subject: [PATCH 2/6] add title and logo to screenshot --- src/components/screentock.js | 62 +++++++++++++++++++++++++++++++----- 1 file changed, 54 insertions(+), 8 deletions(-) diff --git a/src/components/screentock.js b/src/components/screentock.js index 7abfea0eb..16e54f212 100644 --- a/src/components/screentock.js +++ b/src/components/screentock.js @@ -28,16 +28,58 @@ AFRAME.registerComponent('screentock', { // hide helpers toggleHelpers(false); - function downloadImage (filename, dataURL) { - downloadImageDataURL(filename, dataURL); - // show helpers - toggleHelpers(true); - } - function toggleHelpers(show) { if (inspector && inspector.opened) inspector.sceneHelpers.visible = show; } + function createCanvasWithScreenshot(aframeCanvas) { + let screenshotCanvas = document.querySelector('#screenshotCanvas'); + if (!screenshotCanvas) { + screenshotCanvas = document.createElement('canvas'); + screenshotCanvas.id = 'screenshotCanvas'; + screenshotCanvas.hidden = true; + document.body.appendChild(screenshotCanvas); + } + screenshotCanvas.width = aframeCanvas.width; + screenshotCanvas.height = aframeCanvas.height; + const ctxScreenshot = screenshotCanvas.getContext("2d"); + + // draw image from Aframe canvas to screenshot canvas + ctxScreenshot.drawImage(aframeCanvas, 0, 0); + // add scene title to screenshot + addTitleToCanvas(ctxScreenshot, screenshotCanvas.width, screenshotCanvas.height); + // add 3DStreet logo + addLogoToCanvas(ctxScreenshot); + return screenshotCanvas; + } + + function addTitleToCanvas (ctx, screenWidth, screenHeight) { + ctx.font = "25px Lato"; + ctx.textAlign = 'center'; + ctx.fillStyle = '#FFF'; + ctx.fillText(STREET.utils.getCurrentSceneTitle(), + screenWidth - screenWidth/2, + screenHeight - 43); + } + + function addLogoToCanvas (ctx) { + ctx.font = "lighter 40px sans-serif"; + ctx.textAlign = 'left'; + ctx.fillStyle = '#FFF'; + ctx.fillText('3D', + 50, + 80); + ctx.font = "Bolder 40px sans-serif"; + ctx.textAlign = 'left'; + ctx.fillStyle = '#FFF'; + ctx.fillText('Street', + 100, + 80); + + //const logoImg = document.querySelector('img.viewer-logo-img'); + //ctx.drawImage(logoImg, 0, 0, 250, 43, 40, 40, 250, 43); + } + function downloadImageDataURL (filename, dataURL) { const element = document.createElement('a'); const url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); @@ -50,17 +92,21 @@ AFRAME.registerComponent('screentock', { } const saveFilename = filename + '.' + type; + // render one frame renderer.render(AFRAME.scenes[0].object3D, AFRAME.scenes[0].camera); + const screenshotCanvas = createCanvasWithScreenshot(renderer.domElement); if (type == 'img') { imgElement.src = renderer.domElement.toDataURL(); return; } if (type == 'png') { - downloadImage(saveFilename, renderer.domElement.toDataURL('image/png')); + downloadImageDataURL(saveFilename, screenshotCanvas.toDataURL('image/png')); } else { - downloadImage(saveFilename, renderer.domElement.toDataURL('image/jpeg', 0.95)); + downloadImageDataURL(saveFilename, screenshotCanvas.toDataURL('image/jpeg', 0.95)); } + // show helpers + toggleHelpers(true); }, update: function () { // this should be paused when not in use. could be throttled too From 5763cef3f2451fa21b9152ab6e2fd31df1c0bfe7 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Wed, 15 Nov 2023 16:43:51 -0300 Subject: [PATCH 3/6] take logo for screenshot from svg logo --- src/components/screentock.js | 41 ++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/screentock.js b/src/components/screentock.js index 16e54f212..a37452177 100644 --- a/src/components/screentock.js +++ b/src/components/screentock.js @@ -21,7 +21,7 @@ AFRAME.registerComponent('screentock', { type: { type: 'string', default: 'jpg' }, // png, jpg, img imgElementSelector: { type: 'selector' } }, - takeScreenshotNow: function (filename, type, imgElement) { + takeScreenshotNow: async function (filename, type, imgElement) { const inspector = AFRAME.INSPECTOR; const renderer = AFRAME.scenes[0].renderer; @@ -32,7 +32,7 @@ AFRAME.registerComponent('screentock', { if (inspector && inspector.opened) inspector.sceneHelpers.visible = show; } - function createCanvasWithScreenshot(aframeCanvas) { + const createCanvasWithScreenshot = async (aframeCanvas) => { let screenshotCanvas = document.querySelector('#screenshotCanvas'); if (!screenshotCanvas) { screenshotCanvas = document.createElement('canvas'); @@ -49,7 +49,7 @@ AFRAME.registerComponent('screentock', { // add scene title to screenshot addTitleToCanvas(ctxScreenshot, screenshotCanvas.width, screenshotCanvas.height); // add 3DStreet logo - addLogoToCanvas(ctxScreenshot); + await addLogoToCanvas(ctxScreenshot); return screenshotCanvas; } @@ -62,25 +62,25 @@ AFRAME.registerComponent('screentock', { screenHeight - 43); } - function addLogoToCanvas (ctx) { - ctx.font = "lighter 40px sans-serif"; - ctx.textAlign = 'left'; - ctx.fillStyle = '#FFF'; - ctx.fillText('3D', - 50, - 80); - ctx.font = "Bolder 40px sans-serif"; - ctx.textAlign = 'left'; - ctx.fillStyle = '#FFF'; - ctx.fillText('Street', - 100, - 80); + const addLogoToCanvas = async (ctx) => { + + const logoImg = document.querySelector('img.viewer-logo-img') + const logoSVG = document.querySelector('#aframeInspector #logoImg svg'); - //const logoImg = document.querySelector('img.viewer-logo-img'); - //ctx.drawImage(logoImg, 0, 0, 250, 43, 40, 40, 250, 43); + if (logoImg) { + ctx.drawImage(logoImg, 0, 0, 135, 43, 40, 30, 135, 43); + } else if (logoSVG) { + const image = new Image(); + image.src = `data:image/svg+xml;base64,${window.btoa(logoSVG.outerHTML)}`; + await new Promise((resolve) => { + image.onload = resolve; + }); + + ctx.drawImage(image, 0, 0, 135, 23, 40, 40, 135, 23); + } } - function downloadImageDataURL (filename, dataURL) { + function downloadImageDataURL (filename, dataURL, scnrenshotCanvas) { const element = document.createElement('a'); const url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); element.setAttribute('href', url); @@ -90,11 +90,12 @@ AFRAME.registerComponent('screentock', { element.click(); document.body.removeChild(element); } + const saveFilename = filename + '.' + type; // render one frame renderer.render(AFRAME.scenes[0].object3D, AFRAME.scenes[0].camera); - const screenshotCanvas = createCanvasWithScreenshot(renderer.domElement); + const screenshotCanvas = await createCanvasWithScreenshot(renderer.domElement); if (type == 'img') { imgElement.src = renderer.domElement.toDataURL(); From 34ad27bf0675825e01c45713ca88c8eb4cc177d6 Mon Sep 17 00:00:00 2001 From: Alexander Goryushkin Date: Thu, 16 Nov 2023 15:30:15 -0300 Subject: [PATCH 4/6] hide also cursor-teleport in screenshot --- src/components/screentock.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/screentock.js b/src/components/screentock.js index a37452177..e41261a2b 100644 --- a/src/components/screentock.js +++ b/src/components/screentock.js @@ -30,6 +30,12 @@ AFRAME.registerComponent('screentock', { function toggleHelpers(show) { if (inspector && inspector.opened) inspector.sceneHelpers.visible = show; + if (show) { + document.querySelector('#cameraRig') + .setAttribute('cursor-teleport', "cameraRig: #cameraRig; cameraHead: #camera;"); + } else { + document.querySelector('#cameraRig').removeAttribute('cursor-teleport'); + } } const createCanvasWithScreenshot = async (aframeCanvas) => { @@ -109,7 +115,11 @@ AFRAME.registerComponent('screentock', { // show helpers toggleHelpers(true); }, - update: function () { + update: function (oldData) { + // If `oldData` is empty, then this means we're in the initialization process. + // No need to update. + if (Object.keys(oldData).length === 0) { return; } + // this should be paused when not in use. could be throttled too if (this.data.takeScreenshot) { this.data.takeScreenshot = false; From 7677cf834f0d9d3b5bed579f0e0b92b606563787 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Fri, 24 Nov 2023 15:46:50 -0800 Subject: [PATCH 5/6] use new function to generate screenshot to img element --- src/components/screentock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/screentock.js b/src/components/screentock.js index e41261a2b..74a9de489 100644 --- a/src/components/screentock.js +++ b/src/components/screentock.js @@ -104,7 +104,7 @@ AFRAME.registerComponent('screentock', { const screenshotCanvas = await createCanvasWithScreenshot(renderer.domElement); if (type == 'img') { - imgElement.src = renderer.domElement.toDataURL(); + imgElement.src = screenshotCanvas.toDataURL(); return; } if (type == 'png') { From afe95d81f81eb4a5578d4a83ed7b375eac00a6ab Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Fri, 24 Nov 2023 15:47:32 -0800 Subject: [PATCH 6/6] increase size of logo --- src/components/screentock.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/screentock.js b/src/components/screentock.js index 74a9de489..519369e1f 100644 --- a/src/components/screentock.js +++ b/src/components/screentock.js @@ -74,7 +74,7 @@ AFRAME.registerComponent('screentock', { const logoSVG = document.querySelector('#aframeInspector #logoImg svg'); if (logoImg) { - ctx.drawImage(logoImg, 0, 0, 135, 43, 40, 30, 135, 43); + ctx.drawImage(logoImg, 0, 0, 135, 43, 40, 30, 270, 86); } else if (logoSVG) { const image = new Image(); image.src = `data:image/svg+xml;base64,${window.btoa(logoSVG.outerHTML)}`; @@ -82,7 +82,7 @@ AFRAME.registerComponent('screentock', { image.onload = resolve; }); - ctx.drawImage(image, 0, 0, 135, 23, 40, 40, 135, 23); + ctx.drawImage(image, 0, 0, 135, 23, 40, 40, 270, 86); } }