I have an image view and try to load remote image but it's can not show up.
I'm already search and try any suggestion on this forum but not work. I'm using SDK 3.2.2 on Mac OS X Maverick
My code is like here, and it's running good on iOS.
var iconImage = Ti.UI.createImageView({
width:40,
height:40,
left:5,
hires:true,
defaultImage:'/images/default.jpg',
image:urltoimage
});
sample image
this is a bug or something wrong with my code?any suggestion how to do remote image? Please help..
Use this
exports.LoadRemoteImage = function (obj,url) {
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function()
{
Ti.API.info('image data='+this.responseData);
obj.image=this.responseData;
};
// open the client
xhr.open('GET',url);
// send the data
xhr.send();
};
save on new file and named "ImageLoader.js"
I'm forget where I found that code, but I'm used that to handle any image from internet.
usage:
var ImageLoader = require('ImageLoader');
var imageView = Ti.UI.createImageView({
width:100,
height:100
})
ImageLoader.LoadRemoteImage(imageView,"http://i1314.photobucket.com/albums/t567/vademahendra/sightseeing_zpsd91fa049.png?t=1401680320");
I hope this can help you
I've run application with this code:
var urltoimage = 'http://i1314.photobucket.com/albums/t567/vademahendra/sightseeing_zpsd91fa049.png?t=1401680320';
var win = Ti.UI.createWindow();
var iconImage = Ti.UI.createImageView({
width: 40,
height: 40,
left: 5,
hires: true,
defaultImage: '/images/default.jpg',
image: urltoimage
});
win.add(iconImage);
win.open();
All worked properly, so the issue has to be on your device or simulator.
Check network connection and if airplane mode is enabled.
Does it show up on the device and just not on the emulator, or does it not show up at all?
Sometimes Android can be temperamental about remote images. CDNs usually work really well which is probably why daniula's code worked. Things to try are:
Change the pixel dimensions of your remote image to be smaller - test
Change the image file size of course using different compressions - test
Try different file types
Try using the same image url daniula used to see narrow it down to the image or the code: if the images shows up, then it's a problem with the serving of the images; if the image does not show, it may be an issue with your code.
Related
I have a project that simply displays a website. My code is:
function pencere() {
var self = Ti.UI.createView({ width:"100%", height:"100%" });
var webPencere = Ti.UI.createWebView({ left:1, right:1, top:1, bottom:1, url:"http://www.radyobasaksehir.com" });
self.add(webPencere);
return self;
}
My friend told me that the Android browser doesn't support the new CSS and HTML codes. I don't know the exact meaning of these but I think I need to revise my code but I couldn't figure that out.
The problem is related to chromium WebView being used Android 4.4.
There is developed a module for solving this. But, I found advice here in another topic
Just add borderRadius property with a minimum value. Sample code:
var webview = Ti.UI.createWebView({url: '..', borderRadius: 1});
I'm working on Titanium 2.1.3 and deploying for both iOS and Android.
I'm having trouble displaying images on ImageView on Android in a TableView, if I do something like clicking on the search bar and show the keyboard then the images are shown or if I scroll the TableView the images appear and disappear with no apparent reason. It seems that unless I do something that forces a layout refresh on the TableView, the images aren't rendered.
The images are being loaded the same way in both Android and iOS, which is like this:
var itemIconHolder = Titanium.UI.createView({
width : '100dp',
left : '55dp',
height : "100%"
});
var itemIcon = Titanium.UI.createImageView({
left : '0dp',
height : '100%',
});
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "thumb-" + filename);
itemIcon.image = f;
itemIconHolder.add(itemIcon);
This problem doesn't happen in iOS, on iOS devices/simulator the behaviour is normal and flawless, but on Android devices/emulator it happens.
Do I have to load the images differently in Android? Am I missing something? I hope someone could help me in this one.
Thanks in advance.
EDIT
I tried these approaches:
itemIcon.image = f.read();
and
itemIcon.image = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "thumb-" + filename);
but the images still aren't rendered until I make something that causes the TableView to refresh in some way.
I found a workaround for this particular issue on Android.
Since it takes a layout refresh for the images to be rendered properly, what I did was to animate the table, moving it 1dp in a direction and at the completition of said animation I animated it again to return it to its original position. This is the code I used:
var table_bottom = '-1dp'
var tableAnimation = Ti.UI.createAnimation({
bottom : table_bottom,
duration : 100
});
tableAnimation.addEventListener('complete', function(e){
var table_bottom = '50dp';
if (osname === 'android')
{
table_bottom = '0dp'
}
table.animate({
bottom : table_bottom,
duration : 100
});
});
I've encountered this kind of problem with both Titanium SDK 2.1.3 and Titanium 3.0.
So following the concept here:
http://docs.appcelerator.com/titanium/2.1/index.html#!/guide/Using_density-specific_resources_on_Android
i created a folder that was
Resources/android/images/
and then under that is:
high/
medium/
low/
and within each of those are the different-density files (like about.png, say)
The problem is that when i reference them:
var aboutTab = Ti.UI.createTab({
icon: '/images/about.png',
title: 'about',
window: about
});
OR as others have suggested like so (that is, losing the leading slash on 'images'):
var aboutTab = Ti.UI.createTab({
icon: 'images/about.png',
title: 'about',
window: about
});
and then load up the app, sure the tabs themselves are there... but the icons are not. Note that if i have a plain old file present at:
Resources/images/about.png
then the icon will appear... but not otherwise. Is there... is there something i'm missing on this?
Plz read and understand with cool mind this is working with me "More control" Paragraph.
var aboutTab = Ti.UI.createTab({
icon: 'images/about.png', // "/" remove this and try again
title: 'about',
window: about
});
plz, remove you old application from your Device or Emulator. after this Clean then build i think then this is work properly.
Ok, so the standard answer never ended up working for me. I'm using Titanium 2.1 here. {insert insult about Ti developer heritage here}
The solution to this is simple - don't use the much vaunted "smart titanium density specific solution" as discussed here:
http://docs.appcelerator.com/titanium/2.1/index.html#!/guide/Using_density-specific_resources_on_Android
Instead, use this simple, homely code to fix your problems!
var density = (Titanium.Platform.displayCaps.dpi <= 160) ? 'low' : (Titanium.Platform.displayCaps.dpi > 160 && Titanium.Platform.displayCaps.dpi < 240) ? 'medium' : 'high';
var preamble = (Ti.Platform.osname === 'iphone' || (Ti.Platform.osname === 'ipad') )? 'images':'android/images/'+density + '/';
Ok, so the first bit sets the density - NOTE i do not know the proper density readings for Ti just now, i'm just putting this up until i work them out anyhoo - and the second bit uses it if the app is an android one.
Then, where i used to have:
var aboutTab = Ti.UI.createTab({
icon: 'images/about.png',
title: 'about',
window: about
});
i now have:
var aboutTab = Ti.UI.createTab({
icon: preamble + '/about.png',
title: 'about',
window: about
});
And that is that!
FINAL WORD:
i've noticed that this can behave very differently depending on the Titanium version used (2.1.3 vs 2.1.0) or the android sdk used. I've had best results with 2.1.0 and 4.2 android, and that includes using the 'images' prefix (you know, how the guides say to do it).
One thing i noticed was that I cannot have both the high/medium/low folders AND the hdpi folders, i need one or the other.
Another problem i faced was that sometimes the code wouldn't load the android/images/ folders across. The completely bullet-proof way to do this is to use the code i've described, but put the density-specific folders directly under your images folder, and refer to them via images/high/ etc. Content in images is always copied across, and the code shown always works, regardless of Ti version.
Final note, make sure that your images are case-sensitively named, because it will work in the windows emulator but not in actual (unix-based) device.
I am developing android application, In my application I want to take photo from camera and set as image in image view. my code looks like
var img_view = Titanium.UI.createImageView({
image: '/images/default.png',
height: '100%',
width: '100%',
}); win.add(img_view);
photo_camera_view = Ti.UI.createView(
{
height: '20dp',
backgroundColor:'#fff'
}); win.add(photo_camera_view);
photo_camera_view.addEventListener('click', function(e)
{
Titanium.Media.showCamera(
{
success:function(event)
{
img_view.image = event.media;
},
cancel:function()
{
},
error:function(error)
{
// create alert
},
});
});
my need is take a pic from camera and set image: 'photo from camera' in img_view. In Android, when I execute Ti.Media.showCamera, after successfully taking a picture and hitting "OK" in the app, the application will restart. I am using titanium sdk 2.0.1 and testing it on android device with android version 2.2. Need Help ..... Thank you........
You need to set the image in the success event like below.
img_view.setImage(event.media);
You just cannot assign the image to the property. The image view has to be redrawn with new image. And try it in Android 4.0 emulator as the below versions had issues with camera.
I have an application that has 5 windows, and when clicking on the tabs above them passes the window the URL of the RSS to load. It's maddening, and it's about to make me jump ship from Appcelerator to PhoneGap.
This is a last ditch effort before jumping ship..........please tell me I'm doing something silly. It works fine if a bit sluggish on the emulator, but on my Dell Streak 5 it's maddeningly inconsistent. Sometimes the XML renders (it always returns with a 4 readystate), somethings it just hangs with the activity indicator spinning. If I rebuild without the activity indicator many times just nothing appears in the windows. No errors to speak of that I can see.
HEre is the offending code. Please tell me I'm doing something horribly wrong to make me happy.
data = [];
//load RSS Feed
Ti.API.info('>>>> loading RSS feed '+url);
//Show Loading Animation
navActInd.show();
var xhr = Ti.Network.createHTTPClient();
xhr.timeout = 10000;
xhr.open('GET', url);
xhr.onload = function()
{
var xml1 = xhr.responseXML;
var items = xml1.documentElement.getElementsByTagName("item");
//Loop Through XML and Build Rows
for (var i = 0; i < items.length; i++) {
this_post_title = items.item(i).getElementsByTagName("title").item(0).text;
this_post_merchant = items.item(i).getElementsByTagName("category").item(0).text;
post_cid = items.item(i).getElementsByTagName("source").item(0).text;
var row = Ti.UI.createTableViewRow();
var post_title = Ti.UI.createLabel({text: this_post_title});
row.add(post_title);
row.thisSource = post_cid;
row.thisMerchant = this_post_merchant;
data.push(row);
}
navActInd.hide();
var tv = Titanium.UI.createTableView({
data: data,
top: 0,
width: 'auto',
height: 'auto'
});
//Add Table to Window
window.add(tv);
navActInd.hide();
first, you shouldn't hide the navActInd twice. you also should add an onerror function to print the status code.
without taking a look at your xml file it's hard to form an opinion.
i understand your frustration about titanium. there are a lot frustration things about it since it's quite complicated to build such a framework. i build a really comprehensive app with titanium and have had a lot of such moments but nether the less i found a solution for all problems;)
I have seen similar issues when the xml is not what I have expected, you should put a try catch block around your xmlparsing block and see if an error is thrown
you should add an onError handler to you code.
from a complexity perspective, you do not need a label to set the title of the row; these lines can be edited
var row = Ti.UI.createTableViewRow();
var post_title = Ti.UI.createLabel({text: this_post_title});
row.add(post_title);
with this line, also use rowClassName whenever possible
var row = Ti.UI.createTableViewRow({title: this_post_title, className:'#row'});
row.add(post_title);
I would also suggest you take a look at the kitchen Sink demo for a complete example. https://github.com/appcelerator/KitchenSink/tree/master/KitchenSink