Develop Reference

How to set font-size dynamically in JointJs?

I am developing a JointJs Application,I need to set font-size for a text inside a rectangle.
$('#FText,#FTextHeight,#FTextWidth,#FTextSize').on('keyup change', function () {
var FtHeight = $('#FTextHeight').val();
var FtWidth = $('#FTextWidth').val();
var FtSize = parseInt($('#FTextSize').val());
var txt = $('#FText').val();
graph2.clear();
if (txt.length > 0) {
$('#FTexterror').empty();
var myFtext = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: FtWidth, height: FtHeight },
attrs: {
rect: {
fill: 'white', stroke: outerColor, 'class': 'customtext',
},
text: {
text: txt, 'letter-spacing': 1, 'font-size': FtSize,
fill: outerColor, 'font-size': 11, 'y-alignment': 'middle',
}
}
});
graph2.addCells([myFtext]);
}
else {
$('#FTexterror').empty().append('*Enter valid text');
}
});
the above code is not working while setting font-size for the text.
Kindly help me on this

try this
$('.input-text')
.val(rect.attr('text/font-size')) //set initial value
.on('keyup', function () {
var val = $(this).val();
rect.attr('text/font-size', val);
});
complete demo: https://jsfiddle.net/vtalas/sav49mj4/

Creating a set of views takes a long time (Appcelerator) and blocks user interactions on iOS only

I am creating a list (ScrollView) with some custom "rows" (The image contains a single "row"). I show 5 rows and have added an event listener so that when the user scrolls to the end, 5 more elements are loaded and displayed. I made this using Alloy but I noticed it was taking too long so I tried writing the views manually.
// created the views programmatically to see if there was any difference from Alloy
function createRow(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: Ti.UI.FILL,
height: "42dp"
});
var rowContent = Ti.UI.createView({
width: Titanium.UI.FILL,
height: "41dp", //Titanium.UI.FILL,
layout: "horizontal",
left: "16dp",
right: "16dp"
});
var border = Ti.UI.createView({
left: "16dp",
right: "16dp",
height: "1dp",
backgroundColor: Colors.darkGrey
});
var titleScroll = Ti.UI.createScrollView({
scrollType: "horizontal",
width: "49%",
horizontalWrap: false
});
var scrollContainer = Ti.UI.createScrollView({
scrollType: "horizontal",
horizontalWrap: false,
width: "50%"
});
var scroll = Ti.UI.createView({
layout: "horizontal",
horizontalWrap: false,
right: 0,
width: Ti.UI.SIZE,
height: Titanium.UI.SIZE
});
var title = Ti.UI.createLabel({
text: args.title,
font: args.isTitle ? {font: "Lato-Regular", fontSize: "22dp"} : {fontFamily: "Lato-Regular", fontSize: "15"},
horizontalWrap: false,
wordWrap: false,
left: 0,
color: Colors.grey,
minimumFontSize: "15dp"
});
if(args.value) {
var t = args.value.join();
scroll.add(Ti.UI.createLabel({
text: t,
color: args.action ? Colors.blue : Colors.black,
font: {fontSize: "15dp", fontFamily: "Lato-Regular"},
right: "5dp",
width: Ti.UI.SIZE,
horizontalWrap: false,
wordWrap: false,
minimumFontSize: "15dp"
}));
}
if(args.data)
scrollContainer.data = args.data; //just a dump of the data used by the click handler
if(args.action)
scrollContainer.addEventListener("click",args.action);
scrollContainer.add(scroll);
titleScroll.add(title);
rowContent.add(titleScroll);
rowContent.add(scrollContainer);
container.add(rowContent);
container.add(border);
return container; //Ti.UI.View
}
function createHeader(args) {
var header = Ti.UI.createView({
layout: "horizontal",
height: "44dp",
backgroundColor: "#fff"
});
var leftView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var rightView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var centerView = Ti.UI.createView({
width: "49%",
height: Ti.UI.FILL
});
var verticalAligner = Ti.UI.createView({
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
layout: "vertical"
});
var headerTitle = Ti.UI.createLabel({
color: Colors.green,
font: {fontSize: "16.5dp", fontFamily: "Lato-Regular"},
textAlign: "center",
horizontalWrap: false,
wordWrap: false
});
var headerSubtitle = Ti.UI.createLabel({
font: {fontSize: "14dp", fontFamily: "Lato-Regular"},
textAlign: "center",
color: Colors.grey,
horizontalWrap: false,
wordWrap: false
});
if(args.rightView)
rightView.add(args.rightView);
if(args.leftView)
leftView.add(args.leftView);
verticalAligner.add(headerTitle);
verticalAligner.add(headerSubtitle);
centerView.add(verticalAligner);
header.add(leftView);
header.add(centerView);
header.add(rightView);
headerTitle.text = args.title;
headerSubtitle.text = args.subTitle;
return header;
}
function createBlock(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: "100%",
height: Ti.UI.SIZE
});
var covers = Ti.UI.createView({ //
height: "119dp"
});
var content = Ti.UI.createView({
height: Ti.UI.SIZE,
layout: "vertical"
});
function goToEvent() {
Storage.event.id = args.event;
Alloy.Globals.openWin("event");
}
var data = new D.data();
var w = Android ? Ti.Platform.displayCaps.platformWidth : Measure.dpToPX(Ti.Platform.displayCaps.platformWidth);
var h = Measure.dpToPX(119); //Android ? Alloy.Globals.dpToPX(119) : Measure.dpToPX(119);
if(args.images) {
//setTimeout(function() { //timeout didn't make any difference
var image = null;
//for(var i = 0; i < args.images.length; i++) {
image = Ti.UI.createImageView({
image: data.getBlobResized({ //returns a URL for the picture
id: args.images[0], //i
width: w,
height: h
}),
width: iOS ? Measure.pxToDP(w) : Alloy.Globals.pxToDP(w),
height: iOS ? Measure.pxToDP(h): Alloy.Globals.pxToDP(h)
});
image.addEventListener("click",goToEvent);
covers.add(image); //addView
//}
//},0);
}
var row = null;
if(args.rows) {
for(var j=0; j < args.rows.length; j++) {
//row = Alloy.createController("index/events/block/row",args.rows[j]).getView();
content.add(createRow(args.rows[j]));
}
}
container.add(createHeader(args));
container.add(covers);
container.add(content);
return container;
}
In particular, in the code provided, I call 4 times the function createRow() which creates a row inside the element (as seen in the picture). This function takes 7ms to 10ms to run for some reason. So calling it 4 times means it slows the whole process 28-40ms.
On Android the app doesn't lag at all. On iOS it stops user interaction completely until these operations are done
Using latest Titanium SDK (5.2.2GA) on Appcelerator Studio
Testing on iPhone 5, iOS simulator (4s,5,6,6s)
Thank you for your help

Select Object by Id in Titanium

In Titanium how do you select an object by the id?
Working with Titanium I created a view with children. I set an event listener on the parent view so I didn't have to create an event listener for each child. In the event listener I determine which child view was clicked by using e.source.id. I need to change the height of the view as it's clicked, and I also need to change the height of previous view that was open. (This is all to show the active view with an underline type of style.)
var selectionView = Ti.UI.createView({
title: 'Selection View',
width: Ti.UI.Fill,
left: 0,
top: 0,
backgroundColor: '#f5f5f5',
layout: 'horizontal',
height: 32,
zIndex: 12
});
var selection_Type = Ti.UI.createView({
title: "Type View",
width: Ti.UI.Fill,
layout: 'horizontal',
backgroundColor: '#ABABAB',
top: 0,
height: 30
});
I can't figure out how to select the object by the id name so I can change it's height.
//storing the id of the last clicked feed label so we can change it's height when it's no longer open
var feedSelector = 'selection_All';
selection_Type.addEventListener('click', function (e) {
Ti.API.info( ' ==== Select Destination Hit ==== ' + e.source.id);
if (e.source.id === feedSelector) {
//refresh the feed view
Ti.API.info('Simulating feed refresh for...' + e.source.id);
}
else {
//reducing active label height to simulatue 2px underline
e.source.setHeight(28);
//reset previous selected label height
//here's the problem
//i know how to do this in regular javascript/html
//but I don't know how to access an object by it's id in Titanium
//setting current label id in feedSelector so we can change it's height next time a button is clicked
feedSelector = e.source.id;
Ti.API.info('Changed value for feedSelector to...' + feedSelector);
}
}
}
);
var selection_All = Ti.UI.createLabel({
id: 'selection_All',
text: 'All',
width: '14.9%',
top: 0,
center: 2,
height: 28,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Status = Ti.UI.createLabel({
id: 'selection_Status',
text: 'Status',
width: '22%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Article = Ti.UI.createLabel({
id: 'selection_Article',
text: 'Article',
width: '23%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Video = Ti.UI.createLabel({
id: 'selection_Video',
text: 'Video',
width: '20%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Audio = Ti.UI.createLabel({
id: 'selection_Audio',
text: 'Audio',
width: '20%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
//creating selection type container and adding selection types
selection_Type.add(selection_All);
selection_Type.add(selection_Status);
selection_Type.add(selection_Article);
selection_Type.add(selection_Video);
selection_Type.add(selection_Audio);
selectionView.add(selection_Type);
Edit: I accomplished what I needed to do using a switch statement, but it would be much cleaner if I could get the object by it's id.
var feedSelector = 'selection_All';
selection_Type.addEventListener('click', function (e) {
Ti.API.info( ' ==== Select Destination Hit ==== ' + e.source.id);
if (e.source.id === feedSelector) {
//refresh the feed view if the feed is open and button is clicked
//Ti.API.info('Simulating feed refresh for...' + e.source.id);
alert('Refreshing feed');
}
else {
//reducing active label height to simulatue 2px underline
e.source.setHeight(28);
switch (feedSelector) {
case 'selection_All':
selection_All.setHeight(30);
break;
case 'selection_Status':
selection_Status.setHeight(30);
break;
case 'selection_Article':
selection_Article.setHeight(30);
break;
case 'selection_Video':
selection_Video.setHeight(30);
break;
case 'selection_Audio':
selection_Audio.setHeight(30);
break;
}
feedSelector = e.source.id;
Ti.API.info('Changed value for feedSelector to...' + feedSelector);
}
}
);

If you're using Titanium Studio, just debug on the click event and examine the event object. On the breakpoints stop go to the Expressions tab enter the e event object and examine it. Probably the UI elemnt is there as a property.
Other way around is:
var labelStore = {};
function createLabel(props){
var label = Ti.UI.createLabel(props);
labelStore[props.id] = label;
return label;
}
function getLabelById(id){
return labelStore[id];
}
var selection_Status = createLabel({
id: 'selection_Status',
...
});
and then on click
var id = e.source.id;
var label = getLabelById(id);
....Do what you got to do with the label

Titanium mobile Javascript objects

Ok so I'm new to Titanium and I'm pretty much a noob at Javascript
I tried doing this:
app.view.newMatrix = function() {
return {
matrix = Titanium.UI.createWindow({
title:'Add a New Matrix',
backgroundColor:'stripped',
navBarHidden: false
}),
// navbar buttons
cancel = Titanium.UI.createButton({
title:'Cancel'
}),
save = Titanium.UI.createButton({
title:'Save',
style:Titanium.UI.iPhone.SystemButton.SAVE
}),
name_label = Titanium.UI.createLabel({
text: "Matrix Name:",
font: { fontsize: 12, fontstyle: 'italic', color: '#336699' },
height: 35,
top: 35,
left: 30,
width: 150,
color: "black"
}),
name = Titanium.UI.createTextArea({
color: '#336699',
height: this.name_label.height,
top: this.name_label.top + 35,
left: this.name_label.left - 10,
width: 275,
borderRadius:15
}),
setItems = function() {
this.win.add(this.name);
this.win.add(this.name_label);
this.win.add(this.desc);
this.win.add(this.desc_label);
Ti.API.info("label:"+ this.name_label.height);
return this.win.open({modal: true, animation: true});
}
}
}
then called it like this:
app.controller.home = function() {
var home = app.view.home();
home.setItems();
home.butn.addEventListener("click", function(e){
app.controller.newMatrix();
});
home.butn2.addEventListener("click", function (e) {
matrix_table(tab);
});
home.butn3.addEventListener("click", function(e){
newItem();
});
home.butn5.addEventListener("click", function (e) {
item_table();
});
}
I did this because I saw a Titanium MVC suggestion here but I don't get why it returns an anonymous object. I can't access properties like name_label from within the name object.
I figured out that I should do this instead:
app.view.newMatrix = function() {
this.matrix = Titanium.UI.createWindow({
title:'Add a New Matrix',
backgroundColor:'stripped',
navBarHidden: false
}),
// navbar buttons
this.cancel = Titanium.UI.createButton({
title:'Cancel'
}),
this.save = Titanium.UI.createButton({
title:'Save',
style:Titanium.UI.iPhone.SystemButton.SAVE
}),
this.name_label = Titanium.UI.createLabel({
text: "Matrix Name:",
font: { fontsize: 12, fontstyle: 'italic', color: '#336699' },
height: 35,
top: 35,
left: 30,
width: 150,
color: "black"
}),
this.name = Titanium.UI.createTextArea({
color: '#336699',
height: this.name_label.height,
top: this.name_label.top + 35,
left: this.name_label.left - 10,
width: 275,
borderRadius:15
}),
this.setItems = function() {
this.win.add(this.name);
this.win.add(this.name_label);
this.win.add(this.desc);
this.win.add(this.desc_label);
Ti.API.info("label:"+ this.name_label.height);
return this.win.open({modal: true, animation: true});
}
}
and call it like this:
app.controller.home = function() {
return {
getView: function() {
var home = app.view.home();
home.setItems();
home.butn.addEventListener("click", function(e){
app.controller.newMatrix();
});
home.butn2.addEventListener("click", function (e) {
matrix_table(tab);
});
home.butn3.addEventListener("click", function(e){
newItem();
});
home.butn5.addEventListener("click", function (e) {
item_table();
});
}
}
}
But I don't know why the first example doesn't work. I mean aren't properties the same as variables? Also I do know that the second example is an object too.. is that how I'm supposed to do them? Also with the second example is the new keyword optional? Should I use it? I kinda wanted to stay away from that cause I'm not sure when I should use it.
thanks I hope I made sense. I do have it working but I don't know if the second example is the right way to go....

How to set the tip dimensions with jQuery qTIp?

I'm having some trouble with modifying qTip's tip size (x,y).
I tried to add the style: { tip: { x:2,y:2 } } in all sorts of ways, but failed.
How can I add it to the following script?
// Status Tooltips Style
$.fn.qtip.styles.statusTooltips = {
background: '#333333',
color: 'white',
textAlign: 'center',
border: {
width: 1,
radius: 5,
color: '#333333'
},
tip: 'leftMiddle',
name: 'dark'
}
// Status Tooltips Init
$('.status[title]').qtip({
style: 'statusTooltips',
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftBottom'
}
}
});

it's simpe enough:
$("#mytip").qtip({style: { tip: { size: { x: 10, y: 10}} }});
http://craigsworks.com/projects/qtip/docs/tutorials/#tips

For qtip 2, you can just set the width and height properties of the tip object:
$("#mytip").qtip({
style: {
tip: {
width: 10,
height: 10
}
}
});
See http://qtip2.com/plugins#tips.width

Got it!
$('.status[title]').qtip({
style: {background:'#333333',
color:'white',
textAlign:'center',
border:{width: 1, radius: 5, color: '#333333'},
tip:{corner:'leftMiddle',size: { x:6,y:10 }}
},
position: {corner: {target:'rightMiddle',tooltip:'leftBottom'}}
});
Thanks, StackOverflow, for being an occasional rubber duck :)