-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
Related
i'm using CameraRoll.getPhotos for get photos from gallery.
import {
CameraRoll,
} from 'react-native';
CameraRoll.getPhotos(fetchParams).then((data) => {
});
I have a problem with the orientation of the images on some android phones. I have been able to detect what happens in most SAMSUNGs.
It has an orientation depending on the way you take the picture.
portrait with home button in bottom position: 90º
landscape with home button left position: 180º
portrait with home button in top position: 270º
landscape with home button right position: 0º
Related with this issue
Base on CameraRoll Documentation the orientation value is not returned by getPhotos.
I'm try with:
transform: [{ rotateX: '0deg' }, { rotateY: '0deg' }] or rotate: '0deg'
Using react-native-media-meta for get metadata info (not works)
Use another image component instead native Image
but notting works. :(
The problem is that the images appear rotated in my application, but in the native gallery ignores the degree of rotation they have and shows them correctly with 0º.
Example:
In this case the image appear with 90º and it's showed perfectly by native gallery but bad in my app.
- Is there any way to detect the current rotation of the image?
- Can the <Image> component be forced in some way to place the orientation at 0º?
UPDATE:
i found a library this module and its possible get the orientation of image and with that can fix this problem. But this process is very delayed and affect considerably the perfomance.
I have a question about Swiper and how to display a loading animation in a responsive environment.
It's Swiper Version: 3.4.2.
What I did
Hi, I have set the .swiper-container to
{ width: 100%; height: auto; }
because the site is responsive.
Otherwhise I use the standard swiper.min.css and swiper.min.js with these settings:
autoheight: true,
grabCursor: true,
slidesPerView: 1,
autoHeight: true,
keyboardControl: true,
paginationType: 'fraction',
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
Expected Behavior
I would like to have the container set to the height of the first image and have a loading animation displayed in the middle of the container until the images are loaded.
Actual Behavior
The swiper-container is only the height of the arrows. Then next thing you see is the cropped first image (the size of the container which is the size of the arrows), and only after that, the container is set to the size of the first image.
I would really appreciate some help.
Thanks
Stefan
Have you tried Lazy Loading?
The slideshow(/browser) will be unable to determine your slides height until the images have loaded, so you may have to manually determine the height of the image on the first slide and initialize the container with that.
See the Images Lazy Loading demo.
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.
I am working on a mobile application and using sencha touch charts. By default horizontal bar chart is fitting exactly into screen. If there are more number of bars,then bars are appearing very thin and looking odd. I want to fix bar width to have uniform look and feel irrespective of number of bars being displayed. No matter even user need to scroll down to see entire chart. I have tried below option in series configuration, but it did not work.
style : {
size : 30
}
Please help me.
Thanks,
Nag.
am able to change the bar width by setting barWidth option in touchcharts-debug.js by refering to the following link
http://docs.sencha.com/touch-charts/1-0/source/Bar.html
but the axis labels are not rendering properly labels are fitting into screen
I tried this code in my interactions to render the labels, it's working fine
{
type: 'panzoom',
showOverflowArrows: false,
//axes: ['bottom'],
axes: {
bottom: false,
left: {
startZoom: 2
}
}
}
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.