Home : Make Custom Thumbnail Captions in the WebThumbnailViewer
Q10243 - HOWTO: Make Custom Thumbnail Captions in the WebThumbnailViewer

Legacy Controls NOTICE

This article references our legacy Web Forms Web Viewing controls (WebImageViewer, WebAnnotationViewer, WebThumbnailViewer). It is preserved for archival purposes, but support strongly recommends using our modern HTML5 web controls: WebDocumentViewer, WebDocumentThumbnailer instead)

http://atalasupport.net/demos/LegacyDemos-11.1/WebViewingDemo.zip

Main Article Content

The WebThumbnailViewer is currently unable to process individual thumbnails’ captions. There is a suitable workaround to create the same effect. Right before the thumbnail is streaming to the client from the server you can edit the image of the thumbnail. To do this, handle the StreamThumbnailImage event. In the event you can alter the Image. Making the thumbnail appear smaller and drawing text underneath it will create a caption effect. Here is some sample code demonstrating a possible approach:

NOTE: you will need to create your own GetCaption() method which follows the signature

private string GetCaption(int frameIndex)

you will need to use the frame index to determine what string you want to return for the caption and then return it

ALSO NOTE: You need to explicitly add WebThumbnailViewer1_StreamThumbnailImage as the handler for the WebThubnailViewer1.StreamThumbnailImage event

C#

 

int TOPPADDING = 40;

    int PRECAPTIONPADDING = 20;

    int HORIZONTALCAPTIONPADDING = 40;

    Size SIZEOFIMAGETHUMB = new Size(120, 120);

    protected void WebThumbnailViewer1_StreamThumbnailImage(object sender, Atalasoft.Imaging.WebControls.ThumbnailImageCreatedEventArgs e)

    {

        string caption = GetCaption(e.Index);

        e.ImageOut= MakeRoomForCaption(e);

        Canvas c = new Canvas(e.ImageOut);

        Size drawSize = c.DrawText(caption,
                                   new Rectangle(0, 0, e.ImageOut.Width-2*HORIZONTALCAPTIONPADDING,0),
                                  
new Font(FontFamily.GenericSansSerif,12),
                                   new AtalaPen(Color.Transparent).Fill);

        c.DrawText(caption, new Rectangle(CenterObject(e.ImageOut.Size.Width, drawSize.Width), 
                                          
PRECAPTIONPADDING + TOPPADDING + SIZEOFIMAGETHUMB.Height, 
                                          e.ImageOut.Width - 2*HORIZONTALCAPTIONPADDING,
                                          0),

                                          new Font(FontFamily.GenericSansSerif, 12), new AtalaPen(Color.Black).Fill);

    }

 

    private AtalaImage MakeRoomForCaption(Atalasoft.Imaging.WebControls.ThumbnailImageCreatedEventArgs e)

    {

        AtalaImage SmallThumb = new Thumbnail(SIZEOFIMAGETHUMB).Create(e.Image);

        e.ImageOut = new AtalaImage(e.Image.Width, e.Image.Height, e.Image.PixelFormat, Color.White);

        OverlayCommand overlay = new OverlayCommand(SmallThumb, 
                                                    new Point(CenterObject(e.ImageOut.Width,
                                                    SmallThumb.Width),
                                                    TOPPADDING));

        return overlay.Apply(e.ImageOut).Image;

    }

 

    private int CenterObject(int ContainerSize, int ObjectSize)

    {

        return (ContainerSize - ObjectSize) / 2;

    }

 

VB.NET

 

Private TOPPADDING As Integer = 40

Private PRECAPTIONPADDING As Integer = 20

Private HORIZONTALCAPTIONPADDING As Integer = 40

Private SIZEOFIMAGETHUMB As New Size(120, 120)

Protected Sub WebThumbnailViewer1_StreamThumbnailImage(ByVal sender As Object, ByVal e As Atalasoft.Imaging.WebControls.ThumbnailImageCreatedEventArgs)

    Dim caption As String = GetCaption(e.Index)

    e.ImageOut = MakeRoomForCaption(e)

    Dim c As New Canvas(e.ImageOut)

    Dim drawSize As Size = c.DrawText(caption, New Rectangle(0, 0, e.ImageOut.Width - 2 * HORIZONTALCAPTIONPADDING, 0), New Font(FontFamily.GenericSansSerif, 12), New AtalaPen(Color.Transparent).Fill)

    c.DrawText(caption, New Rectangle(CenterObject(e.ImageOut.Size.Width, drawSize.Width), PRECAPTIONPADDING + TOPPADDING + SIZEOFIMAGETHUMB.Height, e.ImageOut.Width - 2 * HORIZONTALCAPTIONPADDING, 0), New Font(FontFamily.GenericSansSerif, 12), New AtalaPen(Color.Black).Fill)

End Sub

 

Private Function MakeRoomForCaption(ByVal e As Atalasoft.Imaging.WebControls.ThumbnailImageCreatedEventArgs) As AtalaImage

    Dim SmallThumb As AtalaImage = New Thumbnail(SIZEOFIMAGETHUMB).Create(e.Image)

    e.ImageOut = New AtalaImage(e.Image.Width, e.Image.Height, e.Image.PixelFormat, Color.White)

    Dim overlay As New OverlayCommand(SmallThumb, New Point(CenterObject(e.ImageOut.Width, SmallThumb.Width), TOPPADDING))

    Return overlay.Apply(e.ImageOut).Image

End Function

 

Private Function CenterObject(ByVal ContainerSize As Integer, ByVal ObjectSize As Integer) As Integer

    Return (ContainerSize - ObjectSize) / 2

End Function

 

Related Articles
No Related Articles Available.

Article Attachments
No Attachments Available.

Related External Links
No Related Links Available.
Help us improve this article...
What did you think of this article?

poor 
1
2
3
4
5
6
7
8
9
10

 excellent
Tell us why you rated the content this way. (optional)
 
Approved Comments...
No user comments available for this article.

Powered By InstantKB.NET v1.3
Copyright © 2002, 2019. InstantASP Ltd. All Rights Reserved