Interactive Ink

How can I incorporate a thumbnail/ preview of the note?

I'm using swift and the the iink environment and Im hoping to be able to show a small portion of the note in a uitableview cell that lists all the notes in a main page.

Is there a way to simple way to grab a screenshot?

Thanks in advance.


Dear Ethan,


thank you for contacting us.


Currently, there are several possibilites to proceed:

-Either you wait for the 1.2 release of the iink SDK (planned current June), that will have a built-in export as image. With this latter one, you will need to re-size the exported image, to create your thumbnail.

-Or, you use the current release of the iink: using the prepareImage and saveImage of the ImageDrawer.mm, you can build get the image of your display. Then, you should use the viewTransform function of the renderer, to get the part of the image ou want to keep.


Based on this, if possible, we recommend you wait for the coming 1.2 release, as you understand it will be much easier.


Best regards,


Olivier

Dear Ethan,


Currently, maybe you have noticed the 1.2 release is available.


You can then try the built-in export, and see if it helps.


Best regards,


Olivier

Hi Olivier,

Yes. I have gotten it to work, but the imageDrawer seems to automatically pick the area it captures and skews it automatically. Is there anyway to define a specific area to be captured?


Thanks,

Ethan

Dear Ethan,


thank you for the update.


Based on the above, you choose the ImageDrawer way to proceed, and not the new built-in export as image?


Normally, when calling the prepareImage function, you should provide with the Width and Height parameters.  Based on this, it seems you are not providing the expected value?  Can you please set a breakpoint in the 

"prepareImage" function, and check both values?


Best regards,


Olivier


Hi Olivier,

This is the code I used, derived from your demo example

   

let imageLoader = ImageLoader()
imageLoader.cacheFolderPath = FileManager.default.tmpDirectory()
imageLoader.editor = editorViewController?.editor
let imageDrawer = ImageDrawer()
imageDrawer.imageLoader = imageLoader
imageDrawer.prepareImage(CGSize(width: 100, height: 100))
var `extension` = IINKMimeTypeValue.iinkMimeTypeGetFileExtensions(IINKMimeType.PNG)
`extension` = `extension`.components(separatedBy: ",").first ?? ""
let fileName = "\(currentFilename)\(`extension`)"
let path = FileManager.default.pathForFile(inDocumentDirectory: fileName)
do{
            try editorViewController?.editor!.export_(editorViewController?.editor?.rootBlock, toFile: path!, mimeType: IINKMimeType.PNG, imageDrawer: imageDrawer) //(mimeTypeNumber?.value)!
        } catch{
            print(error.localizedDescription)
        }

If the new method is much simpler, perhaps you can just ignore this code and provide a shorter method.

Thanks, Ethan

 


Dear Ethan,


in your code, you are not calling the saveImage function from the ImageDrawer but the export function.


Can you please try use the saveImage function instead?


Best regards,


Olivier



Hi Olivier,

I replaced the do catch block with imageDrawer.saveImage(path!) but the result is just a blank image. I'm calling it in viewWillDisappear if that makes a difference.

I've tried playing around with the prepare image size to no avail. I also notice that the CGSize of the image exported is double of the width and height set by prepareImage.

Any ideas?

Thanks.

Dear Ethan,


currently, you should also use the "invalidate" function.


You should then have an image, which can be converted to a thumbnail:

drawer.PrepareImage((int)ActualWidth, (int)ActualHeight);
drawer.Invalidate(_editor.Renderer, 0, 0, (int)ActualWidth, (int)ActualHeight, LayerType.LayerType_ALL);
drawer.SaveImage(@"c:\temp\testimage.png");


Let us know if this helps.


Best regards,


Olivier

Login or Signup to post a comment