guillaume_oisux
/
terminalizer
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Revamp to use terminalizer-player for rendering

master
Mohammad Fares 4 years ago
parent
8424b7364b
commit
f757546b31
4 changed files with 160 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      render/index.html
  2. 19
      render/index.js
  3. 15
      render/src/css/app.css
  4. 127
      render/src/js/app.js

115
render/index.html
View File

@ -1,124 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Terminalizer</title>
<title>Renderer</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../node_modules/xterm/dist/xterm.css">
<link rel="stylesheet" href="../lib/terminalizer.css">
<style type="text/css">
body {
background-color: white;
margin: 0;
}
#terminal {
display: inline-block;
font-size: 0px;
}
</style>
<link rel="stylesheet" type="text/css" href="dist/css/app.css">
<script src="dist/js/app.js" type="text/javascript"></script>
</head>
<body>
<div id="terminal"></div>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="../node_modules/xterm/dist/xterm.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/async/dist/async.min.js"></script>
<script src="../lib/terminalizer.js"></script>
<script type="text/javascript">
var fs = require('fs'),
path = require('path'),
remote = require('electron').remote,
ipcRenderer = require('electron').ipcRenderer;
var currentWindow = remote.getCurrentWindow(),
capturePage = currentWindow.webContents.capturePage,
step = remote.getGlobal('step');
/**
* Used for the step option
* @type {Number}
*/
var stepsCounter = 0;
/**
* Options for the terminalizer plugin
* @type {Object}
*/
var options = {
recordingFile: 'data.json',
frameDelay: 0
};
/**
* A middleware that called after rendering frames
*
* @param {Object} record {delay, content, index}
* @param {Function} next
*/
options.afterMiddleware = function(record, next) {
var width = this.width();
var height = this.height();
var captureRect = {x: 0, y: 0, width: width, height: height};
if (stepsCounter != 0) {
stepsCounter = (stepsCounter + 1) % step;
return next();
}
stepsCounter = (stepsCounter + 1) % step;
// A workaround by a delay to make sure the record is rendered
setTimeout(function() {
capturePage(captureRect, function(img) {
var outputPath = path.join(__dirname, '/frames/' + record.index + '.png');
fs.writeFileSync(outputPath, img.toPNG());
ipcRenderer.send('captured', record.index);
next();
});
}, 10);
};
// Initialize the terminalizer plugin
$('#terminal').terminalizer(options);
/**
* A callback function for the event:
* playingDone
*/
$('#terminal').on('playingDone', function() {
currentWindow.close();
});
/**
* Catch all unhandled errors
*
* @param {String} errorMsg
*/
window.onerror = function(errorMsg) {
ipcRenderer.send('error', errorMsg);
};
</script>
<script>if (window.module) module = window.module;</script>
</body>
</html>

19
render/index.js
View File

@ -11,9 +11,19 @@ var path = require('path'),
ipcMain = require('electron').ipcMain,
os = require('os');
// Set as global to be read by the web page
/**
* The step option
* To reduce the number of rendered frames (step > 1)
* @type {Number}
*/
global.step = process.argv[2] || 1;
/**
* The temporary rendering directory's path
* @type {String}
*/
global.renderDir = path.join(__dirname, 'frames');
// Set the display scale factor to 1
app.commandLine.appendSwitch('force-device-scale-factor', 1);
@ -55,10 +65,11 @@ ipcMain.on('captured', function(event, recordIndex) {
* A callback function for the event:
* When something unexpected happened
*
* @param {String} errorMsg
* @param {Object} event
* @param {String} error
*/
ipcMain.on('error', function(errorMsg) {
ipcMain.on('error', function(event, error) {
console.error(errorMsg);
process.stderr.write(error);
});

15
render/src/css/app.css
View File

@ -0,0 +1,15 @@
/**
* Terminalizer
*
* @author Mohammad Fares <faressoft.com@gmail.com>
*/
body {
background-color: white;
margin: 0;
}
#terminal {
display: inline-block;
font-size: 0px;
}

127
render/src/js/app.js
View File

@ -0,0 +1,127 @@
/**
* Terminalizer
*
* @author Mohammad Fares <faressoft.com@gmail.com>
*/
var fs = require('fs'),
path = require('path'),
async = require('async'),
remote = require('electron').remote,
ipcRenderer = require('electron').ipcRenderer,
terminalizerPlayer = require('terminalizer-player');
var currentWindow = remote.getCurrentWindow(),
capturePage = currentWindow.webContents.capturePage,
step = remote.getGlobal('step'),
renderDir = remote.getGlobal('renderDir');
// Styles
import '../css/app.css';
import 'terminalizer-player/dist/css/terminalizer.min.css';
import 'xterm/dist/xterm.css';
/**
* Used for the step option
* @type {Number}
*/
var stepsCounter = 0;
/**
* A callback function for the event:
* When the document is loaded
*/
$(document).ready(function() {
// Initialize the terminalizer plugin
$('#terminal').terminalizer({
recordingFile: 'data.json',
autoplay: true,
controls: false,
});
/**
* A callback function for the event:
* When the terminal playing is started
*/
$('#terminal').on('playingStarted', function() {
var terminalizer = $('#terminal').data('terminalizer');
var framesCount = terminalizer.getFramesCount();
var tasks = [];
terminalizer.pause();
for (var i = 0; i < framesCount; i++) {
(function(frameIndex) {
tasks.push(function(callback) {
terminalizer._applySnapshot(terminalizer._snapshots[frameIndex]);
// A workaround delay to allow rendering
setTimeout(function() {
capture(frameIndex, callback);
}, 20);
});
}(i));
}
async.series(tasks, function(error, result) {
if (error) {
throw new Error(error);
}
currentWindow.close();
});
});
});
/**
* Capture the current frame
*
* @param {Number} frameIndex
* @param {Function} callback
*/
function capture(frameIndex, callback) {
var width = $('#terminal').width();
var height = $('#terminal').height();
var captureRect = {x: 0, y: 0, width: width, height: height};
if (stepsCounter != 0) {
stepsCounter = (stepsCounter + 1) % step;
return callback();
}
stepsCounter = (stepsCounter + 1) % step;
capturePage(captureRect, function(img) {
var outputPath = path.join(renderDir, frameIndex + '.png');
fs.writeFileSync(outputPath, img.toPNG());
ipcRenderer.send('captured', frameIndex);
callback();
});
}
/**
* Catch all unhandled errors
*
* @param {String} error
*/
window.onerror = function(error) {
ipcRenderer.send('error', error);
};
Write Preview
Loading…
Cancel
Save