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
Related
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.
I have a node js application that visualises a graph using Cytoscape JS. I wanted to use the new feature of taxi edge style in 3.5.2, but everytime I render the graph the page freezes and crashes after a while with version 3.5.2. Also the CPU usage spikes to ~100%. I use the Cytoscape instance as part of a class.
I have traced it back to the migration from Cytoscape JS 3.2.22 to 3.3.0. But that is all I could find. I examined the changelogs in the Cytoscape JS repo, but couldn't find anything that seemed relevant, except: https://github.com/cytoscape/cytoscape.js/issues/2311. This leads to #2295, the fix there didn't help either. So I guess that was not related either.
this.renderedGraph = Cytoscape({
container: $(`#${graphID}`),
style: Cytoscape.stylesheet()
.selector("node")
.css({
"content": "data(graphAbbrev)",
"text-wrap": "wrap",
"padding": "4px",
"width": "label",
"height": "label",
"text-valign": "center",
"text-halign": "center",
"shape": "roundrectangle",
"background-color": `mapData(weight, 0, ${
this.maxNodeWeight
}, #1cb5e0, #000046)`,
"color": "white"
})
.selector("edge")
.css({
"line-fill": "linear-gradient",
"text-margin-x": "20px",
"text-rotation": "autorotate",
"label": "data(weight)",
// "curve-style": "taxi",
// "taxi-direction": "downward",
// "taxi-turn": 20,
// "taxi-turn-min-distance": 5,
"target-arrow-shape": "triangle",
"target-arrow-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`,
"line-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`
}),
layout: {
name: "preset",
fit: true,
padding: 30
},
elements: {
nodes: this.nodes,
edges: this.edges
}
});
I would expect this to render the usual graph as it does in 3.2.22, but no luck with anything from 3.3.0 and above.
How can i use bootstrap glyphicons instead of "regular" symbols in the contextbuttons of Highcharts. Going to exporting > buttons > contextButton.
I have added some glyphicon in the className propery, but the symbol shows up instead. Is there any way to override this?
Here is an example JSON object for Highcharts:
{
"chart": {
"type": "column",
"renderTo": "periodChart"
},
"title": {
"text": "Verkoop per periode"
},
"xAxis": {
"categories": ["2015", "2016", "2017"]
},
"yAxis": {
"title": {
"text": "Aantal verkochte producten"
}
},
"exporting": {
"buttons": {
"contextButton": {
"align": "right",
"symbol": "menu",
"height": 22,
"width": 24,
"y": 0,
"x": 0,
"className": "glyphicon glyphicon-print",
"enabled": true
}
}
},
"series": [{
"borderColor": "#555",
"data": [{
"name": "2015",
"y": 6121.0
}, {
"name": "2016",
"y": 6172.0
}, {
"name": "2017",
"y": 4943.0
}],
"name": "Aantallen per jaar (P/s)"
}]
}
I have added the following packages to my html, along with bootstrap and jquery:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Edit: when i leave the symbol property empty ("") then nothing shows up. Not using the property at all will result in the default "menu" symbol.
EDIT
The post before the edit contained only the information how to add a regular image as a background to the context button which wasn't the actual answer for this question.
Here I used glyphicon as a charcter in the text of te button: http://jsfiddle.net/kkulig/LoLtm8bn/
I haven't found a way to completely disable the symbol in the context button. The workaround for this is to hide it but the space reserved for it still remains there.
I ended up using the approach from Full text button example in this API record: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text (contextButton disabled, exportButton used instead).
Live demo: http://jsfiddle.net/kkulig/np80zf58/
END OF EDIT
Context button is an SVG element so you need to use defspattern for this:
JS:
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: 1,
id: "image1",
patternContentUnits: 'userSpaceOnUse'
});
renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern);
}
}
CSS:
// hide the default symbol
.highcharts-button-symbol {
display: none
}
// use a new one
.highcharts-button-box {
fill: url(#image1)
}
Live working example: http://jsfiddle.net/kkulig/2cpvuydd/
SO related question: Fill SVG path element with a background-image
Highcharts docs reference: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Highcharts API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
I am using amCharts for my App. Recently I updated it from version 3.17.0 to 3.20.6.
In my App, I have used export with capture method to capture image as below:
if (window.fabric) {
clearTimeout(interval);
// CAPTURE CHART
chart.export.capture({}, function() {
// SAVE TO JPG
this.toPNG({}, function(base64) {
//some code
});
});
}
}, 10);
In my serial chart with Chart cursor, It was working fine as below in previous version. See image:
After updating version it shows weird behavior: ChartCursor gone, and on dragging cursor it is drawing line on Chart.
I have checked on amChart website, I have correctly set everything.
What can be wrong here?
If I will disable chart.export.capture, it' will working fine.
Here is my code to set properties chart:
"type": "serial",
"theme": "none",
"pathToImages": "resources/javascript/amcharts/images/",
"marginTop": 1,
"marginBottom": 1,
"autoMarginOffset": offsetM,
//left hand side space between container and chart
"zoomOutButtonRollOverAlpha": 0.15,
"zoomControl": {
"zoomControlEnabled": true,
"backgroundAlpha": "0.15",
"backgroundColor": "#000000"
},
"dataProvider": valueChartData,
"columnWidth": 1,
"categoryField": "date",
"categoryAxis": {
"minPeriod": "DD",
"parseDates": true
},
"export": {
"enabled": false,
"menu": []
}
for exporting and cloning chart:
var interval = setInterval(function() {
if (window.fabric) {
clearTimeout(interval);
// CAPTURE CHART
main.pageContainerBulkMarketing.bulkmarketing.pageContainerBMReports.reports.chart["export"].capture({}, function() {
// SAVE TO JPG
this.toPNG({}, function(base64) {
somewhere.OpenedTabGrpClone = "";
somewhere.OpenedTabGrpClone = base64;
});
});
}
}, 10);
Note: I have observed one thing: It is adding one canvas tag over our chart div, it is like:
<canvas class="upper-canvas " style="position: absolute; width: 802px; height: 360px; left: 0px; top: 0px; -moz-user-select: none; cursor: crosshair;" width="802" height="360"></canvas>
UPDATE: Here I have added jsfiddle But, here it is working fine, I took this time to figure out that why it's not working my side; result :none.
Simple do this
1) Check your library links and plugin code , may it interfer with other js or plugin .
2) Also Test your code with live amchart libraries.
3) if every thing fine and working set Z-index by -1 for canvas tag.
I'm using amCharts to display a map. I'm aiming to change the color of a specify country using Javascript.
I do use the following line to change the color inside my web browser :
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
But when I use it inside my html page, this does not work.
Here is the full html page :
<!DOCTYPE html>
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to http://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: http://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 0.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
color = "#000000";
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
}
);
$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 767px;"></div>
</body>
</html>
Hope this problem can be solved !
Thanks !
Your code to manipulate fill color of the area is correct. However, it executes immediately on page load. At that point the map is still initializing, meaning there's no such element yet, hence it not working.
There are a number of ways to go about it.
If you just need to load the map with certain areas (countries) colored, you could do that with map's config:
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "FR",
"color": "#00FF00"
} ],
"images": [ {
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
} ]
}
If that is not acceptable, or if you need to manipulate the map after it's built, I suggest you use map's API functions (getObjectById() to get area object, then validate() to refresh it) to manipulate area colors, rather than CSS.
You would also need to ensure that map is initialized before doing so. We can use init event for that.
Consider the following code:
AmCharts.makeChart("map", {
"type": "map",
// ...
"listeners": [{
"event": "init",
"method": function(event) {
var area = event.chart.getObjectById("FR");
area.color = "#000000";
area.validate();
}
}]
});
Here's a working example.
You could use the same event to manipulate color of the area using your CSS code, however I strongly suggest using API functions. While manipulating CSS directly may work, the changes might be reset when there's something going on on the map, such as when you hover the area.