From d3599dd3f5c2b1f6941a5b942efbc1dfa3f5c5da Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 10 Feb 2020 00:13:54 +0100 Subject: [PATCH] Saving Video --- Animation.js | 8 +++++++- Canvas.js | 30 ++++++++++++++++------------ DesignerSpace/Workspace/Workspace.js | 10 +++++----- Globals.js | 5 ++++- Spaces/TopSpace.js | 6 +++++- Utilities.js | 4 ++-- 6 files changed, 40 insertions(+), 23 deletions(-) diff --git a/Animation.js b/Animation.js index cd00a0fb7..d141301f1 100644 --- a/Animation.js +++ b/Animation.js @@ -121,6 +121,13 @@ function newAnimation () { browserCanvas.height = 1 } + /* Gif Recording */ + + if (areWeRecording === true) { + console.log('ADDING FRAME') + mediaRecorder.capture(browserCanvas) + } + /* We request the next frame to be drawn, and stablishing a loop */ /* Use this code for full animation speed. */ @@ -148,4 +155,3 @@ function newAnimation () { browserCanvasContext.fill() } } - diff --git a/Canvas.js b/Canvas.js index a37e2f31e..1246f2476 100644 --- a/Canvas.js +++ b/Canvas.js @@ -194,7 +194,24 @@ function newCanvas () { } } + function checkGifRecording (event) { + if (event.keyCode === 121) { // F10 + if (areWeRecording === false) { + mediaRecorder = new CCapture({ format: 'webm', framerate: 12, name: 'Superalgos.video' }) + mediaRecorder.start() + areWeRecording = true + console.log('RECORDING') + } else { + console.log('SAVING') + areWeRecording = false + mediaRecorder.stop() + mediaRecorder.save() + } + } + } function onKeyDown (event) { + checkGifRecording(event) + let nodeOnFocus = canvas.designerSpace.workspace.getNodeThatIsOnFocus() if (nodeOnFocus !== undefined) { if (nodeOnFocus.payload.uiObject.codeEditor !== undefined) { @@ -231,19 +248,6 @@ function newCanvas () { } } - if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Regenerates APP SCHEMA FILE - /* - for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) { - let schemaNode = APP_SCHEMA_ARRAY[i] - schemaNode.addLeftIcons = true - } - */ - let text = JSON.stringify(APP_SCHEMA_ARRAY) - let fileName = 'AppSchema.json' - download(fileName, text) - return - } - if (event.altKey === true && event.code === 'ArrowUp') { thisObject.cockpitSpace.toTop() return diff --git a/DesignerSpace/Workspace/Workspace.js b/DesignerSpace/Workspace/Workspace.js index 9c2bb4721..657b55f13 100644 --- a/DesignerSpace/Workspace/Workspace.js +++ b/DesignerSpace/Workspace/Workspace.js @@ -260,14 +260,14 @@ function newWorkspace () { { let text = stringifyWorkspace(true) let fileName = 'Share - ' + payload.node.type + ' - ' + payload.node.name + '.json' - download(fileName, text) + downloadText(fileName, text) } break case 'Backup Workspace': { let text = stringifyWorkspace(false) let fileName = 'Backup - ' + payload.node.type + ' - ' + payload.node.name + '.json' - download(fileName, text) + downloadText(fileName, text) } break case 'Edit Code': @@ -284,7 +284,7 @@ function newWorkspace () { nodeName = '.' + nodeName } let fileName = 'Share - ' + payload.node.type + ' - ' + nodeName + '.json' - download(fileName, text) + downloadText(fileName, text) } break @@ -299,7 +299,7 @@ function newWorkspace () { nodeName = ' ' + nodeName } let fileName = 'Backup - ' + payload.node.type + ' - ' + nodeName + '.json' - download(fileName, text) + downloadText(fileName, text) } break @@ -314,7 +314,7 @@ function newWorkspace () { nodeName = ' ' + nodeName } let fileName = 'Clone - ' + payload.node.type + ' - ' + nodeName + '.json' - download(fileName, text) + downloadText(fileName, text) } break diff --git a/Globals.js b/Globals.js index 74e3acce9..0a7a91072 100644 --- a/Globals.js +++ b/Globals.js @@ -42,7 +42,7 @@ UI_FONT = { }; const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 10 // This regulates some behavious changes that happens when the user zoom out below this level. -const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 5 // This help regulate when to change the Time Frame base on the level of zoom out. +const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 5 // This help regulate when to change the Time Frame base on the level of zoom out. let FONT_ASPECT_RATIO = 0.32; @@ -211,6 +211,9 @@ We define here the size of the chartSpace. It has to bee enough big in order to const TIME_MACHINE_WIDTH = 250; const TIME_MACHINE_HEIGHT = 250 / 50; +let mediaRecorder // to downloadText canvas animation as a mediaRecorder +let areWeRecording = false + function toRadians(angle) { return angle * (Math.PI / 180); } diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js index 7a2b22fb6..a9295b91a 100644 --- a/Spaces/TopSpace.js +++ b/Spaces/TopSpace.js @@ -59,7 +59,11 @@ function newTopSpace () { browserCanvasContext.beginPath() browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')' + if (areWeRecording === true) { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' + } else { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')' + } browserCanvasContext.closePath() diff --git a/Utilities.js b/Utilities.js index d9c134816..d95e06b72 100644 --- a/Utilities.js +++ b/Utilities.js @@ -82,10 +82,10 @@ function convertTimeFrameToName (pTimeFrame) { } } -function download (filename, text) { +function downloadText (filename, text) { let element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)) - element.setAttribute('download', filename) + element.setAttribute('downloadText', filename) element.style.display = 'none' document.body.appendChild(element) element.click()