Thank you @RolandRaytchev for these insights. Actually On button click I am taking signature from user and then save the data in json after reading the values from widgets and then generate the pdf of 6 popups. I have shared my code also below which shows the sequence of the execution on the single button click. Its a bit lengthy operations i would say ...to first take the signature from user, save the data in json from all the widgets (Textfields and checkboxes) ..I have nearly 380 widgets (Textfields and checkboxes) and i save the values of these widgets in json. The function which generates this json is called generateJson which i also added in the code below then i generate a pdf and save it into thingworx. Can you please just see the code may be and give me few more insights what can be the reason of this problem?
HINT: When i see logs while creation of pdf it creates pdf for eg for page 1 then page 2 then page 3 or sometimes page 1 page 2 or page 1 page 2 page 3 page 4 and then just FPS logs will show and nothing happens. the spinner will keeip moving and nothing happens then ....so definitely problem comes in creation of pdf.
DEVICE: IPAD PRO 5th generation with 17.4.1 iOS
MODEL: NO 3D/2D MODEL IN MY EXPERIENCE
ANIMATION: NO
EXECUTION FLOW:-
1) take signature from user
2) generate the json with for loop and save the data on thingworx (generate json have loops with many IF conditions also)
3) create PDF and save it in thingworx
4) save signature images on thingworx
//This function executes on button click and this then let run other functions afterwards the execution
$scope.submitBtnPressed = function () {
const status = $scope.app.params.Status; // take this instead $scope.projectInfo.status;
if (status === PHASES.SCW2Phase1 || status === PHASES.SCW2Phase2 || status === PHASES.SCW2Phase3 ) {
const SignatureHeadinglabelMap = {
[PHASES.SCW2Phase1]: "Verantwortlicher Aufbau EDTCD1: ",
[PHASES.SCW2Phase2]: "Verantwortlicher Aufbau EDTCD2: ",
[PHASES.SCW2Phase3]: "ANLV bzw. delegierter Abnehmer: "
};
$scope.view.wdg['zfSignature'].label = SignatureHeadinglabelMap[status] || "Default Label: ";
$scope.view.wdg['zfSignature'].text = $scope.app.params.UserID;
twx.app.fn.triggerWidgetService('zfSignature', 'takeSignature');
} else if (status === PHASES.SCW2Phase4) {
$ionicPopup.prompt({
title: '<h3>Inbetriebnehmer</h3>',
subTitle: '<h3>Bitte den Namen des Inbetriebnehmer eintragen:</h3>',
template: `
<form>
Vorname:<br>
<input type="text" ng-model="data.firstname" name="firstname"><br>
Nachname:<br>
<input type="text" ng-model="data.lastname" name="lastname">
</form>`,
inputType: 'text',
scope: $scope,
buttons: [
{
text: '<b>OK</b>',
type: 'button-positive',
onTap: function () {
const name = $scope.data.firstname + " " + $scope.data.lastname;
$scope.view.wdg['zfSignature'].label = "Inbetriebnehmer des Versuchs: ";
$scope.view.wdg['zfSignature'].text = name;
$scope.view.wdg['0_4_name'].text = name;
console.log("Es wurde folgender Name eingetragen: " + name);
$scope.customToastmessage("Es wurde folgender Name eingetragen: " + name, 3000);
twx.app.fn.triggerWidgetService('zfSignature', 'takeSignature');
return true;
}
},
{
text: 'Abbrechen',
type: 'button-assertive',
onTap: function () {
console.log("Eingabe abgebrochen");
return false;
}
}
]
}).then(() => {
$scope.data.firstname = "";
$scope.data.lastname = "";
});
}
};
// This runs after the execution of the above function
$scope.$on("signatureTaken", function () {
console.log("Signature Taken!");
triggerPDF = true;
$scope.saveDataBtnPressed();
});
//Then this will run after the execution of the above function
$scope.saveDataBtnPressed = function() {
console.log("save pressed");
twxDS("TestBench_Mobile.Controller", "saveReport", {
"entryTimeStamp" : $scope.view.wdg["0_1"].text,
"Position" : $scope.view.wdg["0_3"].text,
"Location" : $scope.app.params.Location,
"metaData" : JSON.stringify($scope.generateJSON()),
"UserID" : $scope.app.params.UserID,
"changeDate" : + $scope.projectInfo.changeDate
});
}
// this below is the generateJSON function which loops over all the widgets and gets the data from them (textfields and checkboxes)
$scope.generateJSON = function() {
let jsonData = {
"mainValues": [],
"subValues" : [],
"signatures": [],
"checkListVersion": $scope.app.params.checkListVersion
};
// Loop for mainValues
for (let i = 1; ; i++) {
let mainValueQID = "0_" + i;
if (!$scope.view.wdg[mainValueQID]) {
break;
}
let mainValue = {
"QID": mainValueQID,
"label": $scope.view.wdg[mainValueQID].label,
"input": (i === 1) ? $scope.view.wdg["showDate"].text : $scope.view.wdg[mainValueQID].text,
};
if (i === 1) {
mainValue.value = $scope.view.wdg[mainValueQID].text
}
jsonData.mainValues.push(mainValue);
}
// Loop for subValues
for (let i = 1; ; i++) {
var subValueExist = false;
for (let j = 1; ; j++) {
var subValueQID = i + "_" + j;
var widgetID = i + "_" + j + "_1";
console.log('Checking widgetID:', widgetID);
// Check if the widget exists
if (!$scope.view.wdg[widgetID]) {
console.log('No widget found for ID:', widgetID);
break; // Exit the inner loop if the widget doesn't exist
}
console.log('Widget found:', widgetID);
subValueExist = true;
var subValue = {
"QID": subValueQID,
"title": "Name of a title",
"inputs": []
};
// Check the status of subValue
if ($scope.view.wdg[subValueQID + "_io"] && $scope.view.wdg[subValueQID + "_io"].value) {
subValue.status = "io";
}
if ($scope.view.wdg[subValueQID + "_nio"] && $scope.view.wdg[subValueQID + "_nio"].value) {
subValue.status = "nio";
}
if ($scope.view.wdg[subValueQID + "_nv"] && $scope.view.wdg[subValueQID + "_nv"].value) {
subValue.status = "nv";
}
// Check the manager status of subValue
if ($scope.view.wdg[subValueQID + "_Manager_io"] && $scope.view.wdg[subValueQID + "_Manager_io"].value) {
subValue.managerStatus = "Manager_io";
}
if ($scope.view.wdg[subValueQID + "_Manager_nio"] && $scope.view.wdg[subValueQID + "_Manager_nio"].value) {
subValue.managerStatus = "Manager_nio";
}
if ($scope.view.wdg[subValueQID + "_Manager_nv"] && $scope.view.wdg[subValueQID + "_Manager_nv"].value) {
subValue.managerStatus = "Manager_nv";
}
for (let k = 1; ; k++) {
var inputQID = i + "_" + j + "_" + k;
// Check if the widget exists
if (!$scope.view.wdg[inputQID]) {
break;
}
var input = {
"label": $scope.view.wdg[inputQID].label,
"value": $scope.view.wdg[inputQID].text,
"unit": "" // Set the appropriate unit
};
subValue.inputs.push(input);
}
jsonData.subValues.push(subValue);
}
// Exit the outer loop if no subValues were found
if (!subValueExist) {
break;
}
}
for (let i = 1; i < 5; i++) {
if(!$scope.view.wdg['0_' + i + '_sign'].imgsrc){
break;
}
jsonData.signatures.push({
"QID": "0_" + i,
"date": $scope.view.wdg['0_' + i + '_date'].text,
"name": $scope.view.wdg['0_' + i + '_name'].text
});
}
return jsonData;
}
//Then this function will run after the execution of the above function
let signaturePictureName;
let signaturePicture;
let triggerPDF = false;
$scope.$on("saveReport.serviceInvokeComplete", function () {
console.log("Daten wurden gespeicher!");
$scope.customToastmessage("Daten wurden gespeichert!",3000);
if(triggerPDF){
const currentDate = new Date();
const currentDateString = `${currentDate.getDate()}.${(currentDate.getMonth() + 1).toString().padStart(2, '0')}.${currentDate.getFullYear()} ${currentDate.getHours()}:${currentDate.getMinutes().toString().padStart(2, '0')}`;
//$scope.app.params.Status.match(/\d+/) ==> Before it was like that when the status was phase1
$scope.view.wdg['0_' + parseInt($scope.app.params.Status.match(/(?<=Phase)\d+/)) + '_date'].text = currentDateString;
$scope.view.wdg['0_' + parseInt($scope.app.params.Status.match(/(?<=Phase)\d+/)) + '_sign'].imgsrc=$scope.view.wdg['zfSignature'].signatureUrl;
if ($scope.app.params.Status !== PHASES.SCW2Phase4) {
$scope.view.wdg['0_' + parseInt($scope.app.params.Status.match(/(?<=Phase)\d+/)) + '_name'].text = $scope.app.params.UserID;
}
signaturePicture = $scope.view.wdg['0_' + parseInt($scope.app.params.Status.match(/(?<=Phase)\d+/)) + '_sign'].imgsrc;
if ($scope.app.params.Status == PHASES.SCW2Phase1) {
signaturePictureName = "Signature_mechanic_EDTCD1.jpg";
}
if ($scope.app.params.Status == PHASES.SCW2Phase2) {
signaturePictureName = "Signature_mechanic_EDTCD2.jpg";
}
if ($scope.app.params.Status == PHASES.SCW2Phase3) {
signaturePictureName = "Signature_manager.jpg";
}
if ($scope.app.params.Status == PHASES.SCW2Phase4) {
signaturePictureName = "Signature_customer.jpg";
}
if($scope.app.params.Status == PHASES.SCW2Phase1 ||$scope.app.params.Status == PHASES.SCW2Phase2 || $scope.app.params.Status == PHASES.SCW2Phase4) {
$scope.printPDF_MESSAGE();
}
if($scope.app.params.Status == PHASES.SCW2Phase3) {
$ionicPopup.show({
cssClass: 'custom-popup',
title: 'Fertig?',
subTitle: 'Ist der Prüfaufbau abgeschlossen oder steht noch die Unterschrift des Inbetriebnehmer aus? Bitte schließen Sie die Anwendung nicht, bis Sie die Meldung "Upload war erfolgreich" erhalten haben. Nach Erhalt dieser Meldung werden Sie automatisch ausgeloggt.',
buttons: [{
text: 'Inbetriebnehmer nötig',
type: 'button-energized',
onTap: function() {
this.hide(); // Popup manuell schließen
$scope.printPDF_MESSAGE();
return 'cancel';
}
}, {
text: 'Fertig',
type: 'button-balanced',
onTap: function() {
this.hide(); // Popup manuell schließen
// Extract the number at the end of the string, increment it by 2, and replace the old number in the string with the new one.
$scope.view.wdg['0_4_date'].text = "——";
$scope.view.wdg['0_4_name'].text = "Kein Inbetriebnehmer vorhanden";
$scope.app.params.Status = $scope.app.params.Status.replace(/\d+$/, match => parseInt(match) + 1);
customerPresent = false;
$scope.printPDF_MESSAGE();
return 'ok';
}
}, ]
})
}
}
});
//This will run after the execution of the above function
$scope.printPDF_MESSAGE = function () {
$ionicPopup.alert({
title: "WICHTIG!",
template: `<div>
Bitte schließen Sie die Applikation nicht, während die PDF erstellt wird! Das korrekte Format ist nur gewährleistet, wenn Sie das Tablet richtig ausrichten.
Dies erfolgt <span style="font-size: 24px; color: red; font-weight: bold;">nur</span> im
</div>
<br>
<div style="font-size: 52px; color: red; font-weight: bold;">Querformat(!)</div></br>
`,
scope: $scope,
buttons: [{
text: `<b>PDF erstellen</b>`,
type: 'button-positive',
onTap: function() {
$scope.view.wdg["loading-screen"].visible = true;
$timeout(function () {
$scope.printPDF();
}, 500);
}
}]
});
};
//Afterwards this code will execute which generates the PDF for the popups which are called pages
let myscript = document.createElement('script');
myscript.src="app/resources/Uploaded/jspdf.js";
document.head.appendChild(myscript);
myscript.onload = async function(){
// code to be executed when the script has finished loading
//...
console.log("stop here");
}
let html2canvas = document.createElement('script');
html2canvas.src="app/resources/Uploaded/html2canvas.js";
document.head.appendChild(html2canvas);
html2canvas.onload = function(){
// code to be executed when the script has finished loading
//...
}
let PDFLib = document.createElement('script');
PDFLib.src="app/resources/Uploaded/pdf-lib.js";
document.head.appendChild(PDFLib);
PDFLib.onload = async function(){
// code to be executed when the script has finished loading
//...
}
$scope.printPDF = async function() {
let popupArray = $scope.app.params.Page5Visibility === true? ["page_0", "page_1", "page_2", "page_3", "page_4", "page_5"] : ["page_0", "page_1", "page_2", "page_3", "page_4"];
if (customerPresent && $scope.app.params.Status === PHASES.SCW2Phase4) { // For SCW2Phase4 and customer present, use only page_0
popupArray = [
"page_0",
/* "page_1",
"page_2",
"page_3",
"page_4",
"page_5"*/];
}
let helper1 = document.querySelectorAll("div.twx-popup-container.ng-hide, ion-spinner.ng-hide");
helper1.forEach(box => { box.classList.remove("ng-hide")} );
// Wait for 100ms before proceeding
// await new Promise(resolve => setTimeout(resolve, 100));
let attributeContainer = [];
const pdfDoc = await window.PDFLib.PDFDocument.create();
for (const popupId of popupArray) {
console.log(PHASES.SCW2Phase3);
console.log($scope.app.params.Status);
console.log("page: " + popupId + " erstellt");
attributeContainer.push(document.querySelector(`twx-widget[widget-id='${popupId}'] .twx-popup`).getAttribute("style"));
document.querySelector(`twx-widget[widget-id='${popupId}'] .twx-popup`).setAttribute("style", "width: 100%; overflow: visible;");
let mergedElements = document.createElement('DIV');
mergedElements.setAttribute('style', 'font-family: prometo !important; letter-spacing: 0.01px; overflow: visible');
mergedElements.append(document.querySelector(`twx-widget[widget-id='${popupId}']`).cloneNode(true));
let pdfHeight = document.querySelector(`twx-widget[widget-id='${popupId}'] .twx-popup .gridLayout`).offsetHeight + 25,
pdfWidth = document.querySelector(`twx-widget[widget-id='${popupId}'] .twx-popup .gridLayout`).offsetWidth + 20;
let pdf = new jspdf.jsPDF('l', 'px', [pdfWidth, pdfHeight]);
pdf.addFileToVFS('prometo-normal.ttf', font);
pdf.addFont('prometo-normal.ttf', 'prometo', 'normal');
pdf.setFont("prometo", 'normal');
let donorPdfBytes;
await pdf.html(mergedElements, {
// this warning is wrong - everything is fine
callback: receivedPDF => { donorPdfBytes = receivedPDF.output("datauristring"); },
x: 5,
y: 5
});
let donorPdfDoc = await window.PDFLib.PDFDocument.load(donorPdfBytes);
let docLength = donorPdfDoc.getPageCount();
for (let k = 0; k < docLength; k++) {
const [donorPage] = await pdfDoc.copyPages(donorPdfDoc, [k]);
pdfDoc.addPage(donorPage);
/* console.log("jamal page "+ donorPage);*/
}
}
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
let mergedPDF = pdfDataUri.substring(pdfDataUri.indexOf(',') + 1);
helper1.forEach(box => { box.classList.add("ng-hide"); });
popupArray.forEach((popupId, i) => {
document.querySelector(`twx-widget[widget-id='${popupId}'] .twx-popup`).setAttribute("style", attributeContainer[i]);
});
const currentDate = new Date();
const currentDateString = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}_${currentDate.getHours().toString().padStart(2, '0')}-${currentDate.getMinutes().toString().padStart(2, '0')}_`;
let helperName;
if ($scope.app.params.Status == PHASES.SCW2Phase1) {
helperName = "mechanic_EDTCD1";
}
if ($scope.app.params.Status == PHASES.SCW2Phase2) {
helperName = "mechanic_EDTCD2";
}
if ($scope.app.params.Status == PHASES.SCW2Phase3) {
helperName = "manager";
}
if ($scope.app.params.Status == PHASES.SCW2Phase4) {
if(!customerPresent) {
helperName = "manager";
} else {
helperName = "Inbetriebnehmer";
}
}
let pdfName = $scope.view.wdg["0_5"].text + "-" + $scope.view.wdg["0_6"].text + "_" + currentDateString + helperName + ".pdf";
let pdfPath = $scope.projectInfo.repositoryRelativePath + "/" + pdfName;
twxDS("TestBench_Mobile.Controller", "savePDF", { "content": mergedPDF, "path": pdfPath });
console.log(" PDF with the name '" + pdfName + "' created");
};
$scope.$on("savePDF.serviceInvokeComplete", function () {
console.log("Save PDF done");
$scope.customToastmessage("pdf wurde erfolgreich gespeichert.",3000);
$scope.lockEntries(true);
twxDS("TestBench_Mobile.Controller", "saveSignatureImage", { "path": $scope.projectInfo.repositoryRelativePath, "name": signaturePictureName, "content": signaturePicture });
})
$scope.$on("saveSignatureImage.serviceInvokeComplete", function () {
console.log("Signature saving done");
$scope.app.params.Status = $scope.app.params.Status.replace(/\d+$/, match => parseInt(match) + 1);
twxDS("TestBench_Mobile.Controller", "submitReport", {
"entryTimeStamp" : $scope.view.wdg["0_1"].text,
"Position" : $scope.view.wdg["0_3"].text,
"Location" : $scope.app.params.Location,
"status" : $scope.app.params.Status,
"metaData" : JSON.stringify($scope.generateJSON()),
"UserID" : $scope.app.params.UserID,
"changeDate" : + $scope.projectInfo.changeDate
});
})
$scope.$on("submitReport.serviceInvokeComplete", function () {
console.log("Submit durchgeführt");
$scope.view.wdg["loading-screen"].visible = false;
$scope.customToastmessage("submit war erfolgreich", 3000);
// TODO : disable buttons? or instantly restartApp - because people can abuse the system if not
$timeout(function () {
$scope.restartApp();
}, 3500);
});
