I am trying to add an overlay for android camera using Titanium SDK. Everything is fine. But, zoom is not working. Is there a way to implement that in titanium?
I am using the latest Titanium SDK 3.2.1GA
Here's my code:
// Containing window
var win = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : "#ffffff",
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
// Blue button that opens the camera
var open_camera = Ti.UI.createButton({
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
bottom : 50,
title : 'Camera'
});
// Adding the "open camera" button
win.add(open_camera);
// Function to show the camera
function openCamera() {
alert('opening');
open_camera.backgroundColor = "#00ff00";
// Just checking if we got here
// The camera overlay I want displayed over the camera
var camera_overlay = Ti.UI.createView({
top : 0,
left : 0,
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
var take_picture = Ti.UI.createButton({
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
bottom : 50,
title : 'Take Picture'
});
take_picture.addEventListener('click', function() {
Ti.Media.takePicture();
});
camera_overlay.add(take_picture);
// The actual show camera part
Ti.Media.showCamera({
success : function(e) {
alert('success');
// I want this!
},
cancel : function(e) {
},
error : function(error) {
},
autohide : false,
showControls : false,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO],
overlay : camera_overlay // The camera overlay being added to camera view
});
};
// Click event to show the camera
open_camera.addEventListener("click", function(e) {
openCamera();
});
// Open the window
win.open();
Related
Im having trouble just playing a simple sound as the function is undefined. The sound files are in the right spot so I dont know what's going wrong. I am a beginner with this so help is much appreciated.
//Level 1 Page
var win = Titanium.UI.currentWindow;
var tab = Titanium.UI.currentTab;
var leveloneview = Ti.UI.createView({
width : '100%',
height : '100%',
backgroundColor : 'blue',
});
var tile1 = Ti.UI.createImageView({
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var tile2 = Ti.UI.createImageView({
left : '50',
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var tile3 = Ti.UI.createImageView({
right : '50',
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var sound = Titanium.Media.createSound({
url : 'sounds/wheres_me_rum.mp3',
preload : true
});
var button = Ti.UI.createButton({
title : 'Click to play sound',
width : '200',
height : '40',
top : 20,
align:'center',
});
button.addEventListener('click', function(e) {
sound.play();
});
leveloneview.add(tile1);
leveloneview.add(tile2);
leveloneview.add(tile3);
leveloneview.add(button);
win.add(leveloneview);
Uncaught TypeError: undefined is not a function at /index.html (line 6080)
Ti.Media.Sound is not supported on mobile web. See http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Media.Sound for supported platforms.
I am having this unexpected issue in my current project in TITANIUM.
I am using a webview for showing a local html file. It works perfect in iOS and in some android device as well. But in most of the HD android devices the html page or the contents of webview breaks while scrolling. Here is my code
var htmlTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras', 'learnMore.html');
var cssTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras', 'learnMore.css');![enter image description here][1]
var html = htmlTemplate.read().text;
var css = cssTemplate.read().text;
html = html.replace("#css#", css);
//Animations Transformations
var small = Ti.UI.create2DMatrix({
scale : 0.05
});
var big = Ti.UI.create2DMatrix({
scale : 1.2
});
var normal = Ti.UI.create2DMatrix({
scale : 1
});
//Animation Durations
var smallDuration = 350;
var bigDuration = 350;
var normalDuration = 250;
var win = Ti.UI.createWindow({
backgroundColor : 'transparent',
//navBarHidden : true,
});
var windowView = Ti.UI.createView({
top : OS_IOS ? 20 : 1,
right : 1,
bottom : OS_IOS ? 10 : 1,
left : 1,
backgroundColor : '#fff',
borderRadius : 7,
});
var closeImage = Ti.UI.createImageView({
zIndex : 1,
top : 5,
right : 1,
width : 35,
height : 35,
image : "/images/icons/black_cross_icon.png"
});
closeImage.addEventListener('click', closeWindow);
var webView = Ti.UI.createWebView({
width : '100%',
height : Ti.UI.SIZE,
backgroundColor : "transparent",
top : 0,
html : html,
//overScrollMode : Titanium.UI.Android.OVER_SCROLL_NEVER,
});
windowView.add(webView);
win.add(windowView);
win.add(closeImage);
function closeWindow() {
if (OS_ANDROID) {
win.close();
return;
}
win.animate({
duration : 300,
transform : big
}, function() {
win.animate({
duration : smallDuration,
transform : small
}, function() {
win.close();
webView = null;
});
});
}
(function() {
win.open();
if (OS_ANDROID) {
return;
}
win.transform = small;
win.animate({
duration : bigDuration,
transform : big
}, function() {
win.animate({
duration : normalDuration,
transform : normal
});
});
})();
win.addEventListener('open', function(e) {
Ti.API.error('********************* Learnmore OPEN ***********************');
if (OS_ANDROID) {
win.activity.actionBar.hide();
}
});
https://www.dropbox.com/s/ade8wssi5ima3gr/10671472_702509996463626_2272456868867723707_n.jpg?dl=0
Ok now i know this is not an ideal solution but if you are a titanium developer you have to deal with this kind situations in daily basis especially for our enemy-friend Android.
So as a work around what i have done is reloaded the html of webview second time after the webview is being loaded for first time.
var toggle = false;
webView.addEventListener('load', function(e) {
if (toggle == false && OS_ANDROID) {
this.html = html;
toggle = true;
}
});
this is beacuse in my html file i have set
<meta name="viewport" content="width=device-width, initial-scale=0.9,user-scalable = no" />
But unfortunately it was not taken effect some time and thus while scrolling it shows some buggy UI.After the work around it seems the meta tag works.
Hope it helps some one who came across something like this.
Im a Titanium Beginner who is trying to create a form page with 2 textfields of Name and address and a DateTimePicker. I am facing 2 problems right now being :
1) the DateTimePicker is successfully shown but i would like both of it and also including the 2 textfields to be on the same window, with a same submit button.
2) I have tried numerous times but am unable to create a simple textfield at all even just creating it on a single page.It just doesnt show up.
Anyone could offer some constructive help?
Thanks in advance. The Below is my current code.
var winTimePicker = Titanium.UI.createWindow({});
winTimePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winTimePicker.hide();
});
winTimePicker.add(doneBtn);
var timePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_TIME,
bottom:0,
});
// turn on the selection indicator (off by default)
timePicker.selectionIndicator = true;
timePicker.addEventListener('change', function(e) {
//your code
});
winTimePicker.add(timePicker);
//open window
winTimePicker.open();
var winDatePicker = Titanium.UI.createWindow({});
winDatePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winDatePicker.hide();
});
winDatePicker.add(doneBtn);
var datePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_DATE,
bottom:0,
});
// turn on the selection indicator (off by default)
datePicker.selectionIndicator = true;
datePicker.addEventListener('change', function(e) {
//your code
});
winDatePicker.add(datePicker);
//open window
winDatePicker.open();
var textField = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
var textField2 = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
Check this code out and make changes as you find suitable to it:
var timePickerWin = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : '#fff'
});
var startTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp',
// width:'auto'
});
var endTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp'
});
var nextButton = Ti.UI.createButton({
width : '220dp',
height : '45dp',
top : '15dp',
title : 'Next',
backgroundColor : '#294079',
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
color : '#fff'
});
startTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
startPickerValue = e.value;
});
endTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
endPickerValue = e.value
});
var fullNameTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter full name'
// backGroundColor:'gray',
});
var emailTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter email'
});
Finally add all these UI elements to the window which is the timePickerWin using add function
timePickerWin.add(startTime);
and so on for all the UI elements.After that open the timePickerWin as below
timePickerWin.open()
Make suitable layout changes by varying the left,right,height and width properties of each element.
I want to navigate window one by one 4 time and lastly i want to come 1 window then how i come first window.
How i come 4th navigation window to first window
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
var tab1 = Titanium.UI.createTab({
title : 'Menu',
window : win1,
});
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
win1.add(btn);
btn.addEventListener('click',function(){
var win2 = Titanium.UI.createWindow({
url : "win2.js"
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
Ti.UI.currentTab.open(win2);
});
tabGroup.addTab(tab1);
tabGroup.open()
win2.js
var curwin = Ti.UI.currentWindow;
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
curwin.add(btn);
btn.addEventListener('click',function(){
var win3 = Titanium.UI.createWindow({
url : "win3.js"
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
Ti.UI.currentTab.open(win3);
});
win3.js
var curwin = Ti.UI.currentWindow;
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
curwin.add(btn);
btn.addEventListener('click',function(){
var win4 = Titanium.UI.createWindow({
url : "win4.js"
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
Ti.UI.currentTab.open(win4);
});
win4.js
var curwin = Ti.UI.currentWindow;
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
curwin.add(btn);
btn.addEventListener('click',function(){
// Here I want to back First Window how i can perform this iphone or android both
});
How I can perform this?
In Forging Titanium Episode 2 they developed a cross-platform navigation controller where to back to first window they stored each window they open in an array, then they loop through the array and close all windows stored in it. Below a piece of code from them of this idea.
//go back to the initial window of the NavigationController
exports.NavigationController.prototype.home = function() {
//store a copy of all the current windows on the stack
var windows = this.windowStack.concat([]);
for(var i = 1, l = windows.length; i < l; i++) {
(this.navGroup) ? this.navGroup.close(windows[i]) : windows[i].close();
}
this.windowStack = [this.windowStack[0]]; //reset stack
};
How do I dock a footer menu to the bottom of the screen on Android and iPhone in Appcelerator Titanium? I want to display 3 icons on the bottom of the screen.
I used Titanium.UI.View and set bottom: 0 to get it to dock to the bottom.
Yes, we use Ti.UI.Toolbar for this. Let see this example code:
var space = Titanium.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var buttonNextEnd = Titanium.UI.createButton({
title: '>>'
});
var buttonNext1Page = Titanium.UI.createButton({
title: '>'
});
var buttonPrevEnd = Titanium.UI.createButton({
title: '<<'
});
var buttonPrev1Page = Titanium.UI.createButton({
title: '<'
});
var toolbarNav = Titanium.UI.createToolbar({
left : 0,
bottom: 0,
height : 40,
width : 320,
items: [buttonPrevEnd,space, buttonPrev1Page,space, buttonNext1Page, space,buttonNextEnd]
});
win.add(toolbarNav);
Use Titanium.UI.ToolBar for that.
If you are using Appcelerator Alloy Framework
The code in the XML view
<Alloy>
<Window title="My Nice Title">
... ... ...
... ... ...
<View class="footer-menu"></View>
</Window>
</Alloy>
The code in TSS
".footer-menu": {
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
}
This will push the view to bottom. Here is a screenshot.
Not using Alloy? It is similar in JS too.
// create window
var win = Ti.UI.createWindow({
// if anything
});
// create view
var footer_menu = Ti.UI.createView({
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
});
// add view to window
win.add(footer_menu);
Hope this is helpful. Thanks!
var footer = Ti.UI.createView({
height:25
});
var footerButton = Ti.UI.createLabel({
title:'Add Row',
color:'#191',
left:125,
width:'auto',
height:'auto'
});
footer.add(footerButton);
it works on android, but i still dont know why the button cant appear on iphone
Remember that Toolbars aren't compatible for Android or Tablet.
If you want to set buttons to the bottom of the screen, create a View, set it at the bottom and then distribute the buttons with relative position, considering the screen width.
Here's an example:
function FirstWindow() {
var self = Ti.UI.createWindow({
background : "black",
height : "auto",
width : "auto",
layout : "vertical"
});
teste = Ti.UI.createView({
left : 0,
bottom : 0,
opacity : .7,
backgroundColor : "#3d3d3d",
height : 55
});
var button1 = Ti.UI.createButton({
title : "button 1",
left : 0,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button2 = Ti.UI.createButton({
title : "button 2",
left : Titanium.Platform.displayCaps.platformWidth * 0.33,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button3 = Ti.UI.createButton({
title : "button 3",
left : Titanium.Platform.displayCaps.platformWidth * 0.66,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
view.add(button1);
view.add(button2);
view.add(button3);
self.add(view);
return self;
}
module.exports = FirstWindow;
Doing this... you are positioning the buttons in the View.
The first button ( button1 ) begins in "left: 0" and has a width of 30% of the View.
The second button ( button2 ) begins after the first button plus a space, and so on...
And the height of them is the same as the view's.