I am trying to use user generated in a PDF.
I do not know how to prevent the next text from overlapping.
var doc = new jsPDF("p", "pt", "a4", true});
doc.text("long string that can be too long rorem ipsum", data.settings.margin.left + 15, 22, { { align: "right", maxWidth: 210 } });
doc.text("some more text", data.settings.margin.left + 15, 32);
I know how to make it work using autoTable, but not without
This may help :
doc.text("long string that can be too long rorem ipsum", data.settings.margin.left + 15, 22, { style:{ align: "right", maxWidth: 210 } });
I tried to make it.
const pirnt = "long string that can be too long rorem ipsum"
doc.text(pirnt, data.settings.margin.left + 15, 22, { { align: "right", maxWidth: 210 } });
let long = doc.getTextWidth(pirnt);
let infit = (Math.ceil(long / 210) - 1);
This may not be the best solution, but does the job, barely.
Related
I am trying to concatenate multiple pdf files to a content variable. However I want each pdf content to be on a new page, but pdfmake.js just concatenate each content right after the other. I have added 'pageBreakBefore' function right after my content but it still doesn't work. Is there a way to make each content to be on separate page. (I am using jpdmake.js 1.60). Thanks!
Below is my code:
let content = [];
content = this.getContent(checkedOrders, selectedLabOrders);
this.docDefinition = {
info: {
title: 'Title',
subject: 'labOrder-'
},
pageSize: 'LETTER',
pageOrientation: 'landscape',
pageMargins: [40, 30, 40, 30],
content: content,
pageBreakBefore: function(currentNode, followingNodesOnPage, nodesOnNextPage, previousNodesOnPage) {
return currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0;
},
unbreakable: true,
styles: {
titleHeader: {
fontSize: 16,
bold: true,
margin: [0, 10, 0, 0],
},
tableHeader: {
bold: true,
fontSize: 13,
color: 'black'
}
},
defaultStyle: {
fontSize: 9,
lineHeight: .9
}
};
I want to align my cytoscape graph on the center of the canvass, can anyone help?
This is the result i get:
Heres my layout code:
var cy = window.cy = cytoscape({
// Contenedor
container: document.getElementById('graficaCytoscape'),
// Layout
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
},
// Styles
style: [{
"selector": "node",
"style": {
"width": "mapData(score, 0, 25, 30, 70)",
"height": "mapData(score, 0, 25, 30, 70)",
"content": "data(name)",
"font-size": "12px",
"background-color": "#c2c2c2",
"text-outline-color": "#555",
"text-outline-width": "2px",
"color": "#fff",
"overlay-padding": "6px",
"z-index": "10"
}
}, {
"selector": "edge",
"style": {
"curve-style": "haystack",
"haystack-radius": "0.5",
"opacity": "0.4",
"line-color": "#EC0000",
"width": "mapData(weight, 0, 1, 1, 8)",
"overlay-padding": "3px"
}
}],
// Data
elements: data
});
So what i need is that the graph goes to the center of its container.
I think its a easy question but i never worked before with cytoescape and im stucked in this.
Thanks.
You may try to use cy.center() when you in .js file while rendering your graph.
Cytoscape.js documentation: https://js.cytoscape.org/#cy.center
You can try to add cy.center() in script.js file to see the effect in this example: http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/
Alternatively, from your code, you can also try to add cy.center() at the end of the cy variable declaration.
At last i could do it with:
pan: { x: 400, y: 100 },
I have a text object in fabric.js that I am creating with:
fbText = new fabric.Textbox('#TEST', {
width: 700,
fill: '#303846',
top: 150,
left: 50,
fontSize: 150,
textAlign: 'left',
fixedWidth: 700,
// fontWeight: 'bold',
editable: false,
originY: 'center',
styles: {
// first word of text i.e Test
0: {
//first letter of first word i.e T
0: { fill: '#21bba6', fontSize: 130}
},
}
})
I would like to make the 1st letter higher than the rest of the word. Any thoughts on how that might be possible?
This is what I want to happen:
This is currently happening:
You can use deltaY negative value. There are more available style properties that can be used, have a look at [http://fabricjs.com/docs/fabric.Textbox.html#_styleProperties][1].
var fbText = new fabric.Textbox('#TEST', {
...,
styles: {
0: {
0: {
fill: '#21bba6',
fontSize: 130,
deltaY: -30
}
},
}
})
Using Titanium for a class. I have a function that extracts my JSON data and creates labels and eventListeners. I need to make this project into a table opposed to just labels but I'm having a tough time doing so and can't quite figure it out. Here's my working code with labels. This is only my second coding class so any patience and insider tips and tricks will be greatly appreciated!
Thanks guys
Ti.UI.setBackgroundImage("347.png");
var bands = {
"sevenfold": {
"headTitle": "Avenged Sevenfold",
"footTitle": "Orange County Metal Band",
"members": [
{
"name": "M. Shadows",
"info": "Lead Singer. Known for his raspy yet powerful vocals"
},
{
"name": "Synyster Gates",
"info": "Lead guitarist and backup vocalist. Known for technical solos and melodic riffs."
},
{
"name": "Zacky Vengeance",
"info": "Rhythm guitarist and backup vocalist. Capable of tight and fast riffs and harmonizing with lead guitar parts. "
},
{
"name": "Johnny Christ",
"info": "Bassist. Contributes heavy grooves as well as intricate undertones to the rhythm section."
},
{
"name": "Arin Iljey",
"info": "Drummer. New-comer to the band. Filled in for the late Jimmy 'The Rev' Sullivan."
},
]
},
"adtr": {
"headTitle": "A Day To Remember",
"footTitle": "Ocala Based Pop-Punk Band",
"members": [
{
"name": "Jeremey McKinnon",
"info": "Lead Singer. Capable of hitting clean high notes as well as low screams."
},
{
"name": "Neil Westfall",
"info": "Rhythm guitarist and backup vocalist. Plays fast punk inspired rhythm sections while contributing back up screams during live shows."
},
{
"name": "Joshua Woodard",
"info": "Bassist. Contributes to the heavy tones of the rhythm section."
},
{
"name": "Kevin Skaff",
"info": "Lead guitarist and backup vocalist. Plays the melodic section of songs and aids Jeremy with clean vocals both in the studio and on live shows."
},
{
"name": "Alex Shelnut",
"info": "Drummer. Adds fast punk fills with metal influenced double bass beats."
}
]
}
};
var mainWindow = Ti.UI.createWindow({
title: "Band Members",
backgroundImage: "347.png"
});
var navWindow = Ti.UI.iOS.createNavigationWindow({
window: mainWindow
});
var getDetail = function(){
var detailWindow = Ti.UI.createWindow({
title: this.text,
backgroundColor: "white"
});
var detailText = Ti.UI.createLabel({
text: this.details,
top: 30,
left: 15,
right: 15
});
detailWindow.add(detailText);
navWindow.openWindow(detailWindow);
};
var makeUI = function(){
var spacing = 30;
for(n in bands){
var titleLabel = Ti.UI.createLabel({
text: bands[n].headTitle,
left: 30,
right: 30,
borderRadius: 5,
top: spacing,
height: 25,
textAlign: "center",
backgroundColor: "#333",
font: {fontSize: 22, fontFamily: "Verdana", fontWeight: "bold"},
color: "#fafafa"
});
spacing = titleLabel.top + titleLabel.height + 10;
for(m in bands[n].members){
var itemLabel = Ti.UI.createLabel({
text: bands[n].members[m].name,
details: bands[n].members[m].info,
left: 30,
right: 30,
borderRadius: 5,
textAlign: "center",
top: spacing,
height: 25,
backgroundColor: "#ffffff",
font: {fontSize: 22, fontFamily: "Verdana"},
color: "#333"
});
mainWindow.add(itemLabel);
spacing = itemLabel.top + itemLabel.height + 10;
itemLabel.addEventListener("click", getDetail);
}
mainWindow.add(titleLabel);
spacing = itemLabel.top + itemLabel.height + 40;
}
};
makeUI();
navWindow.open();
Please see the Titanium Kitchen sink application which contains templates and examples for all the different UI elements. The app itself is not a good example of how to architect your entire application but it provides some excellent examples of how to build tableViews.
Titanium Kitchen Sink
Download it, import it into Ti Studio as an existing project, build it and view it in the simulator or on a device.. Find the control you want, see the options and follow the code examples.
In your existing app, you are adding labels to a window and then keeping a spacing counter for where to layout your next label.
The tableView is the right UI control to use.
create a tableView object(position, style etc..)
create an array of tableRow objects (like how you are with labels now)
tableView.data = myTableRowsArray;
add tableView to your window
you're up and running
Developing in Titanium Mobile.
I need to remove a view from a scrollView when a delete button is clicked. I have a custom event firing when my button is clicked, which the scrollView listens for. My question is, how do I reference the view that needs to be deleted? These views are added to the scrollView dynamically, and there is no unique information about the view. I tried passing the view itself when firing the custom event, but this does not work. How do I tell the scrollView which view to delete?
When you have a delete button inside the view - that's a piece of cake :) Just get its' parent and delete it - scrollView.remove(e.source.parent);
Here I created a demo page:
var scrollView = Titanium.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: true,
layout: 'vertical'
});
var colors = ['red', 'green', 'blue', 'orange', 'purple', 'yellow'];
for (var i = 0; i < 6; i++) {
var view = Ti.UI.createView({
backgroundColor: colors[i],
borderRadius: 10,
width: 300,
height: 200,
top: 10,
id: i
});
scrollView.add(view);
var deleteButton = Ti.UI.createButton({
borderRadius: 3,
style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
backgroundGradient: {
type: 'linear',
colors: [ '#c7c7c7', '#686868' ],
startPoint: { x: 0, y: 0 },
endPoint: { x: 0, y: 30 },
backFillStart: false
},
title: 'Delete view ' + i,
font: { fontSize: 12, fontWeight: 'bold' },
color: '#fff',
width: 120,
height: 30
});
view.add(deleteButton);
deleteButton.addEventListener('click', function(e) {
Ti.API.info(e.source.id); // use this ID
scrollView.remove(e.source.parent);
});
}
Ti.UI.currentWindow.add(scrollView);