Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27267] iOS: Image tintColor is not always applied if image is remote

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2019-10-04T18:23:34.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.2.1
ComponentsiOS
Labelsn/a
ReporterHans Knöchel
AssigneeVijay Singh
Created2019-07-22T16:56:13.000+0000
Updated2020-10-13T12:41:21.000+0000

Description

When caching a remote image to be used inside a listview, the cached image sometimes does not get properly tinted. We noticed that it inside a list-view, but it also occurs in a normal image-view using tinted remote images. The fix is to always check for the tint-color before setting the image again, moving it to a helper selector. Test-cases to reproduce: *1: Basic*:
/* eslint-disable strict */

var win = Ti.UI.createWindow({
	backgroundColor: '#fff'
});

var btn = Ti.UI.createButton({
	title: 'Load remote image'
});

var image = Ti.UI.createImageView({
	top: 60,
	width: 90,
	height: 90,
	tintColor: 'red',
	image: Ti.UI.createView({ backgroundColor: 'gray', width: 270, height: 270 }).toImage()
});

btn.addEventListener('click', function () {
	var url = 'https://ss3.4sqi.net/img/categories_v2/food/breakfast_90.png';

	var client = Ti.Network.createHTTPClient({
		onload: function () {
			const blob = client.responseData;
			const cachedFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationCacheDirectory, 'icon.png');
			cachedFile.write(blob);

			image.image = cachedFile.nativePath;
		},
		onerror: function (e) {
			Ti.API.error(e.error);
		}
	});

	client.open('GET', url);
	client.send();
});

win.add([ btn, image ]);
win.open();
*2: Advanced (list-view)*:

/* eslint-disable strict */

var win = Ti.UI.createWindow({
    title: 'TIMOB-27267',
    barColor: 'white',
    translucent: false,
    backgroundColor: '#fff'
});

var nav = Ti.UI.createNavigationWindow({
    window: win
})

var myTemplate = {
    childTemplates: [
        {                            // Image justified left
            type: 'Ti.UI.ImageView', // Use an image view for the image
            bindId: 'pic',           // Maps to a custom pic property of the item data
            properties: {            // Sets the image view  properties
                width: 60,
                height: 60,
                tintColor: 'red',
                left: 10
            }
        },
        {                            // Title
            type: 'Ti.UI.Label',     // Use a label for the title
            bindId: 'info',          // Maps to a custom info property of the item data
            properties: {            // Sets the label properties
                left: 75
            }
        },
    ]
};

var list = Ti.UI.createListView({
    templates: { 'template': myTemplate },
    defaultItemTemplate: 'template'
});
var section = Ti.UI.createListSection();
var cell = {
    pic: {
        image: Ti.UI.createView({ backgroundColor: 'gray', width: 60, height: 60 }).toImage()    
    },
    info: {
        text: 'Titanium rocks!'
    }
};

section.items = [cell];
list.sections = [section];
 
win.add(list);
nav.open();

loadImage();

function loadImage() {
    var url = 'https://ss3.4sqi.net/img/categories_v2/food/breakfast_90.png';
    var cachedFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationCacheDirectory, 'icon.png');

    if (cachedFile.exists()) {
        console.log('EXISTS');
        setImage(cachedFile.nativePath);
        return;
    }

	var client = Ti.Network.createHTTPClient({
		onload: function () {
			var blob = client.responseData;
                        cachedFile.write(blob);
 
			setImage(cachedFile.nativePath);
		},
		onerror: function (e) {
			Ti.API.error(e.error);
		}
	});
 
	client.open('GET', url);
	client.send();
}

function setImage(url) {
    var item = section.getItemAt(0);
    item.pic.image = url;

    section.updateItemAt(0, item);
}

Comments

  1. Vijay Singh 2019-09-20

    PR(master) - https://github.com/appcelerator/titanium_mobile/pull/11070 PR(8_2_X) - https://github.com/appcelerator/titanium_mobile/pull/11233
       var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
       });
       
       var btn = Ti.UI.createButton({
       title: 'Load remote image'
       });
       
       var image = Ti.UI.createImageView({
       top: 60,
       width: 90,
       height: 90,
       tintColor: 'red',
       image: Ti.UI.createView({ backgroundColor: 'gray', width: 270, height: 270 }).toImage()
       });
       
       btn.addEventListener('click', function () {
       var url = 'https://ss3.4sqi.net/img/categories_v2/food/breakfast_90.png';
       
       var client = Ti.Network.createHTTPClient({
           onload: function () {
               const blob = client.responseData;
               const cachedFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationCacheDirectory, 'icon.png');
               cachedFile.write(blob);
       
               image.image = cachedFile.nativePath;
           },
           onerror: function (e) {
               Ti.API.error(e.error);
           }
       });
       
       client.open('GET', url);
       client.send();
       });
       
       win.add([ btn, image ]);
       
       var btn2 = Ti.UI.createButton({
       title: 'Set green tint color to image',
       bottom: 100
       });
       
       btn2.addEventListener('click', function () {
       image.tintColor = 'green'
       });
       
       win.add(btn2);
       
       win.open();
       
  2. Satyam Sekhri 2019-09-25

    FR Passed. Tint color applied successfully to remote images.
  3. Satyam Sekhri 2019-10-04

    Verified On: Mac OS: 10.14.5 SDK: 8.2.1.v20191003075717, 8.3.0.v20191003144543 Appc CLI: 7.1.1 JDK: 1.8.0_162 Node: 10.5.0 Studio: 5.1.4.201909061933 Xcode: 11.0 Device: iPhone X(13.0), iPhone 7Plus(12.3.1)

JSON Source