Felix – IMG.LY Blog

The future is Video — the future is now!

Felix — Tue, 13 Aug 2019 00:00:00 GMT

VideoEditor SDK expands the powerful tools and features of PhotoEditor SDK into the realm of mobile video creation, empowering you to seamlessly integrate a cinematic experience into your mobile applications.With an intuitive and elegant UI, an extensive filter gallery, advanced adjustment tools, and crops for social aspect ratios you’ll gift your users with the ability to create engaging and professional-looking videos on the fly.

https://www.youtube.com/embed/FDuwEtBf8N8?feature=oembed

Video is one of the most effective means of communication in our era. According to Hubspot, the usage and consumption of video content continue to grow and still haven’t reached their saturation point. Video is changing the way we interact on a daily basis, and it’s here to stay.

Although most videos are shot spontaneously and then posted instantly, even slight editing can have a tremendous effect on the content’s impact. VideoEditor SDK lets your users create professional-looking footage without having to rely on external apps while using your solution. The SDK is packed with intuitive yet powerful tools that allow for the creation of an endless variety of stunning visual effects. All tools come with an instant preview and can be tailored to fit your app perfectly.

Trimming & Transformation: Keeping it relevant

The Trimming tool helps your users to keep their content on point and to get rid of unnecessary, boring, or unwanted parts with ease. Furthermore, the SDK is equipped with a Transform tool kit that unifies cropping, flipping, and rotating operations. Featuring various preset video aspect ratios most popular for Instagram (1:1), YouTube (16:9) or other platforms like Snapchat (9:16) — the tool lets your users present their content in the most appropriate format.

Video grading: The Hollywood look and feel

VideoEditor SDK ships with over 60 video filters that let your users achieve a cinematic look for their videos with a single tap. Additionally, the Adjustment section holds a variety of handy tools to tweak and fine-tune video content ranging from basic operations like brightness and contrast to more sophisticated options like exposure and gamma. Through instant preview, your users can directly see how their changes affect the final video.

Captioning and Assets: Compelling storytelling

Video is a narrational medium and VideoEditor SDK provides all necessary functions for your users to quickly turn their footage into engaging and attention-grabbing stories. They can customize their videos with captions using the Text tool or add a stunning typography design with the Text Design tool that automatically merges input text with designer-grade typography layouts.

On top of that, the SDK ships with various asset libraries for your users to personalize their content with Stickers, Frames, or Overlays to create something they’ll love to share.

Learn more about VideoEditor SDK and delight your users with powerful video editing capabilities.

How to integrate a Photo Editor into your iOS App

Felix — Wed, 10 Jul 2019 00:00:00 GMT

This tutorial is going to walk you through the integration process of the PhotoEditor SDK for iOS. You’ll learn how to setup the editor in seven minutes using CocoaPods. We created similar tutorials for Android and HTML5, so make sure to check those out as well.(Please make sure to get a trial license for the PhotoEditor SDK before integrating it.)

https://www.youtube.com/embed/AHzD4Mnm-NA?feature=oembed

Transcript

In this tutorial, we’re going to show you how to integrate the PhotoEditor SDK into your iOS app. We’re going to use Xcode and the PhotoEditor SDK’s documentation. So, first of all, we navigate to the “Getting Started” guide for iOS. We’re going to install the SDK using CocoaPods, because it is the recommended way to initialize this dependency.

We create a new Xcode project and select the “Single View App” template. Then, we assign a name to our project. For this tutorial, we’ll go with “PhotoEditorApp.” Here, it is essential that the given bundle identifier is identical to the one you used to request your license with. We decide to save our project files to the documents folder and create the new project.

Now, we change the iOS Deployment Target to version 9.0 as the SDK supports all iOS versions from 9.0 upwards, and thus, our app will be available for the highest possible number of devices. After that, we insert our previously downloaded license file into our app by simply dragging and dropping the file into our app’s folder. Here, it’s important that “Copy items if needed” is checked so that our license file will be copied to the appropriate place in our project instead of just being referenced.

Now, we can close our Xcode project. We open our folder structure and see that our project has been created in the documents folder. Now, we need the terminal to install the PhotoEditor SDK via CocoaPods. We type cd which is short for “change directory”, to change the directory of our source files. We can copy the project’s path via drag and drop. We now instruct CocoaPods to prepare Xcode for the use with CocoaPods by typing pod init. After that, CocoaPods creates the file “podfile.” We open the podfile in a text editor by double-clicking.

Here, we uncomment the second line and thus define that our project shall run from iOS version 9.0 upwards. Next, we copy this line (pod 'PhotoEditorSDK') from the PhotoEditor SDK’s documentation and paste it under # Pods for PhotoEditorApp to create a dependency between our project and the PhotoEditor SDK. We save the podfile and close the text editor. Now, we return to the terminal and instruct CocoaPods to install all dependencies by typing pod install and executing our command with the return key.

Here we can see that CocoaPods advises us to open our Xcode project with the xcworkspace file only. Furthermore, we see that there’s now a new folder called “pods.” Ideally, you wouldn’t check that folder into your source control system as it potentially contains large files, which can result in some issues. Github, for example, has a limit for the maximum file size, which the PhotoEditor SDK would exceed. So, it would be best if every user that works on the project activates pod install to install the dependencies for each processing machine.

Now, we can open the project file to incorporate our license into the file AppDelegate.swift. We copy this line from our documentation and paste it under the method UIApplication, didfinishLaunchingWithOptions.

if let licenseURL = Bundle.main.url(forResource: "license", withExtension: "") {
    PESDK.unlockWithLicense(at: licenseURL)
  }

It is important that we name our license file exactly like we did when we incorporated it into our project. In our case, that would be “ios_license” instead of “license.” Also, we can see that there is an error message, because we haven’t imported the PhotoEditor SDK yet. We simply type **import** PhotoEditorSDK, and the issue is resolved. Now our project is prepared so that we can use the PhotoEditor SDK with an active license.

Next, we’re going to prepare our app, so that it actually uses the PESDK. We configure our app with the Main.storyboard by opening the assistantview and creating a new button by just dragging and dropping it on the canvas. We’re going to use Alignment Constraints so that the button will always be displayed in the middle of the screen no matter the form factor of the device in use.

We’re going to name our button after our app and link it from our storyboard with our source code on the right-hand side via drag and drop. Now, we’re going to set a name for our method that is going to be called once the button is pressed. For this tutorial, we’ll go with startPhotoEditor.

We’ve decided that we want to start the PhotoEditor SDK with a CameraViewController. So, we copy the respective code from our documentation and paste it in the body of our method under startPhotoEditor.

let cameraViewController = CameraViewController()
present(cameraViewController, animated: true, completion: nil)

When we save the file, we get yet another error message that the camera can’t be found because we haven’t imported the PhotoEditor SDK for this source file either. Once we’ve done that, the error message disappears.

As we want our editor to start in camera mode, we have to create some entries in the Info.plist file that will allow us to use our device’s camera and grant access to our device’s image library. That is a restriction by Apple. If we didn’t create these entries, we wouldn’t be able to use our app as it would crash as soon as we open the camera. All necessary entries can be found under “Privacy.” First, we need “Camera Usage Description.” Here, we have to give a reason why we want access to our user’s camera. Said reason should be as meaningful as possible. For this tutorial, we’ll go with “We use your camera to take photos for editing.” We also want to allow the import of photos from the device’s library, so we add the identifier “Photo Library Usage Description” and type “We use your photos so that you can edit them” as description.

Now, we can run the app in the simulator. If we wanted to run the app on a physical device, we’d have to provide an Apple iOS developer account under “Team” so that the app can be signed because only registered developers are allowed to install apps on physical devices. However, we’ll go with the simulator.

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

How to integrate a Photo Editor into your Website

Felix — Wed, 10 Jul 2019 00:00:00 GMT

This tutorial is going to walk you through the integration process of the PhotoEditor SDK into your website. You’ll learn how to setup the HTML5 editor in four minutes. We created similar tutorials for iOS and Android, so make sure to check those out as well.(Please make sure to get a trial license for the PhotoEditor SDK before integrating it.)

https://www.youtube.com/embed/9ZfEN3LMJU8?feature=oembed

Transcript

In this tutorial, we’re going to show you how to integrate the PhotoEditor SDK for HTML5 into your website. We’re going to use Visual Studio Code and the PhotoEditor SDK’s documentation. So let’s get to it.

We unzip the file and copy the assets, css and js folder. Those contain all the elements our editor needs to run properly. We paste the folders into our project folder. For this demo, we want to open a sample image with the editor, so we copy that into our folder as well.

Here, we already opened our project’s folder with Visual Studio Code. Next, we’re going to create an HTML file that we’re going to use to build our site. We copy this code for the <head> section and paste it into our index.html file.

<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
</head>

Here’s where we link to the JavaScript files from our js folder. Please note that if you store the folder somewhere else, you have to adjust these paths accordingly. Also, this is where the css file for our desktop UI is loaded.

Next, we’re going to add a <body> to our site. Then we’ll need a <div> where our editor is going to be displayed. For that, we can simply copy the snippet from the documentation.

<div id="editor"></div>

The <div>’s ID is set to editor so we can address it via JavaScript. Now, we copy this JavaScript snippet from the documentation so that the editor loads properly.

<script>
  window.onload = function () {
    var image = new Image()
    image.onload = function () {
        var container = document.getElementById('editor')
        var editor = new PhotoEditorSDK.UI.DesktopUI({
        container: container,
        // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
        license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
        editor: {
          image: image
        },
        assets: {
          // This should be the absolute path to your `assets` directory
          baseUrl: '/assets'
        }
      })
    }
    // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
    image.src = './example.jpg'
  }
</script>

We have already prepared our license file here. It is important to copy the entire content of the license file and paste it after license. Also, it is important to insert the license as a string and not as a JavaScript object.

Please make sure that under baseUrl you have entered the correct path to your assets folder.

Under image.src we load our image. Please note that if you don’t load the image locally but from another source, say a server like an AWS S3 bucket, you have to setup CORS properly. We dedicated a whole section in our documentation to this issue, so make sure to check that out. However, as we’re going to load the image locally, we don’t have to mind that line.

Finally, it is important that we create the editor after the image is loaded so that we can pass the image to the editor.

Alright, we’re set. Now we can test everything by running a server. We’ll go with the SimpleHTTPServer.

As we can see, everything runs properly. Thanks a lot for watching and see you next time.

That was all that is necessary to get the PhotoEditor SDK up and running. For your convenience, here’s the whole source code of the HTML file:

<!DOCTYPE html>
<html>
  <head>
    <!-- React Dependencies for the SDK UI -->
    <script src="js/vendor/react.production.min.js"></script>
    <script src="js/vendor/react-dom.production.min.js"></script>
    <!-- PhotoEditor SDK-->
    <script src="js/PhotoEditorSDK.min.js"></script>
    <!-- PhotoEditor SDK UI -->
    <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
    <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
  </head>

  <body>
    <div id="editor"></div>
    <script>
      window.onload = function () {
        var image = new Image()
        image.onload = function () {
            var container = document.getElementById('editor')
            var editor = new PhotoEditorSDK.UI.DesktopUI({
            container: container,
            // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
            license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
            editor: {
              image: image
            },
            assets: {
              // This should be the absolute path to your `assets` directory
              baseUrl: '/assets'
            }
          })
        }
        // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
        image.src = './example.jpg'
      }
    </script>
  </body>
</html>

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

Updates to the PhotoEditor SDK

Felix — Tue, 28 May 2019 00:00:00 GMT

Over the course of the last weeks, we’ve integrated a couple of handy features into the PhotoEditor SDK. It’s now easier than ever for you to equip your service with the tools that make it the one-stop creative solution for your users.

Color Pipette

Colors are important for virtually every aspect of the digital world and a powerful tool when it comes to design, branding, social media and marketing. Color is one of the most important things to consider when communicating online. If used right these visual cues harmonize the impression and emphasize the message. But if used wrong, colors may also wreck design and content just as thoroughly as Comic Sans.

Whether it is for creating content, ads, special offers or a brand logo, finding the right color is just too important a decision to be taken lightly. The PhotoEditor SDK’s color pipette helps your users to discover and marry their content with the right colors for any purpose.

The Color Pipette is available for iOS and Android.

DuoTone Filters

Duotone is amongst the big trends in modern web design. What once served as a way of saving money on printed materials, today, adds boldness to designs and can be used to many ends. Duotone keeps things minimalistic yet captivating. In a world of full-color imagery, duotone images are a refreshing novelty as they add visual appeal by subtracting colors.

We added 8 filters to the PhotoEditor SDK’s gallery that map contrasting colors to an image based on its luminance values. Via a slider, your users can control which color the creative should lean to.

DuoTone filters are available for iOS, Android, and HTML5.

Folders

To streamline your users’ workflow and facilitate the exploration of the PhotoEditor SDK’s vast filter library, we categorized them into 7 folders. We also exchanged all filter names for more descriptive ones.

Folders are available for all platforms and completely customizable, you can rename the folders, add your own and rearrange the filters.

Snapping

To facilitate the precise layout of creatives, we added a snapping feature to our Text, Text Design, and Sticker tool. The visual elements snap to the center and borders as well as to certain angles.

You can customize the snapping properties to your wishes. Snapping is available for HTML5 iOS and Android.

Light Theme

Rumor has it that Apple is going to introduce light and dark theming in iOS 13. With our latest update, we complemented our standard dark themed UI with a light counterpart. Without any customization efforts, you can switch from dark to light theming with a single line of code.

Light theme is available for iOS and Android. For more on that, please check out our documentation.

If you think that the PhotoEditor SDK would be the right fit for your project, let us know and we’ll be in touch.

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

How to integrate a Photo Editor into your Android app

Felix — Tue, 11 Dec 2018 00:00:00 GMT

As developer friendliness is paramount to us, we created a short video tutorial to guide you through our integration process. We created similar tutorials for iOS and HTML5, so make sure to check those out as well.(Please make sure to get a trial license for the PhotoEditor SDK before integrating it.)

https://www.youtube.com/embed/FpmASFvgUdM?feature=oembed

Video Transcript

Today we’re going to show you how to integrate the PhotoEditor SDK into your Android app. We’re going to need Android Studio and the PhotoEditor SDK’s documentation to do so.

First, we’re going to launch a new Android Studio project. Here, we can choose a name for our application. Then, we’re going to insert our company domain and our package name. Inserting a package name is very important as you need a license that is issued for your specific package name to run the PhotoEditor SDK.

We’re also going to include Kotlin support, as every modern Android app should do that.

We then choose Phone and Tablet and API 16 because this is the oldest API that the SDK currently supports. Please note, that this is eventually going to change.

We then choose Empty Activity. Here you can set a name. For this tutorial, however, we’re going to leave it as it is.

Now, a new Android Studio project is created.

For the sake of clarity, we’re going to use the project view.

First, we have to include the license. To do so, we open the PhotoeditorApp folder and navigate through the subfolders app, src and main. In this subfolder, we create yet another folder called assets. We then simply paste our license into it.

We head over to the documentation, find the section for Android and make sure that the latest version is selected. As of the time of this recording that is version 6 or V6. Then we navigate to the “Getting Started” section. Here you can also look up how to include the license. We head over to the project’s build.gradle file and paste this line which is the path to our SDK repository under buildscript and repositories.

maven { url 'https://artifactory.img.ly/artifactory/imgly' }

We then copy this line and paste it under dependencies, and thus, we have linked the SDK.

classpath 'ly.img.android.pesdk:plugin:6.0.8'

Next, we’re going to apply the PESDK plugin. So, we find the app’s build.gradle folder and paste this line under the other plugins.

apply plugin: 'ly.img.android.pesdk'

Now, we’re going to insert the PhotoEditor SDK’s configuration that contains all tools. We copy this block and paste it under the PESDK plugin. It is important that the license naming here matches the name of the license file we previously imported.

pesdkConfig {

    licencePath "LICENSE" // Name of the Licence file in the asset folder

    // If you use another supportLibVersion ('com.android.support'), change this version here to update your own supportLibVersion
    supportLibVersion "27.1.1"

    // Define the modules you need
    modules {
        // Add all the backend modules you need
        include 'ly.img.android.pesdk.operation:text'
        include 'ly.img.android.pesdk.operation:frame'
        include 'ly.img.android.pesdk.operation:focus'
        include 'ly.img.android.pesdk.operation:brush'
        include 'ly.img.android.pesdk.operation:camera'
        include 'ly.img.android.pesdk.operation:filter'
        include 'ly.img.android.pesdk.operation:sticker'
        include 'ly.img.android.pesdk.operation:overlay'
        include 'ly.img.android.pesdk.operation:adjustment'
        include 'ly.img.android.pesdk.operation:text-design'
        include 'ly.img.android.pesdk.operation:abstract-sticker'

        // Add all the UI modules you need
        include 'ly.img.android.pesdk.ui.mobile_ui:core'
        include 'ly.img.android.pesdk.ui.mobile_ui:text'
        include 'ly.img.android.pesdk.ui.mobile_ui:focus'
        include 'ly.img.android.pesdk.ui.mobile_ui:frame'
        include 'ly.img.android.pesdk.ui.mobile_ui:brush'
        include 'ly.img.android.pesdk.ui.mobile_ui:filter'
        include 'ly.img.android.pesdk.ui.mobile_ui:camera'
        include 'ly.img.android.pesdk.ui.mobile_ui:sticker'
        include 'ly.img.android.pesdk.ui.mobile_ui:overlay'
        include 'ly.img.android.pesdk.ui.mobile_ui:transform'
        include 'ly.img.android.pesdk.ui.mobile_ui:adjustment'
        include 'ly.img.android.pesdk.ui.mobile_ui:text-design'


        // Add the serializer if you want
        include 'ly.img.android.pesdk:serializer'

        // Add asset packs if you want
        include 'ly.img.android.pesdk.assets:font-basic'
        include 'ly.img.android.pesdk.assets:font-text-design'
        include 'ly.img.android.pesdk.assets:frame-basic'
        include 'ly.img.android.pesdk.assets:filter-basic'
        include 'ly.img.android.pesdk.assets:overlay-basic'
        include 'ly.img.android.pesdk.assets:sticker-shapes'
        include 'ly.img.android.pesdk.assets:sticker-emoticons'
    }
}

Then, we copy the buildToolsVersion und paste it in the android category. And for the app to compile in the correct Java version, we copy this code block and paste it at the end of the android category.

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

We hit “Sync Now” to save our settings. That often takes a while, so we sped it up for you.

We want to build a simple application that just consists of a single button that starts the photo editor. So first, we create a button. To do so, we navigate to the app folder and open the subfolders src, res and layout to find the activity_main (or whichever way you decided to name it). We click on “Text” to edit the file and add a button. For height and width, we enter wrap_content. Now, we set an ID for the button and call it sdk_button. We then set a display text for the button. For this tutorial, we’ll use the string app_name, but you, of course, can choose whichever string you like.

We return to the app folder and find the MainActivity in the subfolders src and java. We head over to the documentation, where we are presented with two options. We can either start the editor in camera mode or in the device’s gallery. We’ll go with the camera mode. As we’re writing our MainActivity in Kotlin, we choose the Kotlin code example and paste it in the MainActivity. We can overwrite the onCreate as it is also included in the code example.

companion object {
        const val PESDK_RESULT = 1
    }

    // Important permission request for Android 6.0 and above, don't forget to add this!
    override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<String>, grantResults: IntArray) {
        PermissionRequest.onRequestPermissionsResult(requestCode, permissions, grantResults)
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
    }

    override fun permissionGranted() {}

    override fun permissionDenied() {
        /* TODO: The Permission was rejected by the user. The Editor was not opened,
         * Show a hint to the user and try again. */
    }

    // Create an empty new SettingsList and apply the changes on this reference.
    private fun createPesdkSettingsList() = SettingsList().apply {

        // If you include our asset packs and use our UI you also have to add them to the UI,
        // otherwise, they are only available for the backend
        // See the specific feature sections of our guides if you want to know how to add your own Assets.

        getSettingsModel(UiConfigFilter::class.java).apply {
            setFilterList(FilterPackBasic.getFilterPack())
        }

        getSettingsModel(UiConfigText::class.java).apply {
            setFontList(FontPackBasic.getFontPack())
        }

        getSettingsModel(UiConfigFrame::class.java).apply {
            setFrameList(FramePackBasic.getFramePack())
        }

        getSettingsModel(UiConfigOverlay::class.java).apply {
            setOverlayList(OverlayPackBasic.getOverlayPack())
        }

        getSettingsModel(UiConfigSticker::class.java).apply {
            setStickerLists(
              StickerPackEmoticons.getStickerCategory(),
              StickerPackShapes.getStickerCategory()
            )
        }

        // Set custom camera image export settings
        getSettingsModel(CameraSettings::class.java).apply {
            setExportDir(Directory.DCIM, "SomeFolderName")
            setExportPrefix("camera_")
        }

        // Set custom editor image export settings
        getSettingsModel(EditorSaveSettings::class.java).apply{
            setExportDir(Directory.DCIM, "SomeFolderName")
            setExportPrefix("result_")
            savePolicy = EditorSaveSettings.SavePolicy.RETURN_ALWAYS_ONLY_OUTPUT
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        openCamera()
    }

    private fun openCamera() {
        val settingsList = createPesdkSettingsList()

        CameraPreviewBuilder(this)
          .setSettingsList(settingsList)
          .startActivityForResult(this, PESDK_RESULT)
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: android.content.Intent) {
        super.onActivityResult(requestCode, resultCode, data)

        if (resultCode == Activity.RESULT_OK && requestCode == PESDK_RESULT) { // Editor has saved an Image.

            val resultURI = data.getParcelableExtra<Uri?>(ImgLyIntent.RESULT_IMAGE_URI)?.also {
                // Scan result uri to show it up in the Gallery
                sendBroadcast(Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE).setData(it))
            }

            val sourceURI = data.getParcelableExtra<Uri?>(ImgLyIntent.SOURCE_IMAGE_URI)?.also {
                // Scan source uri to show it up in the Gallery
                sendBroadcast(Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE).setData(it))
            }

            Log.i("PESDK", "Source image is located here $sourceURI")
            Log.i("PESDK", "Result image is located here $resultURI")

            // TODO: Do something with the result image

            // OPTIONAL: read the latest state to save it as a serialisation
            val lastState = data.getParcelableExtra<SettingsList>(ImgLyIntent.SETTINGS_LIST)
            try {
                PESDKFileWriter(lastState).writeJson(File(
                  Environment.getExternalStorageDirectory(),
                  "serialisationReadyToReadWithPESDKFileReader.json"
                ))
            } catch (e: IOException) { e.printStackTrace() }

        } else if (resultCode == Activity.RESULT_CANCELED && requestCode == PESDK_RESULT) {

            // Editor was canceled
            val sourceURI = data.getParcelableExtra<Uri?>(ImgLyIntent.SOURCE_IMAGE_URI)
            // TODO: Do something...
        }
    }

Right now, we are presented with quite some error warnings, but that’s no problem at all because we still need to implement the interface, as you can see here: PermissionRequest.Response. Here, we must choose the dedicated ly.img.android.pesdk.ui.utils and add .response at the end.

After that, we’re down to only two errors because we still need to integrate the correct directory. Again, we choose the dedicated ly.img.android.pesdk.backend.model.constant. And thus all errors are resolved.

If we were to start the app now it would automatically run the editor in camera mode. But we don’t want the editor to start automatically, hence the button we previously added. So, in order to change that, we scroll to the onCreate method and as you can see here, the app would instantly open the camera.

We create a new variable that we’re going to call sdkButton and set it equal with findViewbyId. We then set the ID to sdk_button, set an OnClickListener and paste openCamera beneath it.

And, we have a working little app that contains the PhotoEditor SDK. You could take a deeper dive into PhotoEditor SDK integration in other environments and frameworks in the official documentation put together by developers themselves.

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

Text ❤ Design [Pt. II]

Felix — Wed, 28 Nov 2018 00:00:00 GMT

After giving you a sneak peek at the Text Design tool in a previous blog post, we can now finally announce that it is available as a part of the PhotoEditor SDK for all platforms. Over the last weeks, we finalized the Text Design tool and added functionalities that make it a handy creative tool for many industries and use cases.

One of our main goals is to make good design more accessible to everyone by developing technology that facilitates and streamlines creative processes so that even people without previous knowledge of sophisticated editing tools can yield appealing results. The Text Design tool enables you to provide your users with the power and features necessary to give speech to their ideas and create a narrative for their visual communication.

Attention-grabbing and precise visual communication is key to engaging one’s target audience. Our novel tool automates typesetting and lets your users combine photos and text fast and easy to create stunning imagery for any tone and task. The Text Design tool features complex text layouts based on recipes crafted by professional designers. Their balanced combination of fonts, sizes, alignments, and decorations allow for the fast creation of assets with a designer look for various purposes like social media, online ads, short-term offers, flyers, product images, posters, promo material and so on. Especially for small companies and teams, without the budget for a professional designer or a dedicated design department, the Text Design Tool can save a lot of time and stress by reducing what would usually take hours to a single tap.

All it takes is an idea. The Text Design Tool tends to 90% of the execution.

The tool makes design just as fast as your users’ ideas. Combined with the PhotoEditor SDK’s extensive feature suite, branding opportunities through sticker upload and the photo roll with endless source material, your users can achieve a harmonious and nuanced visual communication off the bat to stand out against their competitors. The designs help convey your users’ message and can be used to create a textural hierarchy to guide the spectators view to the essential infos for your users’ goals. Furthermore, the shuffle functionality randomizes fonts, alignments, and decorations thus offering endless possibilities for creative expression.

A recent change we made to the mobile versions of the Text Design tool is lifting the limitation of one design per creative to allow further artistic expression and get the most out of the interplay and combination of the various designs. On top of that, we optimized the inverting feature of the tool to allow for the adjustment of the inverted designs’ padding and size.

If you want to empower your users to give a voice to their creatives head over to IMG.LY and get in touch with our sales team.

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

Elbi transforms creative user engagement to help people worldwide

Felix — Wed, 24 Oct 2018 00:00:00 GMT

Elbi Digital:

Founded 2014
Based in the UK
Social enterprise that helps people to connect with charity organizations and do good with micro-donations and content creation

Requirements:

A robust hybrid image editing solution at the core of the app for easy content creation

Results: Easy and seamless content creation with Photos, Doodles, and motivational messages

The Elbi app aims to connect people with charity organizations and beneficiaries alike and facilitate the social engagement and donation process. Users can support charity organizations via a “Love Button” with micro-donations and get creative for selected good causes. If users don’t donate directly, they can help fundraise money with their content. To enable their users to produce motivating and exceptional content, Elbi had to provide them with a powerful creative tool. “Our app has photo-editing at the very core of its experience and the editor has been invaluable in making that vision happen. There are no other tools on the market up to the quality of PhotoEditor SDK, so it was an easy choice to have it be at the heart of Elbi,” says Toby Green former lead developer at Elbi.

For the previous version of the Elbi app, the team built their own creative tool that worked with iOS only. When they decided to reforge their app, the team at Elbi wanted to follow a different approach. “When we rebuilt the app we wanted it to be a hybrid solution and not only iOS like the previous one, so we abandoned our existing solution and were looking for an existing library. I spent a lot of time researching photo editing tools and did a feasibility study on all the available editors and PhotoEditor SDK came top of the list” says Toby Green.

With the PhotoEditor SDK the developers at Elbi were able to swiftly rebuild their app “We would never have been able to do this so quickly without the editor” says Green, “the documentation was great so it was very easy to get it all up and running and the support was incredibly patient and helpful. They always responded quickly and were happy to spend time resolving even difficult-to-track-down issues”. The SDK seamlessly integrates into the app providing an intuitive solution for Elbi’s content creation section. “It really looks like it’s part of the product,” says Toby Green.

“The product is a 10/10; it is the best hybrid tool available. And in general, I would say one of the finest teams I’ve ever worked with; they’ve been very supportive with regards to custom support, adding functionalities and discussing integration and they helped us getting everything working 100%,” concludes Toby Green. With the PhotoEditor SDK Elbi facilitates the charitable engagement of its users and helps people all around the globe to do good on the go.

Infopark reinvents CMS asset management with the PhotoEditor SDK

Felix — Wed, 24 Oct 2018 00:00:00 GMT

Infopark:

Founded 1994
Based in Berlin, Germany
SaaS provider for website infrastructure technologies (CMS, CRM)

Requirements: A simple and intuitive photo editing solution to provide their clients with seamless and easy asset management

Results: A versatile image editor within Scrivito’s Content Browser

The native cloud service Scrivito is tailored to meet the requirements of editors worldwide and provides a clean and simple What-you-see-is-what-you-get, drag & drop interface that enables its users to change their websites and content on the fly; eliminating complex tree hierarchies and all the guesswork that goes along with it. Since successful websites hinge on high-quality pictures, Infopark wanted to equip its users with a robust image editing solution. “We wanted to provide our users with a coherent and easy-to-use working environment, and because most editors don’t have Photoshop or a proper skillset for other sophisticated programs, we were searching for a solution that would enable our users to quickly and professionally edit their images within Scrivito” says Thomas Witt, co-founder and Director of Product & Business Development at Infopark.

Before integrating the PhotoEditor SDK into their award-winning service Scrivito, Infopark tried to tackle the problem themselves with a simple, self-made solution based on ImageMagick. The editor could perform operations such as rotate, crop or flip “but that solution didn’t have an appealing UI, nor was it easy to use” says Thomas Witt. “After evaluating some solutions, we felt that the PhotoEditor SDK would be a good match because it is the easiest to use for both developers and users and also has a nice UI that doesn’t look cluttered.”

With the SDK the developers at Infopark accomplished in days what would’ve otherwise taken weeks. “Our developers loved that the integration was really straightforward and that everything you need like APIs and documentation is easy to find and of very good quality. And when we had questions, the support team responded very quickly and extensively” says Witt. With the PhotoEditor SDK Infopark provides their customers with a native image editing solution that seamlessly integrates into Scrivito’s content browser and further facilitates the creation of websites and content. “Asset management is critical to our users, and we get a lot of positive feedback for our solution,” says Thomas Witt.

“The PhotoEditor SDK is a great product, it does exactly what it’s supposed to do, and we never encountered any difficulties. It even provides more functionalities than our customers would ever use. The support was very fast and helpful, and the documentation is extensive and comprehensible” concludes Witt. With the PhotoEditor SDK Scrivito allows for an intuitive and straightforward approach to both content and website creation. Unlike other CMS Scrivito now enables its users to creatively experiment with their website assets and make impromptu decisions for their design.

Case Study: W | Bear & PhotoEditor SDK

Felix — Mon, 17 Sep 2018 00:00:00 GMT

W | Bear is the first global photo and video blogging social community for gay men. The free app allows its users to post pictures and videos to a personal feed, express their creativity and connect with like-minded bears. The blogging community provides a safe place where people can build and shape a social environment, chat, flirt and date. W | Bear was created and developed by the private and public cloud solution provider gNetLabs. We sat together with Xavier Nicolle, CEO at gNetLabs to talk about the vision behind W | Bear, time to market and providing users with tailored assets to amplify engagement.

“W | Bear is aimed at the bear subculture of the LGBT community. People express themselves, their story and their life through photos and videos. Our users are very happy with the app. 18 months after the release we reached around 150.000 users worldwide, which is beyond our expectation and it’s getting faster and faster. We get a lot of positive reactions and amazing feedback from users that tell us, that our application helped them to gain more self-esteem and to better integrate into the community,” Xavier Nicolle says.

As pictures were going to be a vital part of the Instagram like photo blogging application (to this day, more than 2 million pictures and videos have been posted on the app), the folks at gNetLabs started exploring options as their CEO explains: “Time to market was critical for us, and we were kind of in a rush to develop the app. From our background as a hosting company, we’d usually develop and host everything ourselves, however, due to time problems, that wasn’t a viable option regarding the photo editing functionalities. So, we jumped into PhotoEditor SDK to save time, really liked it and eventually kept it. The features and pricing perfectly fit our needs, the integration was straightforward, and the SDK is of great quality and open enough for fine-tuning. On top of that, unlike Adobe Creative SDK for example, it is not linked to any other service. And that is exactly what we were looking for, a piece of software that we could simply plug in that isn’t linked to a service that we don’t need.”

To offer the best experience possible with W | Bear, the folks at gNetLabs pay close attention to how people engage with the app and its features. “Our users mostly work with stickers, frames, and overlays when editing their pictures,” Xavier Nicolle says, “so, bearing that in mind, we want to provide more content and assets that are tailored for the community so our users will hopefully make more use of the editor. Currently, we’re working together with artists that develop stickers that we’re going to introduce using the SDK.”

But it doesn’t stop with W | Bear, as Xavier Nicolle describes the vision behind the community: “W | Bear is the first piece of a larger social network we want to develop that is dedicated and aimed at the whole LGBT community. We’re going to release more applications using the same technology as W | Bear to address more subcultures. On top of that, there are going to be corresponding websites for each app, so the user will be able to find the same functionalities and tools across all platforms.”

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

Case Study: Dirico & PhotoEditor SDK

Felix — Wed, 04 Jul 2018 00:00:00 GMT

dirico.io is a piece of software that unifies the social media and content marketing workflow from research and planning over creation to publishing. In doing that, dirico.io helps marketing teams to better organize and ensures a perfectly orchestrated communication at all times. We sat together with Marcus Burk, Head of Marketing at dirico.io, to discuss how they use the PhotoEditor SDK to provide their users with seamlessly integrated photo editing and branding features.

“With dirico.io, we follow an all in one approach,” says Marcus Burk, “that means that our tool covers the complete workflow starting with the inspiration for content ideas, over planning, creation, and scheduling to publishing. And just as text is vital to content, images like infographics or pictures for social media are also an incredibly important medium. So, we’ve been looking for a solution that basically could substitute Photoshop in many ways. I’m very happy that we are using the PhotoEditor SDK, it is a great and innovative product. One can see the development that img.ly made as well as the advancement of the SDK over the last years. I believe that it is one of the easiest to use and most powerful editors on the market and the integration possibilities into our solution are awesome.”

The users of dirico.io mostly work with the editor for social media images. Here, a few features and tools of the SDK come in quite handy as Marcus Burk explains: “The fact that you can import and save assets like for example a company logo with a transparent background is a great feature for branding on social media. We recently enabled the photo roll tool of the SDK so the user can choose pictures from a stock library and then edit them in the editor. So, now it’s possible to create completely new content right off the bat. You’d just have to choose an image from the stock library, edit it and then apply your logo to it. Our users are really excited about that feature once they realize how easy it is and look forward to saving time.”

PhotoEditor SDK is a great and helpful tool to adjust pictures directly in the browser.

247GRAD started out as a social media marketing agency. To facilitate their daily routines, they created the Facebook CMS TABMAKER in 2011. Later in coordination with the social media departments of their clients they created 247GRAD CONNECT (formerly PUBLISHER) for in-house use. To tackle the challenges of content marketing, they then expanded the functionalities of their tool and introduced it to the public. 247GRAD CONNECT evolved into dirico.io, a full-fledged social media and content marketing solution for agencies and enterprises of every size. To create this feature-rich experience the developers at 247GRAD Labs had to rely on robust, well-documented software with hassle-free integration, such as the PhotoEditor SDK as Marcus Burk explains: “Our developers told me that they love the fact that everything is well documented and that there are example integrations for various frameworks. And regarding support, we’re happy that we have people that we can directly talk to and that are motivated to work together when there are any issues or questions.”

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

Text ❤ Design

Felix — Thu, 12 Apr 2018 00:00:00 GMT

Introducing the Text Design Tool

There is power in words just as there is in design. In another advance in making good design more accessible to everyone, today, we are proud to give you a sneak peek at an upcoming product we created in addition to the PhotoEditor SDK: The Text Design Tool merges input text with typography, creating stunning designs for a multitude of use-cases.

While most of us are accustomed to the use of photo editing and enhancement tools, results often lack the desired appeal when it comes to typography and layout. Simply because most people don’t know about character or line spacing and other rules of typesetting and let’s be honest, why should they? But as well-designed text layout can add a lot to its expressiveness, we wanted to equip everyone with a tool that automates typesetting and layout, similar to apps like Typorama.

To transform our vision into a user-friendly tool, we first created recipes and set layout rules for different combinations of fonts with decoration elements. The Text Design Tool currently holds 16 layout designs for various use-cases. We worked close with the designers Tommi Gutscher and Ramona Schratt to conceptualize the designs and their different flavors. Through simple keyboard entries, you can populate the designs with your own words. The tool then lays out your text according to our recipes upon a single tap. You can then fine-tune your creative by choosing from 15 different text colors or by using the randomize functionality that shuffles the fonts, alignments and decorations until the creative lives up to your vision. You can even create a mask from your text that lets the background image shine through.

But that is not the end of the road, as, for the future, we will work with a wide range of artists and designers to expand our tool with a broad spectrum of new and exciting designs that can be applied to a variety of use-cases.

The Text Design Tool is currently available for iOS only. Versions for Android and HTML5 are going to be released in the next weeks.

Download our Photo Editor App for iOS to get a hands-on experience with the Text Design Tool.

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

Case Study: Zefiro & PhotoEditor SDK

Felix — Fri, 09 Mar 2018 00:00:00 GMT

Funambol is the leading provider of white-label personal cloud solutions that empower mobile operators worldwide to provide their customers with cloud storage in their packages. With their latest app Zefiro, Funambol recently launched a branded version of their core product to address the consumers directly. We sat together with Stefano Fornari, CTO and Co-Founder of Funambol, to talk about Zefiro, user engagement and switching from an established vendor’s photo editing solution to the PhotoEditor SDK.

The personal cloud app Zefiro offers infinite cloud space and provides sharing, collaboration, and search functionalities as well as a functionality that automatically frees up space from the user’s phone by cleaning up items that were already saved to the cloud. But instead of just providing a haven for pictures and personal data, Zefiro offers several creative tools that enable its users to modify and enhance their images or create montages and little movies. For the first-mentioned, Funambol leverages the toolset of the PhotoEditor SDK.

“The SDK is a great way to keep the users engaged and let them enjoy the content they like the most, which is their pictures.”

“It’s important for us that the people feel comfortable with the app which must not only be easy, but also pleasant to use,” Stefano Fornari explains, “people want to do something with their pictures, so it’s important for us to give them ways to show, share and modify them to engage them to exploit the best value provided by our service. Our users are not photo professionals, so we need to provide very accessible and easy to use functionalities. The SDK is a great way to keep the users engaged and let them enjoy the content they are most attached to, which is their pictures.”

“Before the PhotoEditor SDK, we were using another solution that was good enough, but not fully convincing,” Fornari says, “however, last year the vendor of the solution we were using discontinued the support for their SDK. We started searching for alternatives, and that’s when we found the PhotoEditor. One thing that we like, which is different from the former solution, is the fact that we can change things inside the SDK and upload custom assets. For example, for Christmas, we were exploring the possibility to incorporate Christmas frames. Also, we like the white label approach as well as the redesigned SDK which is much easier to use and is also much richer in terms of functionalities.”

“From a developer’s perspective,” Stefano Fornari continues, “the most powerful feature of the PhotoEditor is the integration process. It was completely flawless, quick, and easy to integrate. It’s pretty clear that the SDK was designed with a developer as a customer approach. Same goes for the customizability as localization, and the upload of custom images are just a matter of a few lines of code. This is very important for a vendor like Funambol.”

“Only our imagination can put a limit on the features of the app.”

“Only our imagination can put a limit on the features we will add to our product and Zefiro,” Fornari explains. “For example, we are actively exploring how to connect the service to IOT devices. Imagine that you could display your family pictures on your refrigerator or in your car. Also, we want to become more intelligent with the data. Think about bills that you could upload to the cloud that would be automatically sorted by an algorithm because A.I. collects, recognizes and categorizes them,” Stefano Fornari concludes.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

The IMG.LY Photo Roll

Felix — Thu, 21 Sep 2017 00:00:00 GMT

After today, we at IMG.LY are going to divert some of our energy to a new endeavour, the img.ly Photo Roll. We feel deeply rooted in the open-source movement and we know that the internet and most of the tools that we use today wouldn’t be nearly the same if it wasn’t for the awesome and creative work of countless people that shared their assets for free. Still today we heavily rely on open-source technology and creative work to give us guidance and inspire us to create new and unseen things.

Working on our product PhotoEditor SDK for the last two years gave us a lot of useful and valuable insights about photography and the various possibilities to create exceptional visual content. As some of us are enthusiastic photographers, it only seems logical to join the community of photographers and creative folks that enrich the internet with extraordinary and free content every single day. Since we have always gratefully used the work of other people, we would like to give something back to the community. Therefore, we are going to start sharing pictures we took around the globe via our Unsplash and Instagram account. Please feel free to download, use, modify and share them at your will. The photos that we’re going to post over the following weeks and months will also be available in our photo roll that ships with the PhotoEditor SDK.

We certainly hope that you’re going to make use of them. And we’d be happy to hear from you what you created with our pictures, and we’d love to see them in a new guise. After all, their real value only shows if someone is inspired by and can get creative with them.

Thanks to all the people that contribute to our initiative: Malte Baumann, Tommi Gutscher, Niklas Priddat, Cem Selcuk and Eray Basar. Below we have already compiled a few pictures that we are going to post over the next few days. Stay tuned.

Cheers!
Your friends at IMG.LY

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

Case Study: Vapiano & PhotoEditor SDK

Felix — Thu, 24 Aug 2017 00:00:00 GMT

The German casual dining restaurant chain Vapiano facilitates and streamlines their customer’s visits with a feature-rich app that lets its users: check in at the restaurant, order beverages and desserts from their seat, pay after their visit, collect loyalty points, browse the menu, save favorite dishes, locate the nearest subsidiary and even create images for social media postings.

With 180 restaurants in 31 countries, Vapiano is one of the biggest fast-casual dining chains around. Especially at lunchtime and early evening hours each restaurant wines and dines plenty of hungry customers, with Vapiano’s current approach (ordering at the counter, receiving the meal, finding a table and after that checking out on a regular register) that sometimes resulted in long lines and consequently frustration among their guests. With the Vapiano app, that is a thing of the past as the visit can almost solely be handled by the app from check-in to check-out. As Vapiano’s target audience is very photography and social media affine, their app holds another gem for their users to play around with. When taking a picture of themselves and their food in a Vapiano restaurant, the users can directly add Vapiano stickers to their pictures and then post them online. Said feature was realized by MobiLab Solutions utilizing the PhotoEditor SDK. We sat down with Max Afflerbach and Robert Rabe of MobiLab Solutions GmbH to talk about their experiences with PhotoEditor SDK.

“Vapiano’s vision regarding the photo feature is to spread their brand, enhance brand recognition and broaden the brand’s visibility,” Max Afflerbach, Chief Customer Officer at MobiLab Solutions explains. “Basically, they wanted to provide their guests with a tool that facilitates what they’re already doing when dining at Vapiano, that is taking pictures of their food and then uploading them to Snapchat, Instagram, Facebook, you name it. And so, we came up with a built-in branding feature that uses custom stickers.”

“…on StackOverflow or Quora, PhotoEditor SDK is listed and praised as the only real alternative to Aviary”

As they were on a schedule and didn’t have the time to develop the feature themselves the folks at MobiLab started searching for a third-party solution. “We’ve been looking for an SDK that does exactly what we imagined the feature to be capable of, namely taking a picture, adding assets and then exporting it,” says Robert Rabe, iOS developer at MobiLab Solutions. “We first considered Adobe Creative SDK because it is the best-known SDK in that field. However, it lacked a crucial feature for us that PhotoEditor SDK luckily has and that is the possibility to upload custom stickers,” says Max Afflerbach. “Also,” Rabe adds, “we weren’t 100% sure whether this whole thing would work without the user having to log into the Adobe Cloud.” “When you’re searching for other image processing SDKs on StackOverflow or Quora, PhotoEditor SDK is listed and praised as the only real alternative to Aviary. And besides, there aren’t exactly a lot of SDKs out there that cover both iOS and Android. So, that wasn’t a tough decision at all,” Afflerbach explains.

From the initial decision to work with PhotoEditor SDK until the feature was finished and ready for rollout, only a short period passed as Rabe explains: “Working with the SDK is really straightforward. The implementation is fast, and it’s all well documented. The SDK is a powerful tool and holds a lot of features with a great many possibilities. Setting up the feature exactly as we wanted it to be didn’t take longer than three working days tops. And if we had any issues or questions, we had no problems whatsoever getting in touch with the folks at PhotoEditor SDK which is really nice.”

“I really like the product, it’s working very well, and especially the communication with the PhotoEditor SDK team was highly pleasant,” Robert Rabe concludes. “Working together with the team of PhotoEditor SDK was super easygoing, the few requests and inquiries we had were answered quickly, and the technical licensing was a cinch as well. We are delighted with the product, the integration was very simple, and our developers are happy, I guess you couldn’t ask for more from an agency’s perspective,” Max Afflerbach adds.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

The Photograph that Will Not Vanish.

Felix — Mon, 22 May 2017 00:00:00 GMT

The HP Sprocket paves the way for a whole new way of experiencing mobile photography. While pictures nowadays are either ephemeral or get stored away in digital vaults, HP breathes new life into material photographs by making mobile printing available to anyone. For this piece, we sat together with Carem Pereira, SCRUM Master for the sprocket Android team in Brazil, to recap the development of HP’s portable gem.

The HP Sprocket is a beautifully small and portable printer that instantly prints two by three-inch color photos — no cartridge or ink required. Peel the back of the photos and you can even stick them onto anything you like. “Our message is that printing can be easy and fun on the go. Snap, print, and play. You can take the sprocket anywhere, easily print photos on the spot and share them with your friends” says Carem Pereira. But creating a straightforward printing experience was only half the battle for the sprocket team, as Pereira explains: “From the first day on, editing features were planned to be a central part of the sprocket’s core experience. We wanted to give our users the ability to personalize and customize their snapshots before printing or sharing them.”

“The PhotoEditor SDK absolutely saved us a lot of time.”

Consequently, HP wanted to incorporate these essential features into their free sprocket companion app that connects the user’s mobile device to the printer via Bluetooth and allows for the management and printing of the pictures. “We’ve been working on a very tight schedule and had only three months until the release of our first MVP mid-September 2016”, Pereira explains, “in the beginning, we wanted to implement the editing features ourselves, but by the time we started the estimates, we realized that we’d eventually not be able to meet our goals. So, we were looking for a third-party solution.”

“One of our team members was already working with the SDK for another project, the HP Print Bot,” Pereira continues, “so, we compared PhotoEditor SDK with other solutions and found that it would be the best fit for us since it provides all the features that are crucial for our use case and we were already familiar with it. Also, it was of great importance to us that the look of the editor in sprocket matched the rest of the app and we saw that it would be very easy to accomplish that with the PhotoEditor SDK.”

The PhotoEditor SDK also leaves full control over content assets like stickers, fonts and filters, a feature critical to the HP team: “We want to stay relevant to our customers and one of the examples where we accomplish that is with our assets, like Stickers and Frames that are tailored for specific times and holidays. We have releases every two weeks that contain a new set of assets,” Pereira explains.

“It’s amazing how just a little gesture like a photograph can make such a difference in someone’s life!”

The HP Sprocket became an instant success. “The sprocket continues to be one of the great highlights for HP in consumer printing this year. The customers love using the printer, and we are already in millions of prints, we even sold out worldwide during the holidays last year, which was a great surprise for us,” says Carem Pereira.

But it’s not only sales figures that define its impact, as the story of Dom Russell and Seb Trevaskis exemplifies: The two Physiotherapy graduates brought the HP Sprocket to a Vietnamese orphanage where they educated, designed and implemented individualized rehabilitation programs for children who suffered from mental and physical disabilities due to the Vietnam War herbicide Agent Orange. The sprocket brought happiness to the orphanage and created everlasting memories for the children, as Dom Russell explains: “The sprocket was awesome, and the kids loved it! They would stick the photos on all their favorite possessions. Some would even just stare at them for hours as it may have been the first time they’d seen a physical copy of themselves. I think those photos will stay with them for life seeing the way they reacted when it got printed and the way they treated them as well. It’s amazing how just a little gesture like a photograph can make such a difference in someone’s life!”

Needless to say that sprocket was also an instant hit at our office. Playing around with the app that contains our editor was truly amazing and really let us grasp its potential. Using the sprocket on many different occasions gave us not only a hands-on experience of what our SDK is capable of but also of what needs further improvement or even what’s missing. Meanwhile our office is plastered with sprocket prints.

“PhotoEditor SDK was an essential asset for making things work with a top-notch standard.”

“We continue to get great feedback from our users on how straightforward and easy our experience is. And again, easy, that is the key,” Pereira says, “the PhotoEditor SDK was a vital and essential asset for making things work on time and with a top-notch standard. That was paramount to us,” Carem Pereira concludes. We couldn’t be happier about this.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

Lightweight Image comparison with Rembrandt.JS

Felix — Wed, 08 Mar 2017 00:00:00 GMT

Rembrandt.JS is a lightweight, client- and server-side image comparison library that we developed for our internal tests for the PhotoEditor SDK. Since we’re adherents of test-driven development, we devote a lot of time and effort to writing robust tests and finding the right tools. A lot can go wrong in the process of refactoring and adding new features to our product. Since we want to make sure that our SDK performs at a top level 100% of the time, solid unit tests are crucial to our work. However, when it came to image comparison, we were not happy with the existing options. We tried to work with Blink-Diff from Yahoo, but since the tool isn’t maintained anymore and furthermore has a dependency on another unmaintained library, we chose to develop our own solution. Rembrandt.JS has no dependencies because it works client-side with the Canvas API of the browser and server-side with Node-Canvas.

The primary function of Rembrandt is quite simple; it compares two pictures. One image is the expected output of our SDK and the other one is the actual output of the PhotoEditor. After the comparison, Rembrandt outputs a numeric value between 0 and 1 indicating the percentual error rate. With an additional feature of Rembrandt, it is also possible to highlight the incorrect pixels on the image which helps to see instantly where the errors occur. Furthermore, Rembrandt.JS can compensate defective pixels that originate through compression artifacts. By comparing every pixel with its adjacent pixels with an adjustable tolerance, Rembrandt evaluates whether there’s a discrepancy or not. Said feature was critical to us since due to the sheer amount of features and filters in PhotoEditor SDK we’re always testing on a large scale. If we would’ve been using loss-free test material (like .png for example) the amount of disk space that the images would’ve been consuming would have been quite noticeable.

Rembrandt.JS could also be leveraged for UI tests. With screenshots of both the design and the actual website or app, you could verify whether every object loads and behaves correctly. With the rendering option, you could quickly detect smallest discrepancies in even large sites or apps. Or, you could solve every spot the difference game within seconds.

If Rembrandt is something potentially useful for your project, check out the Github repositories for Javascript, iOS and Android.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.