Silverlight web comic

Download comic.zip - 2.74 MB

Introduction

When the Visual Studio 2010 was still on beta I participate on a Microsoft competition from Mexico to develop an application with the new .NET framework 4.0 new the prize was a laptop. So because I like to learn new technologies (like ajax, wpf, linq, sdk of kinect, apis for google maps, google docs, Verifones TPV, fingerprints, a csc, xcode, develop for android etc). I wanted learn about silverlight because I didn't know silverlight and I like draw and I wanted my own page to create a simple comic. I ressearched if there was an existing page for create comics, but I found only a few pages, so I decide to learn silverlight and submit a silverlight application to create a webcomic for the competition.

Background

I was develop a simple program to draw simple figures in a canvas on 2D and 3D with C++ Builder when I was studying the carrer. The exe of my simple paint on 2D is here and on 3D is here. After I did a more simple paint on a java applet and flash. So I knew about how to draw in canvas, with the events drag and drop of the canvas, and the canvas on silverlight include the methos for drag and drop, and print the canvas in a easy way. You can watch the comic working here. The instructions and the page is in spanish because the competition was on Mexico, so I develop the page on spanish.

Using the code

I began for the most basic example I put a set of canvas on a webpage between a MainCanvas, I set the property AllowDrop in true and use the drag and drop events to drag and drop images from my pc to the webpage. Like this

<Canvas Height="800" HorizontalAlignment="Left" Margin="0,0,0,0" Name="canvasComic" VerticalAlignment="Top" Width="735" Background="White">
    <Canvas Canvas.Left="17"  Canvas.Top="16"  Height="198" Name="box1" Width="705" Background="#FFFC1717" AllowDrop="True" />
    <Canvas Canvas.Left="17"  Canvas.Top="226" Height="181" Name="box2" Width="220" AllowDrop="True" Background="#FFDFF206" />
    <Canvas Canvas.Left="260" Canvas.Top="226" Height="181" Name="box3" Width="220" AllowDrop="True" Background="#FF17A00C" />
    <Canvas Canvas.Left="502" Canvas.Top="226" Height="181" Name="box4" Width="220" AllowDrop="True" Background="#FF03F8F8" />
    <Canvas Canvas.Left="17"  Canvas.Top="421" Height="160" Name="box5" Width="345" AllowDrop="True" Background="#FF155BCB"/>
    <Canvas Canvas.Left="378" Canvas.Top="421" Height="160" Name="box6" Width="345" AllowDrop="True" Background="#FFAE16F2" />
</Canvas>            

After in the code I aggregate a function to all canvas for the event drop for receive and resize the image to the size of the canvas. The code is the next

 Private Sub Canvas_Drop(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs) Handles MyBase.Drop, box1.Drop, box2.Drop, box3.Drop, box4.Drop, box5.Drop, box6.Drop
        Dim dataObject As IDataObject = e.Data 'For know what is the canvas of the image was dropped
        Dim dropPoint As Point = e.GetPosition(sender) 'For know the position of the image was dropped
        If dataObject.GetDataPresent(DataFormats.FileDrop) Then 'If a file was dropped
            Dim files As FileInfo() = DirectCast(dataObject.GetData(DataFormats.FileDrop), FileInfo()) 'Get the info of the file dropped
            If files.Length > 0 Then
                sender.Children.Clear()
                'A filter to only accept images files (.jpg, .png or gifs)
                If files(0).Extension.ToLower = ".jpg" Or files(0).Extension.ToLower = ".png" Or files(0).Extension.ToLower = ".gif" Then
                    Dim bitmapImage As New System.Windows.Media.Imaging.BitmapImage() 'For copy the image dropped
                    bitmapImage.SetSource(files(0).OpenRead()) 'Copy the image to a bitmap
                    Dim newImage As New Image() 'Create a new image for copy the image
                    'For put the image on the coordinates 0,0
                    dropPoint.Y = 0
                    dropPoint.X = 0
                    'Resize the image to the size of the canvas
                    newImage.Width = sender.Width
                    newImage.Height = sender.Height
                    newImage.Source = bitmapImage
                    newImage.SetValue(Canvas.TopProperty, dropPoint.Y)
                    newImage.SetValue(Canvas.LeftProperty, dropPoint.X)
                    newImage.Stretch = Stretch.Fill
                    'Add the image at the canvas
                    sender.Children.Add(newImage)
                End If
            End If
        End If
    End Sub

For the ballons I create a class, to save a textblock for include the text for the ballon, the posiotion of the ballon, the type of the ballon, and the figure for the ballon, and events for move the ballons around the canvas

Imports System.IO
Imports System.Windows.Printing
Imports System.Windows.Media.Imaging

Public Class cFigure
    Public tb As New TextBlock
    Public type As MainPage.eFigure
    Public iNumber As Integer
    Public iChildren As Integer
    Public bAux As Boolean
    Public iPosition As Point
    Public newImage As New Image()
    ''' <summary>
    ''' Set the ballon and the text and the mouse events
    ''' </summary>
    ''' <param name="sText">Text for the ballon</param>
    ''' <param name="pPosition">Coordinates (x,y) for the location of the ballon</param>
    ''' <param name="typeFigure">The Type of figure</param>
    ''' <param name="iActualBallon">The number of the ballon in the list of ballons</param>
    ''' <remarks></remarks>
    Public Sub SetImage(ByVal sText As String, ByVal pPosition As Point, ByVal typeFigure As MainPage.eFigure, ByVal iActualBallon As Integer)
        Dim sFigure As String = ""
        'Set the text to the combobox
        tb.Text = "  " + sText
        'Save the color of the text
        tb.Foreground = New SolidColorBrush(Colors.Black)
        'Set options to center the text and automatic wordwrap
        tb.TextAlignment = System.Windows.TextAlignment.Center
        tb.TextWrapping = TextWrapping.Wrap
        type = typeFigure
        iNumber = iActualBallon
        'Set the image of the ballon
        Select Case type
            Case MainPage.eFigure.leftCloud
                sFigure = "Images/left_cloud.png"
            Case MainPage.eFigure.rightCloud
                sFigure = "Images/right_cloud.png"
            Case MainPage.eFigure.rightOval
                sFigure = "Images/rght_oval.png"
            Case MainPage.eFigure.leftOval
                sFigure = "Images/left_oval.png"
            Case MainPage.eFigure.rightBox
                sFigure = "Images/right_box.png"
            Case MainPage.eFigure.leftBox
                sFigure = "Images/left_box.png"
            Case MainPage.eFigure.Box
                sFigure = "Images/box.png"
        End Select
        'The uri of the image of the ballon
        Dim uriImage As New Uri(sFigure, UriKind.Relative)
        'Get the stream of the image of the ballon
        Dim oImageStream As Stream = Application.GetResourceStream(uriImage).Stream
        'Create a new Image for the ballon
        Dim oImage As New BitmapImage()
        'Set the image of the ballon
        oImage.SetSource(oImageStream)
        'Set the size proportional to the text only for the ballons.    
        newImage.Width = tb.ActualWidth + 50
        newImage.Height = tb.ActualHeight
        'If the figure is different of the box add a space for center the text
        If type <> MainPage.eFigure.Box Then
            newImage.Height += 30
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 8)
        Else
            newImage.Height += 10
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 5)
        End If
        tb.SetValue(Canvas.LeftProperty, pPosition.X + 18)
        newImage.SetValue(Canvas.LeftProperty, pPosition.X)
        newImage.SetValue(Canvas.TopProperty, pPosition.Y)
        iPosition.Y = tb.GetValue(Canvas.TopProperty)
        iPosition.X = tb.GetValue(Canvas.TopProperty)
        'Set the ballon with text
        newImage.Source = oImage
        newImage.Stretch = Stretch.Fill
        'Set the events for the ballon
        AddHandler newImage.MouseLeftButtonDown, AddressOf Image_Mouse_Button_Down
        AddHandler newImage.MouseMove, AddressOf Image_Mouse_Button_Move
        AddHandler newImage.MouseLeftButtonUp, AddressOf Image_Mouse_Button_Up
    End Sub
    ''' <summary>
    ''' Set the position of the ballon
    ''' </summary>
    ''' <param name="pPosition">Coordinates (x,y) for the location of the ballon</param>
    ''' <remarks></remarks>
    Public Sub SetPosition(ByVal pPosition As Point)
        newImage.SetValue(Canvas.TopProperty, pPosition.Y)
        newImage.SetValue(Canvas.LeftProperty, pPosition.X)
        If type <> MainPage.eFigure.Box Then
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 8)
        Else
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 5)
        End If
        tb.SetValue(Canvas.LeftProperty, pPosition.X + 18)
        iPosition.Y = tb.GetValue(Canvas.TopProperty)
        iPosition.X = tb.GetValue(Canvas.LeftProperty)
    End Sub
    Private Sub Image_Mouse_Button_Down(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
        bAux = True
        MainPage.iActualCloud = iNumber
    End Sub
    Private Sub Image_Mouse_Button_Move(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)

    End Sub
    Private Sub Image_Mouse_Button_Up(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
        bAux = False
    End Sub
End Class

After I aggregate the ballons. I agregate one textbox for include the text for the ballons and 7 buttons for different types of the ballons, and I got the images of the ballons and save the images on the folder Images of the silverlight application.

So for include a ballon you need set the text and press the button of the ballon that you want to add and drag to the canvas. I add all the ballons to a ComboBox for that user chooste a ballon and can modify the position of the ballons.

With a printdocument I print the comic that contains all the canvas

' create an instance of PrintDocument
Dim document As New PrintDocument()
' Add the handlers for print canvasComic is the canvas that contains the box of the page
AddHandler document.BeginPrint, Function(s, args) CanvasBeginPrint(s, args)
AddHandler document.PrintPage, Function(s, args) CanvasPrintPage(s, args, canvasComic)
AddHandler document.EndPrint, Function(s, args) CanvasEndPrint(s, args, canvasComic)
' call the Print() with a proper name which will be visible in the Print Queue
document.Print("Printing Comic")

Points of Interest

At this moment I only save the ballons on a xml. I'll ressearch how to save the images add to the canvas. With the new HTML5 canvas I think that I'll do this comic with html5 and maybe php and mysql for save the comics, at least the canvas of html5 include a function to save a canvas like an image.

But at this moment I don't know how to save a canvas like a image with silverlight. So before I change to html5 I'll add more functionalities to this project. Like set the size, font, and color for the text of the ballons, save on a sql databases, and add a predefined set of canvas, and a option to save a comic with more than one page. And within each page a comic a part to the user save comments for the comic.

I apreciate your suggest, dudes, comments and report the bugs that you can find.