Develop Reference

Rearrangement of pages when creating paginated pdf using html2canvas (async)

I have a dynamic page which depending on some information will create more or less sections. I want to loop through those, make a canvas out of them and bring those sections to a pdf.
I had the page previously running with this code, but i had to change the sections.
var pagina = 0;
var paginas_totales = parseInt('<?= $pagina ?>');
var doc = new jsPDF({
orientation: "landscape",
unit: "mm",
format: [297, 238]
});
$('.generate').on('click', function() {
nextStep();
});
function generaDescarga() {
pagina++;
if(pagina == paginas_totales) {
doc.save('Report <?= html_entity_decode($dataSampling['samp_name']) ?>.pdf');
window.scrollTo(0,0)
} else {
nextStep()
}
}
var j = -1;
function nextStep(){
j++;
if(j >= paginas_totales) return;
$('#loader .contenedor_loader span').text(`Creando página ${j + 1} / ${paginas_totales}`)
//Fix imagen cut
document.querySelector(".page-"+j).scrollIntoView()
setTimeout(() => {
html2canvas(
document.querySelector(".page-"+j),
{
// allowTaint: true,
backgroundColor:"#0d3451",
scale: 2,
userCORS: true,
onrendered: function(canvas) {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
doc.addImage(imgData, 'JPEG', 0, 0);
if (j != paginas_totales - 1) {
doc.addPage();
}
generaDescarga();
}
}
).then(canvas => {// document.body.appendChild(canvas)}
);
}, 10);
}
From here i got plenty of errors, most of them because the asyncronity of the library of html2canvas where i am struggling.
My actual code looks like this
var paginas_totales = parseInt('<?= $pagina ?>');
rendered =0;
$('.generate').on('click', function() {
showLoading();
var doc = new jsPDF({orientation: "landscape",unit: "pt",format: [1125, 900]});
//Generation of empty structure
for (let i = 1; i < paginas_totales; i++) {doc.addPage();}
doc.save('Report <?= $dataSampling['samp_name'] ?>.pdf');
for (let i = 0; i <paginas_totales ; i++) {
var div_renderizar = document.querySelector(".page-"+i);
if (div_renderizar != null){
generateCanvas( doc, i, div_renderizar ,function() {
rendered++;
if (rendered >= paginas_totales){
doc.save('Report.pdf');
hideLoading();
}
});
}else{
console.log("Failing page "+i);
hideLoading();
}
}
});
function generateCanvas(doc, i, div_renderizar, callback){
html2canvas(
div_renderizar,
{ allowTaint: true,
scale: 2,
userCORS: true
}
).then(function (canvas){
let imgData = canvas.toDataURL("image/jpeg", 1.0);
doc.setPage(i);
doc.addImage(imgData, 'JPEG', 0, 0);
}).catch( error => {
console.error("Falló generateCanvas=> "+error);
console.log(new Error().stack);
hideLoading();
});
callback();
}
Where im getting blank pages in the pdf.
At this point i've already managed to get a pdf with all pages but i get it in a random* order, which i guess is due the asyncronity of the library (lighter pages go first)
I've tried adding "async" and "await".
I've updated the libraries to a CDN for both html2canvas and jsPDF
I've tried lots of tutorials like
https://solveforum.com/forums/threads/solved-html2canvas-and-jspdf-rendering-multiple-divs-blank-pdfs.197029/
https://www.freakyjolly.com/html2canvas-multipage-pdf-tutorial/
but most of them focus on static page or pagination depending on height
I've tried different approaches suggested on other SO pages like
HTML2Canvas creating multiple divs
html2canvas screenshot keeps turning up blank (this one because it was generating blank pages)
But the ORDER on the pages go crazy and the log isn't helping, is just telling me that the error is in this function, or in the .min external file, but not what i need.
So what i need is
Create pdf object
Loop for elements like $(".page-"+i) from 0 to last index
Add page for element
Create canvas for that element and insert that IN ORDER into the pdf
Download/Preview the results
The html structure is working perfect, having some pdfs being correctly generated proves this.
Both html2canvas and jsPDF are correctly installed/configured
The issue im sure its between point 2 and 4.
Hope its clear enough. Thank you for all help, really stuck on this, i have tried a lot of approaches, but i wanted to be readable.

How to lock slider and prevent updating of values with mouse into dat.GUI menu

I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button).
For the moment, I have the following dat.GUI menu:
Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters "Rotation x" and "Rotation y".
Here is the concerned part of code for this menu:
// Create GUI
var gui = new dat.GUI({
autoplace: false,
width: 350,
height: 9 * 32 - 1
});
var params = {
GreatCircle : '',
Rotationx : torusRotationInitX,
Rotationy : torusRotationInitY,
StartingVector : '',
ComponentVectorTheta : 15.0,
ComponentVectorPhi : 15.0,
CovariantDerivativeVector : '',
ComponentCovariantDerivativeTheta : 15.0,
ComponentCovariantDerivativePhi : 15.0
};
// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...
When I click on reset button, I call the following function:
// Reset Button
resetButton.onclick = function ResetParameters() {
...
// Reinitialize parameters into gui
params.Rotationx = torusRotationInitX;
params.Rotationy = torusRotationInitY;
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
render();
}
I don't know if there is an option for controller to lock these sliders which usually change their values. Is it possible?
Update 1
Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution?
Update 2
I tried to apply the method used on Method for disabling a button in dat.gui?
Following this solution, I have added the extension into dat.gui, just after:
dat.controllers.FunctionController = (function (Controller, dom, common) {
...
});
The following added code snippet is:
function blockEvent(event)
{
event.stopPropagation();
}
Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
get: function()
{
return this.domElement.hasAttribute("disabled");
},
set: function(value)
{
if (value)
{
this.domElement.setAttribute("disabled", "disabled");
this.domElement.addEventListener("click", blockEvent, true);
}
else
{
this.domElement.removeAttribute("disabled");
this.domElement.removeEventListener("click", blockEvent, true);
}
},
enumerable: true
});
Is extension code well located into dat.GUI source?
Then, I set the property "disabled" into my code to prevent user from sliding "controllerRotationx" with mouse (once start button is pressed):
if (animation)
controllerRotationx.__li.disabled = true;
Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into "controllerRotationx".
I saw that above link (Method for disabling a button in dat.gui?), this was about a button and not for a slider, does it change anything for my case?
I didn't find an explicit controller for the slider.

I would do this. The slider is not a form element, there's nothing to disable in the traditional w3c sense. Luckily we can use pointer-events and disable it properly as if it were a form element using just public dat.gui properties.
var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;

The solution given by #Radio works pretty well. But, with sliders, the slider is a sibling of the text box's DOM element. We need to disable pointer events on the div which contains all the controls (and which is not exposed directly by dat.gui). So,
var speeder = menu.add(text, 'speed', -5, 5);
// disables the text box
speeder.domElement.style.pointerEvents = "none"
// disables all controller elements related to "speeder"
speeder.domElement.parentElement.style.pointerEvents = 'none'

When the Start button is pressed, set:
controllerRotationx.__li.setAttribute( "style", "display: none" );

thanks for tips
on my side i hack the Common controller
so able to chainning.
gui.add(this, '_screenW').disable(true);
Common.extend(controller, {
disable: function disable(v) {
this.domElement.style.pointerEvents = v?"none":"auto";
this.domElement.style.opacity = v?.5:1;
return controller;
},

Javascript hover function

i am trying out raphael with javascript and trying to get the hang of it. At the moment i am trying to get it so that when the user hovers over a circle in raphael which i have drawn it will create a simmple hover messge like hi. However i am stuck to an end on this part, i cant seem to do anything about, any help on this would be great.
Javascript:
window.onload= function (){
var paper = new Raphael( 0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({ fill: "orange"});
var face = paper.circle(200,200,100);
face.attr({ fill: "Red"});
};
HTML
<div class= "bot">
<p>Hi there</p>
</div>

Just use the Element.hover() function, as documented on the Raphael website.
Update: The code snippet posted below works if you copy it onto your own computer and run it locally. However, to actually run this snippet on Stack Overflow, it only works on some browsers (e.g. it works on Firefox, but not on Chrome), probably due to the different browsers allowing or not allowing the code snippets to load external libraries, like Raphael.js, as required in this code snippet.
window.onload = function() {
var paper = new Raphael(0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({
fill: "orange"
});
var face = paper.circle(200, 200, 100);
face.attr({
fill: "Red"
});
face.hover(hoverHandler);
};
function hoverHandler() {
alert("hi");
}
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div class="bot">
<p>Hi there</p>
</div>

Unable to clear the canvas

I don't know why, but the clearRect() does not work.
This is a function that is executed every time I click on a panel or every time I change the thickness' value.
//When click on a menu section
$(".menuSection").click(function() {
//Show hide the selected item
$(this).next().toggle();
//hide all the other panels
$(this).next().siblings(".panel").hide();
//To update the values in the colors panel when selected
if ( $(this).prop("id") == "colors" ) {
changeColorBySliders();
}
if ( $(this).prop("id") == "pen" ) {
updatePreview();
}
});
//when thickness slider change:
$("#penPanel input[type=range]").on("input", updatePreview);
The fact is that it draws the line, but if I click it again it's doesn't reset.
var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");
//Function to update the pen's preview
function updatePreview() {
console.log($("#thickness").val());
var rgba = $("#mainCanvas").css("background-color");
$("#preview").css("background-color", rgba);
//Resetting the preview
contextPreview.clearRect(0, 0, $preview.width, $preview.height);
//Drawing an example path
contextPreview.beginPath();
contextPreview.moveTo(50, 30);
contextPreview.lineTo(100, 110);
contextPreview.quadraticCurveTo(115, 120, 125, 80);
contextPreview.bezierCurveTo(145, -40, 150, 120, 200, 95);
contextPreview.lineTo(250, 65);
contextPreview.lineWidth = $("#thickness").val();
contextPreview.strokeStyle = color;
contextPreview.stroke();
contextPreview.closePath();
}
Any help?

Solution
I solved the problem using this kind of declaration:
var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0, 0, preview.width, preview.height);
Insted of the jquery one:
var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");
Why?
it's because $preview is a jQuery object, $preview.width is therefore a function, so when you called clearRect(), you were actually calling contextPreview.clearRect(0,0, function, function) so your rect dimensions were undefined or 0 so it wasn't clearing a single pixel.
So you can still use jQuery but be sure you call contextPreview.clearRect(0,0, $preview[0].width, $preview[0].height)
var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0,0, $preview[0].width, $preview[0].height)
Special Thanks to Kaiido.

Raphael.js animate of image doesn't repaint in chrome

It seems to happen only when I try to animate an image on Chrome. All I want to do is make an image to move back an forth in Raphaël.js. I created a jsfiddle that illustrates the problem. I'm very sure that it used to work in Chrome since I use it to develop and it seems to be broken in later versions of Chrome. When I change the image to a rect for example it seems to render fine. When you resize the screen that contains the animation it repaints.
http://jsfiddle.net/k69yzz0o/1/
var moveForth = function () {
useControl.animate({x : 38, y: 0}, 900, moveBack);
};
var moveBack = function () {
useControl.animate({x : 0, y: 0}, 600, moveForth);
};
var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();
It only happens in Chrome and I use latest Raphael.js 2.1.2.
How can I resolve this issue?

Yes, there appears to be an issue with Chrome recognizing the rect as dirty, and refusing to repaint it. You can see that it's working by mousing over the area.
I tried the same animation using a Transform rather than using the actual position. Transforming an object evidently correctly tells modern Chrome to redraw that area.
Here it is working:
var moveForth = function () {
useControl.animate({"transform":"T38,0"}, 900, ">", moveBack);
};
var moveBack = function () {
useControl.animate({"transform":""}, 600, "<", moveForth);
};
var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();
I also added some easing (">") to give it a more natural bounce.