I have an image which I am displaying with the help of image view using Sencha Architect 2. I am able to get a tap event on the image. But I don't know how to save the image to phone when the image is tapped.
I did a Google search for this but could not find the proper documentation or example.
Can anyone help me please.
Here is the code I am trying
tap: function(img, e, options) {
var overlay = Ext.Viewport.add({
xtype: 'panel',
modal : true,
hideOnMaskTap : true,
hidden : true,
width : 100,
height: 40,
items :
[
{
xtype:'button',
text:'Download'
}
],
});
overlay.showBy(img);
}
When I click on Download button the image should get saved to SD card (phone memory) or local hard drive.
can some one help me ?
Thanks.
To get the image name:
I am guessing that you are adding the image with the xtype img?
If so image src is img.src
Otherwise you will need to add the following command to see what the object contains.
console.dir(img);
Save the image:
You will be able to save the image to localstorage if the source is base64.
JavaScript will not write to SD Card or alike.
Other than that you can cache the image.
If you are using PhoneGap this will be possible.
Related
My app has a bunch of images stored as blobs in the local SQLite Database. These images are taken with the device camera. I'm using Titanium Alloy, so the image was saved using the .save() method an Alloy Model.
I've started using the TiSocial module that can post an image to Twitter or Facebook. One its parameters is image and it has to be:
a local/remote path to an image you want to share
The image I want to use is set as the image property on an ImageView. The ImageView image is set like this: $.theImageView.image = args.the_image;, where args.image is the image blob, taken from the database collection.
I tried to take this image blob and set it as the image on the TiSocial module initialisation method:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: args.the_image,
removeIcons:"airdrop,print,copy,contact,camera"
});
Alternatively I tried to take use the image saved on the ImageView, like this:
Social.activityView({
text: "Hello world! Take a look at this: " + args.name,
image: $.theImageView.image,
removeIcons:"airdrop,print,copy,contact,camera"
});
However neither of these worked, and no image appears in the Tweet or Facebook message dialogs. And no error appears in the console.
On the other hand, if I set the image property to an image saved in the assets folder, then it works just fine. For example:
`image: "an_image.jpg"`
I tried a solution mentioned in the comments below, which was to save the image to Ti.FileSystem, and then read the image from there. However, this still did not work.
You could try sharing remote images this way...
var largeImg = Ti.UI.createImageView({
width : Ti.UI.SIZE,
height : 'auto',
image :'http://www.google.com/doodle4google/images/splashes/featured.png'
});
var imageGoogle =largeImg.toBlob();
// share image
Social.activityView({
status : "Hello world! Take a look at this: ",
image : imageGoogle,
removeIcons:"airdrop,print,copy,contact,camera"
});
then i would suggest to add one field called img_path in your database table because you can not get path from blob so when you store any blob to alloy model then also add its path to that model so you can retrieve it later and can share.
Hope you understand.
I had some luck by saving the file to the Ti.Filesystem, and then later retrieving it and using the .getNativePath() method:
function getImage() {
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, args.alloy_id + '.jpg');
return f.read();
}
var theImage = getImage();
Social.activityView({
text: "Just tried this beer called " + args.name,
image: theImage.getNativePath(),
removeIcons:"airdrop,print,copy,contact,camera"
});
i want to show the thumbnail of the previous image taken by camera instead of the cancel button while camera is running ...
Is that possible ?? Need help ..
Yep. Just capture the last image, keep it in memory (or save it to disk), then use it as one of the controls. We can do this using the overlay property of the Titanium.Media.showCamera function. Here is a quick example:
First we need an overlay view to show the image.
var overlayView = Ti.UI.createView();
var imageView = Ti.UI.createImageView({
width:44,
height:44,
left : 5
});
overlayView.add(imageView);
Now this is the function we use to open the camera with the overlay view. Note that we don't have controls so you need to add those (for closing etc). All we do right now is set the overlays image.
Titanium.Media.showCamera({
success:function(event) {
// called when media returned from the camera
imageView.image = event.media;
},
cancel:function() {},
error:function(error) {},
saveToPhotoGallery:true,
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
overlay : overlayView,
showControls: false // This is important!
});
To really make this work, you may need to save the event.media in a global variable, or use a similiar technique make sure overlayView will not be nulled out / garbage collected.
Also this is a barebones solution, not very robust, but this is the basic method I would use!
-App uses Sencha touch 2.0 carousel
-Images in the carousel are displayed full screen (minus the navigation bar at the top of the screen)
-App is targetted for iPad2, iPad2 Retina display, Android xhdpi (tablets)
Goal: To display full screen images in the carousel in all target devices
Question: What should be the resolution of the image?
I have tried 1028x768 image in the carousel. Displays fine (full screen) on iPad2 retina but on Samsung galaxy Tab 10 I see vertical bars on the sides. I understand the resolution is lower than retina but I figured that it would automatically scale down to the resolution of the target device and display the image full screen but apparently it isnt doing so.
Has this been achieved, if so please share.
Appreciate it.
Thanks.
Got it!
The resolution of the image doesnt really matter! True.
What is important is making sure the image tag displays the complete image by automatically resizing the image.
Here is how:
-Define a DIV tag with a specfied height (window.innerHeight) and width (window.innerWidth).
-Place the img tag as a child element of the DIV tag with height=100% and width=100%
Irrespective of the resolution of the image, resolution of the device, screen size of the device the image will be always be automitcally resized and displayed in full size.
The complete code to make the carousel work is here:
Carousel code
{
xtype: 'panel'
layout: 'fit',
flex: Ext.os.is.Phone ? 5 : 6,
items: [
{
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
id: 'ImgId',
flex: Ext.os.is.Phone ? 5 : 6,
config: {
fullscreen: true
}
}
]
}
Carousel item code
Ext.each(images, function (picture) {
var img = picture.url;
var bigImg = picture.bigUrl;
itemsoverlay.push({
xtype: 'label',
html: '<div style="width:'
+ window.innerWidth
+ 'px;height:' + 'px;"><img src='
+ imgURL
+ ' style="width: 100%;height: 100%;" /></div>'
});
});
This code works for tablets and smartphones, iOS or Android.
HTH
I would like to use an actionsheet but am unclear where to place it. I have tried adding it to a button event function but it doesn't show (the modal screen does however). I get a message about ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport. Not sure how to do that - using Ext.Viewport.add() doesn't work for me - i may be because of my layout which is:
I have a viewport controller/view which is a card layout. When I click a button I have a function in the viewport controller that loads a new controller/view card in the viewport. The actionsheet is in one of these cards. The app is to big to post so hopefully it makes sense.
I have tried adding the actionsheet in my view items array but do not know how to make it show - making a reference to the xtype actionsheet doesn't return an object with a show() method it seems.
Edit: after more experiments it seems the issue is that I am placing it inside of a card - the card layout container has a relative position and the actionsheet absolute - somehow this is causing the actionsheet to go off screen. Setting card container to absolute fixes it but now I have problems with navbar positions. Suggestions?
So a bit stuck...
This is what you need to do to show your action sheet :
var actionSheet = Ext.create('Ext.ActionSheet', {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
});
Ext.Viewport.add(actionSheet);
actionSheet.show();
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.