I'm trying to generate more than one thousand pdf files using surveyPDF.
The problem is that i can generate only 80 pdf files...
I'm passing an array with more than 1000 pdf to generate.
Code :
query.map(async items => {
const { generatePdf } = await import("~/lib/survey");
const filename = kebabCase(
`${campaign.title} - ${items.employee.fullName.toLowerCase()} -${moment().format("DD/MM/YYYY - HH:mm")} `
);
return generatePdf(campaign.template.body, items, filename, 210, 297);
});
The code which generate each pdfs :
import autoTable from "jspdf-autotable";
import { SurveyPDF, CommentBrick, CompositeBrick, PdfBrick, TextBrick } from "survey-pdf";
import { format } from "~/utils/date";
class AutoTableBrick extends PdfBrick {
constructor(question, controller, rect, options) {
super(question, controller, rect);
this.margins = {
top: controller.margins.top,
bottom: controller.margins.bot,
right: 30,
left: 30,
};
this.options = options;
}
renderInteractive() {
if (this.controller.doc.lastAutoTable && !this.options.isFirstQuestion) {
this.options.startY = this.yTop;
}
autoTable(this.controller.doc, {
head: [
[
{
content: this.question.title,
colSpan: 2,
styles: { fillColor: "#5b9bd5" },
},
],
],
margin: { ...this.margins },
styles: { fillColor: "#fff", lineWidth: 1, lineColor: "#5b9bd5", minCellWidth: 190 },
alternateRowStyles: { fillColor: "#bdd6ee" },
...this.options,
});
}
}
export async function generatePdf(json, data, filename, pdfWidth, pdfHeight) {
if (!json) {
return Promise.reject("Invalid json for pdf export");
}
for (const page of json.pages) {
page.readOnly = true;
}
const surveyPDF = new SurveyPDF(json, {
fontSize: 11,
format: [pdfWidth, pdfHeight],
commercial: true,
textFieldRenderAs: "multiLine",
});
surveyPDF.showQuestionNumbers = "off";
surveyPDF.storeOthersAsComment = false;
//TODO This does not work well with dynamic dropdown, bug declared
// surveyPDF.mode = "display";
surveyPDF.mergeData({ ...data, _: {} });
surveyPDF.onRenderQuestion.add(function(survey, options) {
const { bricks, question } = options;
if (question.getType() === "comment" && question.value && bricks.length > 0) {
for (const brick of bricks) {
if (brick.value) {
brick.value = question.value.replace(/\t/g, " ");
}
if (brick instanceof CompositeBrick) {
const { bricks } = brick;
for (const brick of bricks) {
if (brick instanceof CommentBrick) {
brick.value = question.value.replace(/\t/g, " ");
}
}
}
}
}
});
surveyPDF.onRenderQuestion.add(async function(survey, options) {
const {
point,
bricks,
question,
controller,
module: { SurveyHelper },
} = options;
if (question.getType() === "multipletext") {
const body = [];
let extraRows = 0;
let rows = question.getRows();
for (let i = 0; i < rows.length; i++) {
for (let j = 0; j < rows[i].length; j++) {
let { title, value, inputType } = rows[i][j];
if (inputType === "date") {
value = format(value);
}
if (typeof value === "string" && value.length > 0) {
const valueEstRows = value.match(/.{1,70}/g).length;
if (valueEstRows > 1) {
extraRows += valueEstRows;
}
}
body.push([title, value || "N/A"]);
}
}
//TODO Use SurveyHelper helperDoc do calculate the height of the auto table
const startY = point.yTop;
const height = 21.5 * (body.length + 1) + 8.5 * extraRows;
const isFirstQuestion = question.title === question.parent.questions[0].title;
options.bricks = [
new AutoTableBrick(question, controller, SurveyHelper.createRect(point, bricks[0].width, height), {
startY,
body,
isFirstQuestion,
}),
];
}
});
surveyPDF.onRenderQuestion.add(async function(survey, options) {
const {
point,
question,
controller,
module: { SurveyHelper },
} = options;
if (question.getType() === "text") {
//Draw question background
const { default: backImage } = await import("~/public/assets/images/block.png");
const backWidth = SurveyHelper.getPageAvailableWidth(controller);
const backHeight = SurveyHelper.pxToPt(100);
const imageBackBrick = SurveyHelper.createImageFlat(point, null, controller, backImage, backWidth, backHeight);
options.bricks = [imageBackBrick];
point.xLeft += controller.unitWidth;
point.yTop += controller.unitHeight;
const oldFontSize = controller.fontSize;
const titleBrick = await SurveyHelper.createTitleFlat(point, question, controller);
controller.fontSize = oldFontSize;
titleBrick.unfold()[0]["textColor"] = "#6a6772";
options.bricks.push(titleBrick);
//Draw text question text field border
let { default: textFieldImage } = await import("~/public/assets/images/input.png");
let textFieldPoint = SurveyHelper.createPoint(imageBackBrick);
textFieldPoint.xLeft += controller.unitWidth;
textFieldPoint.yTop -= controller.unitHeight * 3.3;
let textFieldWidth = imageBackBrick.width - controller.unitWidth * 2;
let textFieldHeight = controller.unitHeight * 2;
let imageTextFieldBrick = SurveyHelper.createImageFlat(
textFieldPoint,
null,
controller,
textFieldImage,
textFieldWidth,
textFieldHeight
);
options.bricks.push(imageTextFieldBrick);
textFieldPoint.xLeft += controller.unitWidth / 2;
textFieldPoint.yTop += controller.unitHeight / 2;
let textFieldValue = question.value || "";
if (textFieldValue.length > 90) {
textFieldValue = textFieldValue.substring(0, 95) + "...";
}
const textFieldBrick = await SurveyHelper.createBoldTextFlat(
textFieldPoint,
question,
controller,
textFieldValue
);
controller.fontSize = oldFontSize;
textFieldBrick.unfold()[0]["textColor"] = "#EFF8FF";
options.bricks.push(textFieldBrick);
}
});
surveyPDF.onRenderQuestion.add(async function(survey, options) {
const {
point,
question,
controller,
module: { SurveyHelper },
} = options;
if (question.getType() === "radiogroup" || question.getType() === "rating") {
options.bricks = [];
const oldFontSize = controller.fontSize;
const titleLocation = question.hasTitle ? question.getTitleLocation() : "hidden";
let fieldPoint;
if (["hidden", "matrix"].includes(titleLocation)) {
fieldPoint = SurveyHelper.clone(point);
} else {
const titleBrick = await SurveyHelper.createTitleFlat(point, question, controller);
titleBrick.xLeft += controller.unitWidth;
titleBrick.yTop += controller.unitHeight * 2;
controller.fontSize = oldFontSize;
titleBrick.unfold()[0]["textColor"] = "#6a6772";
options.bricks.push(titleBrick);
fieldPoint = SurveyHelper.createPoint(titleBrick);
fieldPoint.yTop += controller.unitHeight * 1.3;
}
//Draw checkbox question items field
const { default: itemEmptyImage } = await import("~/public/assets/images/unchecked.png");
const { default: itemFilledImage } = await import("~/public/assets/images/checked.png");
const itemSide = controller.unitWidth;
let imageItemBrick;
const choices = question.getType() === "rating" ? question.visibleRateValues : question.visibleChoices;
for (const choice of choices) {
const isItemSelected =
question.getType() === "rating" ? question.value === choice.value : choice === question.selectedItem;
imageItemBrick = SurveyHelper.createImageFlat(
fieldPoint,
null,
controller,
isItemSelected ? itemFilledImage : itemEmptyImage,
itemSide,
itemSide
);
options.bricks.push(imageItemBrick);
const textPoint = SurveyHelper.clone(fieldPoint);
textPoint.xLeft += itemSide + controller.unitWidth / 2;
textPoint.yTop += itemSide / 12;
const itemValue = choice.locText.renderedHtml;
const checkboxTextBrick = await SurveyHelper.createTextFlat(
textPoint,
question,
controller,
itemValue,
TextBrick
);
checkboxTextBrick.unfold()[0]["textColor"] = "#6a6772";
fieldPoint.yTop = imageItemBrick.yBot + SurveyHelper.GAP_BETWEEN_ROWS * controller.unitHeight;
options.bricks.push(checkboxTextBrick);
}
}
});
surveyPDF.onRenderFooter.add(function(survey, canvas) {
canvas.drawText({
text: canvas.pageNumber + "/" + canvas.countPages,
fontSize: 10,
horizontalAlign: "right",
margins: {
right: 12,
},
});
});
return await surveyPDF.raw(`./pdf/${filename}.pdf`);
}
The error :
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
I have already try to increase the node memory using $env:NODE_OPTIONS="--max-old-space-size=8192"
Related
I'm having an issue with ZXing-js. Its returning a ChecksumException no matter what QR Code I put into it. So its detecting the QRCode but throws an Exception. The following is my vuejs 2.0 code. Please help.
Almost all if this code works. Its just the reading of the QR code part that doesn't
import { BarcodeFormat, DecodeHintType, NotFoundException, ChecksumException, FormatException } from '#zxing/library';
const ZXing = require('#zxing/browser');
Vue.component('qr_scanner_modal',{
prop: [
'videoSource'
],
data: function ()
{
return {
qr_error: null,
qrcanvas: null,
context: null,
qrvideo: null,
hints: null,
formats: null,
videoSource: {},
qr: null,
selected_source: null,
polling: null,
localMediaStream: null,
scanLineDirect: 'down',
scanlineOffset: 0,
qr_title: "",
visible: false,
focused: true,
qr_result: ""
};
},
mixins: [ focusMixin ],
created: function ()
{
EventBus.$on('trigger-qrcode-scanner', (qrTitle) => this.show(qrTitle));
},
mounted: function ()
{
let self = this;
this.$root.$on('bv::modal::show', () => this.$nextTick(() => this.mountQRReader()));
},
methods: {
mountQRReader: function ()
{
const hints = new Map();
const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/*, ...*/];
hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
hints.set(DecodeHintType.TRY_HARDER, true);
hints.set(DecodeHintType.CHARACTER_SET, 'UTF-8');
hints.set(DecodeHintType.ALSO_INVERTED, true);
this.qr = new ZXing.BrowserQRCodeReader(hints);
this.qrcanvas = this.$refs['qrcanvas'];
this.qrcanvas.width = 400;
this.qrcanvas.height = 400;
// this.qrcanvas = this.$refs;
console.log(this.$refs['qrcanvas']);
this.context = this.$refs['qrcanvas'].getContext('2d');
this.qrvideo = this.$refs['qrvideo'];
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices)
{
this.qr_error = "This browser does not support MediaStreamTrack. Try Chrome.";
console.log("enumerateDevices() not supported.");
}
else
{
this.qr_error = null;
}
let self = this;
navigator.mediaDevices
.enumerateDevices()
.then(function (sourceInfos)
{
let videosource = [];
for (var index = 0; index !== sourceInfos.length; index++)
{
var sourceInfo = sourceInfos[index];
if (sourceInfo.kind === 'videoinput')
{
videosource.push({
id: sourceInfo.deviceId,
name: sourceInfo.label || 'Camera ' + index
});
console.log(sourceInfo);
console.log(videosource);
}
}
self.videoSource = videosource;
})
.catch(function (err)
{
console.log(err.name + ": " + err.message);
});
},
show: function (qrTitle)
{
console.log("Show modal called.");
this.qr_title = qrTitle + " - QR / Magstripe Reader";
this.$bvModal.show('qr_code_scanner');
},
dismiss: function()
{
this.stopScan();
this.$bvModal.hide('qr_code_scanner');
},
selectSource: function (source)
{
this.selected_source = source;
let constraints = {
audio: false,
video: {
facingMode: "environment",
sourceId: source
}
};
navigator.getUserMedia(constraints, this.startScan, this.scanError);
},
read: function (value)
{
console.log('read callback called.');
console.log(value);
if (value !== null && value !== undefined)
{
this.qr_result = value.text;
EventBus.$emit('qr_code_returned', value.text);
this.stopScan();
return;
}
},
startScan: function (stream)
{
this.qrvideo.srcObject = stream;
this.localMediaStream = stream;
this.qrvideo.play();
this.polling = setInterval(this.scan, 400);
},
scanError: function (err)
{
if (err)
{
this.qr_error = err;
}
},
stopScan: function ()
{
clearInterval(this.polling);
if (this.localMediaStream)
{
let track = this.localMediaStream.getVideoTracks();
track[0].stop();
}
},
transposeRect: function (width, height)
{
const rectWidth = width * 0.8;
const rectHeight = height * 0.8;
const xPos = (width - rectWidth) / 2;
const yPos = (height - rectHeight) / 2;
this.context.beginPath();
this.context.strokeStyle = 'red';
this.context.lineWidth = '3';
this.context.rect( xPos,
yPos,
rectWidth,
rectHeight);
this.context.stroke();
this.drawScanLine(yPos,
xPos,
xPos + rectWidth,
yPos + rectHeight);
},
drawScanLine: function (top, left, right, bottom)
{
if (this.scanLineDirect === 'down')
{
this.scanlineOffset = this.scanlineOffset + 4;
}
if (this.scanLineDirect === 'up')
{
this.scanlineOffset = this.scanlineOffset - 4;
}
if (top + this.scanlineOffset > bottom)
{
this.scanLineDirect = 'up';
this.scanlineOffset = this.scanlineOffset - 4;
}
if (top + this.scanlineOffset < top)
{
this.scanLineDirect = 'down';
this.scanlineOffset = this.scanlineOffset + 4;
}
this.context.beginPath();
this.context.strokeStyle = 'red';
this.context.lineWidth = '3';
this.context.moveTo(left, top + this.scanlineOffset);
this.context.lineTo(right, top + this.scanlineOffset);
this.context.closePath();
this.context.stroke();
},
scan: async function ()
{
try
{
if (this.localMediaStream)
{
console.log("Scanning Video Feed.");
const width = this.qrcanvas.getAttribute('width');
const height = this.qrcanvas.getAttribute('height');
this.context.drawImage(this.qrvideo, 0, 0, width, height);
console.log("width: " + width);
console.log("height: " + height);
const code = await this.qr.decodeFromCanvas(this.qrcanvas);
// const code = await this.qr.decode(this.qrcanvas);
this.read(code);
this.transposeRect(width, height);
}
}
catch(err)
{
if (err instanceof NotFoundException) {
console.log('No QR code found.')
}
if (err instanceof ChecksumException) {
console.log('A code was found, but it\'s read value was not valid.')
}
if (err instanceof FormatException) {
console.log('A code was found, but it was in a invalid format.')
}
}
}
},
template: `
<b-modal id="qr_code_scanner"
v-bind:title="qr_title"
v-bind:videoSource='videoSource'
hide-footer >
<div class="alert alert-danger" v-show="qr_error != null">
{{qr_error}}
</div>
<div>
<a href='#' v-for="source in videoSource" v-on:click='selectSource(source.id)' class='btn btn-primary'>#{{source.name}}</a>
</div>
<div class="large-centered col-lg-12 col-md-12 col-sm-12" style="overflow: hidden;">
<input type="text" ref="qr_result" name='qr_result' v-focus="focused" v-model='qr_result' class="form-control" />
<video id="qrvideo" ref="qrvideo" controls="false" style="display: none;"></video>
<canvas id="qrcanvas" ref='qrcanvas' style="overflow: hidden;" width="400" height="400"></canvas>
</div>
<div class="modal-footer">
<a href='#' v-on:click='dismiss()' class='btn btn-primary'>Cancel</a>
</div>
</b-modal>
`
});
I'm expecting it to return a QR Code.
I'm building a profile page for users of my app (nextjs 12) and when I add authentication middleware it works fine locally but when deployed to the production server (apache shared hosting with nodejs v 14 installed) it throws error 500
my node version installed locally is v16.16.0 could that affect this issue?
any suggestions?
profile.tsx:
const ProfileEditor = () => {
const dispatch = useDispatch();
const {
profile,
profileLogin,
user
} = useSelector((state: RootState) => state.Auth);
useEffect(() => {
dispatch(FetchProfileAsync());
}, []);
const [preview, setPreview] = useState < string > ();
const handleFormSubmit = async(values: any, e: any) => {
dispatch(UpdateProfileAsync(values as any));
};
let initialValues = {
image: profile ? .image ? .full_path,
first_name: profile ? .first_name,
last_name: profile ? .last_name,
email: profile ? .email,
phone: profile ? .phone,
};
const FILE_SIZE = 160 * 1024;
const SUPPORTED_FORMATS = ['image/jpg', 'image/png'];
const checkoutSchema = yup.object().shape({
image: yup.mixed().required('A file is required'),
// .test('fileSize', 'File too large', (value) => value && value.size <= FILE_SIZE)
// .test('fileFormat', 'Unsupported Format', (value) => value && SUPPORTED_FORMATS.includes(value.type)),
first_name: yup.string().required('required'),
last_name: yup.string().required('required'),
email: yup.string().email('invalid email').required('required'),
phone: yup.string().required('required'),
});
return ( <
CustomerDashboardLayout >
<
DashboardPageHeader icon = {
Person
}
title = 'Edit Profile'
navigation = { < CustomerDashboardNavigation / >
}
/>
<
Card1 >
<
Formik enableReinitialize initialValues = {
initialValues
}
validationSchema = {
checkoutSchema
}
onSubmit = {
(values: any, e: any) => handleFormSubmit(values, e)
} >
{
({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
setFieldValue
}) => ( <
form onSubmit = {
handleSubmit
} >
<
FlexBox alignItems = 'flex-end'
mb = {
3
} >
<
Avatar src = {
preview ? ? user ? .image ? .full_path
}
sx = {
{
height: 64,
width: 64
}
}
alt = 'user image' / >
{ /* <img src={user?.image?.full_path} height={100} width={100} alt='fdss' /> */ }
<
Box ml = {-2.5
} >
<
label htmlFor = 'profile-image' >
<
Button component = 'span'
color = 'secondary'
sx = {
{
bgcolor: 'grey.300',
height: 'auto',
p: '8px',
borderRadius: '50%',
}
} >
<
CameraEnhance fontSize = 'small' / >
<
/Button> <
/label> <
/Box> <
Box display = 'none' >
<
input name = 'image'
onChange = {
(newFile: any) => {
setFieldValue('image', newFile.currentTarget.files[0]);
FileToBase64(newFile.currentTarget.files[0] as any).then((res) => setPreview(res));
}
}
id = 'profile-image'
accept = 'image/*'
type = 'file' /
>
<
/Box> <
/FlexBox>
<
Box mb = {
4
} >
<
Grid container spacing = {
3
} >
<
Grid item md = {
6
}
xs = {
12
} >
<
ETextField mb = {
1.5
}
name = 'first_name'
label = 'First Name'
placeholder = 'First Name'
variant = 'outlined'
size = 'small'
fullWidth onBlur = {
handleBlur
}
onChange = {
handleChange
}
value = {
values.first_name || ''
}
error = {!!touched.first_name && !!errors.first_name
}
helperText = {
touched.first_name && errors.first_name
}
/> <
/Grid> <
Grid item md = {
6
}
xs = {
12
} >
<
ETextField mb = {
1.5
}
name = 'last_name'
label = 'Last Name'
placeholder = 'Last Name'
variant = 'outlined'
size = 'small'
fullWidth onBlur = {
handleBlur
}
onChange = {
handleChange
}
value = {
values.last_name || ''
}
error = {!!touched.last_name && !!errors.last_name
}
helperText = {
touched.last_name && errors.last_name
}
/> <
/Grid> <
Grid item md = {
6
}
xs = {
12
} >
<
ETextField mb = {
1.5
}
name = 'email'
label = 'Email'
placeholder = 'exmple#mail.com'
variant = 'outlined'
size = 'small'
type = 'email'
fullWidth onBlur = {
handleBlur
}
onChange = {
handleChange
}
value = {
values.email || ''
}
error = {!!touched.email && !!errors.email
}
helperText = {
touched.email && errors.email
}
/> <
/Grid> <
Grid item md = {
6
}
xs = {
12
} >
<
ETextField mb = {
1.5
}
name = 'phone'
label = 'Phone'
placeholder = '09********'
variant = 'outlined'
size = 'small'
fullWidth onBlur = {
handleBlur
}
onChange = {
handleChange
}
value = {
values.phone || ''
}
error = {!!touched.phone && !!errors.phone
}
helperText = {
touched.phone && errors.phone
}
/> <
/Grid> <
/Grid> <
/Box>
<
ELoadingButton type = 'submit'
variant = 'contained'
loading = {
profileLogin === 'loading'
}
buttonText = 'Save Changes'
loadingPosition = 'start'
fullWidth = {
true
}
color = 'primary' /
>
<
/form>
)
} <
/Formik> <
/Card1> <
/CustomerDashboardLayout>
);
};
export default ProfileEditor;
middlware.tsx
// eslint-disable-next-line #next/next/no-server-import-in-page
import { NextResponse } from 'next/server';
// eslint-disable-next-line #next/next/no-server-import-in-page
import type { NextRequest } from 'next/server';
import { KEY_TOKEN_COOKIE } from 'src/constants';
const middleware = (request: NextRequest, response: NextResponse) => {
const token = request?.cookies[KEY_TOKEN_COOKIE];
if (!token) return NextResponse.rewrite(new URL('/error/auth', request.url));
};
export default middleware;
I'm fairly new to Phaser 3, and I just started dipping my feet in scenes. The problem here is that the game window won't display, and I can't figure out why.
Leaving my entire code here just in case there's a problem somewhere else. Sorry about the wall of text. Any help would be appreciated, even if it isn't a direct fix.
class scene1 extends Phaser.Scene{
constructor() {
super({ key: 'scene1' });
this.pause = false;
this.q = null;
this.player = null;
this.roundTxt = null;
this.handUp = true;
this.round = 1;
this.flash = true;
this.platforms = null;
this.hudStar = null;
this.starCountTxt = null;
this.bombs = null;
this.left = false;
this.lives = 3;
this.hudLives = null;
this.starCount = 0;
this.gameOver = false;
this.bCol = null;
this.pCol = null;
this.invincible = false;
this.invFlash = null;
this.tw = null;
this.slam = false;
this.bullets = null;
this.keySpace = null;
this.shot = false;
this.game = new Phaser.Game(config);
this.direction = 1;
this.bombs = null;
this.bullets = new Bullets(this);
this.cursors = this.input.keyboard.createCursorKeys();
//initialize stars
this.stars = this.physics.add.group({
key: 'star',
repeat: 9,
setXY: { x: 12, y: 0, stepX: 80 },
});
// Define spacebar
this.keySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
this.window.bullets = this.bullets;
}
addBomb() {
var x = Phaser.Math.Between(0, 800);
var y = Phaser.Math.Between(30, 450);
this.bombs.children.iterate(function (child) {
x = Phaser.Math.Between(0, 800);
y = Phaser.Math.Between(30, 450);
if (child.active) {
child.enableBody(true, child.x, child.y, true, true);
} else {
child.enableBody(true, x, y, true, true);
}
child.setVelocityX(50 * Phaser.Math.Between(10, 2));
child.setVelocityY(50 * Phaser.Math.Between(10, 2));
});
x = Phaser.Math.Between(0, 800);
y = Phaser.Math.Between(30, 450);
scene1.bomb = this.bombs.create(x, y, 'bomb').setBounce(1).setCollideWorldBounds(true).setVelocityX(50 * Phaser.Math.Between(10, 2)).setVelocityY(50 * Phaser.Math.Between(10, 2));
}
preload () {
this.load.image('sky', 'assets/tut/sky.png');
this.load.image('ground', 'assets/tut/platform.png');
this.load.image('star', 'assets/tut/star.png');
this.load.image('bomb', 'assets/tut/bomb.png');
this.load.spritesheet('dude', 'assets/tut/dude.png', { frameWidth: 32, frameHeight: 48 });
this.load.image('life', 'assets/tut/dudeLife.png');
this.load.image('bullet', 'assets/bullet7.png');
}
//end preload
//create
create () {
//add sky background
this.add.image(400, 300, 'sky');
//add player
this.player = this.physics.add.sprite(100, 450, 'dude');
//player bounces
//set world bounds
this.player.setCollideWorldBounds(true);
//animations
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
//create group 'platforms'
this.platforms = this.physics.add.staticGroup();
//add ground platforms
this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();
//add sky platforms
this.platforms.create(600, 400, 'ground');
this.platforms.create(50, 250, 'ground');
this.platforms.create(750, 220, 'ground');
//cursors
//add stars
this.stars.children.iterate(function(child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
child.setCollideWorldBounds(true);
});
//set bombs
this.bombs = this.physics.add.group();
this.addBomb();
//collision
this.pCol = this.physics.add.collider(this.player, this.platforms);
this.physics.add.collider(this.stars, this.platforms);
this.physics.add.collider(this.stars, this.bombs);
this.physics.add.collider(this.bombs, this.platforms);
this.bCol = this.physics.add.collider(this.player, this.bombs, hitBomb, null, this);
this.physics.add.overlap(this.player, this.stars, collectStar, null, this);
function collectStar(player, star) {
scene1.star.disableBody(true, true);
scene1.starCount++;
if (scene1.stars.countActive(true) === 0) {
scene1.flash = true;
scene1.round++;
scene1.bCol.active = false;
scene1.stars.children.iterate(function (child) {
child.enableBody(true, child.x, 0, true, true);
});
scene1.addBomb();
}
}
//function for player/bomb col
function hitBomb(player, bomb) {
if (scene1.slam) {
bomb.disableBody(true, true);
player.setVelocityY(-300);
} else {
if (scene1.invincible == false) {
scene1.bCol.active = false;
bomb.disableBody(true, true);
scene1.invincible = true;
scene1.lives--;
if (scene1.lives == 2) {
scene1.hudLives.three.destroy();
} else if (scene1.lives == 1) {
scene1.hudLives.two.destroy();
} else {
scene1.gameOver = true;
scene1.hudLives.one.destroy();
}
player.setAlpha(0);
scene1.add.tween({
targets: player,
alpha: 1,
duration: 100,
ease: 'Linear',
repeat: 5,
onComplete: function() {
scene1.invincible = false;
scene1.bCol.active = true;
}
});
}
}
}
// bullets = new Bullet(this);
this.physics.add.overlap(scene1.bullets, scene1.bombs, scene1.shootBomb, null, this );
//define pause button
this.q = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q);
/////////////////////////
/////////////////////////
/////////////////////////
//////////HUD////////////
/////////////////////////
/////////////////////////
scene1.starCountTxt = this.add.text(35, 10, scene1.starCount, { font: ' 20px sans-serif', fill: '#ffffff' });
//star hud img
scene1.hudStar = this.add.image(20, 20, 'star');
//adds lives on hud
scene1.hudLives = {
one: this.add.image(20, 90, 'life'),
two: this.add.image(30, 90, 'life'),
three: this.add.image(40, 90, 'life')
};
scene1.roundTxt = {
label: this.add.image(20, 55, 'bomb'),
num: this.add.text(35, 43, scene1.round, { font: '20px sans-serif', fill: '#ffffff'})
};
//end of create
} //this curly bracket
//end of create
update () {
scene1.roundTxt.num.setText(scene1.round);
if (scene1.bombs.countActive(true) == 0) {
scene1.addBomb();
scene1.flash = true;
scene1.round++;
}
if (scene1.flash) {
scene1.flash = false;
scene1.bCol.active = false;
scene1.bombs.children.iterate(function(child) {
child.setTint(0x00ff00);
setTimeout(function(){
child.setTint(0xffffff);
scene1.bCol.active = true;
}, 1000);
});
}
if (scene1.cursors.left.isDown) {
scene1.direction = -1;
}
else if (scene1.cursors.right.isDown) {
scene1.direction = 1;
}
scene1.starCountTxt.setText(scene1.starCount);
if (scene1.gameOver) {
this.physics.pause();
scene1.player.setTint(0xff0000);
scene1.player.anims.play('turn');
var die = this.add.tween({
targets: scene1.player,
scaleX: '-=0.5',
scaleY: '-=0.5',
angle: '-=360',
repeat: 1,
duration: 500,
onComplete: function() {
die.delete();
}
});
}
if (scene1.cursors.left.isDown) {
scene1.player.setVelocityX(-300);
scene1.left = true;
scene1.player.anims.play('left', true);
}
else if (scene1.cursors.right.isDown) {
scene1.player.setVelocityX(300);
scene1.left = false;
scene1.player.anims.play('right', true);
}
else {
scene1.player.setVelocityX(0);
scene1.player.anims.play('turn');
}
if (scene1.cursors.up.isDown && scene1.player.body.touching.down) {
scene1.player.setVelocityY(-400);
}
if (scene1.cursors.down.isDown && scene1.player.body.touching.down && scene1.player.y < 500) {
if (!scene1.slam) {
scene1.player.y += 5;
scene1.slam = true;
}
} else if (scene1.player.body.touching.down == false && scene1.cursors.down.isDown) {
if (!scene1.slam) {
scene1.player.setVelocityY(1000);
scene1.slam = true;
}
} else if (scene1.cursors.down.isDown == false) {
scene1.slam = false;
}
if (scene1.player.body.velocity.y < 0) {
scene1.pCol.active = false;
} else {
scene1.pCol.active = true;
}
if (scene1.keySpace.isDown) {
if (!scene1.shot && scene1.handUp) {
this.bullets.fireBullet(scene1.player.x, scene1.player.y+5);
console.log(this.bullets);
scene1.shot = true;
this.tweens.addCounter({
from: 50,
to: 200,
duration: 200,
onUpdate: function (tween)
{
var value = Math.floor(tween.getValue());
scene1.player.setTint(Phaser.Display.Color.GetColor(value, value, value));
}
});
this.time.delayedCall(300, function(){
scene1.shot = false;
scene1.player.setTint(0xffffff);
}, [], this);
}
scene1.handUp = false;
}
if (scene1.keySpace.isUp) {
scene1.handUp = true;
}
if (Phaser.Input.Keyboard.JustDown(scene1.q)) {
if (scene1.pause) {
this.physics.resume();
scene1.pause = false;
} else {
this.physics.pause();
scene1.pause = true;
}
}
//end of update
} //this curly bracket
//end of update
shootBomb(bullets, bombs) {
bombs.disableBody(true, true);
bullets.disableBody(true, true);
}
}
class Bullet extends Phaser.Physics.Arcade.Sprite {
constructor(scene1, x, y) {
super(scene1, x, y, 'bullet');
}
fire(x, y) {
this.body.reset(x, y);
this.setVelocityX(1000 * scene1.direction);
this.enableBody();
this.body.setAllowGravity(false);
this.setActive(true);
this.setVisible(true);
}
preUpdate(time, delta) {
super.preUpdate(time, delta);
// Reset the bullets when it reaches end of screen
if (this.x > 2600) {
this.setActive(false);
this.setVisible(false);
}
}
}
class Bullets extends Phaser.Physics.Arcade.Group {
constructor(scene) {
super(scene.physics.world, scene);
this.createMultiple({
frameQuantity: 20,
key: 'bullet',
active: false,
visible: false,
classType: Bullet
});
}
fireBullet(x, y) {
let bullet = this.getFirstDead(false);
if (bullet) {
bullet.fire(x, y);
}
}
}
var config = {
type: Phaser.GAME,
width: 800,
height: 600,
parent: 'gameDiv',
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: [scene1],
debug: true
};
When configuring the game you're asking it to load inside of an element with an id of gameDiv, by using parent on the game configuration.
var config = {
type: Phaser.GAME,
width: 800,
height: 600,
parent: 'gameDiv',
// ...
};
If the game isn't displaying at all, that suggests that it may not be able to find an element with the id of gameDiv.
Can you verify that an element (typically a div, so <div id="gameDiv"></div>) exists in your HTML file?
I have been working on a project to generate configurable dashboards.
so i have to generate schema dynamically based on an api request. is there any way to do that?
it will be very helpful if there is any working example!
There's an asyncModule function for this scenario. You can check example below:
const fetch = require('node-fetch');
const Funnels = require('Funnels');
asyncModule(async () => {
const funnels = await (await fetch('http://your-api-endpoint/funnels')).json();
class Funnel {
constructor({ title, steps }) {
this.title = title;
this.steps = steps;
}
get transformedSteps() {
return Object.keys(this.steps).map((key, index) => {
const value = this.steps[key];
let where = null
if (value[0] === PAGE_VIEW_EVENT) {
if (value.length === 1) {
where = `event = '${value[0]}'`
} else {
where = `event = '${value[0]}' AND page_title = '${value[1]}'`
}
} else {
where = `event = 'se' AND se_category = '${value[0]}' AND se_action = '${value[1]}'`
}
return {
name: key,
eventsView: {
sql: () => `select * from (${eventsSQl}) WHERE ${where}`
},
timeToConvert: index > 0 ? '30 day' : null
}
});
}
get config() {
return {
userId: {
sql: () => `user_id`
},
time: {
sql: () => `time`
},
steps: this.transformedSteps
}
}
}
funnels.forEach((funnel) => {
const funnelObject = new Funnel(funnel);
cube(funnelObject.title, {
extends: Funnels.eventFunnel(funnelObject.config),
preAggregations: {
main: {
type: `originalSql`,
}
}
});
});
})
More info: https://cube.dev/docs/schema-execution-environment#async-module
I'm using the Vue-table2 for rendering the table. https://github.com/ratiw/vuetable-2
<vuetable ref="vuetable"
:api-url= "apiurl"
:fields="fields">
</vuetable>
My Server Api Response doesn't have any Pagination response in it . The data returned by server is
{
"data":[
{
"id":22535,
"message":"Message1",
"message_type":"tag1",
"time":"2018-08-13T14:41:57Z",
"username":"rahuln"
},
{
"id":22534,
"message":"Message2",
"message_type":"tag2",
"time":"2018-08-13T14:02:27Z",
"username":"govindp"
},
..................
],
"error":null,
"success":true
}
This is the first time I'm Using Vue-js. How can i add the pagination into it and still using vue-table2.
Thanks In advance.
Since you don't have pagination values you must insert it we gonna trick vue-table like this
<template>
<div>
<vuetable ref="vuetable" api-url="/api/ahmed" :fields="fields" pagination-path="" #vuetable:pagination-data="onPaginationData" #vuetable:load-success="loadSuccess">
</vuetable>
<vuetable-pagination ref="pagination" #vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>
</template>
<script>
import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
export default {
components: {
Vuetable,
VuetablePagination,
},
data() {
return {
fields: ['name', 'email', 'birthdate', 'nickname', 'gender', '__slot:actions'],
allData: false,
currentPage: 1,
}
},
mounted() {
},
methods: {
onPaginationData(paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
},
loadSuccess(data) {
this.$refs.vuetable.$nextTick(()=>{
if (!this.allData) {
this.allData = data;
}
if (!data.data.per_page) {
data = this.setData(this.currentPage);
this.$refs.vuetable.loadSuccess(data);
}
})
},
setData(Page) {
var data = JSON.parse(JSON.stringify(this.allData));
var total = data.data.data.length;
var perPage = 10;
var currentPage = Page;
var lastPage = parseInt(total / perPage) + ((total % perPage) === 0 ? 0 : 1)
var from = parseInt((currentPage - 1) * perPage) + 1;
var to = from + perPage - 1;
to = to > total ? total : to;
console.log(from,to)
var newData = this.allData.data.data.filter(function(element, index) {
if (index >= from-1 && index <= to-1) {
console.log(index,from,to)
return true;
}
return false;
})
// console.log(newData)
// return newData;
data.data = {
"total": total,
"per_page": perPage,
"current_page": currentPage,
"last_page": lastPage,
"next_page_url": "",
"prev_page_url": null,
"from": from,
"to": to,
data: newData
}
// console.log(data)
this.currentPage = Page;
this.$refs.vuetable.loadSuccess(data);
return data;
},
onChangePage(page) {
this.setData(page);
}
}
}
</script>