GPUImage 2 filters in collectionview

Question

I am making an image editing app in iOS and using swift GPUImage2 Library. Here i am going to implement some filters that will be previewed in a uicollectionview like traditional image editing apps.

i generated 50x50 thumb image for the collectionview and then applying filters to it. My filtering codes are :

var filterOptions = [FilterOption]();
var thumbInput: PictureInput!;
    let meFilter = MissEtikateFilter()
    let sketchFilter = SketchFilter();
    let softeleganceFliter = SoftElegance()

    var pictureOutput = PictureOutput()

    func thumbFilters() {

        pictureOutput.imageAvailableCallback = {image in
            // Do something with image
            self.filterOptions.append(FilterOption(name: "MissEtikateFilter", image: image))

        }
        thumbInput --> meFilter --> pictureOutput
        thumbInput.processImage(synchronously: true)


        sketchFilter.edgeStrength = 1;
        pictureOutput.imageAvailableCallback = {image in
            // Do something with image
            self.filterOptions.append(FilterOption(name: "SketchFilter", image: image))

        }
        thumbInput --> sketchFilter --> pictureOutput
        thumbInput.processImage(synchronously: true)


        pictureOutput.imageAvailableCallback = {image in
            // Do something with image
            self.filterOptions.append(FilterOption(name: "SoftElegance", image: image))

        }
        thumbInput --> softeleganceFliter --> pictureOutput
        thumbInput.processImage(synchronously: true)
    }

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {            
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FilterCell", for: indexPath as IndexPath) as! FilterCell
            cell.OptionIcon.image = filterOptions[indexPath.item].image;
            return cell;

    }

WHat i am doing here is i am making the filtered UIImage and adding them to collectionview data array and later reloading it. I am not sure if its a good idea or not. But the problem is i am getting only the first filter applied to all of them.

When i initialize pictureOutput before applying each filters i get red images...and its not even smooth when opening the viewcontroller.

So i think i might be doing it in wrong way. I havent found any good resource for handling this in collectionview. It would be better if anyone can show me a git project or tutorial or something. Also any kind of suggestions are appreciated

Thanks

Answer 1

Try to create different cell for each row because.. I think issue is in reuseIdentifier.. its reusing imageView.. and overlapping them.. try to create cell without reuseIdentifier.

Ex.

cell = let cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "FilterCell")

OR

Try to create different object for those 3 imageViews instead of using 1.

Like

func thumbFilters() {

        var pictureOutput = PictureOutput()

        pictureOutput.imageAvailableCallback = {image in
            // Do something with image
            self.filterOptions.append(FilterOption(name: "MissEtikateFilter", image: image))

        }
        thumbInput --> meFilter --> pictureOutput
        thumbInput.processImage(synchronously: true)

        // create again
        pictureOutput = PictureOutput()

        sketchFilter.edgeStrength = 1;
        pictureOutput.imageAvailableCallback = {image in
            // Do something with image
            self.filterOptions.append(FilterOption(name: "SketchFilter", image: image))

        }

        // create again
        pictureOutput = PictureOutput()

        thumbInput --> sketchFilter --> pictureOutput
        thumbInput.processImage(synchronously: true)


        pictureOutput.imageAvailableCallback = {image in
            // Do something with image
            self.filterOptions.append(FilterOption(name: "SoftElegance", image: image))

        }
        thumbInput --> softeleganceFliter --> pictureOutput
        thumbInput.processImage(synchronously: true)
    }