[docs] added phantomJS script to streamline the screenshots

2026-07-27 19:57:38 +00:00 · 2018-12-04 13:07:00 +01:00
parent 79123392a9
commit 65d072dcf7
2 changed files with 74 additions and 0 deletions
@@ -0,0 +1,22 @@
+These scripts are used to render screenshots of the GUI.
+We use phantomJS (available on Win/Mac/Linux http://phantomjs.org/quick-start.html)
+and you control the script by passing arguments to the JavaScript files:
+
+########## rasterize.js ##########
+argument1: url (ampersand & need to be closed with "&")
+argument2: output file name (you can use .png or .pdf as output format)
+argument3: horisontalXvertical size (OPTIONAL)
+argument4: zoom ("entire page" or "window" or <value> OPTIONAL)
+....Example CLI....
+
+phantomjs rasterize.js http://95.143.204.227/devices?index=1"&"page=1 P001_Setup_Switch_1.png
+
+or
+
+phantomjs rasterize.js http://95.143.204.227/devices?index=1"&"page=1 P001_Setup_Switch_1.png 1200px 2
+
+WE USE THE SECOND EXAMPLE by default (you might need to change zoomFactor if the page is too big).
+
+If the rendering is not working you can use this CLI (arg --debug=true):
+
+phantomjs --debug=true rasterize.js http://95.143.204.227/devices?index=1"&"page=1 P001_Setup_Switch_1.png 1200px 2
@@ -0,0 +1,52 @@
+//removed use strict GROVKILLEN
+var page = require('webpage').create(),
+    system = require('system'),
+    address, output, size;
+
+if (system.args.length < 3 || system.args.length > 5) {
+    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
+    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
+    console.log('                                   "800px*600px" window, clipped to 800x600');
+    phantom.exit(1);
+} else {
+    address = system.args[1];
+    output = system.args[2];
+    page.viewportSize = { width: 600, height: 600 };
+    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
+        size = system.args[3].split('*');
+        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
+                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
+    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
+        size = system.args[3].split('*');
+        if (size.length === 2) {
+            pageWidth = parseInt(size[0], 10);
+            pageHeight = parseInt(size[1], 10);
+            page.viewportSize = { width: pageWidth, height: pageHeight };
+            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
+        } else {
+            console.log("size:", system.args[3]);
+            pageWidth = parseInt(system.args[3], 10);
+            pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
+            console.log ("pageHeight:",pageHeight);
+            page.viewportSize = { width: pageWidth, height: pageHeight };
+        }
+    }
+    if (system.args.length > 4) {
+        page.zoomFactor = system.args[4];
+    }
+    page.open(address, function (status) {
+        if (status !== 'success') {
+            console.log('Unable to load the address!');
+            phantom.exit(1);
+        } else {
+            window.setTimeout(function () {
+                //This is injected because of bug in phantomjs (rendering black background: http://phantomjs.org/tips-and-tricks.html) GROVKILLEN
+                page.evaluate(function() {
+                  document.body.bgColor = 'white';
+                });
+                page.render(output);
+                phantom.exit();
+            }, 200);
+        }
+    });
+}