From 85a90c128e9ea17ec835bff7b6633191d8740bde Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 13 May 2020 21:32:42 +0200 Subject: [PATCH] Market Panorame Implemented --- Animation.js | 12 ++++++++-- Canvas.js | 17 ++++++++++----- ChartingSpace/EdgeEditor.js | 15 ++++++++++--- DesignSpace/Workspace/Workspace.js | 4 +++- Globals.js | 8 +++++-- Spaces/TopSpace.js | 2 +- Utilities.js | 35 ++++++++++++++++++++++++++++-- 7 files changed, 76 insertions(+), 17 deletions(-) diff --git a/Animation.js b/Animation.js index 20f967a48..cab8a470c 100644 --- a/Animation.js +++ b/Animation.js @@ -144,12 +144,20 @@ function newAnimation () { browserCanvas.height = 1 } - /* Media Recording */ + /* Video Recording */ videoRecorder.physics() - if (areWeRecording === true) { + if (ARE_WE_RECORDING_A_VIDEO === true) { videoRecorder.recordCanvas() } + /* Panorama Recording */ + if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) { + if (PANORAMA_WAS_PANNED === true) { + addToMarketPanorama() + PANORAMA_WAS_PANNED = false + } + } + /* We request the next frame to be drawn, and stablishing a loop */ /* Use this code for full animation speed. */ diff --git a/Canvas.js b/Canvas.js index 4dd01deb8..8a2cfaa4f 100644 --- a/Canvas.js +++ b/Canvas.js @@ -213,30 +213,35 @@ function newCanvas () { if ((event.ctrlKey === true || event.metaKey === true)) { let constructorParams switch (event.keyCode) { + case 118: { // F7 + downloadPanorama('Superalgos.Market.Panorama') + return + break + } case 119: { // F8 - downloadCanvas('Superalgos.image.capture') + downloadCanvas('Superalgos.Image.Capture', browserCanvas) return break } case 120: { // F9 - constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.video.capture'} + constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.Video.Capture'} break } case 121: { // F10 - constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.video.capture' } + constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.Video.Capture' } break } default: return } - if (areWeRecording === false) { + if (ARE_WE_RECORDING_A_VIDEO === false) { console.log('RECORDING', constructorParams.format) mediaRecorder = new CCapture(constructorParams) mediaRecorder.start() - areWeRecording = true + ARE_WE_RECORDING_A_VIDEO = true } else { console.log('SAVING', constructorParams.format) - areWeRecording = false + ARE_WE_RECORDING_A_VIDEO = false mediaRecorder.stop() mediaRecorder.save() } diff --git a/ChartingSpace/EdgeEditor.js b/ChartingSpace/EdgeEditor.js index 6932fa58b..134d0006f 100644 --- a/ChartingSpace/EdgeEditor.js +++ b/ChartingSpace/EdgeEditor.js @@ -195,9 +195,18 @@ function newEdgeEditor () { } if (event.shiftKey === false && event.ctrlKey === false && event.code === 'ArrowRight') { - onDragStarted(event) - thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP - whatHappened = 'left or right arrow key pressed' + if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) { + if (PANORAMA_WAS_PANNED === false) { + PANORAMA_WAS_PANNED = true + onDragStarted(event) + thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP * 2 + whatHappened = 'left or right arrow key pressed' + } + } else { + onDragStarted(event) + thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP + whatHappened = 'left or right arrow key pressed' + } return } diff --git a/DesignSpace/Workspace/Workspace.js b/DesignSpace/Workspace/Workspace.js index 4e0758bd4..710f90310 100644 --- a/DesignSpace/Workspace/Workspace.js +++ b/DesignSpace/Workspace/Workspace.js @@ -198,7 +198,9 @@ function newWorkspace () { if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) { window.localStorage.setItem('Last Used Workspace', workspace.name) window.localStorage.setItem('Session Timestamp', sessionTimestamp) - canvas.cockpitSpace.setStatus(workspace.name + ' Saved.', 50, canvas.cockpitSpace.statusTypes.ALL_GOOD) + if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) { + canvas.cockpitSpace.setStatus(workspace.name + ' Saved.', 50, canvas.cockpitSpace.statusTypes.ALL_GOOD) + } } else { canvas.cockpitSpace.setStatus('Could not save the Workspace at the Backend. Please check the Backend Console for more information.', 150, canvas.cockpitSpace.statusTypes.WARNING) } diff --git a/Globals.js b/Globals.js index b0a7414fa..92038622b 100644 --- a/Globals.js +++ b/Globals.js @@ -222,9 +222,13 @@ const TIME_MACHINE_WIDTH = 8; const TIME_MACHINE_HEIGHT = 8; let mediaRecorder // to downloadText canvas animation as a mediaRecorder -let areWeRecording = false +let marketPanoramaCanvas +let ARE_WE_RECORDING_A_VIDEO = false +let ARE_WE_RECORDING_A_MARKET_PANORAMA = false +let PANORAMA_WAS_PANNED = false +let CURRENT_PANORAMA_POSITION = 0 -let canWeDraw = false // This global variable regulates when spaces can or can not draw their contents. +let canWeDraw = false // This global variable regulates when spaces can or can not draw their contents. function toRadians(angle) { return angle * (Math.PI / 180); diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js index a7dcf5e62..c88dd2960 100644 --- a/Spaces/TopSpace.js +++ b/Spaces/TopSpace.js @@ -66,7 +66,7 @@ function newTopSpace () { let opacity = 1 browserCanvasContext.beginPath() browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height) - if (areWeRecording === true) { + if (ARE_WE_RECORDING_A_VIDEO === true) { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')' } else { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' diff --git a/Utilities.js b/Utilities.js index 294c6ec07..5c739b3d7 100644 --- a/Utilities.js +++ b/Utilities.js @@ -108,8 +108,8 @@ function downloadText (filename, text) { document.body.removeChild(element) } -function downloadCanvas (filename) { - let data = browserCanvas.toDataURL('image/png', 1) +function downloadCanvas (filename, canvasToUse) { + let data = canvasToUse.toDataURL('image/png', 1) /* Change MIME type to trick the browser to downlaod the file instead of displaying it */ data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream') @@ -125,6 +125,37 @@ function downloadCanvas (filename) { document.body.removeChild(element) }; +function downloadPanorama (filename) { + let INITIAL_WIDTH = 800 + let FINAL_WIDTH = browserCanvas.width - INITIAL_WIDTH + + if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) { + /* We start recording the panorame. */ + ARE_WE_RECORDING_A_MARKET_PANORAMA = true + marketPanoramaCanvas = document.createElement('canvas') + marketPanoramaCanvas.width = INITIAL_WIDTH * 50 + marketPanoramaCanvas.height = browserCanvas.height + marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, 0, 0, INITIAL_WIDTH, browserCanvas.height, 0, 0, INITIAL_WIDTH, browserCanvas.height) + CURRENT_PANORAMA_POSITION = INITIAL_WIDTH + } else { + /* We stop recording and download the resulting image. */ + ARE_WE_RECORDING_A_MARKET_PANORAMA = false + marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, browserCanvas.width - FINAL_WIDTH, 0, FINAL_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, FINAL_WIDTH, browserCanvas.height) + let finalResultCanvas = document.createElement('canvas') + finalResultCanvas.width = CURRENT_PANORAMA_POSITION + FINAL_WIDTH + finalResultCanvas.height = browserCanvas.height + finalResultCanvas.getContext('2d').drawImage(marketPanoramaCanvas, 0, 0, finalResultCanvas.width, browserCanvas.height, 0, 0, finalResultCanvas.width, browserCanvas.height) + downloadCanvas(filename, finalResultCanvas) + } +} + +function addToMarketPanorama () { + let SECTION_WIDTH = 80 * 2 + let INITIAL_POSITION = 800 - SECTION_WIDTH + marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, INITIAL_POSITION, 0, SECTION_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, SECTION_WIDTH, browserCanvas.height) + CURRENT_PANORAMA_POSITION = CURRENT_PANORAMA_POSITION + SECTION_WIDTH +} + function transformThisPoint (point, container) { /* We make the point relative to the current frame */