Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-13436

iOS: CoverFlowView displays half image after image modification



      Steps to Reproduce

      • create a project with Alloy with a single CoverFlowView
      • add a couple of images
      • when a user clicks one of the images, modify the actual image as follows
        a) create a view with the actual image as background
        b) add a label text wit some text (i.e. Date())
        c) save the view as image back to the original image file
        d) do a setImage () reloading the image with correct index

      Actual Result
      When the images are loaded the first time, they show up perfect
      When an image is peformed, only the top half of that image shows in the coverflowview
      When the app is killed and restarted, the correct images appear.
      The click even works perfect as the images are correctly changed

      Expected Result
      When an image is changed, it should display the full changed image. Not the top half. I have isolated this problem in a separate project and the results are the same.

      Appc Support Team Notes

      The attached project references the data directory. I have modified it to reference the resources folder; now simply drop the images into assets/iphone. I have also modified the index.xml; before the cover flow was being created off-screen.


      	<Window title="Test CoverFlowView" id="win" class="container">
              <CoverFlowView id="COVERFLOW" onClick="modifyImage"  platform="ios" width= "320" height="150">


      var hover = $.getView('COVERFLOW');
      // pointer to CoverFlowView on screen
      var images = [];
      var imagefiles = [];
      var dir = Titanium.Filesystem.getFile(Ti.Filesystem.resourcesDirectory);
      // Open the data folder
      var dirItems = dir.getDirectoryListing();
      // get a list of all files in this folder
      var filename = null;
      // contains the filename
      var imagefile = null;
      // contains the full image file name
      var wissel = false;
      // loop through the directory listing selecting all .JPG files
      for (var i = 0; i < dirItems.length; i++) {
      	// check if the file contains .JPG as extension
      	// convert to string first
      	filename = dirItems[i].toString();
      	// if this is a .JPG file, then process it
      	if (filename.indexOf('.JPG') >= 0) {
      		// add  image to coverflow view
      		var p = {};
      		p.imageFile = Titanium.Filesystem.resourcesDirectory + filename;
      		p.command = 'Add';
      		// save filename for later
      function modifyImage(e) {
      	// just change the time in the center of the image
      	if (e.index < images.length) {
      		var imageFile = Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, imagefiles[e.index]);
      		if (imageFile.exists()) {
      			// read the image first
      			var image = imageFile.read();
      			imageFile = null;
      			// release the file handle
      			// create a view to put the image in the background
      			var vw = Ti.UI.createView({
      				backgroundImage : image,
      				width : 320,
      				height : 200,
      			// get the current date time
      			var txt = new Date();
      			// create a label to put the date in
      			var label = Ti.UI.createLabel({
      				text : txt,
      				width : Ti.UI.SIZE,
      				height : Ti.UI.SIZE,
      				backgroundColor : "#fff",
      				color : "#000",
      				font : {
      					fontSize : 20,
      					fontFamily : 'HelveticaNeue-Bold'
      				minimumFontSize : 8,
      				textAlign : 'center'
      			// add the label to the view
      			// get an image of the new view
      			var newImage = vw.toImage();
      			// overwrite the old image
      			var imageFile = Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, imagefiles[e.index]);
      			if (imageFile.exists()) {
      			} else {
      				alert('cannot find image');
      			// cleanup view and label
      			vw = null;
      			label = null;
      			newImage = null;
      			txt = null;
      			// now the image is ready to be resaved on the coverflow
      			var p = {};
      			p.imageFile = Titanium.Filesystem.applicationDataDirectory + imagefiles[e.index];
      			p.command = 'Change';
      			p.index = e.index;
      win1 = $.getView('win');
      function AddImageToCoverFlowView(p) {
      	// check if it is a change or add
      	if ('command' in p) {
      		switch (p.command) {
      			case 'Add':
      				// adds an image to the end of the CoverflowView
      				var image = {
      					image : p.imageFile,
      					height : 150,
      					width : 240
      			case 'Change':
      				// make sure there is an index
      				if ('index' in p) {
      					if (p.index < hover.images.length) {
      						hover.setImage(parseInt(p.index), images[parseInt(p.index)]);




            • Assignee:
              srahim Sabil Rahim
              nicoverduin nico verduin
            • Watchers:
              0 Start watching this issue


              • Created:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  Sync status:
                  Last received:
                  Last sent:

                  Git Integration