feat: add "scalingMode" property to Ti.UI.ImageView #12753

jquick-axway · 2021-04-28T05:59:53Z

JIRA:

Summary:

TIMOB-24313 Added new "scalingMode" property to Ti.UI.ImageView.
- Allows you to crop or letterbox/pillarbox scale the image.
- Correctly handles JPEG EXIF orientation/mirroring.
Added new constants:
- Ti.Media.IMAGE_SCALING_AUTO // Legacy behavior
- Ti.Media.IMAGE_SCALING_NONE // No scaling
- Ti.Media.IMAGE_SCALING_FILL // Stretches disproportionally
- Ti.Media.IMAGE_SCALING_ASPECT_FILL // Crops proportionally
- Ti.Media.IMAGE_SCALING_ASPECT_FIT // Letterbox/Pillarbox scales proportionally
TIMOB-28432 On Android, changed "autorotate" property to default to true like iOS.
On Android, updated ImageView to correctly handle EXIF mirroring if "autorotate" property is true.

Image Scaling Test:

Build and run ImageScalingChangeTest.js attached to TIMOB-24313 on Android.
Tap on "Scale" button in top toolbar and select "Fill".
Tap on "Resize" button in top toolbar and select "Ti.UI.FILL".
Rotate portrait/landscape and verify image stretches to fill the window.
Tap on "Resize" button in top toolbar and select "Ti.UI.SIZE".
Rotate portrait/landscape and verify image appears letterboxed/pillarboxed. (Not stretched.)
Tap on "Resize" button in top toolbar and select "240x240".
Verify image is stretched within a square view. Appears same in portrait/landscape.
Tap on "Scale" button in top toolbar and select "Aspect Fill". (Enables crop scaling.)
Verify image is cropped within a square view and only top/bottom of image is clipped.
Tap on "Resize" button in top toolbar and select "Ti.UI.FILL".
Verify image is cropped. It's clipped on left/right in portrait and clipped top/bottom in landscape.
Tap on "Scale" button in top toolbar and select "Aspect Fit". (Enables letterbox/pillarbox scaling.)
Verify image is letterboxed in portrait and pillarboxed in landscape.
Tap on "Resize" button in top toolbar and select "240x240".
Verify image is scaled down and not clipped. (It's actually pillarboxed.)
Tap on "Scale" button in top toolbar and select "None". (Disables scaling.)
Verify image is clipped on all sides within the 240x240 sized view, because image is bigger than view.
Repeat steps 2-18 on iOS.

Android EXIF Test:

Build and run ImageExifTest.js attached to TIMOB-28432 on Android.
Make sure the device has Internet access. (It will download images.)
Tap on each row in list and make sure an image is displayed "upright" and is not "mirrored".
Uncomment the autorotate: false line in the JS file. (This will ignored EXIF orientation.)
Tap on each row and verify images are either rotated or mirrored. (This is good.)

Fixes TIMOB-24313

build · 2021-04-28T06:08:24Z

	Messages
📖	✊ The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready.
📖	✅ All tests are passing Nice one! All 14588 tests are passing. (There are 938 skipped tests not included in that total)
📖	💾 Here's the generated SDK zipfile.

Generated by 🚫 dangerJS against e719131

hansemannn · 2021-04-28T08:53:13Z

This is huge. Basically makes the 3rd-party dependency to av.imageview obsolete (although the caching was better there a while ago - not sure if that changed in Titanium)

garymathews

CR: PASS

TEST CASE

const window = Ti.UI.createWindow({
	layout: 'vertical',
	backgroundColor: 'white'
});
const picker = Ti.UI.createPicker({ top: 10 });
const image = Ti.UI.createImageView({
	top: 10,
	image: 'https://garymathews.com/droid.gif',
	width: 256,
	height: 144,
	borderWidth: 1,
	borderColor: 'gray',
	autorotate: true
});
const gallery_button = Ti.UI.createButton({ title: 'Select Photo' });

picker.add(Ti.UI.createPickerRow({ title: 'IMAGE_SCALING_AUTO' }));
picker.add(Ti.UI.createPickerRow({ title: 'IMAGE_SCALING_NONE' }));
picker.add(Ti.UI.createPickerRow({ title: 'IMAGE_SCALING_FILL' }));
picker.add(Ti.UI.createPickerRow({ title: 'IMAGE_SCALING_ASPECT_FILL' }));
picker.add(Ti.UI.createPickerRow({ title: 'IMAGE_SCALING_ASPECT_FIT' }));

picker.addEventListener('change', e => {
	switch (e.rowIndex) {
		case 0:
			image.scalingMode = Ti.Media.IMAGE_SCALING_AUTO;
			break;
		case 1:
			image.scalingMode = Ti.Media.IMAGE_SCALING_NONE;
			break;
		case 2:
			image.scalingMode = Ti.Media.IMAGE_SCALING_FILL;
			break;
		case 3:
			image.scalingMode = Ti.Media.IMAGE_SCALING_ASPECT_FILL;
			break;
		case 4:
			image.scalingMode = Ti.Media.IMAGE_SCALING_ASPECT_FIT;
			break;
	}
});

gallery_button.addEventListener('click', _ => {
	Ti.Media.openPhotoGallery({
		mediaTypes: Ti.Media.MEDIA_TYPE_PHOTO,
		success: e => image.image = e.media
	});
});

window.add([ picker, image, gallery_button ]);
window.open();

jquick-axway · 2021-04-29T03:59:19Z

@hansemannn, @m1ga, @garymathews,
I'm thinking we should change the autorotate property to default to true instead of false. That way it will automatically show JPEGs upright and reverse the mirroring if defined in the EXIF. Odds are this is what everyone wants. What do you think?

m1ga · 2021-04-29T10:25:16Z

In my opinion it should be true by default (if it works correctly 😉 )

garymathews · 2021-04-29T16:32:08Z

@jquick-axway I think it should be true by default like it is on iOS

…fault to true Fixes TIMOB-28432

lokeshchdhry · 2021-08-12T21:59:58Z

@jquick-axway , I am seeing an issue on IOS, when Scale is None & Resize is 240x240 the image is not contained inside 240x240 but the whole window like below:

lokeshchdhry · 2021-08-12T22:10:54Z

Fix for TIMOB-28432 looks good.

hansemannn · 2021-08-20T08:34:34Z

Would love to see this merged for 10.1.0! It will reduce the number of external required modules (in this case av.imageview for us)

jquick-axway · 2021-08-20T20:20:45Z

@lokeshchdhry , what we're seeing is a clipping issue on iOS. By default an ImageView does not clip its content. That is, the view is correctly being sized at 240x240, but since it doesn't clip by default, it is allowed to show the image outside of the view's bounds. If we set the image view's clipMode property to Ti.UI.iOS.CLIP_MODE_ENABLED, then it does what we want.

So, it's not really a bug, but maybe we should change the default behavior to clip the image by default unless the clipMode property is set to disable it.

jquick-axway · 2021-08-20T22:54:57Z

Updated PR to always clip the image within the ImageView, because it was always scaled within the view's bounds before.

lokeshchdhry · 2021-08-23T21:36:12Z

FR Passed.

hansemannn · 2021-08-24T09:40:29Z

@ewanharris Build passing, go go go! 😄

feat: add "scalingMode" property to Ti.UI.ImageView

067c1ff

Fixes TIMOB-24313

jquick-axway added ios android feature labels Apr 28, 2021

jquick-axway added this to the 10.1.0 milestone Apr 28, 2021

jquick-axway requested review from garymathews and vijaysingh-axway April 28, 2021 05:59

jquick-axway mentioned this pull request Apr 28, 2021

feat(android): ImageView scaleType #12285

Closed

build requested review from a team April 28, 2021 06:08

build added the docs label Apr 28, 2021

garymathews approved these changes Apr 28, 2021

View reviewed changes

chore(android): minor changes for TIMOB-24313

3746801

build added the in-qe-testing 🕵 label Apr 29, 2021

refactor(android): change Ti.UI.ImageView property "autorotate" to de…

0e3cdce

…fault to true Fixes TIMOB-28432

garymathews approved these changes Apr 29, 2021

View reviewed changes

garymathews and others added 2 commits April 29, 2021 12:39

Merge branch 'master' into TIMOB-24313

379a398

chore(android): improve Ti.UI.SIZE handling with no scaling or cropping

c80dd58

jquick-axway removed the request for review from vijaysingh-axway May 1, 2021 00:38

Merge branch 'master' into TIMOB-24313

4fa4c7d

chore(ios): alway clip image within ImageView

4be8218

Merge branch 'master' into TIMOB-24313

e719131

ewanharris merged commit cce763a into tidev:master Aug 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add "scalingMode" property to Ti.UI.ImageView #12753

feat: add "scalingMode" property to Ti.UI.ImageView #12753

jquick-axway commented Apr 28, 2021 •

edited

Loading

build commented Apr 28, 2021 •

edited

Loading

hansemannn commented Apr 28, 2021

garymathews left a comment •

edited

Loading

jquick-axway commented Apr 29, 2021

m1ga commented Apr 29, 2021

garymathews commented Apr 29, 2021

lokeshchdhry commented Aug 12, 2021

lokeshchdhry commented Aug 12, 2021

hansemannn commented Aug 20, 2021

jquick-axway commented Aug 20, 2021

jquick-axway commented Aug 20, 2021

lokeshchdhry commented Aug 23, 2021

hansemannn commented Aug 24, 2021

feat: add "scalingMode" property to Ti.UI.ImageView #12753

feat: add "scalingMode" property to Ti.UI.ImageView #12753

Conversation

jquick-axway commented Apr 28, 2021 • edited Loading

build commented Apr 28, 2021 • edited Loading

hansemannn commented Apr 28, 2021

garymathews left a comment • edited Loading

Choose a reason for hiding this comment

TEST CASE

jquick-axway commented Apr 29, 2021

m1ga commented Apr 29, 2021

garymathews commented Apr 29, 2021

lokeshchdhry commented Aug 12, 2021

lokeshchdhry commented Aug 12, 2021

hansemannn commented Aug 20, 2021

jquick-axway commented Aug 20, 2021

jquick-axway commented Aug 20, 2021

lokeshchdhry commented Aug 23, 2021

hansemannn commented Aug 24, 2021

jquick-axway commented Apr 28, 2021 •

edited

Loading

build commented Apr 28, 2021 •

edited

Loading

garymathews left a comment •

edited

Loading