Skip to content

Instantly share code, notes, and snippets.

@skypanther
Created December 2, 2011 19:49
Show Gist options
  • Save skypanther/1424597 to your computer and use it in GitHub Desktop.
Save skypanther/1424597 to your computer and use it in GitHub Desktop.
Titanium Mobile helper module for determining whether you're on a tablet or phone
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
var view = Ti.UI.createView({
bottom:10,
layout:'vertical',
height:200,
width:'auto'
});
// helper function for making some labels
function makeLabel(lbl) {
return Ti.UI.createLabel({
color:'#000',
text: lbl,
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'left',
width:'auto',
height:'auto',
top:20,
left:10
});
}
// require in our modules
var tabtest = require('tablet');
// make and add our labels
view.add(makeLabel((tabtest.isTablet()) ? 'This is a tablet' : 'This is a phone'));
view.add(makeLabel('osname = '+tabtest.osname()));
view.add(makeLabel('Diagonal size = '+tabtest.screensize()));
win1.add(view);
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});
var label2 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 2',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();
/*
tablet.js -- JS module for detecting whether your code
is running on a phone or tablet (ipad, android)
*Arbitrary* cutoff between "tablets" and "phones" is set at 8 inches.
The smaller 7" android tablets tend to display layouts in the same way as phones
Larger tablets, like the 10" tablets sometimes mess with layouts
*/
exports.isTablet = function(diagonalInches) {
/*
Returns Boolean, true = device is a tablet
*/
var diag = diagonalInches|8;
var osname = Ti.Platform.osname;
switch(osname) {
case 'ipad':
return true;
case 'android':
var dpi = Ti.Platform.displayCaps.dpi;
var w = Ti.Platform.displayCaps.platformWidth / dpi;
var h = Ti.Platform.displayCaps.platformHeight / dpi;
return (Math.sqrt(w*w+h*h) >= diag) ? true : false;
default:
return false;
}
};
exports.osname = function(diagonalInches) {
/*
Custom osname function, returns string that includes 'androidtablet'
descriptor that you could use for branching on an Android device
*/
var diag = diagonalInches|8;
var osname = Ti.Platform.osname;
switch(osname) {
case 'ipad':
case 'iphone':
case 'ipod':
return osname;
case 'android':
var dpi = Ti.Platform.displayCaps.dpi;
var w = Ti.Platform.displayCaps.platformWidth / dpi;
var h = Ti.Platform.displayCaps.platformHeight / dpi;
return (Math.sqrt(w*w+h*h) >= diag) ? 'androidtablet' : 'android';
default:
return osname;
}
};
exports.screensize = function() {
/*
Returns the DIAGONAL screen size in inches
*/
var dpi = Ti.Platform.displayCaps.dpi;
var w = Ti.Platform.displayCaps.platformWidth / dpi;
var h = Ti.Platform.displayCaps.platformHeight / dpi;
return Math.sqrt(w*w+h*h);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment