Q : i wanted to manage images dynamically using pdfkit in nodejs. and also i want to addPage if images not fitted in current page.
Code :
const doc = new PDFDocument({
size: 'letter'
});
function photographs(doc) {
arr = [1, 2, 3, 4, 5, 6, 7]
doc
.fillColor('#1c5695')
.fontSize(10)
.font('Helvetica-Bold')
.text('PHOTOGRAPHS', 10, doc.y, {
width: 300,
align: 'left'
})
arr.forEach((element, i) => {
doc.image('images/pdflogo.png', {
align: 'center',
fit: [100, 100]
})
});
}
so my question is how to manage x and y position of image , so it'll manage space dynamically.
e.g first 6 img set into 1st row then rest will set on 2nd row and so on..
Related
I am generating text fields dynamically and I am trying to get the contents of the text fields.
//I declared a list of string and generated it using the length of my product.
late final List<String> recovered;
//the length of the products is 3
recovered = List.generate(products.length, (index) => ""));
TextField(
onSubmitted: (value) {
recovered.insert(index, value);
log("the value is $value");
setState(() {});
},
controller: myControllers[index],
decoration: const InputDecoration(
enabledBorder:OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: Colors.grey)),
),
),
I inserted 1,2,4 into the textFields generated by my listView Builder and got the following values
[1, 2, 4, , , ] instead of [1, 2, 4].
Calling insert adds them to the list. I believe you want to replace them. For that, instead of
recovered.insert(index, value);
you need to do
recovered[index] = value;
on your Submit you need to check if the value is empty or not then add it to your list:
onSubmitted: (value) {
if(value.isNotEmpty){
recovered.insert(index, value);
log("the value is $value");
setState(() {});
}
},
I have 3 groups each contain a rect and a text. When creating each group I set "name" attribute to "false". Then I add these groups to an array called "groups". The problem is, that I want to get the "name" attribute when I do dragstart on one of these groups. I get the "name" only when I drag these groups for the first time. Meaning I startdrag the first - it works, second - works, third - works, but dragging one of them twice fails with "groups[i].name is not a function". That I dont understand, since it worked the first time.
this is how I created groups:
var group1 = new Konva.Group({
x: 30,
y: 50,
draggable: true,
name: "false",
});
var text1 = new Konva.Text({
fontSize: 26,
fontFamily: 'Calibri',
text: 'Hello',
fill: 'black',
padding: 10,
});
var rect1 = new Konva.Rect({
width: text1.width(),
height: text1.height(),
fill: '#aaf',
});
then I added them to a group like this:
group1.add(rect1).add(text1);
I created an array and pushed these groups in:
var groups = [];
groups.push(group1, group2, group3);
I iterate groups and assign each 'dragstart' event in which I came across my problem when logging
for (let i = 0; i < groups.length; i++) {
groups[i].on('dragstart', () => {
console.log(groups[i].name());
})
I have seen animated enemies in simple games that will chase you, attack you, or perform a sort of task.
In phaser 3, how do I give a sprite multiple tasks using tweens?
For now, I have only a tween that performs a really simple task
gameState.enemy.move = this.tweens.add({
targets: gameState.enemy,
x: 600,
ease: 'Linear',
duration: 1800,
repeat: -1,
yoyo: true
});
Also, what exactly is a tween? Can a sprite have multiple tweens? Can a tween help perform multiple tasks?
I found this website but did now understand..
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/tween/
A Tween is just a "function", that changes properties (only numeric) values of an object (or multiple objects), from a start value to an end value, over a specific duration. (the object doesn't even need to be a phaser sprite or image or ..., as shown in the example below)
And Yes, you can change multiple values in one tween (check example below).
Here a very simple example, with a basic Javascript object:
var config = {
type: Phaser.AUTO,
width: 400,
height: 200,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: {
create
}
};
var game = new Phaser.Game(config);
var simpleObject = {value: -1, value2: -2}
function create ()
{
console.info('Initial value', JSON.stringify(simpleObject))
this.tweens.add({
targets: simpleObject,
value: {from:0, to: 100},
value2: {from: 10, to: 200},
duration: 3000,
delay: 500,
onUpdate: _=> console.info('On Update', JSON.stringify(simpleObject)),
onComplete: _=> console.info('After Tween', JSON.stringify(simpleObject))
});
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I am reading the sent, post data to my Nodejs using :
console.log(req.body.order)
It prints the following data in my console:
{res_key: kshdkjfh9827349sjdhf, auth_Key: ksjdhfkjs928374sdjkhf923847, customer_id: f, payment_mode: f, getMenuURL: dataurl, orderUID: dfjkh987, has_paid: 0, delivery_discount: 0, menuOrderData: [{menu_id: 244, menu_price: 4.5, item_name: Cacik (v), menu_quantity: 1, topingsOrder: []}, {menu_id: 240, menu_price: 5, item_name: Marinated Olives (v), menu_quantity: 1, topingsOrder: [{id: 708, name: Water, optional_fee: 2.00}, {id: 710, name: Coke Zero, optional_fee: 2.00}]}, {menu_id: 241, menu_price: 8.5, item_name: Mixed Pickles (v), menu_quantity: 1, topingsOrder: []}]}
My aim is to calculate the total for all items in this data so I would like to tap into it for example, I would like to tap into res_key using:
const data = req.body.order
const res = data['res_key']
Currently I am unable to read any parameter. Need help resolving this please.
My nodejs app settings are:
app.use(express.urlencoded({extended:true})); app.use(express.json());
I want to add new data to an existing graph. Meaning that I want to merge the existing rendered data points with new ones to render the old and the new data points together. I'm trying to use Plotly.newPlot to render new data like this:
const TESTER = document.getDocumentById('tester');
const dataPoints = {
x: [1, 2, 3],
y: [1, 2, 3],
text: ['1 text', '2 text', '3 text '],
size: [1, 2, 3],
color: [1, 2, 3]
};
const layout = {
margin: {
t: 0
},
hovermode: 'closest'
};
const dataToRender = {
x: [dataPoints.x],
y: [dataPoints.y],
text: [dataPoints.text],
mode: 'markers',
marker: {
size: dataPoints.size,
color: dataPoints.color,
sizemode: 'area',
showscale: true,
colorscale: 'Portland',
colorbar: {
xanchor: 'right',
len: 0.5,
title: 'km'
}
}
};
Plotly.newPlot(TESTER, dataToRender, layout);
But I always end up receiving a plotly-latest.min.js:32 Uncaught TypeError: Cannot read property 'style' of undefined. What am I doing wrong?
Thanks in advance
The plotly format is sometimes a bit tricky. You need to change the data structure as follows:
const dataToRender = [{
x: dataPoints.x,
y: dataPoints.y,
text: dataPoints.text,
mode: 'markers',
marker: {
size: dataPoints.size,
color: dataPoints.color,
sizemode: 'area',
showscale: true,
colorscale: 'Portland',
colorbar: {
xanchor: 'right',
len: 0.5,
title: 'km'
}
}
}];
i.e. all data goes in an array which contains the data itself and the metainformation, layout, etc.
Add square brackets around your dataToRender
Add curly brackets around {x ...marker}
Remove the square brackets before dataPoints.x, y and text
Now let's get to the fun of adding data. We first make a variable out of your const dataPoints to store the initial data set (I modified the size a little bit). In the function tester() we randomly add one point and update/redraw the graph.
<script>
var dataPoints = {
x: [1, 2, 3],
y: [1, 2, 3],
text: ['1 text', '2 text', '3 text '],
size: [50, 250, 500],
color: [1, 2, 3]
}
var t = setInterval(tester, 1000);
function tester() {
const TESTER = document.getElementById('tester');
dataPoints.x.push(Math.random() * 3);
dataPoints.y.push(Math.random() * 3);
dataPoints.size.push(Math.random() * 500);
dataPoints.color.push(1 + Math.random() * 2);
const layout = {
margin: {
t: 0
},
hovermode: 'closest'
};
const dataToRender = [{
x: dataPoints.x,
y: dataPoints.y,
text: dataPoints.text,
mode: 'markers',
marker: {
color: dataPoints.color,
size: dataPoints.size,
sizemode: 'area',
showscale: true,
colorscale: 'Portland',
colorbar: {
xanchor: 'right',
len: 0.5,
title: 'km'
}
}
}];
Plotly.newPlot(TESTER, dataToRender, layout);
}
</script>
Here is the working JSfiddle