Saving Video

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()
   }
 }
-

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

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

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);
 }

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()
 

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()