Select text and Annotate PDF

Thread is closed for posting
8 posts, 0 answers
  1. 688D9FFF-73C1-4702-8871-21A79E73D22E
    688D9FFF-73C1-4702-8871-21A79E73D22E avatar
    4 posts
    Member since:
    Apr 2009

    Posted 29 Nov 2012 Link to this post


    RadControls version 2012.2.912
    .NET version 4
    Visual Studio version 2010
    programming language c#
    browser support

    all browsers supported by RadControls

    Demonstration on how the RadPdfViewer can be used to highlight selected text, extract the selection content, save, update and retrieve the selections for each different document. Also: add, edit, save, update, show and hide additional annotations. The annotations are shown in a "word-comments like" column on the right hand side.

    • allows to select/deselect text,
    • saves what's done in the protected storage (in real time), so that the next time the same PDF is opened, it will retrieve the selections,
    • supports keyboard operations ("A" to highlight the selected text, "D" to remove the highlight),
    • processes the selections so to merge or divide them in order to always have contiguous blocks,
    • saves the "selected text" on the protected storage (and keeps it in the internal objects, so that it could be used for other functionalities within a larger application)
    • Despite what happens behind the scenes it's blindingly fast: a testimony of the good work done creating the component. Not my work, it's the component itself that is astonishingly fast. Well done to all @Telerik.

    It also supports annotations:

    • Annotations are shown on a right-hand column, similar to Word comments.
    • Allows to add/edit/remove annotations (double click on the column or comment)
    • Comments can be moved up and down within their original page, can't cross page boundaries
    • The comments column can be shown or hidden away.
    • Comments are saved on an XML file (protected storage).

    The technicalities:
    This started as (and still is, I'd guess) a proof-of-concept project that we needed to complete before adding this kind of functionalities in a much bigger application (EPPI-Reviewer 4, in case anyone is curious), Kammen (from Telerik) kick-started us by providing some example code in the forum. Please refer to Kammen's code in order to understand the basics of what happens behind the scenes. The RadPdfViewer component allows for massive extensions, but this is done in largely undocumented (at the time of writing) and not really obvious ways. I must add that Kammen has been very helpful in providing additional help through support tickets, so this post here is intended also as a public "thank you" for the outstanding component and support quality.

    Please note that the code "as is" is not meant for production (has some known problems, see below), it also has two very different ways to provide data persistence. Highlights are saved in a way that mimics "atomic saves", where only the affected changes are saved onto the long term storage (file in this case, will be a DB in our real application). The information unit is "highlight per page" because this is how I will eventually store it in the database.
    On the other hand, annotations are associated with the PDF alone (will sit on the same record in our DB), so they are processed in a very different way. There is also code that transforms the old annotations (what we have now, uses a different PDF viewer) into the new ones, and no explanation of why things work in this way is provided. In general, in-code comments are scarce, apologies for that, I don't really have enough time to make this project easier to consume. I will try to reply to enquiries here, but only if and when time will allow, so don't expect a prompt answer.

    Known Issues:
    This project uses a rudimentary kind of "self-contained" data persistence, it's good enough for demonstration purposes, but not suitable for production. In order to allow to save and retrieve data associated with different PDFs, a "mock Title" is extracted when a PDF is loaded: this is made up with the first 50 or so alphanumeric characters found in the PDF itself. It works most of the time, but it will throw an exception if no text can be found in the document (could be formed by scanned images, or use a format that RadPdfViewer can't read - see here). Also, two different documents may have the same first 50 characters, and confuse the system in undesirable ways. I've used this solution as a quick and dirty hack for the standalone application,  the real application will have each PDF associated with a unique ID so I had no need to devise a more reliable way to identify different PDFs.

    File Versions:
    note that this is all built against Silverlight 4. That's because I wanted it to use the same versions as our main application. I see no reason why it should not work on SL5, but be warned: the telerik DLL files used are compiled for SL4 (and included in the attach file for convenience). [Kammen: is that all-right? I just realised this may not be a good practice]

  2. 51D418C9-76EE-4519-9181-6AAD7393233C
    51D418C9-76EE-4519-9181-6AAD7393233C avatar
    1 posts
    Member since:
    Jul 2014

    Posted 15 Jul 2014 in reply to 688D9FFF-73C1-4702-8871-21A79E73D22E Link to this post

    Hello Sergio,
     I am interested in the desribed component above. Since it's been a while have you came to a production version or something else ? I have a requirement on adding annotations on pdf and images in a Silverlight component.

  3. 688D9FFF-73C1-4702-8871-21A79E73D22E
    688D9FFF-73C1-4702-8871-21A79E73D22E avatar
    4 posts
    Member since:
    Apr 2009

    Posted 06 Aug 2014 in reply to 51D418C9-76EE-4519-9181-6AAD7393233C Link to this post

    sorry for the late reply, was very busy lately.
    Short answer is: The code went in production and worked very well until very recently.
    The only problem we had was that the PDF viewer does not work in Chrome, I don't know if this is because of our customisations, but it's very likely. Since both FireFox and Internet Explorer work well with our application we never had the time/need to investigate the issue.

    Since then, our application moved on to Silverlight 5.x without trouble, but the production code stopped working when we updated to Telerik UI for Silverlight Q2 2014. Upon inspection, this was due to the code within the Update(UILayerUpdateContext context) method(s), what was happening in there was enough to trigger the execution of the same method, in an endless loop. Solution was to tweak that method, so to make sure each genuine update triggers the code once and only once.
    This was then thoroughly tested, and went live yesterday, so it's a little early to say if the new version is bug-free (it does appear to work fine!). [still doesn't work in chrome, though]

    I had the ambition of updating and re-posting the whole example code, but it requires more time than I can afford at the moment.
    Will you need the code or are you just testing the water?
    If all you want to know is whether the Telerik components will allow you to do what you need, the answer is "yes, I think they will".
    Best wishes,
  4. 4B031B13-24A9-41DA-B561-C9097E4F1B10
    4B031B13-24A9-41DA-B561-C9097E4F1B10 avatar
    1 posts
    Member since:
    Dec 2014

    Posted 16 Dec 2014 Link to this post

    Hi Sergio, 
    I wanted to implement text select highlight and then save such highlight. Could you say it will be possible in wpf? and if there are any more examples i would like to have a look, to decide if to invest or not. 
  5. 13789191-196E-46E0-8FF2-4929BD7532E7
    13789191-196E-46E0-8FF2-4929BD7532E7 avatar
    171 posts
    Member since:
    Apr 2022

    Posted 18 Dec 2014 Link to this post

    Hello Vijay,

    Thank you for contacting us.

    I am attaching a WPF demo demonstrating how to create custom highlights layer in RadPdfViewer and save the created highlights using our new RadPdfProcessing library. A few words about the demo:

     - The demo contains RadPdfViewer and two RadButton instances
     - RadPdfViewer loads some sample PDF file which is made as resource file to the project
     - When you click on the "Highlight" button the currently selected text gets highlighted.
     - When you click on the "Save&View" button the document is imported, modified and exported with RadPdfProcessing API, so the highlights are added to the document as PDF geometry objects. After the PDF is exported it gets opened by your computer's default PDF viewer.
     - HighlightsUILayer class implements the IUILayer interface and its basic responsibility is to draw the highlights in a Canvas.
     - CustomLayersBuilder class adds the highlights layer before the content elements layer. An instance of this class is registered by using the ExtensibilityManager.
     - HighlightsManager class main responsibility is to preserve the highlight geometries for each page.

    I hope this is helpful. If you have any other questions or concerns please do not hesitate to contact us again.

    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. 291FB3BD-D066-45CE-8650-E67D996053AC
    291FB3BD-D066-45CE-8650-E67D996053AC avatar
    3 posts
    Member since:
    May 2016

    Posted 03 May 2016 Link to this post

    *Deleted by administrator*
  7. 291FB3BD-D066-45CE-8650-E67D996053AC
    291FB3BD-D066-45CE-8650-E67D996053AC avatar
    3 posts
    Member since:
    May 2016

    Posted 03 May 2016 Link to this post

    *Deleted by administrator*
  8. 291FB3BD-D066-45CE-8650-E67D996053AC
    291FB3BD-D066-45CE-8650-E67D996053AC avatar
    3 posts
    Member since:
    May 2016

    Posted 03 May 2016 Link to this post

    *Deleted by administrator*
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.