ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reformatted and gjslinted example-screenshot.js.

Browse Source
This commit is contained in:
Marc Jansen
2013-03-15 11:40:55 +01:00
parent 8692c42318
commit 24d3c903fe
1 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bin/example-screenshot.js
+102 -102
View File
@@ -1,3 +1,5 @@
/** /**
* This script is supposed to be executed via phantomjs. It will generate * This script is supposed to be executed via phantomjs. It will generate
* screenshots of the html files in the directory specified by a commandline * screenshots of the html files in the directory specified by a commandline
@@ -10,158 +12,156 @@
* http://localhost:8000/ol3/examples/ \ * http://localhost:8000/ol3/examples/ \
* ../examples * ../examples
* *
* The above command will generate `*.png` files in `examples/` for all html * The above command will generate `*.png` files in `examples/` for all html
* files that are served through `http://localhost:8000/ol3/examples/`. * files that are served through `http://localhost:8000/ol3/examples/`.
* *
* So if there is a file `my-humpty-example.html` inside of the relative folder * So if there is a file `my-humpty-example.html` inside of the relative folder
* `../examples/` which is being served through the webserver so that * `../examples/` which is being served through the webserver so that
* `http://localhost:8000/ol3/examples/my-humpty-example.html` is a valid and * `http://localhost:8000/ol3/examples/my-humpty-example.html` is a valid and
* reachable URL, this script will generate a screenshot and store it as * reachable URL, this script will generate a screenshot and store it as
* `my-humpty-example.html.png`. * `my-humpty-example.html.png`.
* *
* The query string `?mode=raw` will be appended to the generated URL. * The query string `?mode=raw` will be appended to the generated URL.
* *
* Known limitations: * Known limitations:
* *
* As phantomjs doesn't support WebGL (see e.g. * As phantomjs doesn't support WebGL (see e.g.
* https://github.com/ariya/phantomjs/wiki/Supported-Web-Standards and * https://github.com/ariya/phantomjs/wiki/Supported-Web-Standards and
* http://code.google.com/p/phantomjs/issues/detail?id=273) This won't render * http://code.google.com/p/phantomjs/issues/detail?id=273) This won't render
* OpenLayers maps rendered through the webglrenderer. * OpenLayers maps rendered through the webglrenderer.
* *
* In parts based upon this gist: https://gist.github.com/crazy4groovy/3160121 * In parts based upon this gist: https://gist.github.com/crazy4groovy/3160121
*/ */
(function(){ // global closure (function() { // global closure
var // imports var page = require('webpage').create(), // imports
page = require('webpage').create(), fs = require('fs'),
fs = require('fs'), system = require('system'),
system = require('system'), // arguments
// arguments baseExamplesUrl = system.args[1],
baseExamplesUrl = system.args[1]; exampleDir = system.args[2],
exampleDir = system.args[2]; // various settings
// various settings ignoreFiles = [
ignoreFiles = [
'example-list.html' 'example-list.html'
], ],
intervalMillisecs = 25, intervalMillisecs = 25,
renderMillisecs = 2000, renderMillisecs = 2000,
// basic variables // basic variables
curDir = fs.workingDirectory, curDir = fs.workingDirectory,
exampleDirList = fs.list(exampleDir), exampleDirList = fs.list(exampleDir),
pageindex = 0, pageindex = 0,
fileName = '', fileName = '',
htmlFiles = [], htmlFiles = [],
lenHtmlFiles = 0, lenHtmlFiles = 0,
loadInProgress = false; loadInProgress = false;
// simple object with helper functions // simple object with helper functions
var util = { var util = {
/** /**
* Returns the basename of a file given a path. * Returns the basename of a file given a path.
*/ */
baseName: function(path) { baseName: function(path) {
var parts = path.split(fs.separator); var parts = path.split(fs.separator);
return parts[parts.length-1]; return parts[parts.length - 1];
}, },
/** /**
* Super basic test whether a file can be considered a HTML-file. * Super basic test whether a file can be considered a HTML-file.
*/ */
isHtmlFile: function(filename) { isHtmlFile: function(filename) {
return (/\.html?$/).test(filename); return (/\.html?$/).test(filename);
}, },
/** /**
* Appends a slash to given string if it isn't there already. * Appends a slash to given string if it isn't there already.
*/ */
appendSlash: function(str) { appendSlash: function(str) {
return ((/\/$/).test(str)) ? str : str + "/"; return ((/\/$/).test(str)) ? str : str + '/';
}, },
/** /**
* generates an URL out of * Generates an URL out of given baseurl and path.
*/ */
buildUrl: function(baseurl, path){ buildUrl: function(baseurl, path) {
var name = util.baseName(path), var name = util.baseName(path),
mode = "raw"; mode = 'raw';
return util.appendSlash(baseurl) + name + "?mode=" + mode; return util.appendSlash(baseurl) + name + '?mode=' + mode;
}, },
/** /**
* Simple progressbar logger that uses our globals. * Simple progressbar logger that uses our globals.
*/ */
logProgress: function() { logProgress: function() {
var doneSymbol = "-", var doneSymbol = '-',
todoSymbol = " ", todoSymbol = ' ',
str = "[", str = '[',
percent = (lenHtmlFiles === 0) ? 0 :(pageindex/lenHtmlFiles*100), percent = (lenHtmlFiles === 0) ? 0 : (pageindex / lenHtmlFiles * 100),
i=0; i = 0;
for (;i<pageindex;i++) { for (; i < pageindex; i++) {
str += doneSymbol; str += doneSymbol;
} }
for (i=0;i<lenHtmlFiles-pageindex;i++) { for (i = 0; i < lenHtmlFiles - pageindex; i++) {
str += (i === 0) ? ">" : todoSymbol; str += (i === 0) ? '>' : todoSymbol;
} }
str += "]"; str += ']';
if (percent < 10) { if (percent < 10) {
str += " "; str += ' ';
} else if (percent < 100) { } else if (percent < 100) {
str += " "; str += ' ';
} }
str += " " + percent.toFixed(1) + " % done"; str += ' ' + percent.toFixed(1) + ' % done';
if (fileName !== "") { if (fileName !== '') {
str += ", " + util.baseName(fileName) + ""; str += ', ' + util.baseName(fileName) + '';
} }
console.log(str); console.log(str);
} }
}; };
// iterate over all files in examples directory // iterate over all files in examples directory
// and find the HTML files. // and find the HTML files.
for(var i = 0; i< exampleDirList.length; i++) { for (var i = 0; i < exampleDirList.length; i++) {
var fullpath = exampleDir + fs.separator + exampleDirList[i]; var fullpath = exampleDir + fs.separator + exampleDirList[i];
if(fs.isFile(fullpath) && util.isHtmlFile(fullpath) && if (fs.isFile(fullpath) && util.isHtmlFile(fullpath) &&
ignoreFiles.indexOf(util.baseName(fullpath)) === -1 ) { ignoreFiles.indexOf(util.baseName(fullpath)) === -1) {
// TODO: make this more async (i.e. pop on/off stack WHILE rending pages) //TODO: make this more async (i.e. pop on/off stack WHILE rending pages)
htmlFiles.push(fullpath); htmlFiles.push(fullpath);
} }
} }
lenHtmlFiles = htmlFiles.length; lenHtmlFiles = htmlFiles.length;
console.log("Capturing " + lenHtmlFiles + " example screenshots."); console.log('Capturing ' + lenHtmlFiles + ' example screenshots.');
// The main interval function that is executed regularily and renders a page to // The main interval function that is executed regularily and renders a
// a file // page to a file
var interval = setInterval(function() { var interval = setInterval(function() {
if (!loadInProgress && pageindex < lenHtmlFiles) { if (!loadInProgress && pageindex < lenHtmlFiles) {
util.logProgress(); util.logProgress();
fileName = htmlFiles[pageindex]; fileName = htmlFiles[pageindex];
page.viewportSize = { width: 800, height: 600 }; page.viewportSize = { width: 800, height: 600 };
page.clipRect = { page.clipRect = {
top: 0, top: 0,
left: 0, left: 0,
width: page.viewportSize.width, width: page.viewportSize.width,
height: page.viewportSize.height height: page.viewportSize.height
}; };
page.open(util.buildUrl(baseExamplesUrl, htmlFiles[pageindex])); page.open(util.buildUrl(baseExamplesUrl, htmlFiles[pageindex]));
} }
if (pageindex == lenHtmlFiles) { if (pageindex == lenHtmlFiles) {
util.logProgress(); util.logProgress();
console.log(lenHtmlFiles + " screenshots captured."); console.log(lenHtmlFiles + ' screenshots captured.');
phantom.exit(); phantom.exit();
} }
}, intervalMillisecs); }, intervalMillisecs);
// set loadInProgress flag so we only process one image at time. // set loadInProgress flag so we only process one image at time.
page.onLoadStarted = function() { page.onLoadStarted = function() {
loadInProgress = true; loadInProgress = true;
}; };
// When the page is loaded, render it to an image // When the page is loaded, render it to an image
page.onLoadFinished = function() { page.onLoadFinished = function() {
var dest = exampleDir + fs.separator + util.baseName(fileName) + ".png"; var dest = exampleDir + fs.separator + util.baseName(fileName) + '.png';
window.setTimeout(function(){ window.setTimeout(function() {
loadInProgress = false; loadInProgress = false;
page.render(dest); // actually render the page. page.render(dest); // actually render the page.
pageindex++; pageindex++;
}, renderMillisecs); }, renderMillisecs);
}; };
})(); // eof global closure })(); // eof global closure